/* Dense forms (.erp-dense): the ERP product form has ~100 fields; keep them tight. */
.erp-dense .fi-section-content-ctn{padding:.75rem 1rem!important}
.erp-dense .fi-section-header{padding:.5rem 1rem!important}
.erp-dense .fi-section-header-heading{font-size:.9rem!important}
.erp-dense .fi-section-header-description{font-size:.72rem!important}
.erp-dense .fi-grid,.erp-dense .fi-section-content{gap:.5rem .75rem!important;row-gap:.5rem!important}
.erp-dense .fi-fo-field{gap:.15rem!important}
.erp-dense .fi-fo-field-label-content{font-size:.78rem!important;font-weight:600}
.erp-dense .fi-input,.erp-dense .fi-select-input{font-size:.85rem!important;padding-top:.35rem!important;padding-bottom:.35rem!important}
.erp-dense .fi-input-wrp{min-height:2.1rem}
.erp-dense .fi-fo-field-helper-text,.erp-dense .fi-fo-field-hint{font-size:.7rem!important;line-height:1.2}
.erp-dense textarea.fi-input{line-height:1.3}
.erp-dense .fi-fo-toggle{padding-top:.2rem}
/* file dropzone: a tiny bar, not a big empty box (Jake, 2026-09-08). Dropping
   anywhere on it still works — the bar is the target, it just stopped eating
   half the screen. */
.fi-fo-file-upload .filepond--root{min-height:1.85rem!important;margin-bottom:0}
.fi-fo-file-upload .filepond--drop-label{min-height:1.85rem!important;font-size:.72rem;padding:0 .5rem}
.fi-fo-file-upload .filepond--drop-label label{padding:.15rem 0}
.fi-fo-file-upload .filepond--panel-root{border-radius:.45rem}
.fi-fo-file-upload .filepond--list-scroller{margin-top:.2rem}
/* FilePond's own footer credit, on a 30px bar, is noise. */
.fi-fo-file-upload .filepond--credits{display:none!important}

/* Uploaded pictures: a contact sheet of thumbnails, not a wall of tiles. The
   filepond grid sizes its items off --erp-thumb, so one number changes them all.
   GRID ponds only (product images, supplier files). The plain list ponds — task
   attachments, order proofs / artwork / PO / labels — keep Filament's full-width
   rows with the file name; the unscoped version of these rules squeezed every one
   of them into a nameless 80px tile with its buttons stacked over the drop bar
   (Jake, 2026-09-16: "the format seems distorted"). */
.fi-fo-file-upload .filepond--root[data-style-panel-layout~="grid"] .filepond--item{--erp-thumb:88px;width:calc(var(--erp-thumb) - 0.5em)!important}
.fi-fo-file-upload .filepond--root[data-style-panel-layout~="grid"] .filepond--file-info,
.fi-fo-file-upload .filepond--root[data-style-panel-layout~="grid"] .filepond--file-status{display:none!important}
.fi-fo-file-upload .filepond--root[data-style-panel-layout~="grid"] .filepond--file-action-button{width:1.25em;height:1.25em}
/* Task attachments: the same thumbnail grid, a little larger, with the file name kept —
   a task can carry a PDF or artwork file that is only its name (Jake, 2026-10-09:
   "make the attached pictures smaller, more dense"). */
.fi-fo-file-upload.erp-files-named .filepond--root[data-style-panel-layout~="grid"] .filepond--item{--erp-thumb:136px}
.fi-fo-file-upload.erp-files-named .filepond--root[data-style-panel-layout~="grid"] .filepond--file-info{display:flex!important;font-size:.7rem}

/* Timesheet: rows not yet paid. Beats the striped / hover backgrounds. */
html:not(.dark) .fi-ta-row.erp-row-unpaid{background:#fff4e5!important}
html:not(.dark) .fi-ta-row.erp-row-unpaid:hover{background:#ffe8c7!important}
html.dark .fi-ta-row.erp-row-unpaid{background:rgba(245,158,11,.16)!important}

/* The inline comment box on a task (Jake, 2026-09-11): write where you read,
   no modal. Marked when it holds an existing comment so it is obvious you are
   editing rather than adding. */
.erp-comment-composer { padding: 0 0 1rem; border-bottom: 1px solid rgb(228 228 231); }
.erp-comment-composer--editing { border-left: 4px solid rgb(245 158 11); padding-left: .9rem; }
.erp-comment-composer__title { font-weight: 600; font-size: .875rem; margin: 0 0 .6rem; color: rgb(63 63 70); }
.erp-comment-composer--editing .erp-comment-composer__title { color: rgb(180 83 9); }
.erp-comment-composer__actions { display: flex; align-items: center; gap: .6rem; margin-top: .85rem; }
.erp-comment-composer__busy { font-size: .8rem; color: rgb(113 113 122); }
.dark .erp-comment-composer { border-bottom-color: rgb(63 63 70); }
.dark .erp-comment-composer__title { color: rgb(212 212 216); }
.dark .erp-comment-composer--editing .erp-comment-composer__title { color: rgb(252 211 77); }

/* The box a line is added or changed in, inside the Line items table (Jake, 2026-10-05:
   "when add line, please don't popup, just edit/add inline"). Amber edge = changing a line. */
.erp-line-box { margin: 0 1rem .9rem; padding: .7rem .9rem .8rem; border: 1px solid rgb(228 228 231); border-left: 4px solid var(--primary-500); border-radius: .6rem; background: rgb(250 250 250); }
.erp-line-box--editing { border-left-color: rgb(245 158 11); }
.erp-line-box__title { font-weight: 600; font-size: .8rem; margin: 0 0 .5rem; color: rgb(63 63 70); }
.erp-line-box--editing .erp-line-box__title { color: rgb(180 83 9); }
.erp-line-box__actions { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; }
.erp-line-box__busy { font-size: .8rem; color: rgb(113 113 122); }
.dark .erp-line-box { background: rgb(24 24 27); border-color: rgb(63 63 70); border-left-color: var(--primary-500); }
.dark .erp-line-box--editing { border-left-color: rgb(245 158 11); }
.dark .erp-line-box__title { color: rgb(212 212 216); }
.dark .erp-line-box--editing .erp-line-box__title { color: rgb(252 211 77); }

/* Order line items (.erp-lines): the same compact grid the Yorkn ERP uses, so a
   ten-line order fits on a screen instead of scrolling (Jake, 2026-09-11). Kept
   self-contained — the order form is not wrapped in .erp-dense. */
/* Denser again (Jake, 2026-09-13: "make each line more dense for all users"): the Products
   repeater and the Edit line dialog (.erp-lines), and the Lines table rows (.erp-line-row). */
.erp-lines .fi-fo-repeater-items{gap:.35rem!important}
.erp-lines .fi-fo-repeater-item{padding:.3rem .6rem .4rem!important;border-radius:.5rem}
.erp-lines .fi-fo-repeater-item-header{padding:0 0 .15rem!important;min-height:0}
.erp-lines .fi-fo-repeater-item-header-label{font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500)}
.erp-lines .fi-fo-field-label,.erp-lines .fi-fo-field-wrp-label,.erp-lines .fi-fo-field-label-content{font-size:.66rem!important;line-height:1.1!important;color:var(--gray-500)}
.erp-lines .fi-grid,.erp-lines .fi-sc,.erp-lines .fi-fo-repeater-item-content .fi-grid{gap:.3rem .45rem!important}
.erp-lines .fi-fo-field{gap:.05rem!important}
.erp-lines .fi-input,.erp-lines .fi-select-input{font-size:.8rem!important;padding-top:.2rem!important;padding-bottom:.2rem!important}
.erp-lines .fi-input-wrp{min-height:1.8rem}
.erp-lines .fi-fo-field-helper-text,.erp-lines .fi-fo-field-hint{font-size:.65rem!important;line-height:1.15;margin-top:0!important}
.erp-lines textarea.fi-input{line-height:1.25}
.erp-lines .fi-section-header{padding:.35rem .75rem!important}
.erp-lines .fi-section-content-ctn{padding:.5rem .75rem!important}
.erp-line-row .fi-ta-cell{padding-top:.2rem!important;padding-bottom:.2rem!important}
.erp-line-row .fi-ta-text{padding-top:0!important;padding-bottom:0!important;font-size:.82rem}

/* The switches on a catalogue card (Jake, 2026-09-11): publish to SAGE/ASI,
   show on the website, stocked here. Green when on, grey when off, and plainly
   unavailable when the rule says somebody else decides. */
.oc-switches { display: flex; flex-wrap: wrap; gap: .4rem; margin: .55rem 0 0; }
.oc-sw { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgb(212 212 216);
    background: #fff; color: rgb(82 82 91); border-radius: 999px; padding: .2rem .65rem;
    font-size: 11px; font-weight: 700; letter-spacing: .01em; cursor: pointer; line-height: 1.6; }
.oc-sw:hover { border-color: rgb(161 161 170); }
.oc-sw .oc-sw-dot { width: 8px; height: 8px; border-radius: 999px; background: rgb(212 212 216); }
.oc-sw.on { border-color: rgb(34 197 94); color: rgb(21 128 61); background: rgb(240 253 244); }
.oc-sw.on .oc-sw-dot { background: rgb(34 197 94); }
.oc-sw.locked, .oc-sw[disabled] { cursor: not-allowed; opacity: .55; }
/* Patent Issue switch (Jake, 2026-10-29): red when on, not green. */
.oc-sw.ip.on { border-color: rgb(220 38 38); color: rgb(185 28 28); background: rgb(254 242 242); }
.oc-sw.ip.on .oc-sw-dot { background: rgb(220 38 38); }
.dark .oc-sw.ip.on { background: rgb(60 20 20); border-color: rgb(248 113 113); color: rgb(252 165 165); }
.dark .oc-sw { background: rgb(39 39 42); border-color: rgb(63 63 70); color: rgb(212 212 216); }
.dark .oc-sw.on { background: rgb(20 44 30); border-color: rgb(34 197 94); color: rgb(134 239 172); }

/* Product order history under the product name (Jake, 2026-09-18): how many
   orders this item has had, and how long they take to ship. The orders card
   follows the signed-in user's accent (UserTheme); Delite amber is the
   fallback when no --primary is set. */
.erp-prodstats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.erp-prodstat {
    display: flex; flex-direction: column; gap: .05rem;
    padding: .35rem .7rem; border-radius: .7rem; line-height: 1.25;
    border: 1px solid rgb(228 228 231); background: #fff;
    box-shadow: 0 1px 2px rgba(24, 24, 27, .06);
}
.erp-prodstat b { font-size: .95rem; font-weight: 800; color: rgb(39 39 42); }
.erp-prodstat i { font-style: normal; font-size: .7rem; color: rgb(113 113 122); }
a.erp-prodstat { text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
a.erp-prodstat:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(24, 24, 27, .16); }
.erp-prodstat-orders {
    border-color: color-mix(in srgb, var(--primary-600, #d97706) 35%, transparent);
    background: color-mix(in srgb, var(--primary-500, #f59e0b) 9%, #fff);
}
.erp-prodstat-orders b { color: color-mix(in srgb, var(--primary-600, #d97706) 88%, #000); }
.erp-prodstat-time { border-color: rgba(22, 163, 74, .35); background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%); }
.erp-prodstat-time b { color: #15803d; }
.dark .erp-prodstat { border-color: rgb(63 63 70); background: rgb(39 39 42); box-shadow: none; }
.dark .erp-prodstat b { color: rgb(244 244 245); }
.dark .erp-prodstat i { color: rgb(161 161 170); }
.dark .erp-prodstat-orders {
    border-color: color-mix(in srgb, var(--primary-400, #fbbf24) 45%, transparent);
    background: color-mix(in srgb, var(--primary-500, #f59e0b) 18%, rgb(39 39 42));
}
.dark .erp-prodstat-orders b { color: color-mix(in srgb, var(--primary-300, #fcd34d) 90%, #fff); }
.dark .erp-prodstat-time { border-color: rgba(34, 197, 94, .4); background: rgba(22, 163, 74, .18); }
.dark .erp-prodstat-time b { color: rgb(187 247 208); }

/* Full-screen dialogs (Edit line, Add line): Filament fixes them at 100dvh with no
   scroll, so on a shorter screen a tall line pushed Save off the bottom
   (Jake, 2026-09-21). The body scrolls; header and Save bar stay put. */
.fi-modal.fi-width-screen>.fi-modal-window-ctn>.fi-modal-window .fi-modal-content{min-height:0;overflow-y:auto}
.fi-modal.fi-width-screen>.fi-modal-window-ctn>.fi-modal-window>.fi-modal-header,
.fi-modal.fi-width-screen>.fi-modal-window-ctn>.fi-modal-window>.fi-modal-footer{flex-shrink:0}
/* A select inside a dialog section can open UPWARDS and lose its top rows: the
   section clips its overflow, so the picker sees only a sliver of room below the
   field and flips (hit on the Yorkn Add line > Product picker, 2026-09-22).
   Sections in a dialog do not need to clip - the dialog body does the scrolling. */
.fi-modal .fi-section{overflow:visible}

/* Newsletter body editors: a tall writing area, all of it clickable (2026-09-21) */
.nl-editor-tall .fi-fo-rich-editor-content { min-height: 38rem; display: flex; flex-direction: column; }
.nl-editor-tall .fi-fo-rich-editor-content .tiptap { flex: 1; min-height: 36rem; }
.nl-editor-tall.nl-editor-medium .fi-fo-rich-editor-content { min-height: 30rem; }
.nl-editor-tall.nl-editor-medium .fi-fo-rich-editor-content .tiptap { min-height: 28rem; }
/* Newsletter preview beside the body: stays in view while the long form scrolls */
@media (min-width: 80rem) {
    /* Filament wraps it in .fi-grid-col > .fi-sc-component; stretch that wrapper to the row so sticky has room to travel */
    .fi-grid-col:has(> .fi-sc-component > .nl-preview-sticky) > .fi-sc-component { height: 100%; }
    .nl-preview-sticky { position: sticky; top: 4.5rem; }
}

/* Page-header buttons wrap onto a second line instead of running off the right edge.
   Filament makes the actions box shrink-0, so on a laptop an order with ten header
   buttons pushed "Packing slip" out of view (Jake, 2026-09-23). */
.fi-header{align-items:flex-start!important}
.fi-header-actions-ctn{flex-shrink:1!important;flex-wrap:wrap!important;min-width:0;justify-content:flex-end;row-gap:.5rem}
.fi-header-actions-ctn>.fi-ac{flex-wrap:wrap!important;justify-content:flex-end!important;row-gap:.5rem}

/* "Pay with Wise" on the timesheet (Jake, 2026-10-04): Delite forest pill, maple on hover;
   the dialog's Send is the same pill, Cancel a ghost pill. */
.dl-wise-btn,.fi-modal .dl-wise-send{background:linear-gradient(135deg,#2f5a3f 0%,#1f3d2b 100%)!important;color:#fff!important;border:0!important;border-radius:999px!important;font-weight:700!important;letter-spacing:.01em;box-shadow:0 4px 14px rgba(31,61,43,.28)!important;transition:transform .15s ease,box-shadow .15s ease,background .15s ease!important}
.dl-wise-btn:hover,.fi-modal .dl-wise-send:hover{transform:translateY(-1px);background:linear-gradient(135deg,#b5541c 0%,#8f3f12 100%)!important;box-shadow:0 8px 20px rgba(181,84,28,.32)!important}
.dl-wise-btn .fi-icon,.fi-modal .dl-wise-send .fi-icon{color:#fff!important}
.fi-modal .dl-wise-send{padding-left:1.4rem!important;padding-right:1.4rem!important}
.fi-modal .dl-wise-cancel{border-radius:999px!important;background:transparent!important;box-shadow:inset 0 0 0 1px #e3ddcf!important;color:#1f3d2b!important;font-weight:600!important}
html.dark .fi-modal .dl-wise-cancel{color:#cfe3d2!important;box-shadow:inset 0 0 0 1px rgba(227,221,207,.25)!important}
/* Product edit: Save Changes floats on the right edge of the screen (Jake, 2026-10-11) */
.fi-btn.erp-float-save{position:fixed!important;right:1.25rem;top:auto;bottom:1.5rem;transform:none;z-index:40;border-radius:999px!important;padding:.8rem 1.4rem!important;font-weight:800!important;font-size:.95rem!important;color:#fff!important;background:linear-gradient(135deg,#0a6fe0 0%,#7c3aed 100%)!important;box-shadow:0 10px 26px rgba(10,111,224,.38),0 2px 6px rgba(0,0,0,.12)!important;transition:transform .15s ease,box-shadow .15s ease}
.fi-btn.erp-float-save:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(124,58,237,.42),0 3px 8px rgba(0,0,0,.14)!important}
.fi-btn.erp-float-save .fi-icon,.fi-btn.erp-float-save .fi-btn-label{color:#fff!important}
@media (max-width:640px){.fi-btn.erp-float-save{top:auto;bottom:1rem;right:1rem;transform:none}.fi-btn.erp-float-save:hover{transform:translateY(-2px)}}
/* Save sits bottom-right (2026-10-21): mid-height it covered the section header buttons, e.g. Add location on Locations & stock. */
/* Order page tab row: Line Items · Customer Payments · Logistics Payments · Printer Payments (2026-10-11) */
.erp-relation-tabs>.fi-tabs{background:#fbf8f1;border:1px solid #e7dfcf;border-radius:14px;padding:4px;gap:2px}
.erp-relation-tabs>.fi-tabs .fi-tabs-item{border-radius:10px;font-weight:700}
.erp-relation-tabs>.fi-tabs .fi-tabs-item.fi-active{background:linear-gradient(135deg,#2f5a3f 0%,#1f3d2b 100%);color:#fff}
.erp-relation-tabs>.fi-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,.erp-relation-tabs>.fi-tabs .fi-tabs-item.fi-active .fi-icon{color:#fff}
.erp-relation-tabs>.fi-tabs .fi-tabs-item.fi-active .fi-badge{background:#f4e3c3;color:#1f3d2b}
.dl-ledger-file{color:#2f5a3f;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.dl-pay-btn,.fi-modal .dl-pay-send{background:linear-gradient(135deg,#2f5a3f 0%,#1f3d2b 100%)!important;color:#fff!important;border:0!important;border-radius:999px!important;font-weight:700!important;box-shadow:0 4px 14px rgba(31,61,43,.28)!important;transition:transform .15s ease,box-shadow .15s ease,background .15s ease!important}
.dl-pay-btn:hover,.fi-modal .dl-pay-send:hover{transform:translateY(-1px);background:linear-gradient(135deg,#b5541c 0%,#8f3f12 100%)!important;box-shadow:0 8px 20px rgba(181,84,28,.32)!important}
.dl-pay-btn .fi-icon,.fi-modal .dl-pay-send .fi-icon{color:#fff!important}
.fi-modal .dl-pay-send{padding-left:1.4rem!important;padding-right:1.4rem!important}
/* Product view / edit header: Copy To Yorkn under Duplicate, the other buttons beside them (Jake, 2026-10-12).
   Labels never wrap (the squeezed grid broke "Mark as direct import" over 3 lines, Jake 2026-10-13).
   Wide header: the stacked grid, full width; narrower: the buttons wrap in rows instead. The header itself
   never wraps, or the actions would fall below the open Director's view. */
.fi-header:has(.dl-act-copy-yorkn){container-type:inline-size}
.fi-header:has(.dl-act-copy-yorkn)>:first-child{min-width:0;flex:1 1 0}
.fi-header .fi-ac:has(> .dl-act-copy-yorkn) > *{white-space:nowrap}
@container (min-width:1700px){
.fi-header-actions-ctn:has(.dl-act-copy-yorkn){flex-shrink:0!important}
.fi-header .fi-ac:has(> .dl-act-copy-yorkn){display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:auto auto;align-items:center;gap:6px .75rem}
.fi-header .fi-ac:has(> .dl-act-copy-yorkn) > *{grid-row:span 2}
.fi-header .fi-ac:has(> .dl-act-copy-yorkn) > .dl-act-duplicate,
.fi-header .fi-ac:has(> .dl-act-copy-yorkn) > .dl-act-copy-yorkn{grid-row:auto;justify-self:stretch}
}
@container (max-width:1699.98px){.fi-header-actions-ctn:has(.dl-act-copy-yorkn){max-width:50%}}

/* Products cards: "Lookalikes" tag hanging under each photo (Jake, 2026-10-16) - shows the cards that look like it. */
.dl-sim-wrap{display:flex;flex-direction:column;align-items:center;flex:none;gap:0}
.dl-sim-tag{display:inline-flex;align-items:center;gap:4px;margin-top:-9px;position:relative;z-index:1;padding:2px 9px;border-radius:0 10px 0 10px;background:#e9efe6;color:#1e3d2b;border:1px solid #c9d6c7;font-size:11px;font-weight:700;letter-spacing:.01em;white-space:nowrap;box-shadow:0 1px 3px rgba(31,42,34,.12);cursor:pointer;transition:background .15s,color .15s,transform .15s}
.dl-sim-tag:hover,.dl-sim-tag:focus-visible{background:#1e3d2b;color:#fff;border-color:#1e3d2b;transform:translateY(-1px);outline:none}
.dl-sim-tag:disabled{opacity:.6;cursor:progress}
html.dark .dl-sim-tag{background:rgba(139,164,140,.18);color:#cfe0cf;border-color:rgba(139,164,140,.35)}


/* ---------- Tasks board, Delite's own take on the Todoist idea (Jake, 2026-10-18: "apply to delite task as
   well"). Markup from ErpTasksTable + TaskBoard (dl-*). A warm paper sheet, Fraunces day headings on a
   timeline rail, square check tiles, note cards for comments. Scoped to the tasks pages. ---------- */
.fi-resource-erp-tasks{--dl-forest:#1f5b45;--dl-maple:#b3412b;--dl-amber:#b45309;--dl-sage:#7f8f85;--dl-ink:#24231f;--dl-ink-2:#5c5a53;--dl-ink-3:#8f8c83;--dl-line:#ebe6db;--dl-paper:#fbf9f4;--dl-cream:#f6f3ec;--dl-hover:#f3efe6;--dl-tint:#fdf1ea;--dl-serif:"Fraunces",Georgia,"Times New Roman",serif}
html.dark .fi-resource-erp-tasks{--dl-ink:#ecebe6;--dl-ink-2:#b8b5ac;--dl-ink-3:#807d75;--dl-line:#2d2c28;--dl-paper:#1a1a18;--dl-cream:#141412;--dl-hover:#222220;--dl-tint:rgba(179,65,43,.16)}

/* heading in Fraunces, summary under it */
.fi-resource-erp-tasks .fi-header-heading{font-family:var(--dl-serif)!important;font-size:2rem!important;font-weight:600!important;letter-spacing:-.01em;color:var(--dl-ink)!important}
.fi-resource-erp-tasks .fi-header-subheading{color:var(--dl-ink-3)!important;font-size:.9rem}

/* tabs: a paper strip, the current one forest with a maple underline */
.fi-resource-erp-tasks .fi-tabs{background:var(--dl-cream)!important;border:1px solid var(--dl-line)!important;border-radius:12px!important;padding:.3rem!important;gap:.15rem;flex-wrap:wrap}
.fi-resource-erp-tasks .fi-tabs-item{border-radius:8px!important;padding:.4rem .75rem!important;font-weight:600;color:var(--dl-ink-2)!important;position:relative}
.fi-resource-erp-tasks .fi-tabs-item:hover{background:var(--dl-hover)!important}
.fi-resource-erp-tasks .fi-tabs-item.fi-active,.fi-resource-erp-tasks .fi-tabs-item-active{background:var(--dl-paper)!important;box-shadow:0 1px 2px rgba(0,0,0,.06)!important}
.fi-resource-erp-tasks .fi-tabs-item.fi-active .fi-tabs-item-label,.fi-resource-erp-tasks .fi-tabs-item-active .fi-tabs-item-label{color:var(--dl-forest)!important}
.fi-resource-erp-tasks .fi-tabs-item.fi-active:after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.2rem;height:2px;border-radius:2px;background:var(--dl-maple)}
.fi-resource-erp-tasks .fi-tabs-item .fi-badge{background:transparent!important;color:var(--dl-ink-3)!important;padding:0!important;font-size:.72rem!important;font-weight:700!important;box-shadow:none!important;--tw-ring-color:transparent}
.fi-resource-erp-tasks .fi-tabs-item.fi-active .fi-badge{color:var(--dl-maple)!important}

/* the sheet */
.dl-board.fi-ta-ctn{border-radius:14px!important;overflow:hidden}
html:not(.dark) .dl-board.fi-ta-ctn{background:var(--dl-paper);border:1px solid var(--dl-line)!important;box-shadow:0 10px 30px rgba(60,40,10,.06)!important}
html.dark .dl-board.fi-ta-ctn{background:var(--dl-paper)}
.dl-board .fi-ta-header-toolbar{background:transparent!important}
.dl-board .fi-ta-header .fi-btn.fi-color-primary{background:var(--dl-forest)!important;border-color:var(--dl-forest)!important;color:#fff!important;border-radius:999px!important;box-shadow:0 6px 16px rgba(31,91,69,.28)!important;transition:transform .12s ease,box-shadow .15s ease,background .15s ease}
.dl-board .fi-ta-header .fi-btn.fi-color-primary:hover{background:var(--dl-maple)!important;border-color:var(--dl-maple)!important;transform:translateY(-1px);box-shadow:0 10px 22px rgba(179,65,43,.32)!important}
.dl-board .fi-ta-content{gap:0!important;padding:0 1.25rem .75rem 1.25rem!important}
.dl-board .fi-ta-content>:not(:last-child){border-color:transparent!important}
.dl-board .fi-ta-content-header{background:transparent!important;padding-block:0!important;min-height:0}
.dl-board .fi-ta-content-header .fi-ta-page-checkbox{margin-block:.45rem!important;opacity:.45}
.dl-board .fi-ta-content-header .fi-ta-page-checkbox:hover,.dl-board .fi-ta-content-header .fi-ta-page-checkbox:checked{opacity:1}

/* day headings: Fraunces on a timeline rail; the rows hang off the same rail */
.dl-board .fi-ta-group-header{background:transparent!important;border:0!important;margin:1.1rem 0 .15rem!important;width:100%!important;padding:.3rem 0 .3rem 1.75rem!important;position:relative;border-radius:0!important}
.dl-board .fi-ta-group-header:first-child{margin-top:.35rem!important}
.dl-board .fi-ta-group-header:before{content:"";position:absolute;left:.42rem;top:50%;width:.7rem;height:.7rem;margin-top:-.35rem;border-radius:50%;background:var(--dl-maple);box-shadow:0 0 0 4px var(--dl-tint)}
.dl-board .fi-ta-group-heading{font-family:var(--dl-serif)!important;font-size:1.1rem!important;font-weight:600!important;color:var(--dl-ink)!important;letter-spacing:-.01em}
.dl-board .fi-ta-group-header .fi-icon-btn{margin-inline-start:auto;color:var(--dl-ink-3)}

/* rows: cards on the rail */
.dl-board .fi-ta-record{position:relative;margin:.2rem 0 .2rem 1.75rem!important;border-radius:12px!important;background:#fff!important;border:1px solid var(--dl-line)!important;box-shadow:0 1px 2px rgba(60,40,10,.04)!important;transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease}
html.dark .dl-board .fi-ta-record{background:#201f1c!important}
.dl-board .fi-ta-record:before{content:"";position:absolute;left:-1.33rem;top:-.4rem;bottom:-.4rem;width:2px;background:var(--dl-line)}
.dl-board .fi-ta-record:hover{transform:translateX(2px);box-shadow:0 8px 22px rgba(60,40,10,.09)!important;border-color:#dcd4c3!important}
.dl-board .fi-ta-record.fi-selected{background:var(--dl-tint)!important;border-color:var(--dl-maple)!important}
.dl-board .fi-ta-record.fi-selected:before{background:var(--dl-maple)!important;border-radius:2px}
.dl-board .fi-ta-record-checkbox{margin-inline-start:.25rem;opacity:.35;transition:opacity .12s}
.dl-board .fi-ta-record:hover .fi-ta-record-checkbox,.dl-board .fi-ta-record-checkbox:checked{opacity:1}
.dl-board .fi-ta-record-content{padding:.7rem .75rem .7rem .4rem!important;display:block}
.dl-board .fi-ta-split{gap:.9rem!important;align-items:flex-start!important}
.dl-board .dl-col{display:flex;align-items:center;width:auto!important}
.dl-board .fi-ta-text{padding:0!important;gap:0!important}
.dl-board .fi-ta-text-item{display:block}
.dl-board .fi-ta-col{width:auto;min-width:0}
.dl-board .fi-ta-col.fi-growable{width:100%;min-width:0}
.dl-board .fi-ta-text.fi-wrapped .fi-ta-text-item{white-space:normal}

/* the check tile: a rounded square, priority ring while To Do, filled after */
.dl-check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;border:2px solid var(--dl-c);background:color-mix(in srgb,var(--dl-c) 8%,#fff);color:var(--dl-c);flex:0 0 auto;margin-top:1px;transition:transform .12s ease,background .12s ease,box-shadow .12s ease}
.dl-check svg{width:12px;height:12px;opacity:0;transition:opacity .12s ease}
.dl-col-check{padding:.1rem .15rem;cursor:pointer}
.dl-col-check:hover .dl-check{transform:scale(1.1) rotate(-4deg);box-shadow:0 0 0 4px color-mix(in srgb,var(--dl-c) 18%,transparent)}
.dl-col-check:hover .dl-check svg{opacity:1}
.dl-check--done{background:var(--dl-c);color:#fff}
.dl-check--done svg{opacity:1}
.dl-col-check:hover .dl-check--done{background:color-mix(in srgb,var(--dl-c) 78%,#fff)}

/* the task card */
.dl-col-card{align-items:flex-start!important}
.dl-card{min-width:0;display:flex;flex-direction:column;gap:.18rem;padding:.05rem 0}
.dl-title{font-size:.95rem;font-weight:600;color:var(--dl-ink);line-height:1.35;overflow-wrap:anywhere}
.dl-card--done .dl-title{color:var(--dl-ink-3);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--dl-ink-3) 60%,transparent)}
.dl-snippet{font-size:.78rem;color:var(--dl-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72ch;line-height:1.35}
.dl-meta{display:flex;flex-wrap:wrap;gap:.2rem .75rem;align-items:center;margin-top:.1rem}
.dl-meta>span{display:inline-flex;align-items:center;gap:.28rem;font-size:.73rem;font-weight:500;color:var(--dl-c,var(--dl-ink-3));line-height:1.3;white-space:nowrap}
.dl-meta svg{width:12px;height:12px;flex:0 0 auto}
.dl-meta .dl-sku{cursor:pointer}
.dl-meta .dl-sku b{font-weight:700;color:var(--dl-forest)}
.dl-meta .dl-sku:hover{color:var(--dl-forest);text-decoration:underline}
.dl-meta .dl-sku--plain{cursor:default}
.dl-meta .dl-id{color:var(--dl-ink-3);opacity:.7;font-variant-numeric:tabular-nums}

/* chips: status (dot) and priority (flag) */
.dl-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .65rem;border-radius:8px;font-size:.72rem;font-weight:600;line-height:1.2;color:var(--dl-c);background:color-mix(in srgb,var(--dl-c) 10%,#fff);border:1px solid color-mix(in srgb,var(--dl-c) 28%,#fff);white-space:nowrap;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
html.dark .dl-chip{background:color-mix(in srgb,var(--dl-c) 18%,#1a1a18);border-color:color-mix(in srgb,var(--dl-c) 35%,#1a1a18)}
.dl-chip i{width:7px;height:7px;border-radius:50%;background:var(--dl-c);box-shadow:0 0 0 2px color-mix(in srgb,var(--dl-c) 22%,transparent)}
.dl-chip svg{width:12px;height:12px}
button.fi-ta-col:hover .dl-chip{transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--dl-c) 30%,transparent);background:color-mix(in srgb,var(--dl-c) 16%,#fff)}
.dl-flag--low{opacity:.75}
.dl-col-status,.dl-col-flag{margin-top:.15rem}

/* people: square avatar tile + name, owner in small print */
.dl-people{display:inline-flex;align-items:center;gap:.5rem;min-width:9.5rem;max-width:14rem}
.dl-avatar{width:32px;height:32px;border-radius:9px;background:var(--dl-c);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.02em;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 2px 6px rgba(0,0,0,.14)}
.dl-avatar--none{background:transparent;border:1.5px dashed #c9c3b5;color:#b0aa9c;box-shadow:none}
.dl-people-names{display:flex;flex-direction:column;line-height:1.22;min-width:0}
.dl-people-names b{font-size:.8rem;font-weight:600;color:var(--dl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-people-names small{font-size:.68rem;color:var(--dl-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.fi-ta-col:hover .dl-avatar{transform:scale(1.06);transition:transform .12s ease}
.dl-col-files{opacity:.85;transition:opacity .12s ease}
.fi-ta-record:hover .dl-col-files{opacity:1}
@media (max-width:767px){.dl-board .fi-ta-split{gap:.45rem!important}.dl-people{min-width:0}.dl-snippet{max-width:100%}}

/* ---------- Task page: form left, comments right (EditErpTask::content, 2026-10-18). The thread column stays on
   screen while the form scrolls, so the comment box is never below the fold. ---------- */
@media (min-width:1280px){
  .dl-edit-side{position:sticky;top:1rem;align-self:start;max-height:calc(100vh - 2rem);overflow-y:auto;overscroll-behavior:contain;padding:2px;scrollbar-width:thin}
}
.dl-edit-side .fi-ta-ctn{border-radius:14px!important;overflow:hidden}
html:not(.dark) .dl-edit-side .fi-ta-ctn{background:#fbf9f4;border:1px solid #ebe6db!important;box-shadow:0 10px 30px rgba(60,40,10,.06)!important}
.dl-edit-side .fi-ta-header-ctn{border:0!important}
.dl-edit-side .fi-ta-header{padding:1rem 1.1rem .25rem!important;display:block!important}
.dl-thread-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.dl-thread-title{display:inline-flex;align-items:center;gap:.5rem;font-family:"Fraunces",Georgia,serif;font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:#24231f;margin:0}
html.dark .dl-thread-title{color:#ecebe6}
.dl-thread-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .45rem;border-radius:8px;background:#1f5b45;color:#fff;font-family:Inter,ui-sans-serif,sans-serif;font-size:.72rem;font-weight:700}
.dl-edit-side .erp-comment-composer{padding:.85rem .9rem 1rem!important;border:1px solid #ebe6db!important;border-radius:12px;background:#fff;margin-bottom:.25rem}
html.dark .dl-edit-side .erp-comment-composer{background:#201f1c;border-color:#2d2c28!important}
.dl-edit-side .erp-comment-composer--editing{border-left:4px solid #b45309!important;padding-left:.9rem!important;background:#fff8ee}
.dl-edit-side .erp-comment-composer__title{font-size:.72rem!important;text-transform:uppercase;letter-spacing:.08em;color:#8f8c83!important;margin-bottom:.45rem!important}
.dl-edit-side .erp-comment-composer--editing .erp-comment-composer__title{color:#b45309!important}
.dl-edit-side .erp-comment-composer textarea.fi-input{min-height:6rem;line-height:1.45;font-size:.9rem}
.dl-edit-side .erp-comment-composer .fi-fo-field-label-content{font-size:.72rem!important;color:#8f8c83}
.dl-edit-side .erp-comment-composer .fi-fo-field-helper-text{font-size:.68rem!important;line-height:1.2}
.dl-edit-side .erp-comment-composer .fi-grid{gap:.6rem .75rem!important;margin-top:.6rem}
.dl-edit-side .erp-comment-composer__actions{margin-top:.7rem!important;gap:.5rem!important}
.dl-edit-side .erp-comment-composer__actions .fi-btn.fi-color-primary{background:#1f5b45!important;border-color:#1f5b45!important;border-radius:999px!important;transition:transform .12s ease,background .15s ease}
.dl-edit-side .erp-comment-composer__actions .fi-btn.fi-color-primary:hover{background:#b3412b!important;border-color:#b3412b!important;transform:translateY(-1px)}
.erp-comment-composer__kbd{margin-left:auto;font-family:ui-monospace,monospace;font-size:.66rem;color:#8f8c83;border:1px solid #ddd6c7;border-bottom-width:2px;border-radius:.4rem;padding:.1rem .4rem;background:#fbf9f4}
.dl-thread .fi-ta-header-toolbar{padding:.25rem 1.1rem .5rem!important;background:transparent!important;border:0!important}
.dl-thread .fi-ta-header-toolbar .fi-ta-search-field{max-width:14rem}
.dl-thread .fi-ta-content{gap:.4rem!important;padding:0 .9rem .6rem!important;display:flex!important;flex-direction:column}
.dl-thread .fi-ta-content>:not(:last-child){border-color:transparent!important}
.dl-thread .fi-ta-record{border-radius:10px!important;box-shadow:none!important;background:#fff!important;border:1px solid #ebe6db!important;transition:box-shadow .12s ease}
html.dark .dl-thread .fi-ta-record{background:#201f1c!important;border-color:#2d2c28!important}
.dl-thread .fi-ta-record:hover{box-shadow:0 6px 18px rgba(60,40,10,.08)!important}
.dl-thread .fi-ta-record-content{padding:.6rem .6rem .6rem .5rem!important;display:block}
.dl-thread .fi-ta-text{padding:0!important}
.dl-thread .fi-ta-col{width:100%}
.dl-thread .fi-ta-actions{padding:0 .4rem 0 0!important;opacity:0;transition:opacity .12s ease}
.dl-thread .fi-ta-record:hover .fi-ta-actions,.dl-thread .fi-ta-record:focus-within .fi-ta-actions{opacity:1}
.dl-cmt{display:flex;gap:.65rem;align-items:flex-start;min-width:0;border-left:3px solid var(--dl-c);padding-left:.6rem;margin-left:-.1rem}
.dl-cmt-avatar{width:28px;height:28px;font-size:.68rem;border-radius:8px;margin-top:.1rem}
.dl-cmt-body{min-width:0;flex:1}
.dl-cmt-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .55rem;margin-bottom:.2rem}
.dl-cmt-head b{font-size:.82rem;font-weight:700;color:#24231f}
html.dark .dl-cmt-head b{color:#ecebe6}
.dl-cmt-head time{font-size:.7rem;color:#8f8c83}
.dl-cmt-you{font-style:normal;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#1f5b45;background:rgba(31,91,69,.1);padding:.05rem .4rem;border-radius:6px}
.dl-cmt-sku{display:inline-flex;align-items:center;gap:.25rem;font-size:.68rem;font-weight:600;color:#5c5a53;background:#f3efe6;border-radius:6px;padding:.08rem .5rem;text-decoration:none;max-width:22ch;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dl-cmt-sku svg{width:11px;height:11px;flex:0 0 auto}
a.dl-cmt-sku:hover{color:#1f5b45;background:rgba(31,91,69,.1)}
.dl-cmt-text{font-size:.875rem;line-height:1.5;color:#34332e;overflow-wrap:anywhere}
html.dark .dl-cmt-text{color:#e5e3dc}
.dl-cmt--mine{background:linear-gradient(90deg,rgba(31,91,69,.05),transparent 60%);border-radius:0 8px 8px 0}
.dl-cmt-files{margin-top:.4rem}
.dl-cmt-files img{border-radius:8px!important}
.dl-thread .fi-ta-empty-state{padding:1.5rem 1rem!important}
.dl-thread .fi-pagination{padding:.5rem 1rem!important}

/* Timesheet "WebWork Hours": the Accept pill shows under the number on hover (Jake, 2026-10-19) */
.dl-ww-cell .dl-accept-pill{display:inline-block;margin-left:.35rem;padding:.1rem .6rem;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,#2f5a3f 0%,#1f3d2b 100%);box-shadow:0 4px 12px rgba(31,61,43,.28);opacity:0;transform:translateY(2px);transition:opacity .15s ease,transform .15s ease,background .15s ease;pointer-events:none}
.dl-ww-cell.dl-ww-accept:hover .dl-accept-pill,.dl-ww-cell.dl-ww-accept:focus-within .dl-accept-pill{opacity:1;transform:none}
.dl-ww-cell.dl-ww-accept:hover .dl-accept-pill{background:linear-gradient(135deg,#b5541c 0%,#8f3f12 100%)}
/* Extra pay under a timesheet Total (Jake, 2026-11-02) */
.dl-extra-pill{display:inline-block;padding:.05rem .5rem;border-radius:999px;font-size:.68rem;font-weight:700;color:#b5541c;background:#fff7ed;border:1px solid #fed7aa;cursor:help}
.dark .dl-extra-pill{color:#fdba74;background:rgba(181,84,28,.15);border-color:rgba(253,186,116,.3)}
.dl-ww-cell.dl-ww-accept,.dl-ww-cell.dl-ww-open{cursor:pointer}
.dl-ww-cell.dl-ww-accept:hover{background:rgba(47,90,63,.07)}

/* Product card of a patent / trademark flagged item (Jake, 2026-10-30). */
.oc.oc-ip { outline: 2px solid #b8542c; outline-offset: -2px; background-image: linear-gradient(rgba(184, 84, 44, .06), rgba(184, 84, 44, .06)); }
.dark .oc.oc-ip { outline-color: #e08a63; background-image: linear-gradient(rgba(224, 138, 99, .10), rgba(224, 138, 99, .10)); }

/* Freight from China beside the order's Ship to (Jake, 2026-10-30, after order.yorkn.com): a copper→forest
   pill; Book Freight is registered beside it only so each rate row's "Book This Rate" can open it, so its
   own pill is hidden. Delite tones, not Yorkn's orange→pink. */
.fi-btn.dl-freight-china,.fi-link.dl-freight-china{background:linear-gradient(135deg,#b5541c 0%,#2f5a3f 100%)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:.3rem .85rem!important;font-size:.76rem!important;font-weight:700!important;letter-spacing:.01em;box-shadow:0 4px 12px rgba(181,84,28,.28)!important;transition:transform .12s ease,box-shadow .12s ease;text-decoration:none!important}
.fi-btn.dl-freight-china:hover,.fi-link.dl-freight-china:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(31,61,43,.34)!important}
.fi-btn.dl-freight-china .fi-icon,.fi-link.dl-freight-china .fi-icon,.fi-link.dl-freight-china .fi-link-label,.fi-btn.dl-freight-china .fi-btn-label{color:#fff!important}
.fi-btn.dl-freight-book,.fi-link.dl-freight-book{display:none!important}
.dl-rate-book{background:linear-gradient(135deg,#b5541c 0%,#8f3f12 100%);color:#fff;border:0;border-radius:999px;padding:.28rem .85rem;font-size:.72rem;font-weight:800;letter-spacing:.02em;cursor:pointer;box-shadow:0 3px 10px rgba(181,84,28,.3);transition:transform .12s ease,box-shadow .12s ease}
.dl-rate-book:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(143,63,18,.38)}
.dl-rate-book--details{background:linear-gradient(135deg,#2f5a3f 0%,#1f3d2b 100%);box-shadow:0 3px 10px rgba(31,61,43,.28)}