/* web/employee-tool-theme.css Shared employee-home look for the workroom pages linked from employee home. Loaded after workroom.css and scoped to .tool-theme on . It restyles colour, separation and density only; no layout structure, DOM or behaviour. /tool-palette.js sets data-palette on from the palette the person saved on employee home: white (default), olive, lemon (lemon / purple) or black. */ .tool-theme, .tool-theme[data-palette="white"]{ color-scheme:light; --ink:#f7f7f5; /* page background (workroom's darkest surface) */ --panel:#ffffff; /* cards, inputs */ --raised:#ecece8; /* hover, selected, secondary buttons */ --side:#f0f0ec; /* list column */ --line:#d4d4ce; --field-line:#9a9a92; --text:#1a1a1a; --muted:#4f4f4a; --faint:#66665f; --band:#f4f4f2; /* header band */ --band-hover:#e4e4de; --deep:#1a1a1a; /* headings in cards, quiet links, selection */ --on-deep:#ffffff; } .tool-theme[data-palette="olive"]{ color-scheme:light; --ink:#f4f0e2;--panel:#fbf9f1;--raised:#e5e9d3;--side:#ebe7d5;--line:#cdd0b6;--field-line:#a9b093; --text:#171c12;--muted:#4a5540;--faint:#5c6655;--band:#b5c39a;--band-hover:#c7d2af;--deep:#293522;--on-deep:#faf7eb; } .tool-theme[data-palette="lemon"]{ color-scheme:light; --ink:#f7f2ff;--panel:#ffffff;--raised:#e9deff;--side:#f0e8ff;--line:#d7c5ff;--field-line:#9f8cc9; --text:#171717;--muted:#4a4458;--faint:#6b6478;--band:#fff6a0;--band-hover:#f3e87a;--deep:#4b2f8f;--on-deep:#ffffff; } .tool-theme[data-palette="black"]{ color-scheme:dark; --ink:#0e0e0e;--panel:#161616;--raised:#242424;--side:#121212;--line:#363636;--field-line:#5a5a5a; --text:#e8e8e8;--muted:#b0b0b0;--faint:#8c8c8c;--band:#141414;--band-hover:#242424;--deep:#e8e8e8;--on-deep:#0e0e0e; } .tool-theme{background:var(--ink);color:var(--text)} .tool-theme body{background:var(--ink);color:var(--text)} /* Header: palette band with the real logo, which also leads back to employee home. */ .tool-theme .topbar{background:var(--band);border-block-end:1.5px solid var(--text);gap:var(--space-5,1.25rem)} .tool-brand{display:inline-flex;align-items:center;flex-shrink:0;border-radius:8px} .tool-logo{display:block;width:40px;height:40px;object-fit:contain;flex-shrink:0} .tool-theme[data-palette="black"] .tool-logo{content:url('/brand-logo-on-dark.svg')} .tool-theme .top-label{color:var(--deep);border-inline-start-color:var(--deep);font-weight:650} .tool-theme .preview{color:var(--deep)} .tool-theme .account{color:var(--text)} .tool-theme .topbar .quiet{color:var(--deep);font-weight:600} .tool-theme .topbar .quiet:hover{background:var(--band-hover);color:var(--text)} /* Sidebar sits on its own tone so the list and the detail read as two panels. */ .tool-theme .sidebar{background:var(--side);border-inline-end-color:var(--line)} .tool-theme .company-control select{background:transparent;color:var(--text)} .tool-theme .task-item{color:var(--text);border-radius:10px} .tool-theme .task-item:hover{background:var(--panel);border-color:var(--line)} .tool-theme .task-item[aria-current="true"],.tool-theme .task-item.selected{background:var(--panel);border-color:var(--deep)} /* Compact, readable headings. */ .tool-theme .empty-view{padding-block:clamp(2rem,8vh,5rem)} .tool-theme .empty-view h1{font-size:clamp(2rem,3.6vw,3rem);margin-block:1rem} .tool-theme .main h1,.tool-theme main h1{letter-spacing:-.03em} .tool-theme .eyebrow{color:var(--muted)} .tool-theme .muted{color:var(--muted)} .tool-theme a{color:inherit} /* Cards. */ .tool-theme .event{background:var(--panel);border-color:var(--line);border-radius:12px;max-width:100%;box-shadow:0 1px 0 rgba(0,0,0,.05)} .tool-theme .event h2,.tool-theme .event h3{font-size:1rem;margin-block-end:.4rem;color:var(--deep)} .tool-theme .session-panel{border-block-start-color:var(--line)} .tool-theme section.session-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;margin-block-start:1.25rem} .tool-theme section.session-panel>h2{margin-block-end:.5rem} .tool-theme section.session-panel .event{background:var(--panel)} .tool-theme details.session-panel summary{font-weight:600;color:var(--deep)} .tool-theme .status-pill{background:var(--raised);border-color:var(--deep);color:var(--deep);font-weight:600} .tool-theme .composer{background:var(--panel);border-color:var(--line)} /* Controls. */ .tool-theme input,.tool-theme textarea,.tool-theme select{background:var(--panel);border-color:var(--field-line);color:var(--text)} .tool-theme input:focus-visible,.tool-theme textarea:focus-visible,.tool-theme select:focus-visible{border-color:var(--deep)} .tool-theme button:focus-visible,.tool-theme a:focus-visible,.tool-theme input:focus-visible,.tool-theme textarea:focus-visible,.tool-theme select:focus-visible,.tool-theme summary:focus-visible{outline:2px solid var(--text);outline-offset:3px} .tool-theme .primary{background:var(--deep);color:var(--on-deep);border-radius:10px;text-decoration:none} .tool-theme .primary:hover{background:var(--text);color:var(--ink)} .tool-theme .small-button{background:var(--raised);border-color:var(--field-line);color:var(--text);border-radius:10px} .tool-theme .small-button:hover{border-color:var(--deep)} .tool-theme .quiet{color:var(--deep)} .tool-theme .quiet:hover{background:var(--raised);color:var(--text)} .tool-theme a.quiet{text-decoration:underline;text-underline-offset:3px} .tool-theme button:disabled{opacity:.55} .tool-theme .feedback-bar{color:var(--muted)} .tool-theme .skip{background:var(--text);color:var(--ink)} .tool-theme .sticky-actions,.tool-theme .bottom-actions{background:color-mix(in srgb,var(--ink) 92%,transparent)} /* Longer guidance stays available without leading the page. */ .tool-theme details.tool-help{margin-block:.5rem 1rem;color:var(--muted);font-size:.9rem} .tool-theme details.tool-help summary{cursor:pointer;color:var(--deep);font-weight:600;min-height:var(--layout-control,40px);display:inline-flex;align-items:center} .tool-theme details.tool-help p{margin-block:.4rem;max-width:70ch} @media(max-width:620px){ .tool-logo{width:34px;height:34px} .tool-theme .sidebar{border-block-end-color:var(--line)} .tool-theme section.session-panel{padding:.85rem} } /* Shared card and button rhythm, matching employee home gadgets: readable tap height, wrapped labels instead of overflow, and a gap between buttons that a page script places straight inside a card (Project tasks, CRM leads). */ .tool-theme :is(.small-button,.quiet,.primary){line-height:1.25;white-space:normal;overflow-wrap:anywhere} .tool-theme :is(.small-button,.quiet){min-height:44px;text-align:center} .tool-theme .thread{gap:.75rem} .tool-theme .event > p + p{margin-block-start:.35rem} .tool-theme .event > :is(.small-button,.primary,.quiet){margin:.75rem .5rem 0 0} .tool-theme section.session-panel :is(form,fieldset) > label:not(:first-child){margin-block-start:1rem} /* Single-column tool pages (body.tool-page: Project tasks, CRM leads) take the employee home shell: same sans type, small uppercase card titles, soft paper cards with a hairline, tinted inner cards and 44px rounded controls. Colours come only from the palette tokens above, so all four palettes follow. */ .tool-theme .tool-page{font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif} .tool-page .topbar{min-height:72px;gap:var(--space-4);border-block-end:1px solid color-mix(in srgb,var(--text) 14%,transparent)} .tool-page .tool-logo{width:52px;height:52px} .tool-page :is(.top-label,.eyebrow){font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase} .tool-page .main{max-width:var(--layout-form-max);padding-block:var(--space-6) calc(var(--space-8) + var(--safe-bottom,0px))} .tool-page .main h1{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin-block:var(--space-1) var(--space-2)} .tool-page .main h1 + .muted{max-width:60ch} .tool-page section.session-panel{padding:var(--space-4) var(--space-5);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:18px;box-shadow:0 8px 24px color-mix(in srgb,var(--text) 7%,transparent);font-size:1rem} .tool-page section.session-panel>h2{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--deep);margin-block-end:var(--space-3)} .tool-page section.session-panel h3{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--deep);margin-block:var(--space-6) var(--space-2)} .tool-page section.session-panel section.session-panel{background:var(--side);box-shadow:none;border-radius:14px;padding:var(--space-4)} .tool-page section.session-panel section.session-panel h3{margin-block-start:0} .tool-page .event,.tool-page section.session-panel .event{background:var(--side);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:14px;box-shadow:none;padding:var(--space-3) var(--space-4)} .tool-page .thread>.eyebrow{margin-block-start:var(--space-3)} .tool-page .thread>.eyebrow:first-child{margin-block-start:0} .tool-page fieldset{border:0;margin:0;padding:0;min-width:0} .tool-page label{font-weight:650;margin-block-end:var(--space-2)} .tool-page label .muted{font-weight:400} .tool-page :is(input,textarea,select){border-radius:12px;min-height:44px;padding:.65rem .85rem} .tool-page :is(.small-button,.quiet){border-radius:12px;font-weight:650;padding-inline:var(--space-4)} .tool-page :is(.form-actions,.task-actions) .small-button[type="submit"]{background:var(--deep);border-color:var(--deep);color:var(--on-deep)} .tool-page :is(.form-actions,.task-actions) .small-button[type="submit"]:hover{background:var(--text);border-color:var(--text);color:var(--ink)} .tool-page .form-actions{justify-content:flex-start;margin-block-start:var(--space-5)} .tool-page .task-actions{margin-block:var(--space-3) 0} .tool-page .task-list{gap:var(--space-2)} .tool-page .task-list .task-item{border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:14px;background:var(--side)} .tool-page .tool-links{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin-block:var(--space-2)} .tool-page .tool-links:not(:has(a:not([hidden]))){display:none} .tool-page .tool-note{margin-block-start:var(--space-6);max-width:70ch} @media(max-width:620px){ .tool-page .tool-logo{width:44px;height:44px} .tool-page .main{padding-block-start:var(--space-4)} .tool-page section.session-panel{padding:var(--space-4)} } /* The root sign-in door keeps its fixed olive look under the shared theme. */ .tool-theme .auth-view :is(.eyebrow,.muted){color:#293522} .tool-theme .auth-view :is(input,button):focus-visible{outline:3px solid #171c12}