/* order.yorkn.com — same look as www.yorkn.com (Jake, 2026-10-10: "make sure both website theme
   matches"): Apple-grey canvas, white frosted bars, ink text, Apple-blue → indigo gradient for the
   one main action, pill buttons, 18px cards. Tokens copied from the website's app/globals.css.
   Previous colourful navy theme: /root/erp-fix-backups/erp-theme.css.bak-2026-10-10-website-look.
   Colours are set with background-color so a person's own Appearance choice (UserTheme) still wins. */

:root{--erp-ink:#1d1d1f;--erp-body:#34343a;--erp-ink-2:#55555c;--erp-ink-3:#86868b;--erp-blue:#0071e3;--erp-indigo:#5e5ce6;--erp-tint:rgba(0,113,227,.09);--erp-line:#d2d2d7;--erp-line-soft:#e8e8ed;--erp-soft:#f5f5f7;--erp-grad:linear-gradient(135deg,#0071e3 0%,#5e5ce6 100%);--erp-shadow:0 4px 24px rgba(0,0,0,.06);--erp-shadow-hover:0 12px 40px rgba(0,0,0,.12);--erp-radius:18px;--erp-radius-sm:12px;
  /* old names still used by a few page styles */
  --erp-navy:#1d1d1f;--erp-violet:#5e5ce6;--erp-pink:#e11d48;--erp-green:#16a34a;--erp-amber:#f59e0b;--erp-sky:#38bdf8}

html:not(.dark) body,html:not(.dark) .fi-body{color:var(--erp-body);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}

/* ---------- page canvas ---------- */
html:not(.dark) .fi-body{background-color:var(--erp-soft)}
html:not(.dark) .fi-main{background:transparent}

/* ---------- sidebar: white, hairline edge, blue tint on the current page ---------- */
html:not(.dark) .fi-sidebar,html:not(.dark) .fi-sidebar-header,html:not(.dark) .fi-sidebar-nav{background-color:#fff}
html:not(.dark) .fi-sidebar{border-right:1px solid var(--erp-line-soft)!important;box-shadow:none}
html:not(.dark) .fi-sidebar-header{border-bottom:1px solid var(--erp-line-soft)!important;box-shadow:none}
.fi-sidebar-nav{padding-top:.75rem}
.fi-sidebar-group-label{letter-spacing:.06em;font-size:.68rem;text-transform:uppercase;font-weight:600}
html:not(.dark) .fi-sidebar-group-label{color:var(--erp-ink-3)}
.fi-sidebar-item-btn{border-radius:var(--erp-radius-sm)!important;transition:background .15s ease}
.fi-sidebar-item-label{font-weight:500}
html:not(.dark) .fi-sidebar-item-label{color:var(--erp-ink)}
html:not(.dark) .fi-sidebar-item-icon{color:var(--erp-ink-2)}
html:not(.dark) .fi-sidebar-item-btn:hover{background-color:var(--erp-soft)}
html:not(.dark) .fi-sidebar-item.fi-active>.fi-sidebar-item-btn,html:not(.dark) .fi-sidebar-item-active>.fi-sidebar-item-btn{background-color:var(--erp-tint)}
html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-label,html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-icon,html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-icon{color:var(--erp-blue)}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,.fi-sidebar-item-active .fi-sidebar-item-label{font-weight:600}

/* ---------- topbar: frosted white, like the website header ---------- */
.fi-topbar{position:relative;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
html:not(.dark) .fi-topbar{background:rgba(255,255,255,.72)!important;box-shadow:none;border-bottom:1px solid var(--erp-line-soft)}
html.dark .fi-topbar{background:rgba(17,24,39,.85)!important}

/* ---------- page header ---------- */
.fi-header-heading{font-weight:700!important;letter-spacing:-.02em}
html:not(.dark) .fi-header-heading{color:var(--erp-ink)!important}
.fi-breadcrumbs-item-label{font-weight:500}

/* ---------- sections / cards ---------- */
.fi-section{border-radius:var(--erp-radius)!important;overflow:hidden}
html:not(.dark) .fi-section{border:1px solid var(--erp-line-soft)!important;box-shadow:var(--erp-shadow)!important}
html:not(.dark) .fi-section-header{background:#fff;border-bottom:1px solid var(--erp-line-soft)}
.fi-section-header-heading{font-weight:600!important;letter-spacing:-.01em}
html:not(.dark) .fi-section-header-heading{color:var(--erp-ink)!important}
.fi-section-header .fi-icon{color:#fff!important;background:var(--erp-grad);border-radius:.65rem;padding:.35rem;width:2rem!important;height:2rem!important;box-shadow:0 4px 12px rgba(0,113,227,.25)}

/* ---------- tabs: grey track, white pill on the current one ---------- */
.fi-tabs{border-radius:var(--pill,980px)!important;padding:.25rem!important;border:0!important}
html:not(.dark) .fi-tabs{background:#e8e8ed!important}
/* Many tabs (CSR / VA per person): wrap onto 2-3 lines instead of one long scrolling strip. */
.fi-tabs{flex-wrap:wrap!important;overflow-x:visible!important;row-gap:.25rem;border-radius:1.25rem!important}
html.dark .fi-tabs{background:rgba(255,255,255,.06)!important}
.fi-tabs-item{border-radius:999px!important}
html:not(.dark) .fi-tabs-item.fi-active,html:not(.dark) .fi-tabs-item-active{background:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.10)}
html:not(.dark) .fi-tabs-item.fi-active .fi-tabs-item-label,html:not(.dark) .fi-tabs-item-active .fi-tabs-item-label,html:not(.dark) .fi-tabs-item.fi-active .fi-icon{color:var(--erp-blue)!important}

/* ---------- buttons: pills; the main action gets the website's gradient ---------- */
.fi-btn{border-radius:980px!important;font-weight:600!important;transition:transform .1s ease,box-shadow .15s ease,filter .15s ease}
.fi-btn:active{transform:scale(.98)}
.fi-btn.fi-color-primary,.erp-cta{background:var(--erp-grad)!important;color:#fff!important;border:0!important;box-shadow:0 6px 18px rgba(0,113,227,.28)!important}
.fi-btn.fi-color-primary:hover,.erp-cta:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 10px 26px rgba(0,113,227,.36)!important}
.fi-btn.fi-color-success:hover,.fi-btn.fi-color-danger:hover,.fi-btn.fi-color-warning:hover{transform:translateY(-1px)}
.fi-icon-btn{border-radius:999px!important}
.erp-copy{border-radius:999px;padding:.15rem .7rem;font-size:.75rem;font-weight:600;border:1px solid var(--erp-line);color:var(--erp-blue);background:transparent;cursor:pointer}
.erp-copy:hover{border-color:var(--erp-blue);background:rgba(0,113,227,.05)}

/* ---------- badges ---------- */
.fi-badge{font-weight:600!important;border-radius:999px!important}

/* ---------- tables ---------- */
.fi-ta-ctn,.fi-ta{border-radius:var(--erp-radius)!important}
html:not(.dark) .fi-ta-ctn,html:not(.dark) .fi-ta{box-shadow:var(--erp-shadow)!important;border:1px solid var(--erp-line-soft)!important}
html:not(.dark) .fi-ta-header-cell{background:#fafafa!important}
.fi-ta-header-cell,.fi-ta-header-cell-label{font-weight:600!important;text-transform:uppercase;font-size:.7rem!important;letter-spacing:.06em}
html:not(.dark) .fi-ta-header-cell,html:not(.dark) .fi-ta-header-cell-label{color:var(--erp-ink-2)!important}
html:not(.dark) .fi-ta-row:hover{background:var(--erp-soft)!important}
html:not(.dark) .fi-ta-header-toolbar{background:#fff}
html:not(.dark) .fi-ta-row.fi-selected{background:var(--erp-tint)!important}

/* ---------- inputs ---------- */
.fi-input-wrp{border-radius:var(--erp-radius-sm)!important}
.fi-input-wrp:focus-within{box-shadow:0 0 0 3px rgba(0,113,227,.18)!important}
.fi-fo-field-label-content{font-weight:500}
.fi-fo-field-label-required-mark{color:#e11d48!important}

/* ---------- notifications / modals ---------- */
.fi-no-notification,.fi-modal-window{border-radius:var(--erp-radius)!important}
.fi-modal-window{box-shadow:0 30px 80px rgba(0,0,0,.18)!important}
/* Full-screen dialogs (Edit line, Add line): Filament fixes them at 100dvh with no
   scroll, so opening "What we paid in China" on a shorter screen 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 opened UPWARDS and lost its top rows: the section
   clips its overflow, so the picker saw ~30px of room below the field and flipped
   (Add line > Product, 2026-09-22). Sections in a dialog do not need to clip; the
   dialog body does the scrolling, and the list drops down as it should. */
.fi-modal .fi-section{overflow:visible}

/* ---------- login: the website's sign-in card ---------- */
html:not(.dark) .fi-simple-layout{background-color:var(--erp-soft)!important;background-image:radial-gradient(60rem 30rem at 10% -10%,rgba(0,113,227,.10),transparent 60%),radial-gradient(50rem 26rem at 110% 110%,rgba(94,92,230,.10),transparent 60%)!important}
.fi-simple-main{border-radius:var(--erp-radius)!important}
html:not(.dark) .fi-simple-main{background:#fff;border:1px solid var(--erp-line-soft);box-shadow:var(--erp-shadow-hover)!important}
.fi-simple-header .fi-logo{filter:none}
html:not(.dark) .fi-simple-header-heading{color:var(--erp-ink);font-weight:700;letter-spacing:-.02em}
.erp-login-site{margin-top:.25rem;text-align:center;font-size:.85rem;color:var(--erp-ink-2)}
.erp-login-site a{color:var(--erp-blue);font-weight:500}

/* ---------- www.yorkn.com menu in the top bar (one website, 2026-10-10) ---------- */
.yk-sitelinks{display:flex;align-items:center;gap:.25rem;margin-left:1rem;min-width:0}
.yk-sitelinks>a{padding:.4rem .7rem;border-radius:980px;font-size:.85rem;font-weight:500;white-space:nowrap;color:var(--erp-ink);text-decoration:none}
.yk-sitelinks>a:hover{background:var(--erp-soft)}
html.dark .yk-sitelinks>a{color:#e5e7eb}
html.dark .yk-sitelinks>a:hover{background:rgba(255,255,255,.08)}
.yk-sitesearch input{width:13rem;height:2.1rem;padding:0 .9rem;border:1px solid var(--erp-line);border-radius:980px;background:var(--erp-soft);font-size:.85rem;color:inherit}
.yk-sitesearch input:focus{outline:none;border-color:var(--erp-blue);box-shadow:0 0 0 3px rgba(0,113,227,.18);background:#fff}
.yk-sitelinks>a.yk-site-account{color:var(--erp-blue);border:1px solid var(--erp-line)}
@media (max-width:1279px){.yk-sitelinks>a:not(.yk-site-account),.yk-sitesearch{display:none}}
@media (max-width:640px){.yk-sitelinks{display:none}}

/* ---------- order line items (.erp-lines): a two-row grid per line, no sideways scroll ---------- */
/* Denser again (Jake, 2026-09-13: "make each line more dense for all users"): the add-order
   repeater, the Edit line dialog (.erp-lines), the Lines table rows (.erp-line-row) and the
   view page's line table (.erp-lines-view). */
.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}
.erp-lines-view td,.erp-lines-view th{padding-top:.2rem!important;padding-bottom:.2rem!important;font-size:.82rem}

/* ---------- dense forms (.erp-dense): the 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-section{margin-bottom:0}
.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,.erp-dense .fi-fo-select .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,.erp-dense .fi-fo-field-label-ctn .fi-hint{font-size:.7rem!important;line-height:1.2}
.erp-dense textarea.fi-input{line-height:1.3}
/* picture / file dropzone: a slim bar, not a big empty box */
.fi-fo-file-upload .filepond--root{min-height:2.6rem!important;margin-bottom:0}
.fi-fo-file-upload .filepond--drop-label{min-height:2.6rem!important;font-size:.78rem;padding:0 .5rem}
.fi-fo-file-upload .filepond--drop-label label{padding:.35rem 0}
.fi-fo-file-upload .filepond--panel-root{border-radius:.6rem}
.fi-fo-file-upload .filepond--list-scroller{margin-top:.25rem}
.erp-dense .fi-fo-toggle{padding-top:.2rem}

/* Task comment modal: a five-line editor instead of a one-line strip. */
.fi-fo-rich-editor.erp-comment-editor .fi-fo-rich-editor-content {
    min-height: 8.5rem; /* about five lines */
}

/* 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); }

/* 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. */
.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(11, 42, 91, .06);
}
.erp-prodstat b { font-size: .95rem; font-weight: 800; color: var(--erp-navy); }
.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(11, 42, 91, .16); }
.erp-prodstat-orders { border-color: rgba(10, 111, 224, .35); background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%); }
.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(219 234 254); }
.dark .erp-prodstat i { color: rgb(161 161 170); }
.dark .erp-prodstat-orders { border-color: rgba(56, 189, 248, .4); background: rgba(10, 111, 224, .18); }
.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); }

/* Page-header buttons wrap onto a second line instead of running off the right edge.
   Filament makes the actions box shrink-0; a shipped order carries enough buttons to push
   the last ones out of view on a laptop (same fix as stock.delite.ca, 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}

/* Warehouse tab on the product page (Jake, 2026-09-27): the Delite racks behind a
   Yorkn product, read-only. Tiles first, then a variant × rack table and the ledger. */
.erp-wh { display: flex; flex-direction: column; gap: .8rem; }
.erp-wh-empty { padding: .9rem 1rem; border-radius: .8rem; border: 1px dashed rgb(212 212 216); color: rgb(82 82 91); font-size: .9rem; line-height: 1.5; }
.erp-wh-empty code { font-family: ui-monospace, monospace; font-size: .85em; padding: .05rem .3rem; border-radius: .3rem; background: rgba(11, 42, 91, .06); }
.erp-wh-empty a { color: var(--erp-blue); font-weight: 600; text-decoration: underline; }
.erp-wh-error { border-color: rgba(245, 158, 11, .6); background: #fffbeb; color: #92400e; }
.erp-wh-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.erp-wh-title { display: flex; flex-direction: column; gap: .2rem; }
.erp-wh-kicker { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(113 113 122); font-weight: 600; }
.erp-wh-name { font-size: 1.05rem; font-weight: 800; color: var(--erp-navy); text-decoration: none; }
.erp-wh-name:hover { text-decoration: underline; }
.erp-wh-skus { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.erp-wh-sku { font-family: ui-monospace, monospace; font-size: .74rem; padding: .1rem .45rem; border-radius: 999px; border: 1px solid rgb(228 228 231); background: #fff; color: rgb(63 63 70); }
.erp-wh-sku i { font-style: normal; font-family: Inter, ui-sans-serif, sans-serif; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: rgb(161 161 170); margin-left: .15rem; }
.erp-wh-sku-yorkn { border-color: rgba(10, 111, 224, .45); background: #eff6ff; color: var(--erp-navy); }
.erp-wh-sku-yorkn i { color: var(--erp-blue); }
.erp-wh-sku-delite { border-color: rgba(217, 119, 6, .4); background: #fffbeb; color: #78350f; }
.erp-wh-sku-set { border-color: rgba(124, 58, 237, .4); background: #f5f3ff; color: #5b21b6; }
.erp-wh-sku-off { border-color: rgba(239, 68, 68, .4); background: #fef2f2; color: #991b1b; }
.erp-wh-manage { align-self: center; font-size: .8rem; font-weight: 700; color: #fff; text-decoration: none; padding: .45rem .95rem; border-radius: 999px; background: var(--erp-grad); box-shadow: 0 4px 14px rgba(10, 111, 224, .28); transition: transform .12s ease, box-shadow .12s ease; }
.erp-wh-manage:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10, 111, 224, .35); }
.erp-wh-tiles { display: flex; flex-wrap: wrap; gap: .5rem; }
.erp-wh-tile { display: flex; flex-direction: column; gap: .05rem; min-width: 5.5rem; padding: .45rem .8rem; border-radius: .75rem; line-height: 1.2; border: 1px solid rgb(228 228 231); background: #fff; box-shadow: 0 1px 2px rgba(11, 42, 91, .06); }
.erp-wh-tile b { font-size: 1.15rem; font-weight: 800; color: var(--erp-navy); font-variant-numeric: tabular-nums; }
.erp-wh-tile i { font-style: normal; font-size: .68rem; color: rgb(113 113 122); }
.erp-wh-tile-available { border-color: rgba(22, 163, 74, .4); background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%); }
.erp-wh-tile-available b { color: #15803d; }
.erp-wh-tile-reserved { border-color: rgba(245, 158, 11, .45); background: #fffbeb; }
.erp-wh-tile-reserved b { color: #b45309; }
.erp-wh-tile-wh { border-color: rgba(10, 111, 224, .3); background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%); }
.erp-wh-note { padding: .55rem .8rem; border-radius: .7rem; border: 1px solid rgba(245, 158, 11, .5); background: #fffbeb; color: #78350f; font-size: .82rem; }
.erp-wh-table { width: 100%; font-size: .85rem; border-collapse: collapse; }
.erp-wh-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: rgb(113 113 122); padding: .3rem .5rem; border-bottom: 1px solid rgb(228 228 231); }
.erp-wh-table td { padding: .4rem .5rem; border-bottom: 1px solid rgb(244 244 245); vertical-align: top; }
.erp-wh-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.erp-wh-table .mono { font-family: ui-monospace, monospace; font-size: .78rem; }
.erp-wh-row-off td { color: rgb(161 161 170); }
.erp-wh-default { font-style: normal; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: rgb(161 161 170); margin-left: .3rem; }
.erp-wh-rack { display: inline-flex; gap: .3rem; align-items: baseline; margin: .1rem .3rem .1rem 0; padding: .08rem .5rem; border-radius: .45rem; background: rgba(11, 42, 91, .07); font-family: ui-monospace, monospace; font-size: .78rem; color: var(--erp-navy); }
.erp-wh-rack b { font-weight: 800; }
.erp-wh-rack i { font-style: normal; font-family: Inter, ui-sans-serif, sans-serif; font-size: .66rem; color: #b45309; }
.erp-wh-muted { color: rgb(161 161 170); font-size: .8rem; }
.erp-wh-sub { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: rgb(113 113 122); font-weight: 600; margin-top: .2rem; }
.erp-wh-list { margin: 0; padding-left: 1rem; font-size: .85rem; line-height: 1.6; }
.erp-wh-moves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; font-size: .82rem; }
.erp-wh-moves li { display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; padding: .25rem .4rem; border-radius: .5rem; }
.erp-wh-moves li:nth-child(odd) { background: rgba(11, 42, 91, .035); }
.erp-wh-qty { min-width: 3.2rem; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.erp-wh-qty.in { color: #15803d; }
.erp-wh-qty.out { color: #b91c1c; }
.erp-wh-move-type { font-weight: 600; color: var(--erp-navy); }
.erp-wh-when { margin-left: auto; color: rgb(161 161 170); font-size: .74rem; }
/* Sold by variant (Jake, 2026-10-14) */
.erp-wh-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.erp-wh-tile-sold { border-color: rgba(10, 111, 224, .35); background: linear-gradient(135deg, #eff6ff 0%, #ecfeff 100%); }
.erp-wh-tile-sold b { color: var(--erp-blue); }
.erp-wh-tile-best { border-color: rgba(234, 88, 12, .4); background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%); }
.erp-wh-tile-best b { color: #c2410c; }
.erp-wh-sales { padding: .7rem .8rem .4rem; border-radius: .9rem; border: 1px solid rgba(10, 111, 224, .18); background: linear-gradient(180deg, rgba(239, 246, 255, .7) 0%, #fff 60%); }
.erp-wh-sales-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .3rem; }
.erp-wh-sales-head .erp-wh-sub { margin-top: 0; color: var(--erp-navy); }
.erp-wh-sold { min-width: 11rem; }
.erp-wh-bar { display: block; height: .38rem; width: 100%; max-width: 12rem; border-radius: 999px; background: rgba(11, 42, 91, .08); margin: .25rem 0 .2rem; overflow: hidden; }
.erp-wh-bar span { display: block; height: 100%; border-radius: 999px; background: var(--erp-grad); }
.erp-wh-best { display: inline-block; margin-left: .4rem; padding: .08rem .55rem; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%); box-shadow: 0 2px 8px rgba(249, 115, 22, .3); vertical-align: middle; }
.erp-wh-cover-low { font-weight: 700; color: #b91c1c; }
.dark .erp-wh-sales { border-color: rgb(63 63 70); background: rgb(39 39 42); }
.dark .erp-wh-sales-head .erp-wh-sub { color: rgb(219 234 254); }
.dark .erp-wh-bar { background: rgba(255, 255, 255, .1); }
.dark .erp-wh-tile-sold b { color: rgb(147 197 253); }
.dark .erp-wh-tile-best b { color: #fdba74; }
.dark .erp-wh-cover-low { color: #fca5a5; }
.dark .erp-wh-empty { border-color: rgb(63 63 70); color: rgb(161 161 170); }
.dark .erp-wh-empty code { background: rgba(255, 255, 255, .08); }
.dark .erp-wh-error { background: rgba(245, 158, 11, .12); color: #fcd34d; }
.dark .erp-wh-name, .dark .erp-wh-move-type { color: rgb(219 234 254); }
.dark .erp-wh-sku, .dark .erp-wh-tile { border-color: rgb(63 63 70); background: rgb(39 39 42); color: rgb(212 212 216); box-shadow: none; }
.dark .erp-wh-sku-yorkn { background: rgba(10, 111, 224, .18); color: rgb(219 234 254); }
.dark .erp-wh-sku-delite { background: rgba(217, 119, 6, .18); color: #fcd34d; }
.dark .erp-wh-sku-set { background: rgba(124, 58, 237, .2); color: #ddd6fe; }
.dark .erp-wh-sku-off { background: rgba(239, 68, 68, .18); color: #fecaca; }
.dark .erp-wh-tile b { color: rgb(219 234 254); }
.dark .erp-wh-tile-available { background: rgba(22, 163, 74, .16); }
.dark .erp-wh-tile-available b { color: rgb(187 247 208); }
.dark .erp-wh-tile-reserved { background: rgba(245, 158, 11, .14); }
.dark .erp-wh-tile-reserved b { color: #fcd34d; }
.dark .erp-wh-tile-wh { background: rgba(10, 111, 224, .16); }
.dark .erp-wh-note { background: rgba(245, 158, 11, .12); color: #fcd34d; }
.dark .erp-wh-table th { border-color: rgb(63 63 70); }
.dark .erp-wh-table td { border-color: rgb(39 39 42); }
.dark .erp-wh-rack { background: rgba(255, 255, 255, .08); color: rgb(219 234 254); }
.dark .erp-wh-moves li:nth-child(odd) { background: rgba(255, 255, 255, .04); }

/* "Send payout" on the timesheet (Jake, 2026-10-04): Apple-blue → indigo pill, lifts on hover. */
.yk-wise-btn,.fi-modal .yk-wise-send{background:linear-gradient(135deg,#0071e3 0%,#5e5ce6 100%)!important;color:#fff!important;border:0!important;border-radius:980px!important;font-weight:600!important;letter-spacing:-.01em;box-shadow:0 6px 18px rgba(0,113,227,.28)!important;transition:transform .18s ease,box-shadow .18s ease!important}
.yk-wise-btn:hover,.fi-modal .yk-wise-send:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(94,92,230,.34)!important}
.yk-wise-btn .fi-icon,.fi-modal .yk-wise-send .fi-icon{color:#fff!important}
.fi-modal .yk-wise-send{padding-left:1.6rem!important;padding-right:1.6rem!important}
.fi-modal .yk-wise-cancel{border-radius:980px!important;background:#f5f5f7!important;box-shadow:none!important;color:#1d1d1f!important;font-weight:600!important}
html.dark .fi-modal .yk-wise-cancel{background:rgba(255,255,255,.08)!important;color:#f5f5f7!important}

/* Task attachments (erp-files-dense): the ticked "Currently attached" pictures packed
   side by side instead of spread over the page width, each name on one line
   (Jake, 2026-10-09: "make the attached pictures smaller, more dense"). */
.fi-fo-checkbox-list-options.erp-files-dense{display:flex!important;flex-wrap:wrap;gap:.6rem .9rem}
.erp-files-dense .fi-fo-checkbox-list-option{gap:.35rem}
.erp-files-dense .fi-fo-checkbox-list-option-label img,.erp-files-dense .fi-fo-checkbox-list-option-label a>div{width:64px!important;height:64px!important}
.erp-files-dense .fi-fo-checkbox-list-option-label>div{max-width:64px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px!important}

/* No Yorkn logo in the menu or top bar (Jake, 2026-10-10): the website header above already carries
   it. The login card keeps its own. */
.fi-sidebar-header .fi-logo,.fi-topbar .fi-logo{display:none!important}
/* Profile icon back in the top bar (Jake, 2026-10-18): the website header's 👤 menu only exists on the
   customer area (/my), so staff pages need Filament's own avatar menu (My Profile, Appearance, Sign out). */
.fi-topbar .fi-user-menu .fi-user-avatar{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--erp-line-soft,#e5e7eb)}
/* Product edit: Save Changes floats on the right edge, Apple-style frosted ring (Jake, 2026-10-11) */
.fi-btn.yk-float-save{position:fixed!important;right:1.5rem;top:50%;transform:translateY(-50%);z-index:40;border-radius:980px!important;padding:.85rem 1.5rem!important;font-weight:600!important;font-size:.95rem!important;letter-spacing:-.01em;color:#fff!important;background:var(--erp-grad)!important;box-shadow:0 0 0 6px rgba(255,255,255,.72),0 0 0 7px rgba(0,0,0,.06),0 18px 40px rgba(0,113,227,.32)!important;transition:transform .2s ease,box-shadow .2s ease}
.fi-btn.yk-float-save:hover{transform:translateY(-50%) scale(1.04);box-shadow:0 0 0 7px rgba(255,255,255,.8),0 0 0 8px rgba(0,0,0,.06),0 22px 48px rgba(94,92,230,.38)!important}
.fi-btn.yk-float-save .fi-icon,.fi-btn.yk-float-save .fi-btn-label{color:#fff!important}
html.dark .fi-btn.yk-float-save{box-shadow:0 0 0 6px rgba(28,28,30,.72),0 0 0 7px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.5)!important}
@media (max-width:640px){.fi-btn.yk-float-save{top:auto;bottom:1rem;right:1rem;transform:none}.fi-btn.yk-float-save:hover{transform:scale(1.04)}}
/* ---------- inline line box on the order page (Jake, 2026-10-11: no Edit line pop-up) ---------- */
.yk-line-box-wrap{padding:0 16px 14px}
.yk-line-box{position:relative;padding:14px 16px 14px 20px;border-radius:var(--erp-radius-sm);background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);border:1px solid var(--erp-line-soft);box-shadow:var(--erp-shadow);overflow:hidden;text-align:left}
.yk-line-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--erp-grad)}
.yk-line-box--editing::before{background:linear-gradient(180deg,#ff9f0a 0%,#ff6b00 100%)}
.yk-line-box__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.yk-line-box__title{font-weight:700;font-size:.9rem;letter-spacing:-.01em;color:var(--erp-ink)}
.yk-line-box__hint{font-size:.72rem;color:var(--erp-ink-3)}
.yk-line-box__actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.yk-line-box__busy{font-size:.78rem;color:var(--erp-ink-3)}
.dark .yk-line-box{background:rgba(28,28,30,.86);border-color:rgba(255,255,255,.08)}
.dark .yk-line-box__title{color:#f5f5f7}
/* Products list: "Copy To Delite" under "Duplicate" on each row (Jake, 2026-10-12). */
.yk-products-table .fi-ta-actions{flex-direction:column;align-items:flex-start;gap:6px}
/* Product view / edit header: Copy To Delite under Duplicate, the other buttons beside them (Jake, 2026-10-12). */
.fi-header .fi-ac:has(> .yk-act-copy-delite){display:grid;grid-auto-flow:column;grid-template-rows:auto auto;align-items:center;gap:6px .75rem}
.fi-header .fi-ac:has(> .yk-act-copy-delite) > *{grid-row:span 2}
.fi-header .fi-ac:has(> .yk-act-copy-delite) > .yk-act-duplicate,
.fi-header .fi-ac:has(> .yk-act-copy-delite) > .yk-act-copy-delite{grid-row:auto;justify-self:stretch}

/* Products list: "Similar" pill on each product picture (Jake, 2026-10-16) - shows the look-alikes. */
.yk-similar-badge{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 6px;border-radius:999px;font-size:10.5px;font-weight:700;line-height:1.5;color:#fff;background:rgba(17,24,39,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;white-space:nowrap;opacity:.88;transition:background .15s,opacity .15s,transform .15s}
.yk-similar-badge:hover,.yk-similar-badge:focus-visible{opacity:1;background:linear-gradient(135deg,#0071e3,#5e5ce6);transform:translateX(-50%) translateY(-1px);outline:none}


/* Ship-to "Clean & Verify" (Jake 2026-10-17): gradient pill beside the label, blue chip under the box */
.fi-btn.yk-verify-address,.fi-link.yk-verify-address{background:var(--erp-grad)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:.3rem .8rem!important;font-size:.76rem!important;font-weight:700!important;letter-spacing:-.005em;box-shadow:0 4px 12px rgba(0,113,227,.28)!important;transition:transform .12s ease,box-shadow .12s ease;text-decoration:none!important}
.fi-btn.yk-verify-address:hover,.fi-link.yk-verify-address:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(94,92,230,.36)!important}
.fi-btn.yk-verify-address .fi-icon,.fi-link.yk-verify-address .fi-icon,.fi-link.yk-verify-address .fi-link-label,.fi-btn.yk-verify-address .fi-btn-label{color:#fff!important}
.yk-address-chip{display:inline-flex;align-items:flex-start;gap:8px;margin-top:6px;padding:7px 12px;border-radius:14px;font-size:12px;line-height:1.35;color:#0b3d91;background:var(--erp-tint);border:1px solid rgba(0,113,227,.25)}
.yk-address-chip__icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;flex:none;color:#fff;background:var(--erp-grad);font-size:11px;font-weight:700}
.yk-address-chip__match{display:block;margin-top:2px;color:var(--erp-ink-3);font-weight:500}
.yk-address-chip--check{color:#92400e;background:#fef3c7;border-color:#fcd34d}
.yk-address-chip--check .yk-address-chip__icon{background:#f59e0b}
html.dark .yk-address-chip{color:#bfdbfe;background:rgba(0,113,227,.18);border-color:rgba(0,113,227,.4)}
html.dark .yk-address-chip--check{color:#fcd34d;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4)}
/* "Freight from China" pill beside the Ship-to label (Jake, 2026-10-17) - warm so it reads apart from Clean & Verify */
.fi-btn.yk-freight-china,.fi-link.yk-freight-china{background:linear-gradient(135deg,#f97316,#db2777)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:.3rem .8rem!important;font-size:.76rem!important;font-weight:700!important;letter-spacing:-.005em;box-shadow:0 4px 12px rgba(249,115,22,.28)!important;transition:transform .12s ease,box-shadow .12s ease;text-decoration:none!important}
.fi-btn.yk-freight-china:hover,.fi-link.yk-freight-china:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(219,39,119,.36)!important}
.fi-btn.yk-freight-china .fi-icon,.fi-link.yk-freight-china .fi-icon,.fi-link.yk-freight-china .fi-link-label,.fi-btn.yk-freight-china .fi-btn-label{color:#fff!important}
/* Book Freight (Jake, 2026-10-19): the action lives beside the Ship-to so the rates table's row buttons
   can mount it, but its own pill is hidden (Jake: "remove book freight button next to freight from china") */
.fi-btn.yk-freight-book,.fi-link.yk-freight-book{display:none!important}
.yk-rate-book{background:linear-gradient(135deg,#059669,#0891b2);color:#fff;border:0;border-radius:999px;padding:.25rem .75rem;font-size:.72rem;font-weight:800;letter-spacing:.02em;cursor:pointer;box-shadow:0 3px 10px rgba(5,150,105,.28);transition:transform .12s ease,box-shadow .12s ease}
.yk-rate-book:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(8,145,178,.36)}
.yk-rate-book--details{background:linear-gradient(135deg,#0071e3,#5e5ce6);box-shadow:0 3px 10px rgba(0,113,227,.28)}

/* ---------- Tasks board, Todoist style (Jake, 2026-10-18: "make it todoist style, and make it more
   eye catchy"). Markup from TaskResource::table + TaskBoard. Scoped to the two task list pages. ---------- */
.fi-resource-erp-task,.fi-resource-erp-delite-task{--td-red:#d1453b;--td-orange:#eb8909;--td-blue:#246fe0;--td-green:#058527;--td-ink:#202020;--td-ink-2:#595959;--td-ink-3:#8a8a8a;--td-line:#eeeeee;--td-hover:#fafafa;--td-tint:#fff0ee;--td-paper:#fff}
html.dark .fi-resource-erp-task,html.dark .fi-resource-erp-delite-task{--td-ink:#ececec;--td-ink-2:#b5b5b5;--td-ink-3:#808080;--td-line:#2a2a2a;--td-hover:#1c1c1c;--td-tint:rgba(209,69,59,.18);--td-paper:#141414}

/* heading like Todoist's "Inbox", summary line under it, a red "+ Add Task" */
.fi-resource-erp-task .fi-header-heading,.fi-resource-erp-delite-task .fi-header-heading{font-size:1.9rem!important;font-weight:800!important;letter-spacing:-.03em;color:var(--td-ink)!important}
.fi-resource-erp-task .fi-header-subheading,.fi-resource-erp-delite-task .fi-header-subheading{color:var(--td-ink-3)!important;font-size:.9rem;font-weight:500}
.fi-resource-erp-task .fi-header .fi-btn.fi-color-primary{background:linear-gradient(135deg,#e2574a 0%,#c9412f 100%)!important;box-shadow:0 6px 18px rgba(209,69,59,.32)!important;padding-inline:1.1rem}
.fi-resource-erp-task .fi-header .fi-btn.fi-color-primary:hover{box-shadow:0 10px 26px rgba(209,69,59,.42)!important}

/* tabs → Todoist's project list: flat, the current one in a warm tint with red text */
.fi-resource-erp-task .fi-tabs,.fi-resource-erp-delite-task .fi-tabs{background:transparent!important;padding:0!important;gap:.2rem;border-radius:0!important}
.fi-resource-erp-task .fi-tabs-item{padding:.4rem .8rem!important;font-weight:600;color:var(--td-ink-2)!important;border-radius:.6rem!important}
.fi-resource-erp-task .fi-tabs-item:hover{background:var(--td-hover)!important}
html:not(.dark) .fi-resource-erp-task .fi-tabs-item.fi-active,html:not(.dark) .fi-resource-erp-task .fi-tabs-item-active{background:var(--td-tint)!important;box-shadow:none!important}
html.dark .fi-resource-erp-task .fi-tabs-item.fi-active{background:var(--td-tint)!important}
.fi-resource-erp-task .fi-tabs-item.fi-active .fi-tabs-item-label,.fi-resource-erp-task .fi-tabs-item-active .fi-tabs-item-label{color:var(--td-red)!important}
.fi-resource-erp-task .fi-tabs-item .fi-badge{background:transparent!important;color:var(--td-ink-3)!important;font-weight:600!important;padding:0!important;font-size:.72rem!important;box-shadow:none!important;--tw-ring-color:transparent}
.fi-resource-erp-task .fi-tabs-item.fi-active .fi-badge{color:var(--td-red)!important}

/* the list: a flat sheet, rows divided by hairlines, no cell padding */
.td-board.fi-ta-ctn{border-radius:14px!important}
.td-board .fi-ta-content{gap:0!important;padding:0 1.25rem .5rem!important}
.td-board .fi-ta-content>:not(:last-child){border-color:var(--td-line)!important}
.td-board .fi-ta-record{border-radius:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;position:relative;transition:background .12s ease}
html:not(.dark) .td-board .fi-ta-record:hover,html.dark .td-board .fi-ta-record:hover{background:var(--td-hover)!important}
.td-board .fi-ta-record.fi-selected{background:var(--td-tint)!important}
.td-board .fi-ta-record.fi-selected:before{background:var(--td-red)!important;border-radius:2px}
.td-board .fi-ta-record-checkbox{margin-inline-start:.25rem;opacity:.35;transition:opacity .12s}
.td-board .fi-ta-record:hover .fi-ta-record-checkbox,.td-board .fi-ta-record-checkbox:checked{opacity:1}
.td-board .fi-ta-record-content{padding:.7rem .5rem .7rem .25rem!important;display:block}
.td-board .fi-ta-split{gap:.9rem!important;align-items:flex-start!important}
.td-board .td-col{display:flex;align-items:center;width:auto!important}
.td-board .fi-ta-text{padding:0!important;gap:0!important}
.td-board .fi-ta-text-item{display:block}
.td-board .fi-ta-col{width:auto;min-width:0}
.td-board .fi-ta-col.fi-growable{width:100%;min-width:0}
.td-board .fi-ta-text.fi-wrapped .fi-ta-text-item{white-space:normal}

/* the select-all strip above the first day: keep it, but thin */
.td-board .fi-ta-content-header{background:transparent!important;padding-block:0!important;min-height:0}
.td-board .fi-ta-content-header .fi-ta-page-checkbox{margin-block:.45rem!important;opacity:.45}
.td-board .fi-ta-content-header .fi-ta-page-checkbox:hover,.td-board .fi-ta-content-header .fi-ta-page-checkbox:checked{opacity:1}

/* day headings, Todoist's Upcoming: bold date, hairline under, the chevron folds the day */
.td-board .fi-ta-group-header{background:transparent!important;border:0!important;border-bottom:1px solid var(--td-ink)!important;margin:1.25rem 0 0!important;width:100%!important;padding:.4rem .25rem .45rem!important;border-radius:0!important}
.td-board .fi-ta-group-header:first-child{margin-top:.5rem!important}
.td-board .fi-ta-group-heading{font-size:.95rem!important;font-weight:700!important;color:var(--td-ink)!important;letter-spacing:-.01em}
html.dark .td-board .fi-ta-group-header{border-bottom-color:#3a3a3a!important}
.td-board .fi-ta-group-header .fi-icon-btn{margin-inline-start:auto;color:var(--td-ink-3)}

/* the circle: priority ring while To Do (tick shows on hover), filled in the status colour after */
.td-circle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--td-c);background:color-mix(in srgb,var(--td-c) 9%,var(--td-paper));color:var(--td-c);flex:0 0 auto;margin-top:1px;transition:transform .12s ease,background .12s ease,box-shadow .12s ease}
.td-circle svg{width:12px;height:12px;opacity:0;transition:opacity .12s ease}
.td-col-circle{padding:.1rem .15rem;cursor:pointer}
.td-col-circle:hover .td-circle{transform:scale(1.12);box-shadow:0 0 0 4px color-mix(in srgb,var(--td-c) 18%,transparent)}
.td-col-circle:hover .td-circle svg{opacity:1}
.td-circle--done{background:var(--td-c);color:#fff}
.td-circle--done svg{opacity:1}
.td-col-circle:hover .td-circle--done{background:color-mix(in srgb,var(--td-c) 75%,#fff)}
.td-col-circle:disabled .td-circle,.fi-ta-col:not(button) .td-circle{cursor:default}

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

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

/* people: assignee avatar + name, owner in small print */
.td-people{display:inline-flex;align-items:center;gap:.5rem;min-width:9.5rem;max-width:14rem}
.td-avatar{width:32px;height:32px;border-radius:50%;background:var(--td-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 0 0 2px var(--td-paper),0 3px 8px rgba(0,0,0,.14)}
.td-avatar--none{background:transparent;border:1.5px dashed #c6c6c6;color:#b0b0b0;box-shadow:none}
.td-people-names{display:flex;flex-direction:column;line-height:1.22;min-width:0}
.td-people-names b{font-size:.8rem;font-weight:600;color:var(--td-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-people-names small{font-size:.68rem;color:var(--td-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.fi-ta-col:hover .td-avatar{transform:scale(1.06);transition:transform .12s ease}

/* files: small tiles, dimmed until the row is hovered */
.td-col-files{opacity:.85;transition:opacity .12s ease}
.fi-ta-record:hover .td-col-files{opacity:1}

/* "+ Add Task" under the list, Todoist's grey line that turns red on hover */
.td-board .fi-ta-content-footer,.td-add-wrap{padding:0}
.td-add{display:inline-flex;align-items:center;gap:.6rem;margin:.35rem 1.25rem .9rem;padding:.35rem .25rem;font-size:.88rem;font-weight:500;color:var(--td-ink-3);text-decoration:none;border-radius:.5rem;transition:color .12s ease}
.td-add-plus{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--td-red);transition:background .12s ease,color .12s ease}
.td-add-plus svg{width:16px;height:16px}
.td-add:hover{color:var(--td-red)}
.td-add:hover .td-add-plus{background:var(--td-red);color:#fff}

/* phones: the split stacks; keep the circle beside the card */
@media (max-width:767px){
  .td-board .fi-ta-split{gap:.45rem!important}
  .td-people{min-width:0}
  .td-snippet{max-width:100%}
}

/* ---------- Task page: form left, comments right (CommentsBesideTheTask, 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){
  .td-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}
}
.td-edit-main .fi-section{margin-bottom:0}

/* the thread card */
.td-edit-side .fi-ta-ctn{border-radius:16px!important;overflow:hidden}
html:not(.dark) .td-edit-side .fi-ta-ctn{background:#fff;box-shadow:0 6px 28px rgba(0,0,0,.07)!important;border:1px solid var(--erp-line-soft)!important}
.td-edit-side .fi-ta-header-ctn{border:0!important}
.td-edit-side .fi-ta-header{padding:1rem 1.1rem .25rem!important;display:block!important}
.td-thread-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.td-thread-title{display:inline-flex;align-items:center;gap:.5rem;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:var(--erp-ink);margin:0}
.td-thread-title svg{width:20px;height:20px;color:#246fe0}
.td-thread-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .45rem;border-radius:999px;background:var(--erp-grad);color:#fff;font-size:.72rem;font-weight:700}
html.dark .td-thread-title{color:#eee}

/* the composer, a soft card with the editor first */
.erp-comment-composer{padding:.85rem .9rem 1rem!important;border:1px solid var(--erp-line-soft)!important;border-radius:14px;background:#fafafa;margin-bottom:.25rem}
html.dark .erp-comment-composer{background:#171717;border-color:#2a2a2a!important}
.erp-comment-composer--editing{border-left:4px solid #eb8909!important;padding-left:.9rem!important;background:#fff8ee}
html.dark .erp-comment-composer--editing{background:rgba(235,137,9,.08)}
.erp-comment-composer__title{font-size:.78rem!important;text-transform:uppercase;letter-spacing:.06em;color:var(--erp-ink-3)!important;margin-bottom:.45rem!important}
.erp-comment-composer--editing .erp-comment-composer__title{color:#b45309!important}
.erp-comment-composer__pen{display:inline-block;margin-right:.1rem}
.erp-comment-composer .fi-fo-rich-editor{border-radius:12px;overflow:hidden}
.erp-comment-composer .fi-fo-rich-editor.erp-comment-editor .fi-fo-rich-editor-content{min-height:6.5rem}
.erp-comment-composer .fi-fo-field-label-content{font-size:.72rem!important;color:var(--erp-ink-3)}
.erp-comment-composer .fi-fo-field-helper-text{font-size:.68rem!important;line-height:1.2}
.erp-comment-composer .fi-grid{gap:.6rem .75rem!important;margin-top:.6rem}
.erp-comment-composer__actions{margin-top:.7rem!important;gap:.5rem!important}
.erp-comment-composer__actions .fi-btn{transition:transform .12s ease,box-shadow .15s ease}
.erp-comment-composer__actions .fi-btn.fi-color-primary:hover{transform:translateY(-1px) scale(1.02)}
.erp-comment-composer__kbd{margin-left:auto;font-family:ui-monospace,monospace;font-size:.66rem;color:var(--erp-ink-3);border:1px solid var(--erp-line);border-bottom-width:2px;border-radius:.4rem;padding:.1rem .4rem;background:#fff}
html.dark .erp-comment-composer__kbd{background:#222;border-color:#444}

/* the thread: chat messages, newest first; yours tinted */
.td-thread .fi-ta-header-toolbar{padding:.25rem 1.1rem .5rem!important;background:transparent!important;border:0!important}
.td-thread .fi-ta-header-toolbar .fi-ta-search-field{max-width:14rem}
.td-thread .fi-ta-content{gap:0!important;padding:0 .75rem .5rem!important}
.td-thread .fi-ta-content>:not(:last-child){border-color:transparent!important}
.td-thread .fi-ta-record{border-radius:14px!important;box-shadow:none!important;background:transparent!important;margin:.15rem 0;transition:background .12s ease}
html:not(.dark) .td-thread .fi-ta-record:hover{background:#f5f5f7!important}
html.dark .td-thread .fi-ta-record:hover{background:#1c1c1c!important}
.td-thread .fi-ta-record-content{padding:.6rem .5rem!important;display:block}
.td-thread .fi-ta-text{padding:0!important}
.td-thread .fi-ta-col{width:100%}
.td-thread .fi-ta-actions{padding:0 .4rem 0 0!important;opacity:0;transition:opacity .12s ease}
.td-thread .fi-ta-record:hover .fi-ta-actions,.td-thread .fi-ta-record:focus-within .fi-ta-actions{opacity:1}
.td-cmt{display:flex;gap:.65rem;align-items:flex-start;min-width:0}
.td-cmt-avatar{width:30px;height:30px;font-size:.7rem;margin-top:.1rem}
.td-cmt-body{min-width:0;flex:1}
.td-cmt-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .55rem;margin-bottom:.15rem}
.td-cmt-head b{font-size:.82rem;font-weight:700;color:var(--erp-ink)}
html.dark .td-cmt-head b{color:#eee}
.td-cmt-head time{font-size:.7rem;color:var(--erp-ink-3)}
.td-cmt-you{font-style:normal;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#246fe0;background:rgba(36,111,224,.1);padding:.05rem .4rem;border-radius:999px}
.td-cmt-sku{display:inline-flex;align-items:center;gap:.25rem;font-size:.68rem;font-weight:600;color:var(--erp-ink-2);background:#f0f0f3;border-radius:999px;padding:.08rem .5rem;text-decoration:none;max-width:22ch;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.td-cmt-sku svg{width:11px;height:11px;flex:0 0 auto}
a.td-cmt-sku:hover{color:#246fe0;background:rgba(36,111,224,.1)}
html.dark .td-cmt-sku{background:#262626;color:#ccc}
.td-cmt-text{font-size:.875rem;line-height:1.5;color:var(--erp-body);background:#f3f4f6;border-radius:4px 14px 14px 14px;padding:.55rem .8rem;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.td-cmt-text p{margin:0 0 .35rem}.td-cmt-text p:last-child{margin:0}
.td-cmt-text a{color:#246fe0;text-decoration:underline}
html.dark .td-cmt-text{background:#262626;color:#e5e5e5}
.td-cmt--mine .td-cmt-text{background:linear-gradient(135deg,rgba(0,113,227,.10),rgba(94,92,230,.12))}
html.dark .td-cmt--mine .td-cmt-text{background:rgba(36,111,224,.22)}
.td-cmt-files{margin-top:.4rem}
.td-cmt-files img{border-radius:8px!important}
.td-thread .fi-ta-empty-state{padding:1.5rem 1rem!important}
.td-thread .fi-pagination{padding:.5rem 1rem!important}

/* Drag a thumbnail in "Currently attached" to move it (Jake, 2026-10-18, "just like in Delite").
   erp-form-helpers.js does the moving; the first picture in the product list is the main one. */
.fi-fo-checkbox-list-options[data-erp-sortable]>.fi-fo-checkbox-list-option-ctn{cursor:grab;border-radius:10px;transition:box-shadow .12s,opacity .12s}
.fi-fo-checkbox-list-options[data-erp-sortable]>.fi-fo-checkbox-list-option-ctn:has(input:disabled){cursor:default}
.fi-fo-checkbox-list-options[data-erp-sortable]>.erp-dragging{opacity:.35;cursor:grabbing}
.fi-fo-checkbox-list-options[data-erp-sortable]>.erp-drop-before{box-shadow:-4px 0 0 0 #2563eb}
.fi-fo-checkbox-list-options[data-erp-sortable]>.erp-drop-after{box-shadow:4px 0 0 0 #2563eb}
.fi-fo-checkbox-list-options[data-erp-sortable].erp-reordered>.fi-fo-checkbox-list-option-ctn:first-child{box-shadow:0 0 0 3px rgba(37,99,235,.55)}
/* "Main" ribbon on whichever product picture is first in the list */
.fi-fo-checkbox-list-options[data-erp-sortable="quote_file_name"]>.fi-fo-checkbox-list-option-ctn:first-child .fi-fo-checkbox-list-option-label>a{position:relative;display:inline-block}
.fi-fo-checkbox-list-options[data-erp-sortable="quote_file_name"]>.fi-fo-checkbox-list-option-ctn:first-child .fi-fo-checkbox-list-option-label>a::after{content:'Main';position:absolute;top:6px;left:6px;padding:1px 7px;border-radius:999px;background:#2563eb;color:#fff;font-size:10px;font-weight:700;letter-spacing:.03em;line-height:1.4;pointer-events:none}

/* Timesheet "WebWork Hours": the Accept pill shows under the number on hover (Jake, 2026-10-19) */
.yk-ww-cell .yk-accept-pill{display:inline-block;margin-left:.35rem;padding:.1rem .6rem;border-radius:980px;font-size:.7rem;font-weight:600;letter-spacing:-.01em;color:#fff;background:linear-gradient(135deg,#16a34a 0%,#0d9488 100%);box-shadow:0 4px 12px rgba(22,163,74,.28);opacity:0;transform:translateY(2px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}
.yk-ww-cell.yk-ww-accept:hover .yk-accept-pill,.yk-ww-cell.yk-ww-accept:focus-within .yk-accept-pill{opacity:1;transform:none}
.yk-ww-cell.yk-ww-accept,.yk-ww-cell.yk-ww-open{cursor:pointer}
.yk-ww-cell.yk-ww-accept:hover{background:rgba(22,163,74,.07)}

/* Product name hover card on /quotes (2026-10-29): suppliers, inquiries, tasks. White frosted card,
   ink text, Apple-blue links, like the rest of the panel. One element on <body>, fixed (yk-product-peek.js). */
.yk-peek-trigger{border-bottom:1px dotted var(--erp-line);cursor:help}
.yk-peek-trigger:hover{border-bottom-color:var(--erp-blue);color:var(--erp-blue)}
.yk-peek{position:fixed;z-index:80;display:none;width:28rem;max-width:calc(100vw - 16px);max-height:min(560px,calc(100vh - 16px));overflow:auto;padding:12px 14px;border-radius:var(--erp-radius-sm);border:1px solid var(--erp-line-soft);background:rgba(255,255,255,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--erp-shadow-hover);font-size:12px;line-height:1.45;color:var(--erp-body);text-align:left;white-space:normal}
.yk-peek.is-open{display:block}
.yk-peek a{color:var(--erp-blue);font-weight:600;text-decoration:none}
.yk-peek a:hover{text-decoration:underline;text-underline-offset:2px}
.yk-peek-loading{color:var(--erp-ink-3);padding:6px 0}
.yk-peek-head{padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--erp-line-soft)}
.yk-peek-name{font-weight:700;font-size:13.5px;color:var(--erp-ink);letter-spacing:-.01em}
.yk-peek-sku{color:var(--erp-ink-3);font-size:11.5px;margin-top:1px}
.yk-peek-sec{padding:8px 0 4px;border-bottom:1px solid var(--erp-line-soft)}
.yk-peek-sec:last-child{border-bottom:0;padding-bottom:0}
.yk-peek-title{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--erp-ink-2);margin-bottom:4px}
.yk-peek-count{display:inline-flex;align-items:center;gap:4px;font-size:11px;letter-spacing:0;text-transform:none;font-weight:700;color:var(--erp-ink)}
.yk-peek-more{margin-left:auto;font-size:11px;letter-spacing:0;text-transform:none;font-weight:600}
.yk-peek-more i,.yk-peek-links i{font-style:normal;color:var(--erp-line);margin:0 5px}
.yk-peek-subhead{font-size:11px;font-weight:700;color:var(--erp-ink-2);margin:6px 0 2px}
.yk-peek-item{padding:4px 0}
.yk-peek-item+.yk-peek-item{border-top:1px dashed var(--erp-line-soft)}
.yk-peek-line{display:flex;align-items:baseline;gap:8px;color:var(--erp-ink)}
.yk-peek-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yk-peek-date{margin-left:auto;color:var(--erp-ink-3);font-size:11px;white-space:nowrap}
.yk-peek-sub,.yk-peek-links{margin-top:1px;font-size:11.5px;color:var(--erp-ink-2)}
.yk-peek-note{margin-top:2px;font-size:11.5px;color:var(--erp-ink-2);background:var(--erp-soft);border-radius:8px;padding:3px 7px}
.yk-peek-dim{color:var(--erp-ink-3)}
.yk-peek-empty{color:var(--erp-ink-3);padding:2px 0 4px}
.yk-peek-ok{color:#16a34a;font-weight:800}
.yk-peek-no{color:#e11d48;font-weight:800}
.yk-peek-pill{display:inline-block;padding:0 7px;border-radius:999px;background:var(--erp-tint);color:var(--erp-blue);font-size:10.5px;font-weight:700;line-height:1.6;white-space:nowrap}
.yk-peek-pill.is-red{background:#ffe4e6;color:#be123c}
.yk-peek-pill.is-green{background:#dcfce7;color:#15803d}
.dark .yk-peek{background:rgba(24,24,27,.97);border-color:rgba(255,255,255,.1);color:#d4d4d8}
.dark .yk-peek-name,.dark .yk-peek-line,.dark .yk-peek-count{color:#fafafa}
.dark .yk-peek-note{background:rgba(255,255,255,.06);color:#d4d4d8}
.dark .yk-peek a{color:#60a5fa}
@media (hover:none),(max-width:767px){.yk-peek-trigger{border-bottom:0;cursor:inherit}.yk-peek{display:none!important}}