/* TaskTrail admin base styles, shared design rules from preview 20 (dashboard).
   Tokens, buttons, sidebar, top bar, cards, dialog and toast. Page styles live in their own file. */


@font-face { font-family: TTInter; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --p: #7378f5; --p2: #8978f1; --p-deep: #5147df; --p-ink: #4338b8;
  --p-50: #f6f6ff; --p-100: #eeeefe; --p-150: #e4e4fd; --p-200: #d6d7fc; --p-300: #b8bbff;
  --grad: linear-gradient(100deg, var(--p), var(--p2));
  --bg: #f7f7fc; --surface: #fff; --ink: #1d2340; --ink-2: #3c4263; --muted: #6b7091; --faint: #9a9eb8;
  --line: #e9e9f4; --line-2: #f1f1f8;
  --ok: #16a34a; --ok-bg: #e9f9ef; --ok-line: #bfeccf;
  --warn: #c2780a; --warn-bg: #fff6e5; --warn-line: #f7dca6;
  --bad: #dc2650; --bad-bg: #fff0f3; --bad-line: #fac7d3;
  --r-sm: 10px; --r: 14px; --r-lg: 20px;
  --shadow: 0 1px 2px rgba(29, 35, 64, .04), 0 8px 24px -12px rgba(29, 35, 64, .12);
  --shadow-lift: 0 2px 4px rgba(29, 35, 64, .05), 0 20px 40px -18px rgba(81, 71, 223, .35);
  --side-w: 248px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14.5px/1.5 TTInter, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }

/* ---------- Buttons and small controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 12px; font-weight: 600; font-size: 14px; white-space: nowrap; transition: transform .15s, box-shadow .2s, background .2s, color .2s; }
.btn .ic { width: 17px; height: 17px; stroke-width: 2.2; }
.btn-primary { color: #fff; background: var(--grad); box-shadow: 0 8px 20px -8px rgba(104, 101, 237, .6); }
.btn-primary:hover { box-shadow: 0 10px 24px -8px rgba(104, 101, 237, .75); transform: translateY(-1px); }
.btn-quiet { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.btn-quiet:hover { box-shadow: inset 0 0 0 1px var(--p-300); color: var(--p-deep); }
.btn-soft { background: var(--p-100); color: var(--p-deep); }
.btn-soft:hover { background: var(--p-150); }
.btn-ok { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
.btn-sm { height: 32px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.link { color: var(--p-deep); font-weight: 600; font-size: 13.5px; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--muted); }
.icon-btn:hover { background: var(--p-50); color: var(--p-deep); }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; font-size: 12px; font-weight: 700; color: #fff; background: var(--grad); }
.avatar.sm { width: 24px; height: 24px; border-radius: 8px; font-size: 10px; }
.avatar.xs { width: 20px; height: 20px; border-radius: 50%; font-size: 9px; box-shadow: 0 0 0 2px #fff; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-in { background: var(--ok); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.dot-out { background: #f0a43c; }
.dot-none { background: #c9cbdc; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--p-50); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.pill.is-urgent { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad-line); }
.pill.is-ok { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
.pill.is-warn { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.pill.is-p { background: var(--p-100); color: var(--p-deep); box-shadow: none; }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.main { padding: 22px clamp(16px, 2.6vw, 36px) 40px; display: grid; gap: 20px; align-content: start; min-width: 0; }
.grid-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; }
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); padding: 20px 22px; min-width: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.card-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.card-head p { margin-top: 2px; font-size: 13px; color: var(--muted); max-width: 70ch; }

/* ---------- Sidebar ---------- */
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 14px; padding: 20px 14px 16px; background: linear-gradient(180deg, #fff, var(--p-50)); border-right: 1px solid var(--line); overflow-y: auto; z-index: 30; }
.side-logo { display: flex; align-items: center; gap: 9px; padding: 4px 8px; font-size: 21px; letter-spacing: -.03em; color: #5a6080; }
.side-logo b { color: var(--ink); font-weight: 700; }
.side-who { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.side-who:hover { box-shadow: inset 0 0 0 1px var(--p-200); }
.side-who-text { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.side-who-text b { font-size: 13.5px; }
.side-who-text small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-who .ic { width: 15px; height: 15px; color: var(--faint); }
.side-nav { display: grid; gap: 2px; }
.side-label { margin: 12px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.side-nav a, .side-toggle { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px; border-radius: 12px; color: var(--ink-2); font-weight: 500; transition: background .2s, color .2s; }
.side-nav a .ic, .side-toggle .ic { color: var(--faint); transition: color .2s; }
.side-nav a:hover, .side-toggle:hover { background: var(--p-100); color: var(--p-deep); }
.side-nav a:hover .ic, .side-toggle:hover .ic { color: var(--p); }
.side-nav a.is-on, .side-toggle.is-on { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -10px rgba(104, 101, 237, .8); }
.side-nav a.is-on .ic, .side-toggle.is-on .ic { color: #fff; }
.side-toggle { width: 100%; text-align: left; border: 0; font: inherit; background: transparent; cursor: pointer; }
.side-toggle > .ic:last-child { margin-left: auto; width: 15px; height: 15px; transition: transform .25s var(--ease); }
.side-toggle[aria-expanded="true"] > .ic:last-child { transform: rotate(180deg); }
.side-sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .25s var(--ease), visibility .25s; }
.side-toggle[aria-expanded="true"] + .side-sub { grid-template-rows: 1fr; visibility: visible; }
.side-sub > div { overflow: hidden; display: grid; gap: 1px; margin-left: 21px; padding-left: 12px; border-left: 1.5px solid var(--line); }
.side-toggle[aria-expanded="true"] + .side-sub > div { padding-block: 4px; }
.side-nav .side-sub a, .side-sub button { height: 32px; padding: 0 10px; border-radius: 9px; font-size: 13px; text-align: left; color: var(--muted); }
.side-sub button { display: flex; align-items: center; }
.side-nav .side-sub a:hover, .side-sub button:hover { background: var(--p-100); color: var(--p-deep); }
.side-nav .side-sub a.is-on { background: var(--p-100); color: var(--p-deep); font-weight: 600; box-shadow: none; }
.side-nav .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--bad); }
.side-nav .count:empty, .side-nav .count[data-n="0"] { display: none; }
.side-plan { margin-top: auto; padding: 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.side-plan p { font-size: 12px; color: var(--muted); }
.side-plan b { display: block; font-size: 14px; color: var(--ink); margin: 1px 0 8px; }
.meter { height: 6px; border-radius: 999px; background: var(--p-100); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width .4s var(--ease); }
.side-plan .link { display: inline-block; margin-top: 9px; font-size: 12.5px; }
.side-logout { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px; border-radius: 12px; color: var(--muted); font-size: 13.5px; }
.side-logout:hover { background: var(--p-50); color: var(--ink); }
.side-scrim { display: none; }

/* ---------- Top bar ---------- */
.top { display: flex; align-items: center; gap: 16px; }
.top-menu { display: none; }
.top-hello { flex: 1; min-width: 0; }
.top-hello p { font-size: 13px; color: var(--muted); }
.top-hello h1 { font-size: clamp(21px, 2.1vw, 27px); font-weight: 700; letter-spacing: -.025em; }
.ask { position: relative; display: flex; align-items: center; width: min(420px, 38vw); height: 42px; padding: 0 10px 0 38px; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); transition: box-shadow .2s; }
.ask:focus-within { box-shadow: inset 0 0 0 1.5px var(--p), 0 0 0 4px var(--p-100); }
.ask-ic { position: absolute; left: 12px; color: var(--p); }
.ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 14px; }
.ask input::placeholder { color: var(--faint); }
.ask-toggle { flex: none; font: 600 11px TTInter, sans-serif; color: var(--faint); padding: 2px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.ask-toggle:hover, .ask-toggle[aria-expanded="true"] { color: var(--p-deep); background: var(--p-100); box-shadow: inset 0 0 0 1px var(--p); }
.ask-toggle:focus-visible { color: var(--p-deep); background: var(--p-100); outline: 2px solid var(--p); outline-offset: 3px; }
.ask kbd { font: 600 11px TTInter, sans-serif; color: var(--faint); padding: 2px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }


/* ---------- Shared controls: search, segmented switch, chips ---------- */
.search { position: relative; flex: 1 1 240px; display: flex; align-items: center; max-width: 360px; }
.search .ic { position: absolute; left: 11px; color: var(--faint); width: 17px; height: 17px; }
.search input { width: 100%; height: 38px; padding: 0 12px 0 36px; border-radius: 11px; border: 0; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); outline: 0; }
.search input:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--p), 0 0 0 3px var(--p-100); }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button[aria-checked="true"], .seg button[aria-selected="true"] { background: #fff; color: var(--p-deep); box-shadow: 0 1px 3px rgba(29, 35, 64, .12); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button, .chips label { display: inline-flex; align-items: center; cursor: pointer; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.chips button:hover, .chips label:hover { color: var(--p-deep); }
.chips button[aria-checked="true"], .chips button[aria-selected="true"], .chips label:has(input:checked) { background: var(--p-100); color: var(--p-deep); box-shadow: inset 0 0 0 1px var(--p-200); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Shared components ---------- */
.note { font-size: 12.5px; color: var(--muted); }
.help { font-size: 12px; color: var(--faint); max-width: 80ch; }
.eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sep { flex: none; width: 1px; height: 22px; background: var(--line); }
.sep.is-sm { height: 14px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.empty, .jobs-empty, .phones-empty { padding: 34px 16px; text-align: center; color: var(--muted); }
.empty b, .jobs-empty b, .phones-empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-row .btn .ic { width: 15px; height: 15px; }
.btn-danger { color: var(--bad); }
.btn-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--p-deep); border: 1.5px dashed var(--p-300); }
.btn-add:hover { background: var(--p-50); }
.btn-add .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.photos { display: flex; flex-wrap: wrap; gap: 8px; }
.photos span, .photos button { width: 60px; height: 60px; border-radius: 12px; display: grid; place-items: center; }
.photos span { background: linear-gradient(135deg, var(--p-150), var(--p-50)); color: var(--p-300); }
.photos button { border: 1.5px dashed var(--p-300); color: var(--p-deep); }
.sheet-photos { align-items: flex-start; }
.sheet-photo { position: relative; width: 72px; height: 60px; margin: 0; border-radius: 12px; overflow: hidden; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); }
.sheet-photo > a { display: grid; place-items: center; width: 100%; height: 100%; color: var(--p-deep); text-decoration: none; }
.sheet-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sheet-photo-file { display: grid !important; place-items: center; gap: 2px; width: 100%; height: 100%; color: var(--p-deep); }
.sheet-photo-file small { font-size: 10px; font-weight: 700; }
.sheet-photo .icon-btn { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; color: #fff; background: rgba(18, 20, 48, .72); }
.sheet-photo .icon-btn:hover { background: var(--bad); }
.sheet-photos .photo-add { width: auto; min-width: 72px; padding: 0 10px; gap: 4px; }
.sheet-photos .photo-add span { width: auto; height: auto; background: none; color: inherit; font-size: 11px; font-weight: 700; }
.sheet-location { display: grid; gap: 8px; }
.sheet-location .sheet-grid { margin: 0; }
.sheet-map { width: 100%; height: 150px; border-radius: 12px; overflow: hidden; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); }
.toggles { display: grid; gap: 6px; }
.toggles label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.toggles input, .checks input { width: 17px; height: 17px; accent-color: var(--p); }
.checks { display: grid; gap: 6px; }
.checks label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.dlg .checks label, .wl-sheet .checks label { background: var(--p-50); box-shadow: none; }
.chips label input, .pick input, .swatches input { position: absolute; opacity: 0; pointer-events: none; }
.chips label:has(input:focus-visible), .pick label:has(input:focus-visible) { outline: 2px solid var(--p); outline-offset: 2px; }

/* Form parts for dialogs: a heading with a count, switch rows, people cards, colours, extra details */
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field-head small { font-weight: 500; color: var(--muted); }
.opts { display: grid; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.opt + .opt { border-top: 1px solid var(--line-2); }
.opt > span { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13.5px; font-weight: 600; }
.opt small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.switch { appearance: none; position: relative; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: var(--p-150); cursor: pointer; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(29, 35, 64, .25); transition: transform .2s var(--ease); }
.switch:checked { background: var(--p); }
.switch:checked::after { transform: translateX(16px); }
.pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pick label { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 13px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background .15s, box-shadow .15s; }
.pick label:hover { box-shadow: inset 0 0 0 1px var(--p-200); }
.pick-name { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.pick-name b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-name small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-tick { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--p-200); color: transparent; transition: background .15s; }
.pick-tick .ic { width: 12px; height: 12px; stroke-width: 3; }
.pick label:has(input:checked) { background: var(--p-50); box-shadow: inset 0 0 0 1.5px var(--p); }
.pick label:has(input:checked) .pick-tick { background: var(--p); box-shadow: none; color: #fff; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches label { position: relative; cursor: pointer; }
.swatches span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--c); transition: transform .15s, box-shadow .15s; }
.swatches label:hover span { transform: scale(1.08); }
.swatches input:checked + span { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); }
.swatches input:focus-visible + span { outline: 2px solid var(--p); outline-offset: 6px; }
.more { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.more summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--p-deep); }
.more summary::-webkit-details-marker { display: none; }
.more summary small { margin-left: auto; font-weight: 400; color: var(--faint); }
.more summary .ic { width: 16px; height: 16px; transition: transform .2s; }
.more[open] summary .ic { transform: rotate(180deg); }
.more > div { display: grid; gap: 14px; padding: 2px 14px 14px; }

/* Rows you can drag into order (javascript/sortable.js) and a saving indicator */
.sort-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sort-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sort-row:hover { box-shadow: inset 0 0 0 1px var(--p-200); }
.sort-row:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.sort-row.is-dragging { z-index: 5; box-shadow: inset 0 0 0 1.5px var(--p), 0 18px 40px -16px rgba(29, 35, 64, .45); cursor: grabbing; }
.sort-list.is-sorting { user-select: none; }
.grip { display: grid; place-items: center; width: 24px; height: 36px; flex: none; border-radius: 8px; color: var(--faint); cursor: grab; touch-action: none; }
.grip:hover { background: var(--p-50); color: var(--p-deep); }
.save-state { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.save-state .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.save-state.is-ok { color: var(--ok); }
.save-state.is-busy { color: var(--muted); }
.save-state.is-busy .ai-spin { border-color: var(--p-150); border-top-color: var(--p); }
.save-state.is-bad { color: var(--bad); }
.count-chip { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(29, 35, 64, .06); font-style: normal; font-size: 11.5px; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.notice .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.notice.is-warn { background: var(--warn-bg); color: #8a560a; box-shadow: inset 0 0 0 1px var(--warn-line); }
.notice.is-bad { background: var(--bad-bg); color: #9b1b3a; box-shadow: inset 0 0 0 1px var(--bad-line); }
.notice.is-ok { background: var(--ok-bg); color: #13703a; box-shadow: inset 0 0 0 1px var(--ok-line); }
.notice b { display: block; margin-bottom: 2px; }
.notice .link { display: block; color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-align: left; }

/* A save bar that stays at the bottom of long forms (job, settings) */
.save-bar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 calc(-1 * clamp(16px, 2.6vw, 36px)); padding: 12px clamp(16px, 2.6vw, 36px); background: rgba(247, 247, 252, .92); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.save-bar .save-state { margin-right: auto; color: var(--muted); }
.save-bar.is-dirty .save-state { color: var(--warn); }
.save-bar .save-state .dot { width: 8px; height: 8px; }
body:has(.save-bar) .ai-launch { bottom: 86px; }
.mini-field { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.mini-field input, .mini-field select { height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); outline: 0; font-weight: 500; color: var(--ink); }
.mini-field input:focus, .mini-field select:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--p); }

/* Data table (javascript/table.js): sortable headings, tick boxes, pages; cards on phones */
.dt-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.dt th { padding: 0 10px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.dt td { padding: 12px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.dt tbody tr { transition: background .15s; }
.dt tbody tr:hover { background: var(--p-50); }
.dt tbody tr.is-selected { background: var(--p-100); }
.dt .dt-check { width: 34px; padding-right: 0; }
.dt .dt-check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--p); cursor: pointer; }
.dt-sort { display: inline-flex; align-items: center; gap: 4px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.dt-sort .ic { width: 13px; height: 13px; opacity: 0; transition: opacity .15s; }
.dt-sort:hover, .dt-sort.is-on { color: var(--p-deep); }
.dt-sort:hover .ic, .dt-sort.is-on .ic { opacity: 1; }
.dt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; font-size: 13px; color: var(--muted); }
.dt-pages { display: flex; align-items: center; gap: 6px; }
.dt-pages b { color: var(--ink); font-weight: 600; }
.icon-btn:disabled { opacity: .35; cursor: default; background: none; }

/* Lists and data: number tiles that filter, the filter bar, absence colours, due dates, step tracks */
.pulse { display: flex; flex-wrap: wrap; gap: 10px; }
.pulse button { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px 10px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .15s; text-align: left; }
.pulse button:hover { box-shadow: inset 0 0 0 1px var(--p-300); transform: translateY(-1px); }
.pulse button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--p), 0 0 0 3px var(--p-100); }
.pulse b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pulse span { font-size: 13px; color: var(--muted); }
.pulse .is-bad b { color: var(--bad); }
.pulse .is-ok b { color: var(--ok); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.active-filter { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--p-deep); color: #fff; font-size: 13px; font-weight: 600; }
.active-filter button { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; }
.active-filter button:hover { background: rgba(255, 255, 255, .18); }
.active-filter .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.ab-holiday, .ab.holiday { background: repeating-linear-gradient(135deg, #e3eeff 0 8px, #edf4ff 8px 16px); color: #3b6fb3; }
.ab-bank, .ab.bank { background: #e3f7ea; color: #1d7a45; }
.ab-sick, .ab.sick { background: repeating-linear-gradient(135deg, #fdf1c7 0 8px, #fef7dc 8px 16px); color: #8a6a10; }
.ab-unpaid, .ab.unpaid { background: #fde6ec; color: #b2304d; }
.ab-other, .ab.other { background: #eceef4; color: #5b6178; }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 10px 8px 14px; border-radius: 12px; background: var(--p-100); font-size: 13px; font-weight: 600; color: var(--p-deep); }
.bulk span { margin-right: 6px; }
.job-due { display: grid; line-height: 1.3; }
.job-due b { font-size: 13.5px; font-weight: 600; }
.job-due small { font-size: 12px; color: var(--muted); }
.job-due.is-late b, .job-due.is-late small { color: var(--bad); }
.job-due.is-soon small { color: var(--warn); font-weight: 600; }
.track { display: flex; gap: 3px; }
.track i { flex: 1; height: 8px; border-radius: 4px; background: var(--p-150); position: relative; }
.track i.is-done { background: var(--ok); opacity: .75; }
.track i.is-now { background: var(--grad); }
.track i.is-now::after { content: ""; position: absolute; inset: -3px; border-radius: 6px; box-shadow: 0 0 0 2px rgba(115, 120, 245, .25); }

.foot { font-size: 12.5px; color: var(--faint); text-align: center; padding-top: 4px; }

/* ---------- Dialog and toast ---------- */
.dlg { border: 0; padding: 0; border-radius: 22px; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; box-shadow: 0 30px 70px -20px rgba(29, 35, 64, .45); }
.dlg.is-wide { width: min(600px, calc(100vw - 24px)); }
.dlg::backdrop { background: rgba(29, 35, 64, .35); backdrop-filter: blur(3px); }
.dlg-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 24px 20px; }
.dlg-box header { display: flex; align-items: flex-start; gap: 12px; }
.dlg-titles { flex: 1; min-width: 0; padding-top: 2px; }
.dlg-box h3 { font-size: 17.5px; letter-spacing: -.01em; }
.dlg-titles p { margin-top: 3px; font-size: 13px; color: var(--muted); }
.dlg-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 13px; background: var(--p-100); color: var(--p-deep); }
.dlg-box header .icon-btn { margin: -4px -8px 0 0; }
#dlgBody { display: grid; gap: 16px; min-width: 0; }
.dlg-error { padding: 10px 12px; border-radius: 12px; background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); color: #9b1b3a; font-size: 13px; font-weight: 500; }
.dlg-box footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.btn-primary.btn-danger-solid { background: linear-gradient(100deg, #e5486c, var(--bad)); box-shadow: 0 8px 20px -10px rgba(220, 38, 80, .7); }
.field { display: grid; gap: 7px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field small { font-weight: 400; color: var(--faint); }
.field input, .field select { width: 100%; min-width: 0; height: 42px; padding: 0 13px; border-radius: 12px; border: 0; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); outline: 0; font-weight: 400; transition: background .15s, box-shadow .15s; }
.field textarea { width: 100%; min-height: 80px; padding: 10px 13px; border-radius: 12px; border: 0; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); outline: 0; font: inherit; font-weight: 400; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--p), 0 0 0 3px var(--p-100); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field > span small, .field > label small { margin-left: 4px; font-weight: 500; color: var(--faint); }
.is-invalid { box-shadow: inset 0 0 0 1.5px var(--bad), 0 0 0 3px var(--bad-bg) !important; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 500; box-shadow: 0 16px 34px -14px rgba(29, 35, 64, .6); transition: opacity .25s, transform .25s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { margin-left: 6px; color: #b8bbff; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.toast button .ic { color: inherit; width: 15px; height: 15px; }
.toast .ic { color: #8ee6b0; }


/* ---------- Responsive (shared parts) ---------- */
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: 20px 0 40px -20px rgba(29, 35, 64, .3); }
  .app.is-menu .side { transform: none; }
  .app.is-menu .side-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(29, 35, 64, .3); }
  .top-menu { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .top { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .main { padding: 14px 12px 32px; gap: 14px; }
  .card { padding: 16px 14px; border-radius: 18px; }
  .top .btn:has(> .ic + span) > span { display: none; }
  .top .btn:has(> .ic + span) { width: 40px; padding: 0; }
  .help { display: none; }
  .dlg-box { padding: 18px 16px 16px; gap: 16px; }
  .pulse { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .pulse button { flex: none; }
  .dlg-box footer .btn { flex: 1; }
  .dt thead { display: none; }
  .dt, .dt tbody, .dt tr { display: block; }
  .dt tr { position: relative; padding: 12px 4px 12px 40px; border-bottom: 1px solid var(--line-2); }
  .dt td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; width: auto; min-width: 0; padding: 3px 0; border: 0; }
  .dt td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--faint); }
  .dt td.dt-check { position: absolute; left: 8px; top: 12px; display: block; padding: 0; }
  .dt td.dt-check::before { content: none; }
  .dt tr.is-needs td:first-child { box-shadow: none; }
  .dt tr.is-needs { box-shadow: inset 3px 0 0 var(--warn); }
}

/* TV Workload display: the read-only calendar uses the same visual language as
   the admin calendar while retaining its server-rendered grid and refresh loop. */
.workload-display-missing-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  margin: 0;
  padding: 24px;
  background: var(--bg);
  color: var(--ink);
  font-family: TTInter, Inter, ui-sans-serif, system-ui, sans-serif;
}
.workload-display-missing {
  width: min(520px, 100%);
  padding: 36px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
.workload-display-missing .workload-display-brand-mark {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--grad);
  object-fit: contain;
}
.workload-display-missing h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.workload-display-missing p { margin: 8px 0 0; color: var(--muted); }
.tv-calendar-page {
  --tv-name-w: 236px;
  --tv-grid-min: 960px;
  --tv-lane-height: 58px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 18px 24px 14px;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: TTInter, Inter, ui-sans-serif, system-ui, sans-serif;
}
.tv-calendar-page .workload-display-header {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  min-height: 62px;
  gap: 22px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.tv-calendar-page .workload-display-heading { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.tv-calendar-page .workload-display-brand-mark { flex: none; width: 28px; height: 28px; object-fit: contain; }
.tv-calendar-page .workload-display-heading h1 { margin: 0; font-size: 17px; font-weight: 650; white-space: nowrap; }
.tv-calendar-page .workload-display-brand { overflow: hidden; color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.tv-calendar-page .workload-display-brand small { color: var(--p); font-size: inherit; }
.tv-calendar-page .workload-display-divider { width: 1px; height: 24px; background: var(--line); }
.tv-calendar-page .workload-display-range { padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--p-50); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.tv-calendar-page .workload-display-clock { justify-self: end; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; font-weight: 600; }
.tv-calendar-page .workload-display-main { min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-height: 0; overflow: hidden; }
.tv-calendar-page .workload-display-calendar { min-width: 0; min-height: 0; height: 100%; max-height: 100%; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); scrollbar-color: var(--p-200) var(--p-50); }
.tv-calendar-page .workload-calendar { display: grid; grid-template-columns: minmax(0, var(--tv-name-w)) minmax(0, 1fr); grid-auto-rows: auto; width: 100%; min-width: calc(var(--tv-name-w) + var(--tv-grid-min)); background: var(--surface); }
.tv-calendar-page .workload-name { position: sticky; left: 0; z-index: 5; display: flex; align-items: center; gap: 10px; min-width: var(--tv-name-w); padding: 11px 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-2); background: var(--surface); }
.tv-calendar-page .workload-name.workload-heading { top: 0; z-index: 7; align-items: flex-end; min-height: 66px; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tv-calendar-page .workload-days { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: var(--workload-grid-template); grid-template-rows: 22px 44px; min-width: 0; min-height: 66px; border-bottom: 1px solid var(--line); background: var(--surface); }
.tv-calendar-page .workload-month { grid-row: 1; display: flex; align-items: center; min-width: 0; overflow: hidden; padding: 3px 10px; border-left: 1px solid var(--line-2); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.tv-calendar-page .workload-day { grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; gap: 2px; border-left: 1px solid var(--line-2); color: var(--muted); }
.tv-calendar-page .workload-day-date { display: grid; justify-items: center; line-height: 1.1; }
.tv-calendar-page .workload-day-date strong { color: var(--ink); font-size: 15px; font-weight: 700; }
.tv-calendar-page .workload-day-date span { font-size: 10.5px; font-weight: 600; }
.tv-calendar-page .workload-day.workload-today { background: var(--p-50); box-shadow: inset 0 -3px 0 var(--p); }
.tv-calendar-page .workload-day-slots { display: flex; width: 100%; justify-content: space-around; color: var(--faint); font-size: 9px; }
.tv-calendar-page .workload-timeline { display: grid; grid-template-columns: var(--workload-grid-template); grid-template-rows: repeat(var(--tv-lanes), var(--tv-lane-height)); min-width: 0; min-height: var(--tv-lane-height); border-bottom: 1px solid var(--line-2); background: var(--surface); }
.tv-calendar-page .workload-name:not(.workload-heading) { min-height: var(--tv-lane-height); align-items: center; border-bottom: 1px solid var(--line-2); }
.tv-calendar-page .tv-employee-avatar { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--p-100); color: var(--p-ink); font-size: 10px; font-weight: 750; }
.tv-calendar-page .tv-employee-copy { min-width: 0; line-height: 1.2; }
.tv-calendar-page .tv-employee-copy strong { display: block; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.tv-calendar-page .tv-employee-copy .muted { display: block; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tv-calendar-page .workload-bg-day { z-index: 0; grid-row: 1 / -1; min-width: 0; border-left: 1px solid var(--line-2); background: transparent; }
.tv-calendar-page .workload-bg-day.workload-weekend { background: rgba(246, 246, 255, .7); }
.tv-calendar-page .workload-bg-day.workload-calendar-slot-hidden { visibility: hidden; }
.tv-calendar-page .workload-calendar-slot-hidden { visibility: hidden; overflow: hidden; padding: 0 !important; border: 0 !important; }
.tv-calendar-page .workload-bg-day.workload-today { background: var(--p-50); box-shadow: inset 2px 0 0 var(--p), inset -1px 0 0 var(--p-200); }
.tv-calendar-page .workload-bg-day.workload-absence-holiday { background: rgba(226, 249, 239, .65); }
.tv-calendar-page .workload-bg-day.workload-absence-bank-holiday { background: rgba(255, 239, 216, .65); }
.tv-calendar-page .workload-bg-day.workload-absence-sick { background: rgba(255, 232, 238, .65); }
.tv-calendar-page .workload-bg-day.workload-absence-unpaid,
.tv-calendar-page .workload-bg-day.workload-absence-other { background: rgba(238, 238, 254, .7); }
.tv-calendar-page .workload-job { position: relative; z-index: 2; display: flex; align-items: center; min-width: 0; min-height: 0; margin: 4px 5px; padding: 0 11px; overflow: hidden; border-radius: 10px; box-shadow: inset 3px 0 0 var(--edge), 0 1px 2px rgba(29, 35, 64, .06); background: var(--fill); color: var(--text); }
.tv-calendar-page .workload-pill-text { display: grid; min-width: 0; line-height: 1.15; }
.tv-calendar-page .workload-pill-top, .tv-calendar-page .workload-pill-bottom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-calendar-page .workload-pill-top { font-size: 12px; font-weight: 650; }
.tv-calendar-page .workload-pill-bottom { margin-top: 2px; font-size: 10.5px; opacity: .82; }
.tv-calendar-page .workload-job-unavailable { background: repeating-linear-gradient(135deg, var(--fill) 0 7px, #fff 7px 14px); opacity: .8; }
.tv-calendar-page .workload-job-closed, .tv-calendar-page .workload-job-all-done { opacity: .7; }
.tv-calendar-page .workload-job-closed .workload-pill-top, .tv-calendar-page .workload-job-all-done .workload-pill-top, .tv-calendar-page .workload-view-task:not(.workload-job-view)[data-task-completed="1"] .workload-pill-top { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tv-calendar-page .workload-display-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 25px; margin: 0; padding: 0 4px; color: var(--muted); font-size: 11px; }
.tv-calendar-page .workload-display-key .workload-key-box { display: inline-block; width: 16px; height: 10px; margin-right: 4px; border-radius: 4px; background: var(--p-100); vertical-align: -1px; }
.tv-calendar-page .workload-display-key .workload-key-box.workload-absence-holiday { background: rgba(226, 249, 239, .9); }
.tv-calendar-page .workload-display-key .workload-key-box.workload-absence-bank-holiday { background: rgba(255, 239, 216, .9); }
.tv-calendar-page .workload-display-key .workload-key-box.workload-absence-sick { background: rgba(255, 232, 238, .9); }
.tv-calendar-page .workload-display-key .workload-key-box.workload-absence-unpaid,
.tv-calendar-page .workload-display-key .workload-key-box.workload-absence-other { background: rgba(238, 238, 254, .9); }
.tv-calendar-page .workload-display-group-status { max-width: 300px; overflow: hidden; margin-left: 8px; text-overflow: ellipsis; white-space: nowrap; }
.tv-calendar-page .workload-display-refresh-status { margin-left: auto; white-space: nowrap; }
@media (max-width: 1100px) {
  .tv-calendar-page { padding: 12px 14px 10px; }
  .tv-calendar-page .workload-display-header { grid-template-columns: 1fr auto; }
  .tv-calendar-page .workload-display-range { display: none; }
}
@media (max-width: 480px) {
  .tv-calendar-page { padding: 10px; gap: 10px; }
  .tv-calendar-page .workload-display-header { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 12px; }
  .tv-calendar-page .workload-display-heading h1 { overflow: hidden; text-overflow: ellipsis; }
  .tv-calendar-page .workload-display-divider { display: none; }
  .tv-calendar-page .workload-display-clock { font-size: 12px; }
  .pick { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Sidebar column background runs the full page height on desktop */
@media (min-width: 961px) {
  .side { background: #fbfbff; }
  .app { background: linear-gradient(to right, #fbfbff 0 calc(var(--side-w) - 1px), var(--line) calc(var(--side-w) - 1px) var(--side-w), transparent var(--side-w)); }
}


/* =========================================================
   DASHBOARD (Dashboard.php)
   ========================================================= */

/* ---------- Needs you ---------- */
.attn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.attn { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 12px 12px 12px; border-radius: 14px; background: var(--p-50); transition: opacity .3s, transform .3s; }
.attn.is-leaving { opacity: 0; transform: translateX(16px); }
.attn-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; color: var(--p); box-shadow: inset 0 0 0 1px var(--line); }
.attn[data-type="issue"] .attn-ic { color: var(--bad); }
.attn[data-type="absence"] .attn-ic { color: var(--warn); }
.attn[data-type="urgent"] .attn-ic { color: var(--bad); }
.attn-text b { display: block; font-size: 14px; font-weight: 600; }
.attn-text span { display: block; font-size: 13px; color: var(--muted); }
.attn-text q { quotes: "“" "”"; color: var(--ink-2); }
.attn-acts { display: flex; gap: 6px; }
.attn-empty { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 14px; background: var(--ok-bg); color: var(--ok); font-weight: 600; }

/* ---------- Week strip ---------- */
.week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px 12px; border-radius: 14px; background: var(--p-50); min-height: 132px; transition: background .2s, box-shadow .2s; }
.day:hover { background: var(--p-100); }
.day[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--p), 0 8px 18px -12px rgba(104, 101, 237, .7); }
.day small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.day b { font-size: 18px; font-weight: 700; }
.day.is-today b { color: #fff; background: var(--grad); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; }
.day.is-weekend { opacity: .7; }
.day-dots { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 0 6px; }
.day-dots i { display: block; height: 6px; border-radius: 4px; background: var(--p-300); }
.day-dots i.is-urgent { background: var(--bad); }
.day-dots i.is-done { background: var(--ok); opacity: .55; }
.day em { font-style: normal; font-size: 11px; color: var(--muted); }

/* ---------- Phones ---------- */
.floor .card-head { flex-wrap: wrap; }
.phones { display: grid; grid-auto-flow: column; grid-auto-columns: 190px; gap: 18px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.phones.is-empty, .phones:has(> .empty) { display: block; }
.ph { scroll-snap-align: start; display: grid; gap: 10px; justify-items: stretch; }
.ph-device { position: relative; height: 372px; padding: 8px; border-radius: 34px; background: #1b1f33; box-shadow: 0 0 0 1px #2c3150, 0 16px 30px -18px rgba(29, 35, 64, .6); }
.ph-screen { position: relative; height: 100%; border-radius: 27px; overflow: hidden; background: #eef0f7; display: flex; flex-direction: column; }
.ph-notch { position: absolute; top: 7px; left: 50%; width: 66px; height: 18px; margin-left: -33px; border-radius: 12px; background: #1b1f33; z-index: 2; }
.ph-status { display: flex; justify-content: space-between; padding: 8px 18px 0; font-size: 10.5px; font-weight: 600; color: var(--ink-2); }
.ph-hero { margin: 10px 8px 0; padding: 10px 11px; border-radius: 14px; color: #fff; background: radial-gradient(90% 70% at 0% 0%, #8b6fd0, transparent 60%), linear-gradient(150deg, #5a43a0, #4a3e8c 70%, #84508a); }
.ph-hero small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6be0cf; }
.ph-hero b { display: block; font-size: 14px; letter-spacing: -.01em; margin: 1px 0 6px; }
.ph-clock { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px; background: rgba(15, 20, 45, .45); font-size: 10.5px; }
.ph-clock .dot { width: 7px; height: 7px; }
.ph-body { flex: 1; padding: 10px 8px 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.ph-label { display: flex; flex-wrap: wrap; gap: 2px 6px; justify-content: space-between; align-items: baseline; padding: 0 3px; font-size: 10.5px; color: var(--muted); }
.ph-label b { font-size: 12.5px; color: var(--ink); }
.ph-task { position: relative; padding: 8px 9px 9px 11px; border-radius: 12px; background: #fff; border-left: 3px solid var(--p); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.ph-task .chip { display: inline-block; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: var(--p-100); color: var(--p-deep); }
.ph-task strong { display: block; margin-top: 4px; font-size: 12px; line-height: 1.25; }
.ph-task span { display: block; font-size: 10.5px; color: var(--muted); }
.ph-next { display: grid; gap: 4px; }
.ph-next li { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 9px; background: rgba(255, 255, 255, .7); font-size: 10.5px; color: var(--ink-2); }
.ph-next li .ic { width: 12px; height: 12px; color: var(--faint); }
.ph-next li.is-wait { opacity: .6; }
.ph-next ul, .ph-body ul { list-style: none; margin: 0; padding: 0; }
.ph-empty { margin: auto; text-align: center; font-size: 11.5px; color: var(--muted); padding: 10px; }
.ph-empty b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.ph-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; text-align: center; background: linear-gradient(180deg, #f3f3fb, #e7e7f6); }
.ph-off .ic { width: 30px; height: 30px; color: var(--p-300); }
.ph-off b { font-size: 13px; }
.ph-off p { font-size: 11.5px; color: var(--muted); }
.ph-who { display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.ph-who div { flex: 1; min-width: 0; line-height: 1.25; }
.ph-who b { display: block; font-size: 14px; }
.ph-who small { font-size: 12px; color: var(--muted); }
.ph-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
.ph-acts .btn { flex: 1; }
.ph-flash { animation: phflash .9s var(--ease); }
@keyframes phflash { 0% { box-shadow: 0 0 0 0 rgba(115, 120, 245, .55); } 100% { box-shadow: 0 0 0 14px rgba(115, 120, 245, 0); } }

/* ---------- Jobs ---------- */

.jobs-head, .job-row { display: grid; grid-template-columns: 30px 56px minmax(180px, 1.15fr) 110px minmax(260px, 1.6fr) 150px; align-items: center; gap: 14px; }
.jobs-head { padding: 0 14px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line); }
.jobs-head button { text-align: left; font-weight: 600; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.jobs-head button:hover, .jobs-head button.is-sort { color: var(--p-deep); }
.jobs-head button.is-sort::after { content: " ↑"; }
.jobs-head button.is-sort.is-desc::after { content: " ↓"; }
.job-list { list-style: none; margin: 0; padding: 0; }
.job { border-bottom: 1px solid var(--line-2); }
.job:last-child { border-bottom: 0; }
.job-row { padding: 12px 14px; border-radius: 14px; cursor: pointer; transition: background .15s; }
.job-row:hover { background: var(--p-50); }
.job.is-open .job-row { background: var(--p-50); border-radius: 14px 14px 0 0; }
.job.is-sel .job-row { background: var(--p-100); }
.job input[type="checkbox"], .jobs-head input { width: 17px; height: 17px; accent-color: var(--p); cursor: pointer; }
.job-order { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--p-deep); background: var(--p-100); }
.job-name { min-width: 0; }
.job-name b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.job-name b em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--faint); }
.job-name span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Flow column: the steps as a track, with whose turn it is */
.flowcell { min-width: 0; display: grid; gap: 6px; }
.flow-now { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.flow-now b { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-now .ok { color: var(--ok); font-weight: 600; }
.flow-empty { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--p-deep); background: repeating-linear-gradient(135deg, var(--p-50) 0 8px, #fff 8px 16px); box-shadow: inset 0 0 0 1.5px dashed var(--p-200); border: 1.5px dashed var(--p-300); }
.flow-empty:hover { background: var(--p-100); }

.job-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.job-acts .btn-sm .ic { width: 15px; height: 15px; }
.urg { margin-left: 2px; }

/* Expanded job */
.job-more { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; padding: 6px 14px 18px 114px; background: var(--p-50); border-radius: 0 0 14px 14px; animation: open .25s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-4px); } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.step { display: grid; grid-template-columns: 26px 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.step-tick { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--p-300); color: transparent; transition: background .2s, color .2s, box-shadow .2s; }
.step-tick:hover { box-shadow: inset 0 0 0 1.5px var(--p); }
.step-tick .ic { width: 14px; height: 14px; stroke-width: 2.8; }
.step.is-done .step-tick { background: var(--ok); color: #fff; box-shadow: none; }
.step.is-done .step-name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.step-label { font-size: 13.5px; font-weight: 500; }
.step-label small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; text-decoration: none; }
.step .pill { justify-self: end; }
.step.is-wait { background: rgba(255, 255, 255, .6); }
.more-side { display: grid; gap: 14px; align-content: start; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.notes li { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 12px; background: #fff7dd; font-size: 13px; color: #5c4a14; }
.notes li .avatar { margin-top: 1px; }
.note-text { flex: 1; min-width: 0; overflow-wrap: anywhere; padding-top: 2px; }
.note-acts { display: flex; gap: 2px; margin: -5px -6px -5px 0; }
.note-acts .icon-btn { width: 28px; height: 28px; color: #9a8642; }
.note-acts .icon-btn:hover { background: #fdeebb; color: #5c4a14; }
.notes li.is-done { background: var(--p-50); color: var(--faint); }
.notes li.is-done .note-text { text-decoration: line-through; }
.notes li.is-done .note-acts .icon-btn { color: var(--faint); }
.notes li.is-done .note-acts .icon-btn:hover { background: var(--p-100); color: var(--p-deep); }
.note-add { display: flex; gap: 6px; margin-top: 6px; }
.note-add input { flex: 1; min-width: 0; height: 34px; padding: 0 11px; border-radius: 10px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line); outline: 0; font-size: 13px; }
.note-add input:focus { box-shadow: inset 0 0 0 1.5px var(--p); }
.jobs-foot { margin-top: 12px; padding: 0 14px; font-size: 12.5px; color: var(--muted); }



/* Coming up: day strip plus the next jobs */
.week { display: flex; flex-direction: column; }
.week .day { min-height: 104px; }
.agenda { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.agenda button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 12px; text-align: left; transition: background .15s; }
.agenda button:hover { background: var(--p-50); }
.agenda-when { flex: none; width: 74px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.agenda-when.is-soon { color: var(--warn); }
.agenda-when.is-late { color: var(--bad); }
.agenda-what { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.agenda-what b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-what b em { font-style: normal; color: var(--faint); font-weight: 600; font-size: 12px; }
.agenda-what small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-none { padding: 12px; font-size: 13px; color: var(--muted); }

.done-cta { margin-top: 10px; }
.notes li.is-empty { background: var(--p-50); color: var(--muted); }

@media (max-width: 1280px) {
  .jobs-head, .job-row { grid-template-columns: 30px 48px minmax(160px, 1fr) 100px minmax(200px, 1.3fr) 128px; gap: 12px; }
  .job-acts .btn-sm span { display: none; }
}
@media (max-width: 1100px) {
  .grid-top { grid-template-columns: 1fr; }
  .day { min-height: 0; }
  .job-more { padding-left: 14px; }
}
@media (max-width: 960px) {
  .ask { order: 3; width: 100%; }
}
@media (max-width: 760px) {
  .attn { grid-template-columns: 32px minmax(0, 1fr); }
  .attn-ic { width: 32px; height: 32px; }
  .attn-acts { grid-column: 2; }
  .week-days { gap: 4px; }
  .day { padding: 8px 0 10px; border-radius: 12px; }
  .day b { font-size: 15px; }
  .day.is-today b { width: 28px; height: 28px; font-size: 13px; }
  .jobs-head { display: none; }
  .job-row { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "sel name due" "sel flow flow" "sel acts acts"; gap: 8px 10px; padding: 12px 8px; }
  .job-row > .c-sel { grid-area: sel; align-self: start; padding-top: 2px; }
  .job-row > .c-order { display: none; }
  .job-row > .job-name { grid-area: name; }
  .job-row > .job-due { grid-area: due; text-align: right; }
  .job-row > .flowcell { grid-area: flow; }
  .job-row > .job-acts { grid-area: acts; justify-content: flex-start; }
  .job-acts .btn-sm span { display: inline; }
  .job-more { grid-template-columns: 1fr; padding: 4px 10px 14px; }
  .step { grid-template-columns: 24px 22px minmax(0, 1fr); }
  .step .pill { grid-column: 3; justify-self: start; }
  .floor .legend { display: none; }
  .phones { grid-auto-columns: 176px; gap: 12px; margin: 0 -14px; padding: 4px 14px 10px; }
  .toolbar .search { max-width: none; flex-basis: 100%; }
}

/* =========================================================
   CALENDAR (Calendar.php)
   ========================================================= */

.wl-main { gap: 16px; }
.wl-main .top { gap: 12px; }
.wl-nav { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.wl-nav .btn { height: 32px; box-shadow: none; }
.top .btn-sm .ic { width: 16px; height: 16px; }

.wl-card { padding: 16px 18px 14px; }
.wl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.wl-edit-groups { font-size: 13px; }
.wl-find { flex: 0 1 260px; }
.wl-find input { height: 36px; }
.wl-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.wl-drag-hint { font-size: 12.5px; color: var(--faint); }
.wl-template { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--p-deep); background: var(--p-100); border: 1.5px dashed var(--p-300); cursor: grab; touch-action: none; user-select: none; }
.wl-template.is-own { color: #8a5a0a; background: var(--warn-bg); border-color: var(--warn-line); }
.wl-template:active { cursor: grabbing; }
.wl-template .ic { width: 15px; height: 15px; stroke-width: 2.4; }

/* ---------- Calendar frame ---------- */
.wl-frame { position: relative; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; background: #fff; }
.wl-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; cursor: grab; outline: 0; }
.wl-scroll.is-panning { cursor: grabbing; user-select: none; }
.wl-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--p); }
.wl-canvas { position: relative; width: max-content; min-width: 100%; --name-w: 196px; --lane: 40px; }

.wl-pull { position: absolute; top: 0; bottom: 0; z-index: 8; width: 54px; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .2s; }
.wl-pull span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11.5px; font-weight: 600; color: var(--p-deep); letter-spacing: .02em; }
.wl-pull-l { left: var(--name-w, 196px); background: linear-gradient(90deg, rgba(238, 238, 254, .95), rgba(238, 238, 254, 0)); }
.wl-pull-r { right: 0; background: linear-gradient(270deg, rgba(238, 238, 254, .95), rgba(238, 238, 254, 0)); }
.wl-pull-r span { transform: none; }
.wl-pull.is-on { opacity: 1; }

/* Header */
.wl-head { position: sticky; top: 0; z-index: 6; display: flex; background: #fff; border-bottom: 1px solid var(--line); }
.wl-corner { position: sticky; left: 0; z-index: 7; flex: none; width: var(--name-w); display: flex; align-items: flex-end; padding: 0 14px 10px; background: #fff; border-right: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.wl-dates { position: relative; flex: none; height: 64px; }
.wl-month { position: absolute; top: 0; height: 22px; display: flex; align-items: center; padding-left: 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line-2); white-space: nowrap; overflow: hidden; }
.wl-month span { position: sticky; left: calc(var(--name-w) + 10px); }
.wl-day { position: absolute; top: 22px; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid var(--line-2); line-height: 1.1; overflow: hidden; }
.wl-day b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.wl-day small { font-size: 10.5px; color: var(--muted); }
.wl-day.is-weekend { background: #fafafd; }
.wl-day.is-weekend b { color: var(--muted); }
.wl-day.is-today b { color: #fff; background: var(--grad); border-radius: 8px; padding: 1px 6px; }
.wl-day.is-month-start { border-left-color: var(--line); }
.wl-ticks { position: absolute; left: 0; right: 0; bottom: 0; display: flex; border-top: 1px solid var(--line-2); }
.wl-ticks i { flex: 1; font-style: normal; font-size: 9.5px; color: var(--faint); text-align: center; line-height: 15px; }
.wl-ticks i + i { border-left: 1px solid var(--line-2); }
.wl-dates.has-ticks .wl-day { flex-direction: row; align-items: baseline; justify-content: center; gap: 5px; padding-top: 9px; }

/* Rows */
.wl-row { display: flex; border-bottom: 1px solid var(--line); }
.wl-row:last-child { border-bottom: 0; }
.wl-name { position: sticky; left: 0; z-index: 5; flex: none; width: var(--name-w); padding: 12px 14px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.wl-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.wl-who b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-who small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-who > div { min-width: 0; line-height: 1.25; }
.wl-load { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.wl-load .meter { flex: 1; height: 5px; }
.wl-load .meter i.is-full { background: linear-gradient(100deg, #f0a43c, #e35d6a); }
.wl-jobchip { width: 10px; height: 34px; border-radius: 6px; flex: none; background: var(--edge); }
.wl-lanes { position: relative; flex: none; align-self: stretch; }
.wl-row.is-target .wl-lanes { box-shadow: inset 0 0 0 2px rgba(115, 120, 245, .35); background-color: rgba(246, 246, 255, .6); }
.wl-row.is-target .wl-name { background: var(--p-50); }

/* Background: day lines, weekends, today, absences */
.wl-bg { position: absolute; inset: 0; pointer-events: none; }
.wl-bg .we { position: absolute; top: 0; bottom: 0; background: #fafafd; }
.wl-bg .ln { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.wl-bg .ln.is-half { background: repeating-linear-gradient(180deg, var(--line-2) 0 3px, transparent 3px 6px); }
.wl-bg .today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--p); opacity: .55; }
.ab { position: absolute; top: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }

/* ---------- Pills ---------- */
.pill-t { position: absolute; z-index: 2; height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; border-radius: 10px; cursor: grab; touch-action: none; user-select: none; overflow: hidden; white-space: nowrap; line-height: 1.15; transition: left .2s var(--ease), top .2s var(--ease), width .2s var(--ease), opacity .2s, box-shadow .15s; box-shadow: inset 3px 0 0 var(--edge), 0 1px 2px rgba(29, 35, 64, .06); background: var(--fill); color: var(--text); }
.pill-t:hover { box-shadow: inset 3px 0 0 var(--edge), 0 6px 14px -8px rgba(29, 35, 64, .35); }
.pill-t .txt { min-width: 0; display: grid; }
.pill-t .txt b { font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.pill-t .txt small { font-size: 10.5px; opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.pill-t .tick { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--edge); color: #fff; }
.pill-t .tick .ic { width: 10px; height: 10px; stroke-width: 3.2; }
.pill-t .warn { flex: none; color: var(--bad); }
.pill-t .warn .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.pill-t.is-done .txt b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pill-t.is-done { opacity: .72; }
.pill-t.is-up { background: repeating-linear-gradient(135deg, var(--fill) 0 7px, #fff 7px 14px); box-shadow: inset 0 0 0 1.5px var(--edge-soft); opacity: .78; }
.pill-t.is-warn { box-shadow: inset 3px 0 0 var(--edge), 0 0 0 2px var(--bad); }
.pill-t.is-dim { opacity: .18; }
.pill-t.is-hit { box-shadow: inset 3px 0 0 var(--edge), 0 0 0 2.5px var(--p); }
.pill-t.is-sel { z-index: 3; box-shadow: inset 3px 0 0 var(--edge), 0 0 0 2px var(--ink), 0 8px 18px -8px rgba(29, 35, 64, .45); }
.pill-t.is-lifted { opacity: .35; transition: none; }
.pill-t .hdl { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 2; }
.pill-t .hdl::after { content: ""; position: absolute; top: 9px; bottom: 9px; left: 4px; width: 2px; border-radius: 2px; background: currentColor; opacity: 0; transition: opacity .15s; }
.pill-t .hdl-l { left: 0; }
.pill-t .hdl-r { right: 0; }
.pill-t:hover .hdl::after, .pill-t.is-sel .hdl::after { opacity: .45; }
.pill-t.is-narrow { padding: 0 6px; }
.pill-t.is-narrow .txt small { display: none; }

/* Job colours (soft fill, edge, text) */
.c-green { --fill: #d8f3e3; --edge: #2fa866; --edge-soft: #8fd6ad; --text: #145c36; }
.c-orange { --fill: #ffe3cc; --edge: #e9873c; --edge-soft: #f6bd8f; --text: #7d3d0b; }
.c-pink { --fill: #fbdbea; --edge: #d9578f; --edge-soft: #efa3c4; --text: #7d1f4a; }
.c-blue { --fill: #dbeafe; --edge: #3b82f6; --edge-soft: #93bdf9; --text: #1d4b8f; }
.c-violet { --fill: #e9e3ff; --edge: #7c5ce0; --edge-soft: #bcaaf2; --text: #45279c; }
.c-own { --fill: #fff1d1; --edge: #d99a1a; --edge-soft: #efcd7d; --text: #6e4c06; }
.c-new { --fill: var(--p-100); --edge: var(--p); --edge-soft: var(--p-300); --text: var(--p-ink); }

/* Dragging */
.wl-float { position: fixed; z-index: 50; pointer-events: none; opacity: .92; transform: rotate(-1.2deg); box-shadow: inset 3px 0 0 var(--edge), 0 18px 34px -12px rgba(29, 35, 64, .45) !important; transition: none !important; }
.wl-ghost { position: absolute; z-index: 1; height: 32px; border-radius: 10px; border: 2px dashed rgba(63, 77, 103, .55); background: rgba(115, 120, 245, .07); transition: left .12s var(--ease), top .12s var(--ease), width .12s var(--ease); pointer-events: none; }
.wl-ghost.is-bad { border-color: var(--bad); background: rgba(220, 38, 80, .06); }
.wl-tip { position: fixed; z-index: 51; pointer-events: none; padding: 6px 10px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; transform: translate(-50%, -100%); margin-top: -12px; box-shadow: 0 8px 18px -8px rgba(29, 35, 64, .5); }
.wl-tip small { display: block; font-weight: 500; opacity: .75; }
.wl-tip.is-bad { background: var(--bad); }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
body.is-resizing, body.is-resizing * { cursor: ew-resize !important; }

/* Job rows (Jobs view) */
.wl-jobname { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wl-jobname b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-jobname small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-jobname > div { min-width: 0; line-height: 1.25; }
.wl-jobname .link { font-size: 11.5px; }
.pill-t .who { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; font-size: 8.5px; font-weight: 700; color: #fff; }

/* Footer key */
.wl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 12px; }
.wl-foot .legend i { width: 18px; }
.legend .k-done { background: #d8f3e3; box-shadow: inset 2px 0 0 #2fa866; opacity: .75; }
.legend .k-up { background: repeating-linear-gradient(135deg, #e9e3ff 0 4px, #fff 4px 8px); box-shadow: inset 0 0 0 1px #bcaaf2; }
.legend .k-warn { background: #fff; box-shadow: 0 0 0 2px var(--bad); }

/* ---------- Side sheet (task details) ---------- */
.wl-sheet { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(420px, 100vw); border-radius: 22px 0 0 22px; }
.wl-sheet[open] { animation: sheetin .25s var(--ease); }
@keyframes sheetin { from { transform: translateX(30px); opacity: 0; } }
.wl-sheet .dlg-box { height: 100%; grid-template-rows: auto 1fr auto; padding: 22px 22px 18px; }
.sheet-body { display: grid; gap: 16px; align-content: start; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.sheet-job { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--fill); color: var(--text); }
.sheet-job .wl-jobchip { background: var(--edge); height: 40px; }
.sheet-job b { display: block; font-size: 15px; }
.sheet-job small { font-size: 12.5px; opacity: .85; }
.sheet-grid { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 10px; }
.sheet-warn { padding: 10px 12px; border-radius: 12px; background: var(--bad-bg); color: var(--bad); font-size: 13px; font-weight: 600; }
.tv-list { display: grid; gap: 8px; }
.tv-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--p-50); }
.tv-item .ic { width: 22px; height: 22px; color: var(--p); }
.tv-item div { flex: 1; line-height: 1.3; }
.tv-item b { display: block; font-size: 14px; }
.tv-item small { font-size: 12.5px; color: var(--muted); }


/* ---------- Smaller screens ---------- */
@media (max-width: 1200px) {
  .wl-drag-hint { display: none; }
}
@media (max-width: 960px) {
  .wl-main .top-hello { flex-basis: calc(100% - 120px); }
  .wl-tools { margin-left: 0; }
}
@media (max-width: 760px) {
  .wl-canvas { --name-w: 112px; --lane: 38px; }
  .wl-name { padding: 10px 8px; }
  .wl-who .avatar { display: none; }
  .wl-who small, .wl-load span { display: none; }
  .wl-jobchip { display: none; }
  .wl-card { padding: 12px 10px; }
  .wl-find { flex-basis: 100%; }
  .wl-bar .sep, .wl-edit-groups { display: none; }
  #rangeBtn span { display: none; }
  .wl-sheet { border-radius: 22px 22px 0 0; margin: auto 0 0; height: auto; max-height: 88vh; width: 100vw; max-width: 100vw; }
}

/* =========================================================
   JOB FLOW (Job_Flow.php)
   ========================================================= */

.fl-main { gap: 16px; }
.crumb { color: var(--p-deep); font-weight: 600; }
.crumb:hover { text-decoration: underline; text-underline-offset: 3px; }
.fl-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fl-meta .pill { height: 26px; }
.fl-actions { display: flex; align-items: center; gap: 8px; }
.fl-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.fl-saved.is-dirty::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f0a43c; }
.fl-saved.is-clean::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.btn .ic + * { margin-left: 0; }
#moreBtn .ic { width: 15px; height: 15px; margin-left: 2px; }

.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -16px rgba(29, 35, 64, .35); display: grid; }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-align: left; }
.menu button:hover, .menu a:hover, .menu :focus-visible { background: var(--p-50); color: var(--p-deep); }
.menu .ic { color: var(--faint); width: 17px; height: 17px; }

.fl-card { padding: 14px 16px 12px; }
.fl-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.fl-item { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 14px; border-radius: 12px; font-weight: 600; font-size: 14px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
.fl-item small { font-weight: 500; font-size: 12px; color: var(--faint); }
.fl-item[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--p), 0 0 0 3px var(--p-100); }
.fl-item .ring { width: 22px; height: 22px; flex: none; }
.fl-item .edit { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--faint); }
.fl-item .edit:hover { background: var(--p-50); color: var(--p-deep); }
.fl-item .edit .ic { width: 14px; height: 14px; }

/* Three columns: palette, canvas, side panel */
.fl-work { display: grid; grid-template-columns: 236px minmax(0, 1fr) 300px; gap: 12px; height: max(520px, calc(100vh - 250px)); }

/* ---------- Palette ---------- */
.fl-palette { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.fl-tabs { width: 100%; }
.fl-tabs button { flex: 1; padding: 0 6px; }
.fl-hint { font-size: 12px; color: var(--muted); padding: 0 2px; }
.fl-pal-list { display: grid; gap: 6px; align-content: start; overflow-y: auto; min-height: 0; padding: 2px 2px 8px; margin: 0 -2px; }
.pal-row { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.pal-row.is-open { box-shadow: inset 0 0 0 1.5px var(--p-200), 0 10px 22px -16px rgba(81, 71, 223, .5); }
.pal-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; text-align: left; }
.pal-head:hover { background: var(--p-50); }
.pal-head div { flex: 1; min-width: 0; line-height: 1.25; }
.pal-head b { display: block; font-size: 13.5px; }
.pal-head small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-head .ic { width: 16px; height: 16px; color: var(--faint); transition: transform .2s; }
.pal-row.is-open .pal-head .ic { transform: rotate(90deg); }
.pal-body { padding: 4px 10px 12px; display: grid; gap: 8px; }
.pal-new { display: flex; gap: 6px; }
.pal-new input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 10px; border: 0; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); outline: 0; font-size: 13px; }
.pal-new input:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--p); }
.pal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-task { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: #fff; box-shadow: inset 3px 0 0 var(--c, var(--p)), inset 0 0 0 1px var(--line); cursor: grab; touch-action: none; user-select: none; }
.chip-task:hover { box-shadow: inset 3px 0 0 var(--c, var(--p)), inset 0 0 0 1px var(--p-300); color: var(--p-deep); }
.chip-task .ic { width: 13px; height: 13px; color: var(--faint); }
.chip-task.is-new { color: var(--p-deep); background: var(--p-50); }
.pal-once { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.pal-once input { accent-color: var(--p); }
.pal-foot { display: flex; justify-content: space-between; font-size: 12px; }
.av-stack { display: inline-flex; }
.av-stack .avatar + .avatar { margin-left: -7px; }
.tpl { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tpl b { font-size: 13.5px; }
.tpl ol { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); display: grid; gap: 2px; }

/* ---------- Canvas ---------- */
.fl-canvas-wrap { position: relative; min-width: 0; border-radius: 16px; overflow: hidden; background-color: #fbfbfe; background-image: radial-gradient(circle, #d8d9ea 1px, transparent 1.4px); background-size: var(--grid, 20px) var(--grid, 20px); background-position: var(--gx, 0) var(--gy, 0); box-shadow: inset 0 0 0 1px var(--line); }
.fl-canvas { position: absolute; inset: 0; cursor: grab; outline: 0; touch-action: none; }
.fl-canvas.is-panning { cursor: grabbing; }
.fl-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--p); }
.fl-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fl-lines { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.fl-lines path { fill: none; }
.ln { stroke: #b5bad3; stroke-width: 1.8; }
.ln.is-done { stroke: #8fd3ad; }
.ln.is-hot { stroke: var(--p); stroke-width: 2.4; }
.ln.is-sel { stroke: var(--bad); stroke-width: 2.4; stroke-dasharray: 7 5; }
.ln.is-dim { opacity: .25; }
.ln-new { stroke: var(--ok); stroke-width: 2; stroke-dasharray: 6 6; animation: dash .6s linear infinite; }
.ln-new.is-bad { stroke: var(--bad); }
@keyframes dash { to { stroke-dashoffset: -12; } }
.hit { stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; }
.ln-del { cursor: pointer; }
.ln-del circle { fill: var(--bad); }
.ln-del path { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }

/* Tiles */
.tile { position: absolute; width: 200px; height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; border-radius: 14px; background: #fff; box-shadow: inset 4px 0 0 var(--c), 0 0 0 1px var(--line), 0 4px 12px -8px rgba(29, 35, 64, .3); cursor: grab; touch-action: none; user-select: none; transition: box-shadow .15s, opacity .2s, transform .15s; }
.tile:hover { box-shadow: inset 4px 0 0 var(--c), 0 0 0 1px var(--p-300), 0 10px 20px -12px rgba(29, 35, 64, .4); }
.tile .avatar { flex: none; }
.tile-txt { flex: 1; min-width: 0; line-height: 1.25; }
.tile-txt b { display: block; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-txt small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-st { position: absolute; right: 10px; top: -9px; height: 19px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.tile.is-done { background: #f6fbf8; }
.tile.is-done .tile-st { background: var(--ok); color: #fff; }
.tile.is-done .tile-txt b { color: var(--muted); }
.tile.is-now .tile-st { background: var(--grad); color: #fff; }
.tile.is-wait .tile-st { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.tile .flag { color: var(--bad); flex: none; }
.tile .flag .ic { width: 15px; height: 15px; }
.tile.is-sel { box-shadow: inset 4px 0 0 var(--c), 0 0 0 2px var(--p), 0 0 0 6px var(--p-100), 0 12px 24px -14px rgba(81, 71, 223, .6); z-index: 2; }
.tile.is-dim { opacity: .35; }
.tile.is-drag { cursor: grabbing; transform: scale(1.03) rotate(-.8deg); z-index: 5; box-shadow: inset 4px 0 0 var(--c), 0 0 0 1px var(--p-300), 0 22px 36px -16px rgba(29, 35, 64, .5); transition: none; }
.tile.is-target { box-shadow: inset 4px 0 0 var(--c), 0 0 0 2px var(--ok), 0 0 0 6px rgba(22, 163, 74, .14); }
.tile.is-new { animation: pop .35s var(--ease); }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.tile.job { --c: var(--p); background: linear-gradient(135deg, #fff, var(--p-50)); cursor: default; }
.tile.job .tile-txt b { font-size: 14px; }
.tile.job .jobicon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--grad); color: #fff; flex: none; }
.tile.job .jobicon .ic { width: 17px; height: 17px; }
/* Ports: drag from here to draw a line */
.port { position: absolute; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.6px #b5bad3; cursor: crosshair; opacity: 0; transition: opacity .15s, transform .15s, box-shadow .15s; z-index: 3; }
.port.p-top { top: -7px; }
.port.p-bot { bottom: -7px; }
.tile:hover .port, .tile.is-sel .port, .fl-canvas.is-linking .port { opacity: 1; }
.port:hover { transform: scale(1.3); box-shadow: inset 0 0 0 2px var(--p); }
.fl-canvas.is-linking .tile.is-target .port.p-top { box-shadow: inset 0 0 0 7px var(--ok); }

/* Overlays on the canvas */
.fl-tools { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 13px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.fl-tools .btn { height: 32px; box-shadow: none; }
.fl-tools .sep { margin: 0 4px; height: 20px; }
.fl-tools .btn .ic { width: 15px; height: 15px; }
.fl-zoom { min-width: 50px; height: 32px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.fl-zoom:hover { background: var(--p-50); }
.fl-legend { position: absolute; left: 12px; bottom: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px var(--line); font-size: 11.5px; gap: 12px; }
.fl-legend i { width: 10px; height: 10px; border-radius: 50%; }
.lg-done { background: var(--ok); }
.lg-now { background: var(--grad); }
.lg-wait { background: #fff; box-shadow: inset 0 0 0 1.5px #b5bad3; }
.fl-trash { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 20px); display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 14px; font-size: 13.5px; font-weight: 600; color: var(--bad); background: var(--bad-bg); border: 1.5px dashed var(--bad-line); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease), background .15s; }
.fl-trash .ic { width: 18px; height: 18px; }
.fl-trash.is-on { opacity: 1; transform: translate(-50%, 0); }
.fl-trash.is-hot { background: var(--bad); color: #fff; border-color: var(--bad); }
.drag-chip { position: fixed; z-index: 60; pointer-events: none; transform: rotate(-2deg); box-shadow: inset 4px 0 0 var(--c), 0 0 0 1px var(--p-300), 0 22px 36px -16px rgba(29, 35, 64, .5); }
body.is-linking, body.is-linking * { cursor: crosshair !important; }

/* ---------- Side panel ---------- */
.fl-side { min-height: 0; overflow-y: auto; border-radius: 16px; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.fl-side h3 { font-size: 15px; font-weight: 700; }
.fl-side .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.progress { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.progress b { font-size: 13.5px; }
.progress .meter { height: 7px; }
.progress small { font-size: 12px; color: var(--muted); }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.stage { position: relative; padding: 0 0 12px 30px; }
.stage::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--p-200); }
.stage:last-child::before { display: none; }
.stage-n { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: #fff; color: var(--p-deep); box-shadow: inset 0 0 0 1.5px var(--p-300); }
.stage.is-done .stage-n { background: var(--ok); color: #fff; box-shadow: none; }
.stage.is-now .stage-n { background: var(--grad); color: #fff; box-shadow: none; }
.stage-label { font-size: 11.5px; font-weight: 600; color: var(--faint); margin: 3px 0 6px; }
.stage-tasks { display: grid; gap: 5px; }
.st-task { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: left; font-size: 13px; }
.st-task:hover { box-shadow: inset 0 0 0 1px var(--p-300); }
.st-task .st-txt { flex: 1; min-width: 0; line-height: 1.25; }
.st-task .st-txt b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-task .st-txt small { font-size: 11.5px; color: var(--muted); }
.st-task.is-done .st-txt b { text-decoration: line-through; color: var(--muted); }
.st-task .pill { flex: none; height: 20px; font-size: 10.5px; padding: 0 7px; }
.st-task .avatar, .st-task .av-stack { flex: none; }

/* Task inspector */
.insp { display: grid; gap: 12px; }
.insp .field input, .insp .field select, .insp .field textarea { background: #fff; }
.insp-rel { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--muted); }
.insp-rel b { color: var(--ink); font-weight: 600; }
.insp-loc { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.insp-loc .ic { color: var(--p); width: 16px; height: 16px; margin-top: 1px; }

/* Dialog bits */
.stage-label.is-warn { color: var(--warn); }
.fl-card .help { margin-top: 10px; }
.job-more .eyebrow { margin-top: 8px; }

/* ---------- Smaller screens ---------- */
/* Give Job Flow the full width below a Full HD desktop viewport, using the shared menu drawer. */
@media (max-width: 1919px) {
  .app.fl-app { grid-template-columns: 1fr; background: none; }
  .fl-app > .side { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: none; }
  .fl-app.is-menu > .side { transform: none; box-shadow: 20px 0 40px -20px rgba(29, 35, 64, .3); }
  .fl-app.is-menu > .side-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(29, 35, 64, .3); }
  .fl-app .top-menu { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .fl-app .top { flex-wrap: wrap; }
}
@media (max-width: 1280px) {
  .fl-work { grid-template-columns: 210px minmax(0, 1fr) 270px; }
}
@media (max-width: 1100px) {
  .fl-work { grid-template-columns: 200px minmax(0, 1fr); height: auto; }
  .fl-canvas-wrap { height: max(480px, calc(100vh - 300px)); }
  .fl-palette { max-height: max(480px, calc(100vh - 300px)); }
  .fl-side { grid-column: 1 / -1; max-height: none; }
}
@media (max-width: 760px) {
  .fl-work { grid-template-columns: 1fr; }
  .fl-palette { max-height: none; }
  .fl-canvas-wrap { height: 64vh; order: -1; }
  .fl-main .top-hello { flex-basis: calc(100% - 52px); }
  .fl-main .top-hello h1 { font-size: 21px; }
  .fl-actions { width: 100%; }
  .fl-actions .menu-wrap { flex: 1; }
  .fl-actions #moreBtn { width: 100%; }
  .fl-pal-list { max-height: 60vh; }
  .fl-actions .fl-saved { display: none; }
  .fl-tools #tidyBtn { padding: 0 8px; }
}

/* =========================================================
   AI ASSISTANT (ai-assistant.php, javascript/ai-assistant.js)
   ========================================================= */
.ai-orb { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 25%, #a5a8ff, var(--p) 55%, var(--p-deep)); box-shadow: 0 6px 14px -6px rgba(81, 71, 223, .7); }
.ai-orb .ic { width: 55%; height: 55%; fill: currentColor; stroke-width: 1.2; }
.ai-orb.is-sm { width: 26px; height: 26px; }
.ai-orb.is-lg { width: 38px; height: 38px; }
.ai-orb.is-xl { width: 64px; height: 64px; box-shadow: 0 0 0 8px var(--p-100), 0 0 0 16px var(--p-50), 0 14px 30px -10px rgba(81, 71, 223, .6); animation: ai-breathe 3.2s ease-in-out infinite; }
@keyframes ai-breathe { 50% { box-shadow: 0 0 0 11px var(--p-100), 0 0 0 22px var(--p-50), 0 14px 30px -10px rgba(81, 71, 223, .6); } }

/* Launcher */
.ai-launch { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: flex; align-items: center; gap: 0; height: 52px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift); font-weight: 600; color: var(--p-deep); transition: gap .25s var(--ease), padding .25s var(--ease), transform .2s; }
.ai-launch .ai-orb { width: 44px; height: 44px; }
.ai-launch > span:last-child { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s var(--ease); }
.ai-launch:hover, .ai-launch:focus-visible { gap: 10px; padding-right: 18px; transform: translateY(-2px); }
.ai-launch:hover > span:last-child, .ai-launch:focus-visible > span:last-child { max-width: 160px; }
body.ai-is-open .ai-launch { opacity: 0; pointer-events: none; transform: scale(.8); }
.ai-scrim { display: none; }

/* Panel */
.ai-panel { position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 50; width: min(440px, calc(100vw - 24px)); display: flex; flex-direction: column; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(29, 35, 64, .35); overflow: hidden; animation: ai-in .3s var(--ease); }
@keyframes ai-in { from { opacity: 0; transform: translateX(24px) scale(.98); } }
.ai-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--p-50), #fff); }
.ai-head-text { flex: 1; min-width: 0; }
.ai-head h2 { font-size: 15.5px; font-weight: 700; }
.ai-head p { font-size: 12.5px; color: var(--muted); }
.ai-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 20px; background: #fcfcff; }
.ai-log > * { flex: none; }

/* Welcome */
.ai-hello { display: grid; justify-items: center; gap: 6px; padding: 18px 10px 8px; text-align: center; }
.ai-hello .ai-orb { margin-bottom: 18px; }
.ai-hello h3 { font-size: 19px; letter-spacing: -.01em; }
.ai-hello p { max-width: 320px; font-size: 13.5px; color: var(--muted); }
.ai-starters { display: grid; gap: 8px; }
.ai-starter { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: box-shadow .2s, transform .2s; }
.ai-starter:hover { box-shadow: inset 0 0 0 1px var(--p-200), var(--shadow); transform: translateY(-1px); }
.ai-starter b { display: block; font-size: 13.5px; }
.ai-starter small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; color: var(--muted); }
.ai-starter-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--p-100); color: var(--p-deep); }
.ai-caps { margin-top: 6px; }
.ai-caps .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.ai-caps .chips button { flex: none; height: 30px; }
.ai-examples { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.ai-examples button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 11px; text-align: left; font-size: 13.5px; color: var(--ink-2); }
.ai-examples button > span { flex: 1; }
.ai-examples button .ic { width: 16px; height: 16px; color: var(--faint); }
.ai-examples button .ic:last-child { opacity: 0; color: var(--p); transition: opacity .15s; }
.ai-examples button:hover { background: var(--p-50); color: var(--p-deep); }
.ai-examples button:hover .ic:last-child { opacity: 1; }

/* Messages */
.ai-msg { display: flex; align-items: flex-end; gap: 8px; animation: ai-pop .25s var(--ease); }
@keyframes ai-pop { from { opacity: 0; transform: translateY(6px); } }
.ai-msg.is-user { justify-content: flex-end; }
.ai-bubble { max-width: 86%; padding: 10px 13px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.is-user .ai-bubble { border-radius: 16px 16px 4px 16px; color: #fff; background: var(--grad); white-space: pre-wrap; }
.is-ai .ai-bubble { border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.ai-bubble p + p, .ai-bubble p + ul, .ai-bubble ul + p { margin-top: 8px; }
.ai-bubble ul { margin: 4px 0 0; padding-left: 18px; }
.ai-bubble li + li { margin-top: 3px; }
.ai-bubble li::marker { color: var(--p); }
.ai-msg.is-error .ai-bubble { background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); color: #9b1b3a; }
.ai-msg.is-error .ai-orb { background: var(--bad); box-shadow: none; }
.ai-msg.is-error .ai-orb .ic { fill: none; stroke-width: 2.4; }
.is-thinking .ai-bubble { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.ai-dots { display: flex; gap: 4px; }
.ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--p); animation: ai-dot 1.1s infinite ease-in-out; }
.ai-dots i:nth-child(2) { animation-delay: .15s; }
.ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Review cards (proposals and the address check) */
.ai-card, .ai-acts, .ai-offer, .ai-media { margin-left: 34px; }
.ai-card { border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); overflow: hidden; animation: ai-pop .25s var(--ease); transition: opacity .2s; }
.ai-card > header { display: flex; align-items: center; gap: 11px; padding: 14px 14px 10px; }
.ai-card > header small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ai-card > header h3 { font-size: 15px; }
.ai-card-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--p-100); color: var(--p-deep); }
.ai-card dl { margin: 0; padding: 0 14px; }
.ai-card dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.ai-card dt { color: var(--muted); }
.ai-card dd { margin: 0; font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
.ai-card-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 14px; }
.ai-card.is-danger .ai-card-ic { background: var(--bad-bg); color: var(--bad); }
.ai-card.is-applying { opacity: .75; pointer-events: none; }
.ai-card-state { display: flex; align-items: center; gap: 6px; padding: 10px 14px 12px; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.ai-card-state .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.ai-card.is-off dl, .ai-card.is-off > header, .ai-card.is-off .field, .ai-card.is-off .ai-locate-status { opacity: .5; }
.ai-card.is-off .ai-card-state { color: var(--faint); }
.ai-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: ai-turn .7s linear infinite; }
@keyframes ai-turn { to { transform: rotate(360deg); } }
.ai-locate-status { padding: 0 14px 10px; font-size: 13.5px; color: var(--ink-2); }
.ai-locate-status:empty { display: none; }
.ai-places { display: grid; gap: 6px; padding: 0 14px 10px; }
.ai-places:empty { display: none; }
.ai-place { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-align: left; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, background .15s; }
.ai-place > span { flex: 1; }
.ai-place .ic { color: var(--p); }
.ai-place em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--p-deep); }
.ai-place:hover { background: var(--p-50); box-shadow: inset 0 0 0 1px var(--p-200); }
.ai-card .field { padding: 0 14px; }

/* Links, notification offer, photos */
.ai-acts { display: flex; flex-wrap: wrap; gap: 8px; animation: ai-pop .25s var(--ease); }
.ai-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: 14px; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--p-150); animation: ai-pop .25s var(--ease); }
.ai-offer > span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--p-ink); }
.ai-offer > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-offer .link { font-size: 12.5px; }
.ai-media { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; animation: ai-pop .25s var(--ease); }
.ai-media button { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ai-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.ai-media button:hover img { transform: scale(1.06); }
.ai-viewer { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; background: rgba(29, 35, 64, .86); animation: ai-pop .2s var(--ease); }
.ai-viewer figure { margin: 0; display: grid; gap: 10px; max-width: 100%; }
.ai-viewer img { max-width: 100%; max-height: 70vh; border-radius: 14px; }
.ai-viewer figcaption { display: grid; gap: 2px; font-size: 13px; color: #d9daf7; }
.ai-viewer figcaption b { color: #fff; }
.ai-viewer .icon-btn { position: absolute; top: 12px; right: 12px; color: #fff; }
.ai-viewer .icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Composer */
.ai-compose { padding: 12px 14px 12px; border-top: 1px solid var(--line); background: #fff; }
.ai-field { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 16px; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, background .15s; }
.ai-field:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--p), 0 0 0 3px var(--p-100); }
.ai-field textarea { flex: 1; min-width: 0; max-height: 140px; padding: 7px 0; border: 0; background: none; outline: 0; resize: none; font: inherit; line-height: 1.45; }
.ai-field textarea:disabled { color: var(--faint); }
.ai-send { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: #fff; background: var(--grad); box-shadow: 0 6px 14px -6px rgba(104, 101, 237, .7); transition: transform .15s, opacity .15s; }
.ai-send:hover { transform: translateY(-1px); }
.ai-send:disabled { opacity: .55; cursor: default; transform: none; }
.ai-send.is-working .ic { display: none; }
.ai-send.is-working::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: ai-turn .7s linear infinite; }
.ai-trust { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--faint); }
.ai-trust .ic { width: 13px; height: 13px; margin-top: 2px; color: var(--ok); stroke-width: 2.4; }

/* Inside the set-up wizard */
.ai-panel.is-embedded { position: relative; inset: auto; z-index: auto; width: 100%; height: 100%; min-height: 480px; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); animation: none; }
.ai-panel.is-embedded #aiNew { display: none; }

/* Wide screens: the page makes room so nothing is hidden behind the panel */
@media (min-width: 1680px) {
  .main { transition: margin-right .3s var(--ease); }
  body.ai-is-open .main { margin-right: 452px; }
}
@media (max-width: 900px) {
  .ai-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(29, 35, 64, .35); animation: ai-pop .2s; }
}
@media (max-width: 600px) {
  .ai-panel { inset: 0; width: 100%; border-radius: 0; }
  .ai-launch { right: 16px; bottom: 16px; }
  .ai-card, .ai-acts, .ai-offer, .ai-media { margin-left: 0; }
  .ai-card dl > div { grid-template-columns: 92px minmax(0, 1fr); }
  .ai-media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   TIMESHEET (Timesheet.php)
   ========================================================= */
.ts-tools { justify-content: space-between; }
.ts-range { display: flex; align-items: center; gap: 4px; }
.ts-range b { min-width: 150px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.ts-dates { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-wrap { overflow: auto; max-height: min(72vh, 760px); margin: 4px -4px 14px; padding: 0 4px; border-radius: 14px; }
.ts-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 13px; }
.ts-grid th, .ts-grid td { padding: 3px; border-bottom: 1px solid var(--line-2); }
.ts-grid thead th { position: sticky; top: 0; z-index: 2; padding: 6px 6px 10px; background: #fff; border-bottom: 1px solid var(--line); text-align: left; font-weight: 600; }
.ts-grid tbody th, .ts-grid tfoot th { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; font-weight: 500; }
.ts-grid .ts-corner { left: 0; z-index: 3; width: 96px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ts-who { display: flex; align-items: center; gap: 8px; min-width: 128px; }
.ts-who > span:last-child { display: grid; line-height: 1.25; }
.ts-who small { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.ts-day { display: grid; padding: 0 8px 0 4px; line-height: 1.25; color: var(--muted); white-space: nowrap; }
.ts-day b { color: var(--ink); font-weight: 600; }
.ts-day em { justify-self: start; margin-top: 2px; padding: 1px 6px; border-radius: 999px; background: var(--p); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; }
.ts-grid tr.is-weekend th, .ts-grid tr.is-weekend td { background: #fafafd; }
.ts-cell { display: grid; align-content: center; gap: 1px; width: 100%; min-width: 128px; min-height: 48px; padding: 6px 10px; border-radius: 10px; text-align: left; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, opacity .2s, transform .15s; }
.ts-cell b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-cell small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-cell:hover { box-shadow: inset 0 0 0 1.5px var(--p-300); }
.ts-cell.is-empty { background: transparent; box-shadow: inset 0 0 0 1px transparent; }
.ts-cell.is-empty:hover { box-shadow: inset 0 0 0 1px var(--line); }
.ts-cell.is-empty small { color: var(--faint); }
.ts-cell[class*="ab-"] { box-shadow: none; }
.ts-cell[class*="ab-"] small { color: inherit; opacity: .8; }
.ts-cell.is-request { box-shadow: inset 0 0 0 2px var(--warn); }
.ts-cell.is-request small { color: var(--warn); font-weight: 600; opacity: 1; }
.ts-cell.is-warn { background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); }
.ts-cell.is-warn small { color: var(--bad); font-weight: 600; }
.ts-cell.is-live small { color: var(--ok); font-weight: 600; }
.ts-cell.is-dim { opacity: .25; }
.ts-cell.is-lit { box-shadow: inset 0 0 0 2px var(--p), 0 0 0 4px var(--p-100); animation: ts-lit 1.2s ease-in-out 3; }
@keyframes ts-lit { 50% { box-shadow: inset 0 0 0 2px var(--p), 0 0 0 9px var(--p-100); } }
.ts-grid tr.is-today .ts-day b { color: var(--p-deep); }
.ts-grid tfoot th, .ts-grid tfoot td { position: sticky; bottom: 0; padding: 10px 8px; background: #fff; border-top: 1px solid var(--line); border-bottom: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ts-grid tfoot th { z-index: 2; }
.ts-legend .k-request { background: #fff; box-shadow: inset 0 0 0 2px var(--warn); }
.ts-legend .k-check { background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); }
.ts-request { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; }
.ts-request b { font-size: 14px; }
.pulse button:disabled { cursor: default; transform: none; }
.pulse button:disabled:hover { box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 760px) {
  .ts-range b { min-width: 0; flex: 1; }
  .ts-range { width: 100%; }
  .ts-dates { width: 100%; }
  .ts-grid .ts-corner { width: 72px; }
  .ts-cell { min-width: 112px; }
}

/* =========================================================
   JOB ORDER (Job_Order.php)
   ========================================================= */
.jo-note { margin: -4px 0 10px; }
.jo-note:empty { display: none; }
.jo-pos { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px; background: var(--p-100); color: var(--p-deep); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.jo-job { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.jo-job b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; }
.jo-job em { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--faint); }
.jo-job .pill { height: 20px; padding: 0 7px; font-size: 11px; }
.jo-job small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jo-row .job-due { width: 108px; flex: none; }
.jo-steps { display: grid; gap: 4px; width: 150px; flex: none; font-size: 12px; color: var(--muted); }
.jo-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.jo-acts .btn { margin-left: 4px; }
.jo-acts .icon-btn { width: 30px; height: 30px; }
.jo-row:first-child [data-up], .jo-row:first-child [data-top], .jo-row:last-child [data-down] { visibility: hidden; }
.jo-row.is-closed { background: #fbfbfe; }
.jo-row.is-closed .jo-job b { color: var(--muted); }
@media (max-width: 1100px) {
  .jo-steps { display: none; }
}
@media (max-width: 760px) {
  .jo-row { flex-wrap: wrap; gap: 8px 10px; padding: 10px; }
  .jo-job { flex-basis: calc(100% - 80px); }
  .jo-row .job-due { width: auto; margin-left: 66px; }
  .jo-acts { margin-left: auto; }
  .jo-acts .btn span, .jo-acts [data-top] { display: none; }
  .jo-acts .btn { width: 32px; padding: 0; }
}
.jo-list ~ .help { margin-top: 12px; }

/* =========================================================
   NOTIFICATIONS (Notifications.php)
   ========================================================= */
.nt-filters { margin-top: -2px; }
.nt-c-when { width: 104px; }
.nt-when, .nt-outcome, .nt-detail { display: grid; gap: 2px; line-height: 1.35; }
.nt-when small, .nt-outcome small, .nt-detail small { font-size: 12px; color: var(--muted); }
.nt-who { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 500; }
.nt-type { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; font-size: 13px; }
.nt-type .ic { width: 16px; height: 16px; padding: 5px; box-sizing: content-box; border-radius: 9px; background: var(--p-100); color: var(--p-deep); }
.nt-type.t-task_issue .ic { background: var(--bad-bg); color: var(--bad); }
.nt-type.t-absence_request .ic { background: var(--warn-bg); color: var(--warn); }
.nt-type.t-task_done .ic { background: var(--ok-bg); color: var(--ok); }
.nt-arch { display: block; margin-top: 4px; font-size: 11.5px; color: var(--faint); }
.nt-c-detail { min-width: 240px; }
.nt-detail b { font-weight: 600; }
.nt-detail q { margin-top: 4px; color: var(--ink-2); quotes: "“" "”"; }
.nt-media { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.nt-media button { width: 54px; height: 40px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.nt-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-media em { font-style: normal; font-size: 12px; color: var(--muted); }
.nt-outcome { justify-items: start; }
.nt-outcome .link { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12.5px; }
.nt-outcome .link .ic { width: 14px; height: 14px; }
.nt-c-acts { width: 1%; }
.nt-acts { display: flex; align-items: center; justify-content: flex-end; gap: 2px; white-space: nowrap; }
.nt-acts .btn { margin-right: 4px; }
.nt-del:hover { background: var(--bad-bg); color: var(--bad); }
.dt tr.is-needs td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.dt tr.is-archived td { color: var(--muted); }
.dt tr.is-archived .nt-detail b { color: var(--muted); }
.nt-sign { display: block; width: 100%; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.nt-photo { display: block; width: 100%; border-radius: 14px; }
@media (max-width: 760px) {
  .nt-acts { justify-content: flex-start; }
}

/* =========================================================
   GROUP BUILDER (Group_Builder.php)
   ========================================================= */
.gb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.gb-card { display: grid; gap: 14px; box-shadow: inset 0 3px 0 var(--c), inset 0 0 0 1px var(--line), var(--shadow); }
.gb-head { display: flex; align-items: center; gap: 10px; }
.gb-head > div { flex: 1; min-width: 0; }
.gb-head h2 { font-size: 16px; font-weight: 700; }
.gb-head p { font-size: 12.5px; color: var(--muted); }
.gb-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.gb-del:hover { background: var(--bad-bg); color: var(--bad); }
.gb-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gb-people li, .gb-who { display: flex; align-items: center; gap: 10px; }
.gb-people li > span:last-child, .gb-who > span:last-child { display: grid; line-height: 1.3; }
.gb-people b, .gb-who b { font-size: 13.5px; font-weight: 600; }
.gb-people small, .gb-who small { font-size: 12px; color: var(--muted); }
.gb-who em { font-style: normal; color: var(--warn); font-weight: 600; }
.gb-warn { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 500; }
.gb-warn .ic { width: 16px; height: 16px; margin-top: 1px; }
.gb-tasks .eyebrow { margin-bottom: 6px; }
.gb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-chips span { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.gb-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.gb-grid th, .gb-grid td { padding: 10px; border-bottom: 1px solid var(--line-2); text-align: left; }
.gb-grid thead th { font-size: 12px; font-weight: 600; color: var(--muted); border-bottom-color: var(--line); white-space: nowrap; }
.gb-grid tbody th { font-weight: 500; }
.gb-grid td { width: 130px; text-align: center; }
.gb-grid thead th:not(:first-child) { text-align: center; }
.gb-col { display: inline-flex; align-items: center; gap: 6px; }
.gb-col i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.gb-switch { display: inline-flex; padding: 4px; cursor: pointer; }
.gb-grid tbody tr:hover { background: var(--p-50); }
@media (max-width: 760px) {
  .gb-grid td { width: auto; min-width: 84px; }
  .gb-grid tbody th, .gb-grid thead th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
  .gb-who small:not(:has(em)) { display: none; }
  .gb-who b { white-space: nowrap; }
}

/* =========================================================
   PHOTO LIBRARY (Photo_Library.php)
   ========================================================= */
.pl-all { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.pl-all input { width: 17px; height: 17px; accent-color: var(--p); }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.pl-card { position: relative; display: grid; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.pl-card:hover { box-shadow: inset 0 0 0 1px var(--p-200), var(--shadow); transform: translateY(-1px); }
.pl-card.is-picked { box-shadow: inset 0 0 0 2px var(--p), 0 0 0 3px var(--p-100); }
.pl-check { position: absolute; top: 8px; left: 8px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(29, 35, 64, .2); cursor: pointer; }
.pl-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--p); cursor: pointer; }
.pl-open { display: block; width: 100%; }
.pl-thumb { display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--p-50); color: var(--muted); }
.pl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.pl-open:hover .pl-thumb img { transform: scale(1.04); }
.pl-thumb.is-pdf { background: linear-gradient(160deg, #fff4f4, #fde4e4); color: #c0392b; }
.pl-thumb.is-pdf b { font-size: 22px; letter-spacing: .04em; }
.pl-thumb.is-pdf small { color: #b0645a; font-size: 12px; }
.pl-thumb.is-missing { background: repeating-linear-gradient(135deg, var(--bad-bg) 0 10px, #fff 10px 20px); color: var(--bad); }
.pl-thumb.is-missing small { font-size: 12px; font-weight: 600; }
.pl-body { display: grid; gap: 2px; padding: 10px 12px 12px; line-height: 1.35; min-width: 0; }
.pl-body b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-body em { font-style: normal; font-weight: 500; color: var(--faint); }
.pl-name { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-body small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-row-file { display: flex; align-items: center; gap: 10px; text-align: left; }
.pl-row-file .pl-thumb { width: 56px; flex: none; border-radius: 8px; }
.pl-row-file .pl-thumb small, .pl-row-file .pl-thumb .ic { display: none; }
.pl-row-file .pl-thumb.is-pdf b { font-size: 12px; }
.pl-row-file > span:last-child { display: grid; }
.pl-row-file small { font-size: 12px; color: var(--muted); }
.dt tr.is-missing td { color: var(--bad); }
.pl-view { display: grid; gap: 10px; }
.pl-view .pl-thumb { aspect-ratio: auto; max-height: 56vh; border-radius: 14px; }
.pl-view .pl-thumb img { object-fit: contain; max-height: 56vh; background: #f3f3f8; }
.pl-pdf { display: grid; justify-items: center; gap: 6px; padding: 40px 16px; border-radius: 14px; background: linear-gradient(160deg, #fff4f4, #fde4e4); color: #c0392b; text-align: center; }
.pl-pdf .ic { width: 34px; height: 34px; }
.pl-pdf small { color: #b0645a; }
.pl-nav { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--muted); }
.pl-facts { margin: 0; display: grid; }
.pl-facts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.pl-facts dt { color: var(--muted); }
.pl-facts dd { margin: 0; }
.pl-list { margin: 0; padding-left: 18px; font-size: 13.5px; }
.pl-list small { color: var(--muted); }
@media (max-width: 760px) {
  .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pl-all { margin-left: 0; }
  .pl-body small:last-child { display: none; }
}

/* =========================================================
   JOB (Job.php)
   ========================================================= */
.jb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.jb-main { display: grid; gap: 20px; min-width: 0; }
.jb-side { position: sticky; top: 20px; display: grid; gap: 16px; }
.jb-layout > .save-bar { grid-column: 1 / -1; }
.jb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.jb-wide, .jb-cust-card { grid-column: 1 / -1; }
.jb-cust-row { display: flex; gap: 8px; }
.jb-cust-row select { flex: 1; min-width: 0; }
.jb-cust-row .btn { height: 42px; flex: none; }
.jb-cust-card { display: grid; gap: 2px; margin-top: -6px; padding: 10px 12px; border-radius: 12px; background: var(--p-50); font-size: 13px; color: var(--muted); }
.jb-cust-card b { color: var(--ink); font-weight: 600; }
.jb-cust-card q { color: var(--ink-2); quotes: "“" "”"; }
.field .seg { align-self: start; }
.jb-quick { margin-top: 2px; }
.jb-quick button { height: 26px; padding: 0 10px; font-size: 12px; }
.card-head h2 .note { font-weight: 500; margin-left: 6px; }
.jb-items { gap: 10px; }
.jb-item { align-items: flex-start; padding: 12px 14px 14px 8px; }
.jb-item .grip { margin-top: 2px; }
.jb-item-body { flex: 1; min-width: 0; display: grid; gap: 12px; }
.jb-item-head { display: flex; align-items: center; gap: 10px; }
.jb-item-head b { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-item-head .jo-pos { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
.jb-del:hover { background: var(--bad-bg); color: var(--bad); }
.jb-item-grid { display: grid; grid-template-columns: minmax(0, 2fr) 90px minmax(0, 1.4fr); gap: 12px; }
.jb-note { grid-column: 1 / -1; }
.jb-extra { padding: 12px; border-radius: 12px; background: var(--p-50); }
.jb-extra .eyebrow { margin-bottom: 8px; }
.jb-extra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.jb-extra .field input, .jb-extra .field textarea { background: #fff; }
.jb-extra .jb-check { min-width: 0; min-height: 42px; padding: 9px 12px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.jb-extra .jb-check > span { overflow-wrap: anywhere; }
.jb-extra .jb-check:focus-within { box-shadow: inset 0 0 0 1.5px var(--p), 0 0 0 3px var(--p-100); }
.jb-add { margin-top: 12px; width: 100%; height: 44px; border: 1.5px dashed var(--p-200); }
.jb-summary { display: grid; gap: 8px; }
.jb-summary h3 { font-size: 17px; letter-spacing: -.01em; }
.jb-summary h3 em { font-style: normal; font-weight: 500; color: var(--faint); font-size: 14px; }
.jb-sum-cust { font-size: 13.5px; color: var(--ink-2); }
.jb-sum-pills { display: flex; gap: 6px; }
.jb-summary dl { margin: 4px 0 0; display: grid; }
.jb-summary dl > div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.jb-summary dt { color: var(--muted); }
.jb-summary dd { margin: 0; }
.jb-summary dd small { color: var(--muted); }
.jb-summary dd small.is-late { color: var(--bad); font-weight: 600; }
.jb-summary dd small.is-soon { color: var(--warn); font-weight: 600; }
.jb-sum-flow { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--p-100); color: var(--p-deep); }
.jb-sum-flow > span { flex: 1; display: grid; }
.jb-sum-flow small { color: var(--muted); }
.jb-sum-flow:hover { background: var(--p-150); }
.jb-danger { display: grid; gap: 8px; }
.jb-danger .eyebrow { margin: 0; }
.jb-danger .btn { justify-content: flex-start; }
.jb-frows { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.jb-frow { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto 34px; gap: 8px; align-items: center; }
.jb-frow input[name="fl"], .jb-frow input[name="tl"], .jb-frow select { height: 40px; padding: 0 12px; border: 0; border-radius: 11px; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); outline: 0; min-width: 0; }
.jb-frow input[name="fl"]:focus, .jb-frow input[name="tl"]:focus, .jb-frow select:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--p); }
.jb-req { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.jb-req input { accent-color: var(--p); }
@media (max-width: 1100px) {
  .jb-layout { grid-template-columns: minmax(0, 1fr); }
  .jb-side { position: static; grid-row: 1; }
  .jb-summary { display: none; }
}
@media (max-width: 760px) {
  .jb-grid, .jb-item-grid { grid-template-columns: minmax(0, 1fr); }
  .jb-qty { max-width: 120px; }
  .jb-frow { grid-template-columns: minmax(0, 1fr) 34px; }
  .jb-long { display: none; }
  .jb-frow select, .jb-frow .jb-req { grid-column: 1; }
  .save-bar { flex-wrap: nowrap; padding-block: 10px; }
  .save-bar .save-state, .save-bar a.btn { display: none; }
  .save-bar .btn { flex: 1; padding: 0 10px; }
  .save-bar .btn .ic { display: none; }
  body:has(.save-bar) .ai-launch { bottom: 76px; }
}

/* =========================================================
   SETTINGS (Settings.php)
   ========================================================= */
.st-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.st-nav { position: sticky; top: 20px; display: grid; gap: 2px; }
.st-nav a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 12px; color: var(--ink-2); font-weight: 500; font-size: 14px; }
.st-nav a .ic { color: var(--faint); }
.st-nav a:hover { background: var(--p-100); color: var(--p-deep); }
.st-nav a[aria-current="true"] { background: #fff; color: var(--p-deep); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.st-nav a[aria-current="true"] .ic { color: var(--p); }
.st-body { display: grid; gap: 20px; min-width: 0; }
.st-section:focus-within h2:focus { outline: none; }
.st-person { display: flex; align-items: center; gap: 10px; text-align: left; }
.st-person > span:last-child { display: grid; line-height: 1.3; }
.st-person b { font-weight: 600; }
.st-person small { font-size: 12px; color: var(--muted); }
.st-person:hover b { color: var(--p-deep); }
.dt .link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.dt .link .ic { width: 15px; height: 15px; }
.st-sub, .st-two { display: grid; gap: 20px; }
.st-two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.st-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 260px) auto; gap: 20px; align-items: center; }
.st-now h3 { display: flex; align-items: center; gap: 8px; font-size: 20px; letter-spacing: -.01em; }
.st-usage { display: grid; gap: 4px; }
.st-usage .meter { height: 8px; }
.st-usage small { font-size: 12px; color: var(--muted); }
.st-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.st-plan { position: relative; display: grid; gap: 6px; align-content: start; padding: 20px 18px 18px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.st-plan.is-popular { box-shadow: inset 0 0 0 2px var(--p), var(--shadow-lift); }
.st-plan.is-current { background: var(--p-50); }
.st-badge { position: absolute; top: -11px; left: 18px; padding: 3px 10px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 700; }
.st-plan h3 { font-size: 16px; }
.st-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-plan-head .pill { flex: none; font-size: 11px; }
.st-price b { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.st-price small { margin-left: 4px; color: var(--muted); }
.st-jobs b { font-weight: 700; }
.st-plan-btn { margin-top: 8px; width: 100%; }
.st-features-toggle { justify-self: start; padding: 0; border: 0; background: transparent; color: var(--p-deep); font-size: 12px; font-weight: 600; cursor: pointer; }
.st-features-toggle:hover, .st-features-toggle:focus-visible { text-decoration: underline; }
.st-plan-features { display: grid; gap: 6px; margin: 2px 0 0; padding: 0 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.st-plan-features li::marker { color: var(--p); }
.st-plan-features strong { color: var(--ink); }
.st-coming { display: inline-block; margin-left: 5px; color: var(--muted); font-size: 10px; }
.st-feature-empty { list-style: none; margin-left: -18px; }
.st-secure { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.st-secure .ic { width: 14px; height: 14px; color: var(--ok); }
.st-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.st-tpl { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); --c: var(--p); }
.st-tpl header { display: flex; align-items: center; gap: 4px; }
.st-tpl h3 { flex: 1; font-size: 15px; }
.st-tpl .eyebrow { margin: 6px 0 0; }
.st-fields span { display: inline-flex; gap: 6px; align-items: baseline; }
.st-fields small { font-size: 11px; color: var(--muted); }
.st-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; }
.st-steps li::marker { color: var(--faint); font-size: 12px; }
.st-steps li { padding-left: 2px; }
.st-steps li > span:first-child { margin-right: 8px; }
.st-steps .nt-who { font-size: 12.5px; color: var(--muted); }
.st-list { gap: 6px; }
.st-row { padding: 6px 8px 6px 4px; }
.st-row.is-off .st-name { color: var(--faint); }
.st-name { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; outline: 0; font-weight: 500; }
.st-name:hover { background: var(--p-50); }
.st-name:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--p); }
.st-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer; }
.st-add { display: flex; gap: 8px; margin-top: 12px; }
.st-add input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 0; border-radius: 11px; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); outline: 0; }
.st-add input:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--p); }
.st-defs { display: grid; gap: 14px; }
.st-def { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.st-def:last-child { border-bottom: 0; padding-bottom: 0; }
.st-def .nt-who > span:last-child { display: grid; line-height: 1.25; }
.st-def .chips label { height: 28px; padding: 0 10px; font-size: 12.5px; }
.st-pdfs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.st-pdf header { margin-bottom: 8px; }
.st-pdf h3 { font-size: 14.5px; }
.st-gen { display: grid; gap: 22px; max-width: 620px; }
.st-due input { max-width: 140px; }
.st-body > .save-bar { margin: 0; border-radius: 16px; border: 1px solid var(--line); bottom: 12px; box-shadow: var(--shadow-lift); }
@media (max-width: 1100px) {
  .st-two { grid-template-columns: minmax(0, 1fr); }
  .st-now { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .st-layout { grid-template-columns: minmax(0, 1fr); }
  .st-nav { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .st-nav a { flex: none; height: 36px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
}
@media (max-width: 760px) {
  .st-row { flex-wrap: wrap; }
  .st-row .st-name { flex-basis: calc(100% - 70px); }
  .st-row .st-toggle { margin-left: 30px; }
}


/* ---------- Sign-in pages (Login.php, Reset_Password.php) ----------
   No sidebar: a brand panel on the left (auth-aside.php) and one card on the right, with
   several .auth-view states inside it. Shared form parts (.field, .notice, .btn) as elsewhere. */
.auth { display: grid; grid-template-columns: minmax(400px, 44%) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.auth-side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 36px 48px 44px; color: #fff; background: linear-gradient(155deg, var(--p-deep), var(--p) 58%, var(--p2)); }
.auth-side::before, .auth-side::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.auth-side::before { width: 520px; height: 520px; right: -220px; top: -180px; background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent); }
.auth-side::after { width: 420px; height: 420px; left: -160px; bottom: -200px; background: radial-gradient(closest-side, rgba(255, 255, 255, .12), transparent); }
.auth-side > * { position: relative; z-index: 1; }
.auth-logo { align-self: flex-start; color: rgba(255, 255, 255, .78); }
.auth-logo b { color: #fff; }
.auth-logo img { padding: 3px; border-radius: 9px; background: #fff; }
.auth-pitch h2 { max-width: 15ch; font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.03em; }
.auth-pitch ul { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 15px; color: rgba(255, 255, 255, .9); }
.auth-pitch li { display: flex; align-items: center; gap: 12px; }
.auth-pitch li .ic { width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: rgba(255, 255, 255, .16); }
.auth-trail { max-width: 420px; padding: 18px 20px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.auth-trail-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; font-size: 14px; }
.auth-trail-head span { font-size: 12.5px; color: rgba(255, 255, 255, .75); }
.auth-trail ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.auth-trail li { position: relative; display: grid; gap: 1px; padding-top: 22px; font-size: 12.5px; font-weight: 600; }
.auth-trail li small { font-weight: 500; color: rgba(255, 255, 255, .7); }
.auth-trail li::before { content: ""; position: absolute; top: 6px; left: 14px; right: 0; height: 2px; background: rgba(255, 255, 255, .25); }
.auth-trail li:last-child::before { content: none; }
.auth-trail li.is-done::before { background: #fff; }
.auth-trail i { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.auth-trail .is-done i { background: #fff; box-shadow: none; }
.auth-trail .is-now i { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .3); animation: auth-now 2.4s ease-in-out infinite; }
@keyframes auth-now { 50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, .12); } }

.auth-main { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 20px; padding: 40px 24px 84px; }
.auth-card { width: min(420px, 100%); padding: 36px 36px 30px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--line-2); }
.auth-card-logo { display: none; }
.auth-view { display: grid; gap: 18px; }
.auth-head h1 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.auth-head p { margin-top: 6px; color: var(--muted); }
.auth-head b { color: var(--ink); overflow-wrap: anywhere; }
.auth-view .field input { height: 46px; }
.auth-submit { width: 100%; height: 46px; font-size: 15px; }
.btn-primary:disabled { opacity: .5; box-shadow: none; transform: none; cursor: not-allowed; }
.btn-primary.is-busy { opacity: .85; cursor: progress; }
.auth-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: auth-spin .7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.auth-check input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--p); }
.auth-alt, .auth-hint { text-align: center; font-size: 13.5px; color: var(--muted); }
.auth-back { display: inline-flex; align-items: center; gap: 4px; }
.auth-back .ic { width: 16px; height: 16px; }
.auth-foot { text-align: center; font-size: 12.5px; color: var(--faint); }
.auth-foot .link { font-size: inherit; }

/* Password box: show/hide button, Caps Lock hint, strength bar and rules */
.pw { position: relative; }
.field .pw input { padding-right: 48px; }
.pw-eye { position: absolute; right: 5px; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); transform: translateY(-50%); }
.pw-eye:hover { background: var(--p-100); color: var(--p-deep); }
.field .pw-caps { font-size: 12.5px; font-weight: 600; color: var(--warn); }
.pw-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 2px; }
.pw-meter i { height: 4px; border-radius: 999px; background: var(--line); transition: background .2s; }
.pw-meter[data-level="1"] i:nth-child(-n+1) { background: var(--bad); }
.pw-meter[data-level="2"] i:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-level="3"] i:nth-child(-n+3) { background: var(--p-300); }
.pw-meter[data-level="4"] i { background: var(--ok); }
.pw-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.pw-rules li { position: relative; padding-left: 21px; line-height: 18px; transition: color .2s; }
.pw-rules li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); transition: background .2s, box-shadow .2s; }
.pw-rules li.is-met { color: #13703a; }
.pw-rules li.is-met::before { background: var(--ok); box-shadow: none; }
.pw-rules li.is-met::after { content: ""; position: absolute; left: 5px; top: 4.5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.field .pw-match { font-size: 12.5px; font-weight: 600; color: var(--bad); }
.field .pw-match.is-ok { color: var(--ok); }

/* Choose company, and the companies a password applies to */
.auth-companies { display: grid; gap: 8px; }
.auth-company { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background .15s, box-shadow .15s; }
.auth-company:hover { box-shadow: inset 0 0 0 1px var(--p-300); }
.auth-company input { position: absolute; opacity: 0; pointer-events: none; }
.auth-company::after { content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); }
.auth-company:has(input:checked) { background: var(--p-50); box-shadow: inset 0 0 0 1.5px var(--p); }
.auth-company:has(input:checked)::after { background: var(--p); box-shadow: inset 0 0 0 4px #fff, 0 0 0 1.5px var(--p); }
.auth-company:has(input:focus-visible) { outline: 2px solid var(--p); outline-offset: 2px; }
.auth-company b { display: block; font-size: 14px; }
.auth-company small { font-size: 12.5px; color: var(--muted); }
.auth-company-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--p-100); color: var(--p-deep); }
.auth-applies { padding: 12px 14px; border-radius: var(--r); background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); }
.auth-applies p { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.auth-applies ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.auth-applies li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.auth-applies .ic { width: 16px; height: 16px; color: var(--p-deep); }

/* Finished states: link sent, saved, expired */
.auth-done { justify-items: center; text-align: center; }
.auth-done .auth-head p { max-width: 34ch; margin-inline: auto; }
.auth-done-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--p-100); color: var(--p-deep); }
.auth-done-ic .ic { width: 26px; height: 26px; }
.auth-done-ic.is-ok { background: var(--ok-bg); color: var(--ok); }
.auth-done-ic.is-bad { background: var(--bad-bg); color: var(--bad); }

/* Preview only: switch between the states of the page */
.auth-states { position: fixed; left: 50%; bottom: 14px; z-index: 40; display: flex; gap: 2px; max-width: calc(100vw - 24px); padding: 5px; border-radius: 999px; background: rgba(29, 35, 64, .9); box-shadow: 0 10px 30px -10px rgba(29, 35, 64, .5); font-size: 12.5px; font-weight: 600; transform: translateX(-50%); overflow-x: auto; scrollbar-width: none; }
.auth-states span { align-self: center; padding: 0 8px 0 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.auth-states a { padding: 6px 12px; border-radius: 999px; color: var(--p-200); white-space: nowrap; }
.auth-states a:hover { color: #fff; }
.auth-states a[aria-current] { background: #fff; color: var(--ink); }

@media (min-width: 1200px) {
  .auth-states { left: 72%; }
}
@media (max-width: 960px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-side { display: none; }
  .auth-card-logo { display: flex; justify-content: center; margin-bottom: 18px; }
}
@media (max-width: 480px) {
  .auth-main { align-items: start; padding: 24px 14px 84px; }
  .auth-card { padding: 26px 20px 22px; border-radius: 20px; }
  .auth-head h1 { font-size: 23px; }
  .auth-states { left: 12px; right: 12px; transform: none; }
}

/* Scoped TV pairing dialog used by the live AI result action. */
.admin-modal[hidden] { display: none !important; }
.admin-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.admin-modal-backdrop { position: absolute; inset: 0; background: rgba(29, 35, 64, .42); backdrop-filter: blur(3px); }
.admin-modal-panel { position: relative; width: min(460px, 100%); max-height: min(720px, calc(100vh - 40px)); overflow: auto; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px -20px rgba(29, 35, 64, .45); }
.admin-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.admin-modal-title { font-size: 18px; }
.admin-modal-note { margin-top: 3px; color: var(--muted); font-size: 13px; }
.admin-modal-close { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--muted); font-size: 24px; line-height: 1; }
.admin-modal-close:hover { background: var(--p-50); color: var(--p-deep); }
.admin-modal-body { display: grid; gap: 14px; padding: 18px 20px 20px; color: var(--ink-2); }
.admin-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-modal-actions .button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 11px; font-weight: 600; }
.admin-modal-actions .button-secondary { color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.workload-tv-pair-code { margin: 0; padding: 16px; border-radius: 14px; background: var(--p-50); color: var(--p-deep); font-size: 30px; font-weight: 800; letter-spacing: .14em; text-align: center; }

/* ---------- Set-up wizard (setup-wizard.php, on every page) ----------
   A large dialog: step list on the left (same purple as the sign-in panel), the step in the
   middle, Back / Skip / Next at the bottom. Full screen on phones. */
.wz { width: min(980px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: 0 40px 90px -24px rgba(29, 35, 64, .5); }
.wz[open] { animation: pop .25s var(--ease); }
.wz::backdrop { background: rgba(29, 35, 64, .45); backdrop-filter: blur(4px); }
.wz-box { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 100%; }
.wz .avatar { background: var(--c, var(--grad)); }
.wz-rail { display: flex; flex-direction: column; gap: 34px; padding: 28px 18px 24px; color: #fff; background: linear-gradient(165deg, var(--p-deep), var(--p) 60%, var(--p2)); }
.wz-rail .auth-logo { margin-left: 8px; }
.wz-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wz-steps button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 12px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .72); text-align: left; transition: background .15s, color .15s; }
.wz-steps button:not(:disabled):hover { background: rgba(255, 255, 255, .1); color: #fff; }
.wz-steps button:disabled { cursor: default; }
.wz-steps i { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; font-size: 12px; font-style: normal; font-weight: 700; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.wz-steps .is-done { color: #fff; }
.wz-steps .is-done i { background: rgba(255, 255, 255, .25); box-shadow: none; }
.wz-steps [aria-current] { background: rgba(255, 255, 255, .16); color: #fff; }
.wz-steps [aria-current] i { background: #fff; color: var(--p-deep); box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.wz-rail-note { margin: auto 8px 0; font-size: 12.5px; color: rgba(255, 255, 255, .72); }

.wz-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; }
.wz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 10px 28px; }
.wz-count { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wz-bar { height: 4px; margin: 0 28px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.wz-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--grad); transition: width .45s var(--ease); }
.wz-views { position: relative; min-height: 0; overflow: auto; padding: 24px 28px 12px; }
.wz-view { display: grid; gap: 18px; align-content: start; animation: wz-in .3s var(--ease); }
@keyframes wz-in { from { opacity: 0; transform: translateX(14px); } }
.wz-head h2 { font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.wz-head p { max-width: 62ch; margin-top: 5px; color: var(--muted); }
.wz-error { margin: 0 28px 10px; }
.wz-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 28px 18px; border-top: 1px solid var(--line-2); }
.wz-foot [data-wz="back"] { margin-right: auto; }
.wz-foot .btn-primary { min-width: 120px; }
.wz .btn-add { justify-self: start; }

/* Welcome: no step list, centred */
.wz.is-intro .wz-box { grid-template-columns: minmax(0, 1fr); }
.wz.is-intro .wz-rail, .wz.is-intro .wz-count, .wz.is-intro .wz-bar { display: none; }
.wz.is-intro .wz-views { display: grid; align-items: center; padding: 8px 40px 36px; }
.wz-welcome { justify-items: center; width: min(540px, 100%); margin-inline: auto; text-align: center; }
.wz-hero { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--grad); color: #fff; box-shadow: 0 14px 30px -12px rgba(104, 101, 237, .7); }
.wz-hero .ic { width: 30px; height: 30px; }
.wz-welcome h2 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.03em; }
.wz-lead { max-width: 46ch; font-size: 15.5px; color: var(--muted); }
.wz-plan { display: grid; gap: 8px; width: 100%; margin: 4px 0 0; padding: 0; list-style: none; text-align: left; }
.wz-plan li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--muted); }
.wz-plan li > .ic { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--p-100); color: var(--p-deep); }
.wz-plan li.is-done > .ic { background: var(--ok-bg); color: var(--ok); }
.wz-plan b { display: block; font-size: 14.5px; color: var(--ink); }
.wz-welcome-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wz-welcome-actions .btn { height: 46px; min-width: 150px; font-size: 15px; }
.wz-never.link { font-weight: 500; color: var(--muted); }

/* Team */
.wz-people { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wz-person { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); animation: wz-in .25s var(--ease); }
.wz-person .avatar { margin-top: 34px; }
.wz-person .icon-btn { margin-top: 29px; }
.wz-person-fields { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .9fr); gap: 10px; min-width: 0; }
.wz-person.is-saved { align-items: center; padding: 10px 14px; background: var(--p-50); box-shadow: none; }
.wz-person.is-saved .avatar { margin-top: 0; }
.wz-person-saved { flex: 1; min-width: 0; }
.wz-person-saved b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wz-person-saved small { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-tick { color: var(--ok); }
.wz-invite-who { display: grid; min-width: 0; }
.wz-invite-who b { font-weight: 500; }
.wz-invite-who small { font-size: 12.5px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }

/* Groups */
.wz-groups { display: grid; gap: 12px; }
.wz-group { display: grid; gap: 12px; padding: 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); animation: wz-in .25s var(--ease); }
.wz-group.is-saved { background: var(--p-50); box-shadow: none; }
.wz-group-head { display: flex; align-items: flex-end; gap: 8px; }
.wz-group-head .field { flex: 1; }
.wz-group-head .icon-btn { margin-bottom: 4px; }
.wz-name-ideas button { height: 28px; font-size: 12.5px; }
.wz-members-title { margin: 0; }
.wz-members label { gap: 6px; padding: 0 12px 0 5px; }

/* First job */
.wz-ask { display: grid; gap: 12px; }
.wz-ask-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; }
.wz-thinking { display: grid; gap: 12px; margin: 0; padding: 18px 20px; border-radius: 16px; background: var(--p-50); list-style: none; }
.wz-thinking li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--faint); }
.wz-thinking li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--p-200); }
.wz-thinking .is-now { color: var(--ink); }
.wz-thinking .is-now::before { border: 2px solid var(--p-200); border-top-color: var(--p); box-shadow: none; animation: auth-spin .7s linear infinite; }
.wz-thinking .is-done { color: var(--ink-2); }
.wz-thinking .is-done::before { background: var(--ok); box-shadow: none; }
.wz-job { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: linear-gradient(180deg, var(--p-50), var(--surface)); box-shadow: inset 0 0 0 1px var(--p-200); animation: pop .3s var(--ease); }
.wz-job-head { display: flex; align-items: center; gap: 12px; }
.wz-job-head > div { flex: 1; min-width: 0; }
.wz-job-head b { display: block; font-size: 16px; }
.wz-job-head small { font-size: 13px; color: var(--muted); }
.wz-job-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--grad); color: #fff; }
.wz-job-item { font-size: 13.5px; color: var(--ink-2); }
.wz-job .link { justify-self: start; }

/* Task order and the phone preview */
.wz-tasks { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 24px; align-items: start; }
.wz-task-list .sort-row { gap: 10px; }
.wz-task-list b { flex: 1; min-width: 0; font-size: 14px; }
.wz-task-n { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--p-100); color: var(--p-deep); font-size: 12px; font-weight: 700; }
.wz-task-who { max-width: 48%; height: 34px; padding: 0 8px; border: 0; border-radius: 10px; background: var(--p-50); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.wz-phone { padding: 9px; border-radius: 34px; background: var(--ink); box-shadow: 0 24px 40px -20px rgba(29, 35, 64, .6); }
.wz-phone-screen { display: grid; gap: 8px; align-content: start; min-height: 390px; padding: 16px 12px; border-radius: 26px; background: var(--bg); }
.wz-phone-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.wz-phone-top b { color: var(--p-deep); }
.wz-phone-label { margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.wz-phone-card { display: grid; gap: 2px; padding: 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 3px 0 0 var(--p), var(--shadow); }
.wz-phone-card small { font-size: 11.5px; color: var(--muted); }
.wz-phone-card b { font-size: 17px; letter-spacing: -.01em; }
.wz-phone-card span { font-size: 11.5px; color: var(--faint); }
.wz-phone-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; margin-top: 10px; border-radius: 10px; background: var(--grad); color: #fff; font-size: 12.5px; font-style: normal; font-weight: 600; }
.wz-phone-btn .ic { width: 14px; height: 14px; }
.wz-phone-next { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wz-phone-next li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface); font-size: 12px; }
.wz-phone-next small { color: var(--muted); }

/* Finish */
.wz-finish { position: relative; justify-items: center; padding-top: 12px; text-align: center; }
.wz-finish h2 { font-size: 28px; letter-spacing: -.03em; }
.wz-summary { display: grid; gap: 8px; width: min(460px, 100%); margin: 0; padding: 0; list-style: none; text-align: left; }
.wz-summary li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.wz-summary .ic { color: var(--faint); }
.wz-summary .is-done .ic { color: var(--ok); }
.wz-summary .link { font-size: 14px; }
.wz-confetti { position: absolute; inset: -24px 0 0; overflow: hidden; pointer-events: none; }
.wz-confetti i { position: absolute; top: -14px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; background: var(--c); opacity: 0; }
.wz.is-party .wz-confetti i { animation: wz-fall 1.9s var(--d) cubic-bezier(.3, .6, .5, 1) forwards; }
@keyframes wz-fall { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(440px) rotate(calc(var(--r) + 400deg)); } }

@media (max-width: 760px) {
  .wz { width: 100vw; height: 100dvh; border-radius: 0; }
  .wz-box { grid-template-columns: minmax(0, 1fr); }
  .wz-rail { display: none; }
  .wz-top { padding: 12px 10px 8px 16px; }
  .wz-bar { margin: 0 16px; }
  .wz-views { padding: 18px 16px 12px; }
  .wz.is-intro .wz-views { padding: 8px 20px 28px; }
  .wz-welcome h2 { font-size: 25px; }
  .wz-welcome-actions { width: 100%; }
  .wz-welcome-actions .btn { flex: 1; min-width: 0; }
  .wz-error { margin: 0 16px 10px; }
  .wz-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .wz-foot .btn-primary { min-width: 0; }
  .wz-person { padding: 12px; }
  .wz-person .avatar { display: none; }
  .wz-person .icon-btn { margin-top: 29px; }
  .wz-person-fields { grid-template-columns: minmax(0, 1fr); }
  .wz-tasks { grid-template-columns: minmax(0, 1fr); }
  .wz-phone { justify-self: center; width: 236px; }
}


:root { --m-soon: #f0a43c; --m-miss: var(--bad); --m-tool: #2fb39b; --m-foam: #c86dd7; }
/* ---------- Jobs dashboard (dashboard-2.php) ----------
   The job board: rows in priority order with a fixed row of markers in front of each job
   (urgent flag, then dots for due date and matching task labels, tool etching, foam
   etching), and the selected job's details beside the list (inline under the row on smaller
   screens). Marker colours: the --m-* tokens at the top. */
.db2-dot { display: inline-grid; place-items: center; width: 12px; height: 12px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); }
.db2-dot.is-on { box-shadow: none; }
.db2-dot.is-soon.is-on { background: var(--m-soon); }
.db2-dot.is-miss.is-on { background: var(--m-miss); }
.db2-dot.is-tool.is-on { background: var(--m-tool); }
.db2-dot.is-foam.is-on { background: var(--m-foam); }
.db2-flag { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--line); }
.db2-flag .ic { width: 16px; height: 16px; stroke-width: 2; }
.db2-flag.is-on { color: var(--bad); }
.db2-flag.is-on .ic { fill: var(--bad); }

.db2-pulse-item { display: inline-flex; align-items: stretch; gap: 0; flex: none; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.db2-pulse-item:hover { box-shadow: inset 0 0 0 1px var(--p-300); }
.db2-pulse-item:has(.db2-pulse-filter[aria-pressed="true"]) { box-shadow: inset 0 0 0 1.5px var(--p), 0 0 0 3px var(--p-100); }
.db2-pulse-item > .db2-pulse-filter { align-items: center; background: transparent; box-shadow: none; transform: none; }
.db2-pulse-item > .db2-pulse-filter:hover, .db2-pulse-item > .db2-pulse-filter[aria-pressed="true"] { box-shadow: none; transform: none; }
.db2-pulse .db2-pulse-edit { display: inline-grid; place-items: center; align-self: center; width: 28px; height: 28px; margin-right: 8px; padding: 0; border-radius: 9px; color: var(--muted); background: transparent; box-shadow: none; }
.db2-pulse .db2-pulse-edit:hover, .db2-pulse .db2-pulse-edit:focus-visible { color: var(--p-deep); background: var(--p-100); }
.db2-pulse-edit .ic { width: 16.8px; height: 16.8px; }
.db2-pulse button > i { align-self: center; }
.db2-task-dot { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.db2-task-dot.is-soon.is-on { color: var(--m-soon); }
.db2-task-dot.is-miss.is-on { color: var(--m-miss); }
.db2-task-dot.is-tool.is-on { color: var(--m-tool); }
.db2-task-dot.is-foam.is-on { color: var(--m-foam); }
.db2-task-dot.is-miss:not(.is-on) { box-shadow: inset 0 0 0 3px var(--m-miss); }
.db2-task-dot.is-tool:not(.is-on) { box-shadow: inset 0 0 0 3px var(--m-tool); }
.db2-task-dot.is-foam:not(.is-on) { box-shadow: inset 0 0 0 3px var(--m-foam); }
.db2-task-dot.is-on .ic { width: 9px; height: 9px; stroke-width: 3; color: #fff; }
.db2-task-dot.is-empty:not(.is-on) { box-shadow: inset 0 0 0 1.5px var(--line); cursor: default; }
.db2-task-dot:not(:disabled):hover, .db2-task-dot:not(:disabled):focus-visible { transform: scale(1.25); outline: 2px solid var(--p-200); outline-offset: 2px; }

.db2-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.db2-head, .db2-row { display: grid; grid-template-columns: 24px 30px 112px minmax(0, 1fr) 104px 160px; align-items: center; gap: 12px; }
.db2-head { padding: 0 12px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.db2-head-marks, .db2-marks { display: flex; align-items: center; gap: 6px; }
.db2-list { margin-top: 2px; }
.db2-row { padding: 10px 12px; cursor: pointer; }
.db2-row.is-urgent { box-shadow: inset 3px 0 0 var(--bad), inset 0 0 0 1px var(--line); }
.db2-row.is-sel { background: var(--p-50); box-shadow: inset 0 0 0 1.5px var(--p); }
.db2-row.is-urgent.is-sel { box-shadow: inset 3px 0 0 var(--bad), inset 0 0 0 1.5px var(--p); }
.db2-row.is-closed { background: #fbfbfe; }
.db2-row.is-closed .jo-job b { color: var(--muted); }
.db2-row .jo-job b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db2-row .jo-job .pill { margin-left: 6px; vertical-align: 1px; }
.db2-prog { display: grid; gap: 4px; min-width: 0; font-size: 12px; color: var(--muted); }
.db2-prog small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db2-prog .link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.db2-prog .link .ic { width: 15px; height: 15px; }
.db2-help { margin-top: 12px; }

/* Details */
.db2-detail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; border-radius: 18px; background: var(--p-50); }
.db2-detail > .empty { padding: 40px 20px; }
.db2-detail-body { display: grid; gap: 16px; padding: 18px; }
.db2-detail-body .eyebrow { margin-bottom: 8px; }
.db2-d-head { display: flex; align-items: flex-start; gap: 10px; }
.db2-d-head > div { flex: 1; min-width: 0; }
.db2-d-head .eyebrow { margin-bottom: 4px; }
.db2-d-head h3 { font-size: 19px; letter-spacing: -.02em; }
.db2-d-head p:last-child { font-size: 13.5px; color: var(--muted); }
.db2-d-close { display: none; }
.db2-why { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.db2-why li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--muted); }
.db2-why li > i, .db2-why li > .ic { margin-top: 3px; }
.db2-why b { display: block; font-size: 13.5px; color: var(--ink); }
.db2-why .is-ok > .ic { color: var(--ok); }
.db2-why .is-quiet { color: var(--faint); }
.db2-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.db2-facts div { padding: 9px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.db2-facts dt { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.db2-facts dd { margin: 0; font-size: 14px; font-weight: 600; }
.db2-items { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.db2-items li { display: flex; gap: 10px; font-size: 13.5px; }
.db2-items b { min-width: 44px; font-variant-numeric: tabular-nums; color: var(--p-deep); }
.db2-items small { display: block; font-size: 12px; color: var(--muted); }
.db2-detail-body .opts { background: var(--surface); }
.db2-detail-body .opt > i { margin: 0 2px; }
.db2-d-acts { padding-top: 4px; }

@media (max-width: 1280px) {
  .db2-split { grid-template-columns: minmax(0, 1fr) 340px; }
  .db2-head, .db2-row { grid-template-columns: 24px 30px 112px minmax(0, 1fr) 100px; }
  .db2-head > :last-child, .db2-row .db2-prog { display: none; }
}
@media (max-width: 1099px) {
  .db2-split { grid-template-columns: minmax(0, 1fr); }
  .db2-head, .db2-row { grid-template-columns: 24px 30px 112px minmax(0, 1fr) 108px 170px; }
  .db2-head > :last-child, .db2-row .db2-prog { display: grid; }
  .db2-inline { margin: -2px 0 8px; border-radius: 16px; background: var(--p-50); box-shadow: inset 0 0 0 1.5px var(--p-200); }
  .db2-d-close { display: grid; }
}
@media (max-width: 760px) {
  .db2-head { display: none; }
  .db2-row { grid-template-columns: 20px 28px minmax(0, 1fr) auto; grid-template-areas: "grip pos job job" "grip pos marks due" "grip pos prog prog"; row-gap: 8px; column-gap: 10px; padding: 12px 10px; }
  .db2-row > :first-child { grid-area: grip; }
  .db2-row .jo-pos { grid-area: pos; }
  .db2-row .db2-marks { grid-area: marks; }
  .db2-row .jo-job { grid-area: job; }
  .db2-row .job-due { grid-area: due; text-align: right; }
  .db2-row .db2-prog { grid-area: prog; }
  .db2-facts { grid-template-columns: minmax(0, 1fr); }
  .db2-detail-body { padding: 14px 12px; }
}