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

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

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