/*
    Print Buddy Theme Master
    ==========================================================================
    Loaded after the legacy admin theme and dynamic Company Settings variables.
    This file is the master visual authority for admin layout, spacing,
    responsive behaviour and professional Print Buddy styling.

    CSS maintenance rules
    --------------------------------------------------------------------------
    - Keep theme.css as the older foundation layer until its rules have been
      migrated and visually verified section by section.
    - Do not edit vendor or generated Filament CSS.
    - Do not add another unlabelled styling pass at the bottom of this file.
    - Add new work to the relevant section below, then migrate older duplicate
      rules into that section only after visual verification.
    - Keep Design Edit Mode panel/tool styling in public/design-edit.
    - Existing important overrides are preserved for now because many are Filament
      overrides; reduce them gradually after page-by-page checks.
    - Shared component sections own the visual language. Page-specific sections
      may control layout, columns, visibility and responsive behaviour only.
    - Do not redefine field/button/card height, padding, font, border, radius,
      background or focus styling under page-specific selectors unless the
      exception is documented beside the rule.

    Target structure
    --------------------------------------------------------------------------
    01. File header and rules
    02. Theme tokens / variables
    03. Base admin shell
    04. Layout containers
    05. Sidebar and topbar
    06. Cards and panels
    07. Forms and fields
    08. Buttons and actions
    09. Tables and data grids
    10. Badges and statuses
    11. Dashboard components
    12. Invoice components
    13. Customer/product/supplier components
    14. Jobs and production components
    15. Settings and layout switcher
    16. Design Edit Mode compatibility helpers
    17. Responsive rules
    18. Temporary legacy / needs verification
*/

/* ==========================================================================
   02. Theme tokens / variables
   ========================================================================== */

:root {
    /* Brand colours. The green values use the newer reduced-accent pass. */
    --pb-brand-green: var(--td-accent, #7bb601);
    --pb-green: color-mix(in srgb, var(--pb-brand-green) 38%, var(--pb-ink, #30322f));
    --pb-green-strong: color-mix(in srgb, var(--pb-brand-green) 50%, var(--pb-ink, #30322f));
    --pb-green-soft: color-mix(in srgb, var(--pb-brand-green) 3.5%, #ffffff);
    --pb-green-softer: color-mix(in srgb, var(--pb-brand-green) 1.75%, #ffffff);
    --pb-primary: var(--pb-button);
    --pb-primary-dark: var(--td-button-hover, color-mix(in srgb, var(--pb-primary) 84%, #000000));
    --pb-primary-soft: color-mix(in srgb, var(--pb-primary) 10%, #ffffff);
    --pb-primary-border: color-mix(in srgb, var(--pb-primary) 32%, var(--pb-border));
    --pb-success: var(--pb-green-strong);
    --pb-danger: var(--td-danger, #c2413b);
    --pb-warning: var(--td-warning, #a96712);
    --pb-info: #246b8f;

    /* Surfaces and backgrounds. */
    --pb-bg: var(--td-page-bg, #f6f5ef);
    --pb-card: var(--td-card-bg, #ffffff);
    --pb-card-soft: color-mix(in srgb, var(--pb-card) 92%, var(--pb-bg));
    --pb-surface: var(--pb-card);
    --pb-surface-soft: var(--pb-card-soft);
    --pb-card-border: 1px solid var(--pb-border);
    --pb-card-radius: var(--pb-radius);
    --pb-card-bg: var(--pb-card);
    --pb-card-shadow: var(--pb-shadow-soft);
    --pb-card-padding: 16px;
    --pb-card-overflow: visible;
    --pb-panel-header-bg: color-mix(in srgb, var(--pb-card) 94%, var(--pb-bg));

    /* Text colours. */
    --pb-ink: var(--td-ink, #3f403e);
    --pb-muted: var(--td-ink-muted, #74766f);
    --pb-text: var(--pb-ink);

    /* Border colours. */
    --pb-border: var(--td-border, #d8d8d2);
    --pb-border-strong: var(--td-border-strong, #c7c7bd);
    --pb-shell-sidebar-bg: var(--td-sidebar-bg, var(--pb-card));
    --pb-shell-sidebar-text: var(--td-sidebar-text, var(--pb-muted));
    --pb-shell-sidebar-active-text: var(--td-sidebar-active-text, var(--pb-ink));
    --pb-shell-sidebar-border: var(--td-sidebar-border, var(--pb-border));
    --pb-shell-sidebar-shadow: var(--td-sidebar-shadow, none);
    --pb-shell-nav-hover-bg: var(--td-nav-hover-bg, var(--pb-green-softer));
    --pb-shell-nav-active-bg: var(--td-nav-active-bg, var(--pb-green-soft));
    --pb-shell-nav-active-shadow: var(--td-nav-active-shadow, none);
    --pb-shell-topbar-bg: var(--td-topbar-bg, var(--pb-card));
    --pb-shell-topbar-shadow: var(--td-topbar-shadow, none);

    /* Button values. */
    --pb-button: var(--td-button, #444444);
    --pb-button-text: var(--td-button-text, #ffffff);
    --pb-button-min-width: 144px;
    --pb-button-min-height: 42px;
    --pb-button-padding-x: 18px;
    --pb-button-gap: 8px;
    --pb-button-border: 1px solid var(--pb-border);
    --pb-button-radius: 12px;
    --pb-button-bg: var(--pb-surface);
    --pb-button-colour: var(--pb-text);
    --pb-button-shadow: 0 1px 2px rgba(23, 33, 31, 0.06);
    --pb-button-hover-bg: var(--pb-surface-soft);
    --pb-button-hover-border: var(--pb-primary-border);
    --pb-button-hover-shadow: 0 1px 2px rgba(23, 33, 31, 0.08);
    --pb-button-small-min-width: 96px;
    --pb-button-small-min-height: 34px;
    --pb-button-small-padding-x: 12px;
    --pb-button-small-radius: 10px;
    --pb-button-small-font-size: 12px;

    /* Status colours. Current intended values come from the later status pass. */
    --pb-status-action: var(--td-status-action, #b65f3d);
    --pb-status-production: var(--td-status-production, #3f6f9f);
    --pb-status-ready: var(--td-status-ready, #2f7f73);
    --pb-status-due: var(--td-status-due, #a7475a);
    --pb-status-green: var(--pb-status-ready);
    --pb-status-blue: var(--pb-status-production);
    --pb-status-teal: var(--pb-status-production);
    --pb-status-purple: var(--pb-status-action);
    --pb-status-amber: var(--pb-status-action);

    /* Invoice status colours. */
    --pb-invoice-paid: var(--td-invoice-status-paid, #2f7f73);
    --pb-invoice-part-paid: var(--td-invoice-status-part-paid, #c08a2c);
    --pb-invoice-unpaid: var(--td-invoice-status-unpaid, #a7475a);
    --pb-invoice-sent: var(--td-invoice-status-sent, #3f6f9f);
    --pb-invoice-chasing: var(--td-invoice-status-chasing, #7a4e9b);
    --pb-invoice-closed: var(--td-invoice-status-closed, #6b7280);

    /* Semantic derived colours. */
    --pb-danger-soft: color-mix(in srgb, var(--pb-danger) 10%, #ffffff);
    --pb-danger-border: color-mix(in srgb, var(--pb-danger) 28%, var(--pb-border));
    --pb-warning-soft: color-mix(in srgb, var(--pb-warning) 10%, #ffffff);
    --pb-success-soft: color-mix(in srgb, var(--pb-success) 10%, #ffffff);

    /* Radius values. */
    --pb-radius: 12px;
    --pb-radius-sm: 8px;
    --pb-radius-lg: 16px;
    --pb-control-radius: 10px;

    /* Control/input values. */
    --pb-control-height: 42px;
    --pb-label-weight: 650;
    --pb-field-height: var(--pb-control-height);
    --pb-field-min-height: var(--pb-control-height);
    --pb-field-border: 1px solid var(--pb-border);
    --pb-field-border-colour: var(--pb-border);
    --pb-field-radius: var(--pb-control-radius);
    --pb-field-bg: var(--td-form-input-bg, var(--td-input-bg, #ffffff));
    --pb-field-colour: var(--pb-ink);
    --pb-field-placeholder: color-mix(in srgb, var(--pb-muted) 68%, var(--pb-field-bg));
    --pb-field-padding-x: 12px;
    --pb-field-font-size: 0.9rem;
    --pb-field-font-weight: 500;
    --pb-field-focus-border: color-mix(in srgb, var(--pb-green) 58%, var(--pb-border));
    --pb-field-focus-shadow: var(--pb-ring);
    --pb-field-disabled-bg: color-mix(in srgb, var(--pb-bg) 78%, var(--pb-field-bg));
    --pb-field-disabled-colour: color-mix(in srgb, var(--pb-muted) 82%, var(--pb-ink));
    --pb-helper-text-size: 8pt;
    --pb-helper-text-colour: color-mix(in srgb, var(--pb-muted) 82%, var(--pb-field-bg));
    --pb-error-text-colour: var(--pb-danger);
    --pb-dropdown-z-index: 9999;
    --pb-dropdown-panel-bg: var(--pb-field-bg);
    --pb-dropdown-panel-border-colour: var(--pb-border);
    --pb-dropdown-panel-radius: var(--pb-field-radius);
    --pb-dropdown-panel-shadow: 0 16px 34px rgb(20 24 22 / 0.12), 0 2px 8px rgb(20 24 22 / 0.08);
    --pb-dropdown-option-min-height: 34px;
    --pb-dropdown-option-hover-bg: color-mix(in srgb, var(--pb-brand-green) 12%, var(--pb-field-bg));
    --pb-dropdown-option-selected-bg: color-mix(in srgb, var(--pb-brand-green) 18%, var(--pb-field-bg));

    /* Typography values. */
    --pb-button-weight: 680;
    --pb-font: var(--td-admin-font-family, Montserrat, "Inter Variable", Inter, Aptos, "Segoe UI", Roboto, Arial, sans-serif);
    --td-font: var(--pb-font);
    --font-sans: var(--pb-font);
    --default-font-family: var(--pb-font);

    /* Shadow values. */
    --pb-shadow: 0 1px 2px rgb(20 24 22 / 0.05), 0 12px 28px rgb(20 24 22 / 0.07);
    --pb-shadow-soft: 0 1px 2px rgb(20 24 22 / 0.05);
    --pb-ring: 0 0 0 3px color-mix(in srgb, var(--td-focus-ring, var(--pb-brand-green)) 10%, transparent);

    /* Spacing values from the older premium pass. */
    --pb-lux-space: clamp(14px, 1.8vw, 22px);
    --pb-lux-gap: clamp(12px, 1.6vw, 18px);

    /* Premium/pass helper tokens kept global because existing sections use them. */
    --pb-lux-bg-top: color-mix(in srgb, var(--pb-bg) 96%, #ffffff);
    --pb-lux-bg-bottom: color-mix(in srgb, var(--pb-bg) 88%, #d9d8cf);
    --pb-lux-line: color-mix(in srgb, var(--pb-border) 86%, #ffffff);
    --pb-lux-line-strong: color-mix(in srgb, var(--pb-border) 78%, var(--pb-ink));
    --pb-lux-card: color-mix(in srgb, var(--pb-card) 98%, var(--pb-bg));
    --pb-lux-card-muted: color-mix(in srgb, var(--pb-card) 90%, var(--pb-bg));
    --pb-lux-charcoal: #30322f;
    --pb-lux-shadow: 0 1px 1px rgb(20 24 22 / 0.035), 0 16px 38px rgb(20 24 22 / 0.075);
}

/* ==========================================================================
   03. Base admin shell
   ========================================================================== */

html {
    background: var(--pb-bg);
    color: var(--pb-ink);
    font-family: var(--pb-font);
    overflow-x: hidden;
}

body,
.fi-body {
    max-width: 100vw;
    background: var(--pb-bg) !important;
    color: var(--pb-ink);
    font-family: var(--pb-font) !important;
    overflow-x: clip;
}

.fi-body,
.fi-body button,
.fi-body input,
.fi-body select,
.fi-body textarea,
.fi-body optgroup {
    font-family: var(--pb-font) !important;
}

.fi-body *,
.fi-body *::before,
.fi-body *::after {
    box-sizing: border-box;
    min-width: 0;
}

.fi-body img,
.fi-body svg,
.fi-body video,
.fi-body canvas {
    max-width: 100%;
}

.fi-body a {
    text-underline-offset: 3px;
}

.fi-main {
    width: 100%;
    max-width: 100%;
    padding: clamp(14px, 2vw, 24px) !important;
}

.fi-page,
.fi-page-content,
.fi-page > *,
.fi-main > * {
    max-width: 100%;
}

.fi-page-header {
    gap: 14px !important;
    margin-bottom: 18px !important;
}

.fi-page-header-heading {
    color: var(--pb-ink) !important;
    font-size: clamp(1.34rem, 2.2vw, 1.9rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.16 !important;
}

.fi-page-header-subheading {
    max-width: 760px;
    color: var(--pb-muted) !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
}

/* ==========================================================================
   05. Sidebar and topbar
   ========================================================================== */
.fi-sidebar {
    border-right: 0 !important;
    background: var(--pb-shell-sidebar-bg) !important;
    box-shadow: var(--pb-shell-sidebar-shadow) !important;
}

.fi-sidebar-header {
    border-bottom: 0 !important;
    min-height: 102px !important;
    padding: 18px 18px 16px !important;
}

.fi-sidebar-header a,
.fi-sidebar-header .fi-logo {
    display: inline-flex !important;
    align-items: center !important;
    width: 100%;
}

.fi-sidebar-header img {
    width: auto !important;
    max-width: 214px !important;
    max-height: 58px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.fi-sidebar-nav {
    gap: 6px !important;
    padding-inline: 12px !important;
}

.fi-sidebar-group {
    margin-top: 8px !important;
}

.fi-sidebar-group-label {
    color: color-mix(in srgb, var(--pb-shell-sidebar-text) 82%, var(--pb-shell-sidebar-bg)) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

.fi-sidebar-item-button {
    min-height: 40px !important;
    border-radius: 10px !important;
    color: var(--pb-shell-sidebar-text) !important;
    font-weight: 650 !important;
    transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.fi-sidebar :where(
    .fi-sidebar-item-btn,
    .fi-sidebar-group-button,
    .fi-sidebar-group-btn,
    .fi-sidebar-group-collapse-button,
    .fi-sidebar-group-collapse-btn,
    .fi-sidebar-item-label,
    .fi-sidebar-group-label,
    .fi-sidebar-item-icon,
    .fi-sidebar-group-icon
) {
    color: var(--pb-shell-sidebar-text) !important;
}

.fi-sidebar :where(
    .fi-sidebar-item.fi-active .fi-sidebar-item-button,
    .fi-sidebar-item.fi-active .fi-sidebar-item-btn,
    .fi-sidebar-item.fi-active .fi-sidebar-group-button,
    .fi-sidebar-item.fi-active .fi-sidebar-group-btn,
    .fi-sidebar-item.fi-active .fi-sidebar-group-collapse-button,
    .fi-sidebar-item.fi-active .fi-sidebar-group-collapse-btn,
    .fi-sidebar-item.fi-active .fi-sidebar-item-label,
    .fi-sidebar-item.fi-active .fi-sidebar-group-label,
    .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
    .fi-sidebar-item.fi-active .fi-sidebar-group-icon
) {
    color: var(--pb-shell-sidebar-active-text) !important;
}

.fi-sidebar-item-button:hover {
    background: var(--pb-shell-nav-hover-bg) !important;
    color: var(--pb-shell-sidebar-active-text) !important;
}

.fi-sidebar :where(
    .fi-sidebar-item-btn:hover,
    .fi-sidebar-group-button:hover,
    .fi-sidebar-group-btn:hover,
    .fi-sidebar-group-collapse-button:hover,
    .fi-sidebar-group-collapse-btn:hover
) {
    color: var(--pb-shell-sidebar-active-text) !important;
}

.fi-sidebar :where(
    .fi-sidebar-item-button:hover .fi-sidebar-item-label,
    .fi-sidebar-item-button:hover .fi-sidebar-group-label,
    .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
    .fi-sidebar-item-button:hover .fi-sidebar-group-icon,
    .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
    .fi-sidebar-item-btn:hover .fi-sidebar-group-label,
    .fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
    .fi-sidebar-item-btn:hover .fi-sidebar-group-icon,
    .fi-sidebar-group-button:hover .fi-sidebar-item-label,
    .fi-sidebar-group-button:hover .fi-sidebar-group-label,
    .fi-sidebar-group-button:hover .fi-sidebar-item-icon,
    .fi-sidebar-group-button:hover .fi-sidebar-group-icon,
    .fi-sidebar-group-btn:hover .fi-sidebar-item-label,
    .fi-sidebar-group-btn:hover .fi-sidebar-group-label,
    .fi-sidebar-group-btn:hover .fi-sidebar-item-icon,
    .fi-sidebar-group-btn:hover .fi-sidebar-group-icon
) {
    color: var(--pb-shell-sidebar-active-text) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: var(--pb-shell-nav-active-bg) !important;
    color: var(--pb-shell-sidebar-active-text) !important;
    box-shadow: inset 3px 0 0 var(--pb-brand-green), var(--pb-shell-nav-active-shadow) !important;
}

.fi-sidebar-item-icon {
    color: inherit !important;
}

.fi-topbar {
    position: sticky !important;
    top: 0;
    z-index: 40;
    min-height: 72px !important;
    height: auto !important;
    padding: 10px clamp(12px, 2vw, 22px) !important;
    border-bottom: 0 !important;
    background: var(--pb-shell-topbar-bg) !important;
    box-shadow: var(--pb-shell-topbar-shadow) !important;
    gap: 12px !important;
}

.fi-topbar-start {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
}

.fi-topbar-start > a,
.fi-topbar-start > .fi-logo {
    display: inline-flex !important;
    align-items: center !important;
    padding-block: 8px !important;
}

.fi-topbar .fi-logo img {
    width: auto !important;
    max-width: min(210px, 36vw) !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.fi-topbar-end {
    flex: 0 0 auto !important;
    gap: 7px !important;
    min-height: 40px !important;
    padding: 3px !important;
    border: 1px solid var(--pb-border) !important;
    border-radius: 999px !important;
    background: var(--pb-card) !important;
    box-shadow: var(--pb-shadow-soft) !important;
}

.fi-topbar .fi-icon-btn,
.fi-topbar .fi-user-menu-trigger,
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn,
.fi-topbar-open-collapse-sidebar-btn,
.fi-topbar-close-collapse-sidebar-btn {
    border-radius: 999px !important;
}

.td-bank-holidays {
    left: 50% !important;
    max-width: min(48vw, 720px) !important;
    min-height: 34px !important;
    border: 1px solid var(--pb-border) !important;
    background: var(--pb-card) !important;
    box-shadow: var(--pb-shadow-soft) !important;
    color: var(--pb-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 650 !important;
}

.td-bank-holidays strong,
.td-bank-holidays b {
    color: var(--pb-ink) !important;
}

/* ==========================================================================
   06. Cards and panels
   ========================================================================== */
.pb-card,
.pb-panel,
.fi-section,
.fi-ta,
.fi-wi-widget,
.td-card,
.td-panel,
.td-command,
.td-workflow-panel,
.td-workflow-job,
.td-job-card,
.td-dashboard-action,
.td-money,
.td-kpi,
.td-list-row,
.td-workflow-list-row {
    /* Filament ships strong component styles, so important remains at this ownership boundary only. */
    border: var(--pb-card-border) !important;
    border-radius: var(--pb-card-radius) !important;
    background: var(--pb-card-bg) !important;
    box-shadow: var(--pb-card-shadow) !important;
}

.pb-card,
.pb-panel {
    overflow: var(--pb-card-overflow);
}

.pb-card--clip,
.pb-panel--clip,
.pb-media-card,
.pb-visual-card,
.td-card--journey {
    overflow: hidden;
}

.pb-card__header,
.fi-section-header,
.fi-ta-header,
.td-panel__header,
.td-workflow-panel__head {
    border-bottom: var(--pb-card-border) !important;
    background: var(--pb-panel-header-bg) !important;
}

.fi-section-header-heading,
.fi-ta-header-heading,
.td-panel__title,
.td-workflow-panel__title {
    color: var(--pb-ink) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.fi-section-header-description,
.td-panel__copy,
.td-workflow-copy,
.td-subtitle {
    color: var(--pb-muted) !important;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
}

.fi-section-content-ctn,
.fi-ta-content-ctn,
.fi-wi-widget-content,
.pb-card__body,
.td-panel__body,
.td-workflow-panel__body {
    max-width: 100%;
}

.pb-card__body,
.pb-panel__body {
    padding: var(--pb-card-padding);
}

.pb-card--soft {
    --pb-card-bg: var(--pb-card-soft);
    --pb-card-shadow: none;
}

.pb-card--compact {
    --pb-card-padding: 12px;
}

.pb-card--invoice {
    --pb-card-border: 1px solid var(--pb-lux-line);
    --pb-card-radius: var(--td-card-radius, 16px);
    --pb-card-shadow: none;
}

.pb-card--dashboard {
    --pb-card-shadow: var(--pb-shadow-soft);
}

.pb-card--settings {
    --pb-card-bg: var(--pb-card);
}

.pb-card--supplier {
    --pb-card-radius: var(--pb-radius-lg);
    --pb-card-shadow: var(--pb-shadow);
}

.pb-card--production {
    --pb-card-overflow: visible;
}

.fi-grid,
.fi-fo-component-ctn,
.td-grid,
.td-kpi-grid,
.td-money-grid,
.td-action-grid,
.td-workflow-grid,
.td-workflow-summary,
.td-production-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.fi-fo-component-ctn > *,
.fi-grid > *,
.td-grid > *,
.td-kpi-grid > *,
.td-money-grid > *,
.td-action-grid > *,
.td-workflow-grid > *,
.td-workflow-summary > * {
    min-width: 0;
}

/* ==========================================================================
   04. Layout containers
   --------------------------------------------------------------------------
   Kept in this original cascade position to avoid changing live visuals.
   ========================================================================== */
/* Full-width card behaviour for the newer admin screens. */
.fi-ta-content-grid,
.fi-wi-stats-overview-stats-ctn,
.td-card-stack,
.pb-card-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

@media (max-width: 1200px) {
    .fi-grid,
    .td-kpi-grid,
    .td-money-grid,
    .td-action-grid,
    .td-workflow-grid,
    .td-workflow-summary,
    .td-production-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   07. Forms and fields
   ========================================================================== */
/* Shared control contract.
   New text inputs, native selects, Filament selects/searchable selects,
   textarea controls and repeater fields should inherit from this section.
   Layout wrappers should not redefine field height, padding, font, border,
   radius, background, focus ring, placeholder or disabled styling. */
.pb-form,
.fi-form {
    max-width: 100%;
}

.pb-form-group,
.pb-field,
.fi-fo-field-wrp {
    min-width: 0;
    max-width: 100%;
}

.pb-field__control,
.fi-fo-field-wrp-control,
.choices {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.fi-fo-field-wrp:has(.choices),
.fi-fo-field-wrp-control:has(.choices),
.fi-fo-select,
.choices {
    overflow: visible !important;
}

/* Dropdown / popover escape safety
   Filament select dropdowns are absolutely positioned and must not be clipped
   by card/section overflow rules. */
.fi-section,
.fi-section-content,
.fi-section-content-ctn,
.fi-sc,
.fi-sc-component,
.fi-fo-field,
.fi-fo-field-content-col,
.fi-input-wrp,
.fi-input-wrp-content-ctn,
.fi-select-input,
.fi-select-input-ctn,
.fi-fo-select,
.fi-fo-select-wrp {
    overflow: visible !important;
}

.fi-dropdown-panel,
.fi-select-input-ctn .fi-dropdown-panel {
    z-index: 9999 !important;
}

/* Collapsed Filament sections must clip their own contents.
   Keep dropdown escape behaviour for open forms, but do not let controls
   leak out of collapsed wrappers such as the job edit accordions. */
.fi-main .fi-section.fi-collapsible.fi-collapsed > .fi-section-content-ctn,
.fi-main .fi-section.fi-collapsible > .fi-section-content-ctn[x-cloak],
.fi-main .fi-section.fi-collapsible > .fi-section-content-ctn[style*="display: none"] {
    overflow: hidden !important;
    display: none !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding-block: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

.fi-main .fi-section.fi-collapsible > .fi-section-content-ctn[x-cloak],
.fi-main .fi-section.fi-collapsible > .fi-section-content-ctn[style*="display: none"] {
    display: none !important;
}

.fi-main .fi-section.fi-collapsible.fi-collapsed > .fi-section-content-ctn > .fi-section-content,
.fi-main .fi-section.fi-collapsible > .fi-section-content-ctn[x-cloak] > .fi-section-content,
.fi-main .fi-section.fi-collapsible > .fi-section-content-ctn[style*="display: none"] > .fi-section-content {
    overflow: hidden !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fi-main .fi-section.fi-collapsible.fi-collapsed > .fi-section-content-ctn > :not(.fi-section-header),
.fi-main .fi-section.fi-collapsible.fi-collapsed > .fi-section-content-ctn > .fi-section-content > *,
.fi-main .fi-section.fi-collapsible > .fi-section-content-ctn[x-cloak] > :not(.fi-section-header),
.fi-main .fi-section.fi-collapsible > .fi-section-content-ctn[x-cloak] > .fi-section-content > *,
.fi-main .fi-section.fi-collapsible > .fi-section-content-ctn[style*="display: none"] > :not(.fi-section-header),
.fi-main .fi-section.fi-collapsible > .fi-section-content-ctn[style*="display: none"] > .fi-section-content > * {
    display: none !important;
}

/* Form control contract
   --------------------------------------------------------------------------
   One visible owner per control:
   - Text inputs: .fi-input-wrp
   - Filament searchable/select controls: .fi-select-input-btn
   - Native selects: select.fi-select-input
   Structural select wrappers must stay transparent so dropdowns do not create
   boxes inside boxes. */
.fi-input-wrp,
.fi-select-input,
.fi-select-input-ctn,
.fi-select-input-btn,
.fi-fo-text-input,
.fi-fo-textarea,
.fi-fo-select,
.fi-fo-select-wrp,
.choices,
.choices__inner,
.fi-fo-date-time-picker,
.fi-fo-file-upload {
    max-width: 100%;
    box-sizing: border-box !important;
}

.fi-main :where(
    .fi-input-wrp.fi-fo-select,
    .fi-input-wrp:has(.fi-select-input-btn),
    .fi-input-wrp:has(div.fi-select-input),
    .fi-input-wrp:has(select.fi-select-input),
    div.fi-select-input,
    .fi-select-input-ctn,
    .fi-fo-select-wrp,
    .fi-fo-select-wrp .fi-fo-field-wrp-control,
    .fi-fo-select-wrp .fi-fo-field-wrp-control > div
) {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.fi-main .fi-form .fi-input-wrp.fi-fo-select,
.fi-main .fi-form .fi-input-wrp:has(.fi-select-input-btn),
.fi-main .fi-form .fi-input-wrp:has(div.fi-select-input),
.fi-main .fi-form .fi-input-wrp:has(select.fi-select-input),
.fi-main .fi-form div.fi-select-input,
.fi-main .fi-form .fi-select-input-ctn,
.td-checkout-panel .fi-input-wrp.fi-fo-select,
.td-checkout-panel .fi-input-wrp:has(.fi-select-input-btn),
.td-checkout-panel .fi-input-wrp:has(div.fi-select-input),
.td-checkout-panel .fi-input-wrp:has(select.fi-select-input),
.td-checkout-panel div.fi-select-input,
.td-checkout-panel .fi-select-input-ctn {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.pb-field__control,
.pb-input,
.pb-select,
.pb-textarea,
.fi-input-wrp:not(.fi-fo-select):not(:has(.fi-select-input-btn)):not(:has(div.fi-select-input)):not(:has(select.fi-select-input)),
.fi-select-input-btn,
select.fi-select-input,
.fi-textarea,
.choices__inner {
    min-height: var(--pb-field-min-height) !important;
    border: var(--pb-field-border) !important;
    border-color: var(--pb-field-border-colour) !important;
    border-radius: var(--pb-field-radius) !important;
    background: var(--pb-field-bg) !important;
    color: var(--pb-field-colour) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.pb-input,
.pb-select,
.fi-input,
.fi-select-input-btn,
select.fi-select-input {
    height: var(--pb-field-height) !important;
}

.pb-field__control:focus-within,
.pb-input:focus,
.pb-select:focus,
.pb-textarea:focus,
.fi-input-wrp:not(.fi-fo-select):not(:has(.fi-select-input-btn)):not(:has(div.fi-select-input)):not(:has(select.fi-select-input)):focus-within,
.fi-select-input-btn:focus,
.fi-select-input-btn:focus-visible,
select.fi-select-input:focus,
.fi-textarea:focus,
.choices.is-focused .choices__inner {
    border-color: var(--pb-field-focus-border) !important;
    box-shadow: var(--pb-field-focus-shadow) !important;
    outline: none !important;
}

.pb-input,
.pb-select,
.pb-textarea,
.fi-input,
.fi-select-input-btn,
select.fi-select-input,
.fi-select-input-value-label,
.fi-select-input-placeholder,
.fi-textarea,
.choices__input,
.choices__item {
    color: var(--pb-field-colour) !important;
    font-size: var(--pb-field-font-size) !important;
    font-weight: var(--pb-field-font-weight) !important;
    line-height: 1.25 !important;
}

.pb-input,
.pb-select,
.fi-input,
.fi-select-input-btn,
select.fi-select-input {
    min-height: var(--pb-field-min-height) !important;
    align-items: center !important;
}

.pb-input,
.pb-select,
.fi-input,
.fi-select-input-btn,
select.fi-select-input,
.choices__inner {
    padding-inline: var(--pb-field-padding-x) !important;
}

.fi-select-input-btn {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 10px !important;
    text-align: left !important;
}

.fi-select-input-value-ctn,
.fi-select-input-value-label,
.fi-select-input-placeholder {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.fi-select-input-placeholder {
    color: var(--pb-field-placeholder) !important;
}

.fi-select-input-btn :where(svg, .fi-icon),
select.fi-select-input :where(svg, .fi-icon) {
    color: var(--pb-muted) !important;
    flex: 0 0 auto !important;
}

.pb-textarea,
.fi-textarea {
    min-height: 96px !important;
    padding: 10px var(--pb-field-padding-x) !important;
    resize: vertical;
}

.pb-input::placeholder,
.pb-textarea::placeholder,
.fi-input::placeholder,
.fi-textarea::placeholder {
    color: var(--pb-field-placeholder) !important;
}

.pb-field__label,
.fi-fo-field-wrp-label,
.fi-fo-field-wrp-label span {
    color: var(--pb-field-colour) !important;
    font-size: 0.86rem !important;
    font-weight: var(--pb-label-weight) !important;
    letter-spacing: 0 !important;
}

.pb-helper-text,
.pb-error-text,
.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint,
.fi-fo-field-wrp-error-message {
    max-width: 100%;
    font-size: var(--pb-helper-text-size) !important;
    line-height: 1.35 !important;
}

.pb-helper-text,
.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint {
    color: var(--pb-helper-text-colour) !important;
}

.pb-error-text,
.fi-fo-field-wrp-error-message {
    color: var(--pb-error-text-colour) !important;
}

.pb-input:disabled,
.pb-select:disabled,
.pb-textarea:disabled,
.fi-input:disabled,
.fi-select-input-btn:disabled,
.fi-select-input-btn[aria-disabled="true"],
select.fi-select-input:disabled,
.fi-textarea:disabled,
.fi-input-wrp:not(.fi-fo-select):not(:has(.fi-select-input-btn)):not(:has(div.fi-select-input)):not(:has(select.fi-select-input)):has(:disabled),
.choices.is-disabled .choices__inner {
    cursor: not-allowed !important;
    background: var(--pb-field-disabled-bg) !important;
    color: var(--pb-field-disabled-colour) !important;
    opacity: 1 !important;
}

/* Dropdown/select/flyout contract. Width is owned by layout; presentation and
   escape behaviour are owned here. */
.fi-main :where(.fi-dropdown, .fi-dropdown-panel, .fi-select-panel, .fi-select-input-ctn .fi-dropdown-panel),
.choices.is-open,
.choices.is-focused {
    z-index: var(--pb-dropdown-z-index) !important;
}

.fi-dropdown-panel,
.fi-select-panel,
.fi-select-input-ctn .fi-dropdown-panel,
.choices__list--dropdown,
.choices__list[aria-expanded] {
    overflow: hidden !important;
    border: 1px solid var(--pb-dropdown-panel-border-colour) !important;
    border-radius: var(--pb-dropdown-panel-radius) !important;
    background: var(--pb-dropdown-panel-bg) !important;
    color: var(--pb-field-colour) !important;
    box-shadow: var(--pb-dropdown-panel-shadow) !important;
}

.fi-dropdown-panel[data-popper-placement^="bottom"],
.fi-select-input-ctn .fi-dropdown-panel[data-popper-placement^="bottom"] {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

.fi-dropdown-panel[data-popper-placement^="top"],
.fi-select-input-ctn .fi-dropdown-panel[data-popper-placement^="top"] {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.fi-dropdown-list,
.fi-select-input-options,
.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list,
[role="listbox"] {
    max-height: min(320px, 48vh) !important;
    overflow: auto !important;
    padding: 6px !important;
}

.fi-select-input-search-ctn,
.fi-dropdown-panel .fi-input-wrp,
.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input {
    margin: 6px !important;
}

.fi-select-input-search-ctn .fi-input-wrp,
.fi-dropdown-panel .fi-input-wrp {
    min-height: 36px !important;
    border-color: var(--pb-border) !important;
    border-radius: calc(var(--pb-field-radius) - 2px) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.fi-dropdown-list-item,
.fi-select-input-option,
.choices__item--choice,
[role="option"] {
    min-height: var(--pb-dropdown-option-min-height) !important;
    padding: 8px 10px !important;
    border-radius: calc(var(--pb-field-radius) - 3px) !important;
    color: var(--pb-field-colour) !important;
    font-size: var(--pb-field-font-size) !important;
    font-weight: var(--pb-field-font-weight) !important;
    line-height: 1.3 !important;
}

.fi-dropdown-list-item:hover,
.fi-select-input-option:hover,
.choices__item--choice:hover,
[role="option"]:hover {
    background: var(--pb-dropdown-option-hover-bg) !important;
    color: var(--pb-field-colour) !important;
}

.fi-dropdown-list-item[aria-selected="true"],
.fi-select-input-option[aria-selected="true"],
.choices__item--choice.is-highlighted,
[role="option"][aria-selected="true"] {
    background: var(--pb-dropdown-option-selected-bg) !important;
    color: var(--pb-field-colour) !important;
}

/* Consistent Filament form switches. Do not target segmented ToggleButtons. */
.fi-main .fi-toggle.fi-fo-toggle,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle {
    box-sizing: border-box !important;
    --pb-toggle-off-bg: #ECEBE3;
    --pb-toggle-on-bg: #30322F;
    --pb-toggle-border: rgba(48, 50, 47, 0.14);
    --pb-toggle-knob: #FFFFFF;

    position: relative !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 30px !important;
    flex: 0 0 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

.fi-main .fi-toggle.fi-fo-toggle.fi-toggle-on,
.fi-main .fi-toggle.fi-fo-toggle[aria-checked="true"],
.fi-main .fi-toggle.fi-fo-toggle.fi-toggle-off,
.fi-main .fi-toggle.fi-fo-toggle[aria-checked="false"],
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle.fi-toggle-on,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle[aria-checked="true"],
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle.fi-toggle-off,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle[aria-checked="false"],
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle.fi-toggle-on,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle[aria-checked="true"],
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle.fi-toggle-off,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle[aria-checked="false"] {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 30px !important;
    flex: 0 0 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    left: auto !important;
    right: auto !important;
}

.fi-main .fi-toggle.fi-fo-toggle > div,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle > div,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle > div {
    position: relative !important;
    display: block !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: var(--pb-toggle-off-bg) !important;
    border: 1px solid var(--pb-toggle-border) !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
    transform: none !important;
    translate: none !important;
    box-shadow:
        inset 0 1px 1px rgba(48, 50, 47, 0.06),
        inset 0 -1px 0 rgba(255, 255, 255, 0.55) !important;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease !important;
}

.fi-main .fi-toggle.fi-fo-toggle[aria-checked="true"] > div,
.fi-main .fi-toggle.fi-fo-toggle.fi-toggle-on > div,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle.fi-toggle-on > div,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle[aria-checked="true"] > div,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle.fi-toggle-on > div,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle[aria-checked="true"] > div {
    background: var(--pb-toggle-on-bg) !important;
    border-color: var(--pb-toggle-on-bg) !important;
    transform: none !important;
    translate: none !important;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.14),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
}

.fi-main .fi-toggle.fi-fo-toggle > div > div:first-child,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle > div > div:first-child,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle > div > div:first-child {
    position: absolute !important;
    display: block !important;
    top: 50% !important;
    left: 4px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--pb-toggle-knob) !important;
    color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    transform: translateY(-50%) !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease !important;
}

.fi-main .fi-toggle.fi-fo-toggle.fi-toggle-on > div > div:first-child,
.fi-main .fi-toggle.fi-fo-toggle[aria-checked="true"] > div > div:first-child,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle.fi-toggle-on > div > div:first-child,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle[aria-checked="true"] > div > div:first-child,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle.fi-toggle-on > div > div:first-child,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle[aria-checked="true"] > div > div:first-child {
    transform: translate(22px, -50%) !important;
}

.fi-main .fi-toggle.fi-fo-toggle > div > div:first-child :where(svg, span),
.fi-main .fi-toggle.fi-fo-toggle > div > div:last-child,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle > div > div:first-child :where(svg, span),
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle > div > div:last-child,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle > div > div:first-child :where(svg, span),
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle > div > div:last-child {
    display: none !important;
}

.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle.fi-fo-toggle::after,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle.fi-fo-toggle::after {
    content: none !important;
    display: none !important;
}

.fi-main .fi-toggle.fi-fo-toggle.td-walk-in-toggle,
.fi-main .td-walk-in-toggle-field .fi-toggle.fi-fo-toggle {
    --pb-toggle-off-bg: #ECEBE3;
    --pb-toggle-on-bg: #30322F;
    --pb-toggle-border: rgba(48, 50, 47, 0.14);
    --pb-toggle-knob: #FFFFFF;
}

.fi-main .td-walk-in-toggle-field {
    min-width: max-content !important;
}

.fi-main .td-walk-in-toggle-field .fi-fo-field-wrp {
    min-width: max-content !important;
}

.fi-main .fi-toggle.fi-fo-toggle.td-walk-in-toggle,
.fi-main .td-walk-in-toggle-field button.fi-toggle,
.fi-main .td-walk-in-toggle-field .fi-toggle,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    flex: 0 0 52px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    overflow: visible !important;
}

.fi-main .fi-toggle.fi-fo-toggle.td-walk-in-toggle > div,
.fi-main .td-walk-in-toggle-field button.fi-toggle > div,
.fi-main .td-walk-in-toggle-field .fi-toggle > div,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle > div,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle > div {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

.fi-main .fi-toggle.fi-fo-toggle.td-walk-in-toggle > div > div:first-child,
.fi-main .td-walk-in-toggle-field button.fi-toggle > div > div:first-child,
.fi-main .td-walk-in-toggle-field .fi-toggle > div > div:first-child,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle > div > div:first-child,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle > div > div:first-child {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    border-radius: 999px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) !important;
}

.fi-main .fi-toggle.fi-fo-toggle.td-walk-in-toggle.fi-toggle-on > div > div:first-child,
.fi-main .fi-toggle.fi-fo-toggle.td-walk-in-toggle[aria-checked="true"] > div > div:first-child,
.fi-main .td-walk-in-toggle-field button.fi-toggle.fi-toggle-on > div > div:first-child,
.fi-main .td-walk-in-toggle-field button.fi-toggle[aria-checked="true"] > div > div:first-child,
.fi-main .td-walk-in-toggle-field .fi-toggle.fi-toggle-on > div > div:first-child,
.fi-main .td-walk-in-toggle-field .fi-toggle[aria-checked="true"] > div > div:first-child {
    transform: translate(22px, -50%) !important;
}

.fi-main .td-walk-in-toggle-field button.fi-toggle::after,
.fi-main .td-walk-in-toggle-field .fi-toggle::after,
.fi-main .td-checkout-panel button.td-walk-in-toggle.fi-toggle::after,
.fi-main .td-checkout-panel .fi-toggle.td-walk-in-toggle::after {
    content: none !important;
    display: none !important;
}

.fi-main .td-artwork-required-field .fi-toggle.fi-fo-toggle {
    --pb-toggle-off-bg: #F3EEE2;
    --pb-toggle-on-bg: #B8995A;
    --pb-toggle-border: #E5D9BC;
    --pb-toggle-knob: #FFFFFF;
}

.fi-main .td-print-ready-artwork-field .fi-toggle.fi-fo-toggle {
    --pb-toggle-off-bg: #F2F1EA;
    --pb-toggle-on-bg: #AABA8B;
    --pb-toggle-border: #D7D4C8;
    --pb-toggle-knob: #FFFFFF;
}

.fi-main .td-line-urgent-field .fi-toggle.fi-fo-toggle,
.fi-main .td-job-urgent-field .fi-toggle.fi-fo-toggle {
    --pb-toggle-off-bg: #F1EAE7;
    --pb-toggle-on-bg: #B85C46;
    --pb-toggle-border: #E3D7D1;
    --pb-toggle-knob: #FFFFFF;
}

.fi-main .td-job-artwork-toggle-field.fi-fo-field-has-inline-label {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

.fi-main .td-job-artwork-toggle-field .fi-fo-field-wrp {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fi-main .td-job-artwork-toggle-field .fi-fo-field-label-col {
    min-height: 0 !important;
}

.fi-main .td-job-artwork-toggle-field :where(.fi-fo-field-wrp-label, .fi-fo-field-label, .fi-fo-field-wrp-label label) {
    display: inline-flex !important;
    width: auto !important;
    min-width: max-content !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    color: var(--pb-text) !important;
    font-size: 13px !important;
    font-weight: var(--pb-label-weight) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.fi-fo-field-wrp-error-message {
    color: var(--pb-danger) !important;
}

.fi-fo-repeater-item {
    border: 1px solid var(--pb-border) !important;
    border-radius: var(--pb-radius) !important;
    background: var(--pb-card) !important;
    box-shadow: var(--pb-shadow-soft) !important;
    overflow: hidden !important;
}

.fi-fo-repeater-item-header {
    background: color-mix(in srgb, var(--pb-card) 94%, var(--pb-bg)) !important;
    border-bottom: 1px solid var(--pb-border) !important;
}

/* ==========================================================================
   08. Buttons and actions
   ========================================================================== */
.pb-button,
.pb-admin-btn,
.fi-btn,
.td-action,
.td-workflow-button,
.td-workflow-link,
.pb-action-button {
    display: inline-flex !important;
    min-width: var(--pb-button-min-width) !important;
    min-height: var(--pb-button-min-height) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--pb-button-gap) !important;
    padding: 0 var(--pb-button-padding-x) !important;
    border: var(--pb-button-border) !important;
    border-radius: var(--pb-button-radius) !important;
    background: var(--pb-button-bg) !important;
    color: var(--pb-button-colour) !important;
    font-family: var(--pb-font, "Montserrat", Arial, sans-serif) !important;
    font-size: 13px !important;
    font-weight: var(--pb-button-weight) !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: var(--pb-button-shadow) !important;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
}

.pb-button:hover,
.pb-admin-btn:hover,
.fi-btn:hover,
.td-action:hover,
.td-workflow-button:hover,
.td-workflow-link:hover,
.pb-action-button:hover {
    border-color: var(--pb-button-hover-border) !important;
    background: var(--pb-button-hover-bg) !important;
    color: var(--pb-button-colour) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--pb-button-hover-shadow) !important;
}

.pb-button:active,
.pb-admin-btn:active,
.fi-btn:active,
.td-action:active,
.td-workflow-button:active,
.td-workflow-link:active,
.pb-action-button:active {
    transform: translateY(0) !important;
    box-shadow: var(--pb-button-shadow) !important;
}

.pb-button--small,
.fi-btn-size-xs,
.fi-btn-size-sm,
.pb-admin-btn--utility {
    min-width: var(--pb-button-small-min-width) !important;
    min-height: var(--pb-button-small-min-height) !important;
    padding: 0 var(--pb-button-small-padding-x) !important;
    border-radius: var(--pb-button-small-radius) !important;
    font-size: var(--pb-button-small-font-size) !important;
}

.pb-button--primary,
.fi-btn-color-primary,
.fi-btn.fi-color-primary,
.pb-admin-btn--primary,
.td-action--primary,
.td-workflow-button--primary,
.pb-action-button--primary {
    --pb-button-border: 1px solid var(--pb-primary);
    --pb-button-bg: var(--pb-primary);
    --pb-button-colour: var(--pb-button-text);
    --pb-button-hover-border: var(--pb-primary-dark);
    --pb-button-hover-bg: var(--pb-primary-dark);
    border-color: var(--pb-primary) !important;
    background: var(--pb-primary) !important;
    color: var(--pb-button-text) !important;
}

.pb-button--primary:hover,
.fi-btn-color-primary:hover,
.fi-btn.fi-color-primary:hover,
.pb-admin-btn--primary:hover,
.td-action--primary:hover,
.td-workflow-button--primary:hover,
.pb-action-button--primary:hover {
    border-color: var(--pb-primary-dark) !important;
    background: var(--pb-primary-dark) !important;
    color: var(--pb-button-text) !important;
}

.pb-button--soft,
.fi-btn-color-success,
.fi-btn.fi-color-success,
.pb-admin-btn--soft-primary,
.td-action--soft-primary,
.td-workflow-link--primary,
.pb-action-button--soft-primary {
    --pb-button-border: 1px solid var(--pb-primary-border);
    --pb-button-bg: var(--pb-primary-soft);
    --pb-button-colour: var(--pb-primary-dark);
    --pb-button-hover-border: var(--pb-primary);
    --pb-button-hover-bg: color-mix(in srgb, var(--pb-primary) 16%, #ffffff);
    border-color: var(--pb-primary-border) !important;
    background: var(--pb-primary-soft) !important;
    color: var(--pb-primary-dark) !important;
}

.pb-button--soft:hover,
.fi-btn-color-success:hover,
.fi-btn.fi-color-success:hover,
.pb-admin-btn--soft-primary:hover,
.td-action--soft-primary:hover,
.td-workflow-link--primary:hover,
.pb-action-button--soft-primary:hover {
    border-color: var(--pb-primary) !important;
    background: color-mix(in srgb, var(--pb-primary) 16%, #ffffff) !important;
    color: var(--pb-primary-dark) !important;
}

.pb-button--secondary,
.fi-btn:not(.fi-btn-color-primary):not(.fi-btn-color-success):not(.fi-btn-color-danger):not(.fi-color-primary):not(.fi-color-success):not(.fi-color-danger),
.pb-admin-btn--secondary,
.td-workflow-link,
.pb-action-button:not(.pb-action-button--primary):not(.pb-action-button--soft-primary):not(.pb-action-button--danger) {
    --pb-button-border: 1px solid var(--pb-border);
    --pb-button-bg: var(--pb-surface);
    --pb-button-colour: var(--pb-text);
    border-color: var(--pb-border) !important;
    background: var(--pb-surface) !important;
    color: var(--pb-text) !important;
}

.pb-button--secondary:hover,
.fi-btn:not(.fi-btn-color-primary):not(.fi-btn-color-success):not(.fi-btn-color-danger):not(.fi-color-primary):not(.fi-color-success):not(.fi-color-danger):hover,
.pb-admin-btn--secondary:hover,
.td-workflow-link:hover,
.pb-action-button:not(.pb-action-button--primary):not(.pb-action-button--soft-primary):not(.pb-action-button--danger):hover {
    border-color: var(--pb-primary-border) !important;
    background: var(--pb-surface-soft) !important;
    color: var(--pb-text) !important;
}

.pb-button--danger,
.fi-btn-color-danger,
.fi-btn.fi-color-danger,
.pb-admin-btn--danger,
.td-action--danger,
.pb-action-button--danger {
    --pb-button-border: 1px solid var(--pb-danger-border);
    --pb-button-bg: var(--pb-danger-soft);
    --pb-button-colour: var(--pb-danger);
    --pb-button-hover-border: var(--pb-danger);
    --pb-button-hover-bg: color-mix(in srgb, var(--pb-danger) 15%, #ffffff);
    border-color: var(--pb-danger-border) !important;
    background: var(--pb-danger-soft) !important;
    color: var(--pb-danger) !important;
}

.pb-button--danger:hover,
.fi-btn-color-danger:hover,
.fi-btn.fi-color-danger:hover,
.pb-admin-btn--danger:hover,
.td-action--danger:hover,
.pb-action-button--danger:hover {
    border-color: var(--pb-danger) !important;
    background: color-mix(in srgb, var(--pb-danger) 15%, #ffffff) !important;
    color: var(--pb-danger) !important;
}

.pb-button--icon {
    min-width: var(--pb-button-min-height) !important;
    width: var(--pb-button-min-height) !important;
    padding-inline: 0 !important;
}

.pb-button--full {
    width: 100% !important;
}

.pb-button:disabled,
.pb-button[aria-disabled="true"],
.fi-btn:disabled,
.fi-btn[aria-disabled="true"],
.td-action:disabled,
.td-workflow-button:disabled,
.pb-action-button:disabled {
    cursor: not-allowed !important;
    opacity: 0.58 !important;
    transform: none !important;
    box-shadow: none !important;
}

.pb-button :where(.fi-btn-icon, .fi-icon, svg),
.pb-admin-btn :where(.fi-btn-icon, .fi-icon, svg),
.td-action :where(.fi-btn-icon, .fi-icon, svg),
.td-workflow-button :where(.fi-btn-icon, .fi-icon, svg),
.td-workflow-link :where(.fi-btn-icon, .fi-icon, svg),
.pb-action-button :where(.fi-btn-icon, .fi-icon, svg) {
    flex: 0 0 auto;
}

/* Shared button icon contrast.
   Filament action icons were inheriting low-opacity/muted tones, making icons
   disappear on dark primary buttons and pale danger buttons. Keep icon colour
   tied to the readable button text colour instead of a separate muted shade. */
.fi-main :where(.fi-btn, .fi-icon-btn) :where(.fi-btn-icon, .fi-icon-btn-icon, .fi-icon, svg) {
    color: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
    stroke: currentColor !important;
}

.fi-main :where(.fi-btn-color-primary, .fi-color-primary, .pb-admin-btn--primary, .td-action--primary, .td-workflow-button--primary, .pb-action-button--primary) :where(.fi-btn-icon, .fi-icon-btn-icon, .fi-icon, svg) {
    color: var(--pb-button-text, #ffffff) !important;
    opacity: 1 !important;
    stroke: currentColor !important;
}

.fi-main :where(.fi-btn-color-danger, .fi-color-danger) :where(.fi-btn-icon, .fi-icon-btn-icon, .fi-icon, svg) {
    color: currentColor !important;
    opacity: 1 !important;
    stroke: currentColor !important;
}

/* ==========================================================================
   09. Tables and data grids
   ========================================================================== */
.fi-ta {
    overflow: hidden !important;
}

.fi-ta-content,
.fi-ta-table {
    max-width: 100%;
}

.fi-ta-content {
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
}

.fi-ta-table {
    border-color: var(--pb-border) !important;
}

.fi-ta-row:hover,
.fi-ta-record:hover {
    background: var(--pb-green-softer) !important;
}

.fi-ta-header-cell,
.fi-ta-cell {
    color: var(--pb-ink) !important;
    vertical-align: middle !important;
}

.fi-main .fi-ta :where(.fi-ta-actions, .fi-ta-record-actions, .fi-ac) {
    align-items: center !important;
    gap: 7px !important;
}

.fi-main .fi-ta :where(.fi-ta-actions, .fi-ta-record-actions, .fi-ac) :where(.fi-btn, .fi-icon-btn) {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 30px !important;
    height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 8px !important;
    border: 1px solid color-mix(in srgb, var(--pb-border, #d8d8d2) 92%, transparent) !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, var(--pb-card, #ffffff) 96%, var(--pb-bg, #f6f5ef)) !important;
    color: var(--pb-ink, #3f403e) !important;
    box-shadow: none !important;
    font-size: 0.72rem !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
}

.fi-main .fi-ta :where(.fi-ta-actions, .fi-ta-record-actions, .fi-ac) :where(.fi-btn:hover, .fi-icon-btn:hover, .fi-btn:focus-visible, .fi-icon-btn:focus-visible) {
    border-color: color-mix(in srgb, var(--pb-green, #8cb52b) 30%, var(--pb-border, #d8d8d2)) !important;
    background: color-mix(in srgb, var(--pb-green, #8cb52b) 9%, #ffffff) !important;
    color: var(--pb-ink, #3f403e) !important;
    box-shadow: none !important;
    transform: none !important;
}

.fi-main .fi-ta :where(.fi-ta-actions, .fi-ta-record-actions, .fi-ac) :where(.fi-link.fi-ac-link-action) {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 26px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 2px 4px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--pb-ink, #3f403e) !important;
    box-shadow: none !important;
    font-size: 0.72rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
}

.fi-main .fi-ta :where(.fi-ta-actions, .fi-ta-record-actions, .fi-ac) :where(.fi-link.fi-ac-link-action:hover, .fi-link.fi-ac-link-action:focus-visible) {
    background: color-mix(in srgb, var(--pb-green, #8cb52b) 8%, #ffffff) !important;
    color: var(--pb-ink, #3f403e) !important;
    box-shadow: none !important;
}

.fi-main .fi-ta :where(.fi-ta-actions, .fi-ta-record-actions, .fi-ac) :where(.fi-btn-icon, .fi-icon-btn-icon, svg) {
    width: 13px !important;
    min-width: 13px !important;
    height: 13px !important;
    color: color-mix(in srgb, var(--pb-muted, #74766f) 84%, var(--pb-ink, #3f403e)) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.fi-sc-text:not(.fi-badge) {
    font-size: 8pt;
}

.fi-badge,
.td-pill,
.td-status,
.pb-status-badge {
    max-width: 100%;
    border-radius: 999px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   10. Badges and statuses
   ========================================================================== */

/* ==========================================================================
   12. Invoice components
   ========================================================================== */
/* Invoice/product line safeguards */
.td-product-lines,
.td-invoice-layout,
.td-workflow-v2,
.td-invoice-summary,
.td-customer-card,
.td-payment-card {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.td-product-lines input,
.td-product-lines select,
.td-product-lines textarea,
.td-invoice-layout input,
.td-invoice-layout select,
.td-invoice-layout textarea {
    max-width: 100%;
}

.td-invoice-summary__balance {
    border-color: color-mix(in srgb, var(--td-summary-balance-bg, var(--pb-button)) 86%, var(--pb-border)) !important;
    background: var(--td-summary-balance-bg, var(--pb-button)) !important;
    color: var(--td-summary-balance-text, var(--pb-button-text)) !important;
}

.td-invoice-summary__balance :where(span, strong, b) {
    color: inherit !important;
}

/* ==========================================================================
   13. Customer/product/supplier components
   ========================================================================== */
/* Supplier directory cards */
.pb-supplier-directory,
.pb-supplier-directory * {
    box-sizing: border-box;
    min-width: 0;
}

.pb-supplier-directory {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius-lg);
    background: var(--pb-card);
    box-shadow: var(--pb-shadow);
}

.pb-supplier-directory::before {
    content: "";
    display: block;
    height: 4px;
    background: var(--pb-green);
}

.pb-supplier-directory__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    padding: clamp(14px, 2vw, 22px);
}

.pb-supplier-directory__header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
}

.pb-supplier-directory__identity {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.pb-supplier-directory__avatar {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--pb-green) 22%, #ffffff);
    border-radius: 14px;
    background: color-mix(in srgb, var(--pb-green) 82%, #2f3630);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.pb-supplier-directory__title {
    margin: 0;
    color: var(--pb-ink);
    font-size: clamp(1.05rem, 2vw, 1.34rem);
    font-weight: 850;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.pb-supplier-directory__subtitle,
.pb-supplier-directory__address {
    margin: 4px 0 0;
    color: var(--pb-muted);
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pb-supplier-directory__badges,
.pb-supplier-directory__tags,
.pb-supplier-directory__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.pb-supplier-directory__badge,
.pb-supplier-directory__tag {
    display: inline-flex;
    max-width: 100%;
    min-height: 28px;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--pb-green) 20%, var(--pb-border));
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--pb-green-softer);
    color: var(--pb-ink);
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}

.pb-supplier-directory__badge--plain {
    border-color: var(--pb-border);
    background: #ffffff;
    color: var(--pb-muted);
}

.pb-supplier-directory__badge--warning {
    border-color: #efd8a7;
    background: #fff8e7;
    color: #875914;
}

.pb-supplier-directory__actions {
    border-top: 1px solid var(--pb-border);
    padding-top: 12px;
}

.pb-supplier-directory__button {
    display: inline-flex;
    flex: 1 1 118px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pb-border);
    border-radius: 10px;
    padding: 8px 12px;
    background: #ffffff;
    color: var(--pb-ink);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.pb-supplier-directory__button:hover {
    border-color: color-mix(in srgb, var(--pb-green) 42%, var(--pb-border));
    background: var(--pb-green-softer);
}

.pb-supplier-directory__button--primary {
    border-color: var(--pb-button);
    background: var(--pb-button);
    color: var(--pb-button-text);
}

.pb-supplier-directory__button--primary:hover {
    background: color-mix(in srgb, var(--pb-button) 88%, #000000);
    color: var(--pb-button-text);
}

.pb-supplier-directory__section {
    width: 100%;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius);
    background: color-mix(in srgb, var(--pb-card) 94%, var(--pb-bg));
    padding: clamp(12px, 1.7vw, 16px);
}

.pb-supplier-directory__section-title {
    display: block;
    margin-bottom: 8px;
    color: color-mix(in srgb, var(--pb-muted) 88%, var(--pb-ink));
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pb-supplier-directory__copy {
    margin: 0;
    color: var(--pb-ink);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.52;
    overflow-wrap: anywhere;
}

.pb-supplier-directory__tags--spaced {
    margin-top: 10px;
}

.pb-supplier-directory__workflow,
.pb-supplier-directory__contacts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    width: 100%;
}

.pb-supplier-directory__fact,
.pb-supplier-directory__contact {
    display: block;
    width: 100%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--pb-border) 80%, #ffffff);
    border-radius: 10px;
    background: #ffffff;
    padding: 10px 11px;
    text-decoration: none;
}

.pb-supplier-directory__fact span,
.pb-supplier-directory__contact span {
    display: block;
    margin-bottom: 4px;
    color: var(--pb-muted);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pb-supplier-directory__fact strong,
.pb-supplier-directory__contact strong {
    display: block;
    color: var(--pb-ink);
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.38;
    overflow-wrap: anywhere;
    white-space: normal;
}

.pb-supplier-directory__contact:hover {
    border-color: color-mix(in srgb, var(--pb-green) 35%, var(--pb-border));
    background: var(--pb-green-softer);
}

/* ==========================================================================
   15. Settings and layout switcher
   ========================================================================== */
/* Layout variants should inherit the selected palette, then adjust density only. */
html[data-pb-layout="staff_counter"] {
    --pb-radius: 10px;
    --pb-radius-lg: 14px;
}

html[data-pb-layout="production_control"] {
    --pb-button: #343737;
}

html[data-pb-layout="finance_accounts"] {
    --pb-button: #3f403e;
}

/* ==========================================================================
   17. Responsive rules
   ========================================================================== */
/* Small-screen polish */
@media (max-width: 900px) {
    .fi-main {
        padding: 12px !important;
    }

    .fi-page-header {
        margin-bottom: 12px !important;
    }

    .fi-page-header-heading {
        font-size: 1.28rem !important;
    }

    .fi-section,
    .fi-ta,
    .fi-wi-widget,
    .td-card,
    .td-panel,
    .td-command,
    .td-workflow-panel,
    .td-job-card,
    .td-workflow-job,
    .pb-supplier-directory {
        border-radius: 12px !important;
    }

    .td-bank-holidays {
        position: static !important;
        flex: 1 1 auto !important;
        max-width: calc(100vw - 156px) !important;
        transform: none !important;
        overflow: hidden !important;
    }

    .td-bank-holidays__label {
        display: none !important;
    }

    .td-bank-holidays__items,
    .td-bank-holidays span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 760px) {
    .fi-topbar {
        min-height: 66px !important;
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    .fi-topbar-start {
        flex: 0 1 auto !important;
    }

    .fi-topbar .fi-logo img {
        max-width: 156px !important;
        max-height: 36px !important;
    }

    .fi-topbar-end {
        min-height: 38px !important;
    }

    .fi-section-header,
    .fi-ta-header,
    .td-panel__header,
    .td-workflow-panel__head {
        padding: 12px !important;
    }

    .fi-section-content,
    .fi-ta-content-ctn,
    .td-panel__body,
    .td-workflow-panel__body {
        padding: 12px !important;
    }

    .pb-supplier-directory__content {
        gap: 12px;
        padding: 12px;
    }

    .pb-supplier-directory__identity {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px;
    }

    .pb-supplier-directory__avatar {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        font-size: 0.82rem;
    }

    .pb-supplier-directory__button {
        flex-basis: 100%;
    }
}

@media (max-width: 520px) {
    .fi-main {
        padding: 10px !important;
    }

    .fi-topbar {
        gap: 6px !important;
    }

    .td-bank-holidays {
        max-width: calc(100vw - 132px) !important;
        min-height: 32px !important;
        padding-inline: 8px !important;
        font-size: 0.68rem !important;
    }

    .fi-page-header-heading {
        font-size: 1.18rem !important;
    }

    .fi-section-header-description,
    .td-panel__copy,
    .td-workflow-copy,
    .td-subtitle {
        font-size: 0.8rem !important;
    }

    .pb-supplier-directory__title {
        font-size: 1rem;
    }

    .pb-supplier-directory__badge,
    .pb-supplier-directory__tag {
        width: auto;
        max-width: 100%;
    }
}

/* ==========================================================================
   11. Dashboard components
   --------------------------------------------------------------------------
   Dashboard rules from previous styling passes remain in section 18 until each
   dashboard screen is verified and migrated without changing the live design.
   ========================================================================== */

/* ==========================================================================
   14. Jobs and production components
   --------------------------------------------------------------------------
   Job/workflow/production rules from previous styling passes remain in section
   18 until each workflow screen is verified and migrated.
   ========================================================================== */

/* ==========================================================================
   16. Design Edit Mode compatibility helpers
   --------------------------------------------------------------------------
   The floating editor panel and tools live in public/design-edit. Put only
   admin-page compatibility helpers here if Design Edit Mode needs them later.
   ========================================================================== */

/* ==========================================================================
   18. Temporary legacy / needs verification
   --------------------------------------------------------------------------
   The blocks below are older styling passes kept in their original cascade
   order to avoid visual changes. Migrate these rules into sections 02-17 only
   after checking the affected page and confirming the computed styles match.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Print Buddy Masterpiece Pass
   A restrained, premium admin skin: sharp hierarchy, calm cards, responsive
   grids, brand-green accents, no noisy decoration.
--------------------------------------------------------------------------- */

body.fi-body {
    background:
        linear-gradient(180deg, var(--pb-lux-bg-top) 0%, var(--pb-bg) 42%, var(--pb-lux-bg-bottom) 100%) !important;
}

.fi-main {
    padding: clamp(14px, 2.2vw, 28px) !important;
}

.fi-page {
    display: grid;
    gap: var(--pb-lux-gap);
}

.fi-page-header {
    align-items: end !important;
    border-bottom: 1px solid color-mix(in srgb, var(--pb-border) 52%, transparent);
    padding-bottom: clamp(12px, 1.6vw, 18px) !important;
}

.fi-page-header-heading {
    max-width: 980px;
    color: var(--pb-ink) !important;
    font-size: clamp(1.35rem, 2.4vw, 2.05rem) !important;
    font-weight: 850 !important;
}

.fi-page-header-subheading {
    color: var(--pb-muted) !important;
    font-weight: 560 !important;
}

.fi-sidebar {
    background: var(--pb-shell-sidebar-bg) !important;
}

.fi-sidebar-header {
    border-bottom: 1px solid color-mix(in srgb, var(--pb-shell-sidebar-border) 68%, transparent);
}

.fi-sidebar-group-label {
    margin-top: 10px !important;
    padding-inline: 10px !important;
}

.fi-sidebar-item-button {
    min-height: 41px !important;
    padding-inline: 11px !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    border: 1px solid color-mix(in srgb, var(--pb-shell-sidebar-border) 76%, transparent) !important;
    background: var(--pb-shell-nav-active-bg) !important;
}

.fi-topbar {
    backdrop-filter: blur(14px);
}

.td-bank-holidays {
    height: 36px;
    border-radius: 999px !important;
}

.fi-section,
.fi-ta,
.fi-wi-widget,
.td-card,
.td-panel,
.td-command,
.td-workflow-panel,
.td-workflow-card,
.td-workflow-picker,
.td-job-card,
.td-workflow-job,
.td-dashboard-action,
.td-focus-card,
.td-dashboard-pulse,
.td-dashboard-money,
.td-lane,
.td-money,
.td-kpi,
.td-list-row,
.td-workflow-list-row,
.pb-help__hero,
.pb-help__card,
.pb-help__module,
.pb-help__visual,
.pb-help__reader,
.pme-card,
.pme-toolbar,
.lab-card,
.lab-toolbar,
.sih-card,
.sih-toolbar,
.pb-supplier-directory {
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: 16px !important;
    background: var(--pb-lux-card) !important;
    box-shadow: var(--pb-lux-shadow) !important;
}

.fi-section-header,
.fi-ta-header,
.td-panel__header,
.td-panel__head,
.td-workflow-panel__head,
.pme-heading,
.lab-panel-heading,
.sih-card__head,
.pb-help__module-head {
    border-bottom: 1px solid var(--pb-lux-line) !important;
    background: color-mix(in srgb, var(--pb-card) 95%, var(--pb-bg)) !important;
}

.fi-section-content,
.fi-section-content-ctn,
.td-panel__body,
.td-workflow-panel__body,
.pme-body,
.lab-panel-body,
.sih-card__body {
    padding: var(--pb-lux-space) !important;
}

.td-shell,
.td-shell--dashboard,
.td-workflow-v2,
.pb-help,
.product-layout-lab,
.pme,
.supplier-import-hub {
    display: grid !important;
    gap: var(--pb-lux-gap) !important;
    width: 100%;
    max-width: 100%;
}

.td-dashboard-hero,
.td-command__main,
.td-workflow-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr) !important;
    gap: var(--pb-lux-gap) !important;
    align-items: stretch !important;
}

.td-command.pb-card--clip,
.td-command.pb-panel--clip,
.td-command.pb-media-card,
.td-command.pb-visual-card {
    overflow: hidden;
}

.td-command__main {
    padding: var(--pb-lux-space) !important;
}

.td-dashboard-hero {
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--pb-card) 98%, var(--pb-bg)), color-mix(in srgb, var(--pb-green) 7%, var(--pb-card))) !important;
    box-shadow: var(--pb-lux-shadow) !important;
    padding: var(--pb-lux-space) !important;
}

.td-dashboard-hero__copy,
.td-dashboard-hero__side {
    min-width: 0;
}

.td-dashboard-title,
.td-title,
.pb-help__title {
    color: var(--pb-ink) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
}

.td-dashboard-title {
    font-size: clamp(2rem, 5vw, 4.4rem) !important;
    max-width: 900px;
}

.td-title {
    font-size: clamp(1.45rem, 3vw, 2.45rem) !important;
}

.td-dashboard-lede,
.td-subtitle,
.td-workflow-copy,
.pb-help__subtitle,
.pb-help__section-copy,
.pb-help__card-copy,
.sih-help {
    max-width: 980px;
    color: var(--pb-muted) !important;
    font-weight: 560 !important;
    line-height: 1.62 !important;
}

.td-eyebrow,
.td-panel__kicker,
.td-workflow-kicker,
.pb-help__eyebrow,
.pme-label,
.lab-field label,
.sih-field label {
    color: color-mix(in srgb, var(--pb-green) 78%, var(--pb-ink)) !important;
    font-size: 0.69rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.075em !important;
    text-transform: uppercase !important;
}

.td-dashboard-actions,
.td-action-grid,
.td-workflow-actions,
.pb-help__actions,
.pb-help__links,
.sih-actions,
.pme-actions,
.lab-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.td-dashboard-action,
.td-action,
.td-workflow-button,
.td-workflow-link,
.pb-help__button,
.pb-help__small-button,
.pme-button,
.lab-button,
.sih-button {
    min-height: 40px !important;
    border: 1px solid var(--pb-lux-line-strong) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--pb-ink) !important;
    box-shadow: none !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
}

.td-dashboard-action:hover,
.td-action:hover,
.td-workflow-button:hover,
.td-workflow-link:hover,
.pb-help__button:hover,
.pb-help__small-button:hover,
.pme-button:hover,
.lab-button:hover,
.sih-button:hover {
    border-color: color-mix(in srgb, var(--pb-green) 42%, var(--pb-border)) !important;
    background: color-mix(in srgb, var(--pb-green) 7%, #ffffff) !important;
    transform: none !important;
}

.td-workflow-button--primary,
.td-workflow-link--primary,
.pme-button.primary,
.lab-button.primary,
.sih-button.primary,
.sih-button.accent,
.pb-help__button:not(.pb-help__button--ghost) {
    border-color: var(--pb-button) !important;
    background: var(--pb-button) !important;
    color: var(--pb-button-text) !important;
}

.td-dashboard-action__icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pb-green) 11%, #ffffff);
}

.td-dashboard-action__icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--pb-green);
    stroke-width: 1.9;
}

.td-focus-strip,
.td-dashboard-stat-grid,
.td-dashboard-board,
.td-production-grid,
.td-money-grid,
.td-kpi-grid,
.td-workflow-grid,
.td-workflow-summary,
.td-workflow-steps,
.td-workflow-meta,
.pb-help__grid,
.sih-row,
.pme-form-grid,
.lab-grid {
    display: grid !important;
    gap: var(--pb-lux-gap) !important;
}

.td-focus-strip {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
}

.td-dashboard-board,
.td-production-grid,
.td-workflow-grid,
.sih-grid,
.pme-stack,
.lab-shell {
    grid-template-columns: 1fr !important;
}

.td-dashboard-stat-grid,
.td-money-grid,
.td-kpi-grid,
.td-workflow-summary,
.td-workflow-meta,
.sih-row {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important;
}

.td-workflow-steps {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
}

.td-flow-rail {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
    gap: 10px !important;
}

.td-flow-step,
.td-workflow-step,
.td-dashboard-stat,
.td-dashboard-money__row,
.td-money,
.td-kpi,
.td-workflow-stat,
.pme-pill,
.lab-pill,
.sih-pill,
.pb-help__chip,
.pb-help__step {
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--pb-card) 92%, var(--pb-bg)) !important;
    color: var(--pb-ink) !important;
}

.td-pill,
.td-workflow-pill,
.fi-badge,
.pme-pill,
.lab-pill,
.sih-pill,
.pb-help__chip,
.pb-help__step {
    border-radius: 999px !important;
    border-color: color-mix(in srgb, var(--pb-green) 20%, var(--pb-border)) !important;
    background: color-mix(in srgb, var(--pb-green) 7%, #ffffff) !important;
    color: var(--pb-ink) !important;
    font-weight: 850 !important;
}

.td-pill--green,
.td-workflow-pill--green,
.pme-pill.good,
.lab-pill.good,
.sih-pill.good {
    border-color: color-mix(in srgb, var(--pb-green) 34%, var(--pb-border)) !important;
    background: color-mix(in srgb, var(--pb-green) 12%, #ffffff) !important;
    color: color-mix(in srgb, var(--pb-green) 65%, var(--pb-ink)) !important;
}

.td-pill--blue,
.td-workflow-pill--blue {
    border-color: color-mix(in srgb, #246b8f 28%, var(--pb-border)) !important;
    background: color-mix(in srgb, #246b8f 8%, #ffffff) !important;
    color: #245a78 !important;
}

.td-pill--amber,
.td-workflow-pill--amber,
.pme-pill.warn {
    border-color: #ead49c !important;
    background: #fff8e7 !important;
    color: #8a5a12 !important;
}

.td-workflow-pill--red,
.pme-button.danger,
.lab-button.danger,
.sih-button.danger {
    border-color: #f0c0bc !important;
    background: #fff7f5 !important;
    color: #9d2d25 !important;
}

.td-list-row,
.td-workflow-list-row,
.td-job-card {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 14px !important;
    color: inherit !important;
    text-decoration: none !important;
}

.td-job-card {
    display: grid !important;
    justify-content: stretch !important;
}

.td-list__title,
.td-dashboard-action__label,
.td-panel__title,
.td-workflow-panel h2,
.pb-help__card-title,
.sih-title,
.pme-heading strong,
.lab-panel-heading strong {
    color: var(--pb-ink) !important;
    font-weight: 860 !important;
    line-height: 1.25 !important;
}

.td-list__meta,
.td-dashboard-action__desc,
.pb-help__card-copy,
.sih-help {
    color: var(--pb-muted) !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
}

.td-empty,
.td-workflow-empty,
.sih-empty {
    border: 1px dashed color-mix(in srgb, var(--pb-border) 80%, var(--pb-muted)) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--pb-card) 84%, var(--pb-bg)) !important;
    color: var(--pb-muted) !important;
    padding: 18px !important;
}

.fi-input-wrp,
.choices__inner,
.td-workflow-select,
.pme-input,
.pme-select,
.pme-textarea,
.lab-input,
.lab-select,
.lab-textarea,
.sih-input,
.sih-select,
.sih-textarea,
.sih-price-input {
    min-height: var(--pb-field-min-height) !important;
    border: var(--pb-field-border) !important;
    border-radius: var(--pb-field-radius) !important;
    background: var(--pb-field-bg) !important;
    color: var(--pb-field-colour) !important;
    box-shadow: none !important;
}

.pme-toolbar,
.lab-toolbar,
.sih-toolbar {
    top: 84px !important;
    z-index: 20 !important;
    background: color-mix(in srgb, var(--pb-bg) 82%, #ffffff) !important;
    backdrop-filter: blur(14px);
}

.pme-matrix-wrap,
.lab-matrix-wrap,
.sih-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto !important;
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

.pme-matrix th,
.lab-matrix th,
.sih-table th {
    background: color-mix(in srgb, var(--pb-card) 88%, var(--pb-bg)) !important;
    color: var(--pb-ink) !important;
}

.pb-help__visual {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.45fr) !important;
}

.pb-help__number {
    background: var(--pb-button) !important;
    color: var(--pb-button-text) !important;
}

.td-workflow-menu__panel {
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: 14px !important;
    background: var(--pb-card) !important;
    box-shadow: var(--pb-lux-shadow) !important;
}

.fi-body :where(.td-list__title, .td-list__meta, .td-dashboard-action__label, .td-dashboard-action__desc, .td-panel__title, .td-subtitle, .td-workflow-copy, .pb-help__title, .pb-help__subtitle, .pb-help__card-title, .pb-help__card-copy, .sih-title, .sih-help, .pme-card, .lab-card, .pb-supplier-directory) {
    overflow-wrap: anywhere;
}

.fi-body :where(.td-list-row__end, .td-workflow-pillbar, .td-dashboard-actions, .td-action-grid) {
    min-width: 0;
}

html[data-pb-layout="workflow_cards"] .td-dashboard-board,
html[data-pb-layout="workflow_cards"] .td-workflow-grid,
html[data-pb-layout="staff_counter"] .td-dashboard-board,
html[data-pb-layout="production_control"] .td-production-grid,
html[data-pb-layout="finance_accounts"] .td-dashboard-board {
    grid-template-columns: 1fr !important;
}

@media (max-width: 1180px) {
    .td-dashboard-hero,
    .td-command__main,
    .td-workflow-hero,
    .pb-help__visual {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    /* Responsive token override: keep scoped to small screens. */
    :root {
        --pb-lux-space: 13px;
        --pb-lux-gap: 12px;
    }

    .fi-page-header {
        align-items: start !important;
        padding-bottom: 10px !important;
    }

    .fi-page-header-heading {
        font-size: 1.22rem !important;
    }

    .td-dashboard-title {
        font-size: clamp(1.8rem, 12vw, 2.8rem) !important;
    }

    .td-title,
    .pb-help__title {
        font-size: 1.55rem !important;
    }

    .td-dashboard-actions,
    .td-action-grid,
    .td-workflow-actions,
    .pb-help__actions,
    .sih-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .td-dashboard-action,
    .td-action,
    .td-workflow-button,
    .td-workflow-link,
    .pb-help__button,
    .pb-help__small-button,
    .pme-button,
    .lab-button,
    .sih-button {
        width: 100% !important;
    }

    .td-list-row,
    .td-workflow-list-row {
        display: grid !important;
        justify-content: stretch !important;
    }

    .td-list-row__end {
        justify-content: flex-start !important;
    }
}

@media (max-width: 520px) {
    .fi-topbar .fi-logo img {
        max-width: 132px !important;
    }

    .td-bank-holidays {
        max-width: calc(100vw - 124px) !important;
    }

    .td-dashboard-stat-grid,
    .td-money-grid,
    .td-kpi-grid,
    .td-workflow-summary,
    .td-workflow-meta,
    .sih-row {
        grid-template-columns: 1fr !important;
    }
}

html[data-pb-layout="workflow_cards"] {
    --pb-layout-marker: "Guided Workflow Cards";
    --pb-lux-gap: 18px;
}

html[data-pb-layout="workflow_cards"] .td-dashboard-hero,
html[data-pb-layout="workflow_cards"] .td-workflow-hero,
html[data-pb-layout="workflow_cards"] .td-command__main {
    grid-template-columns: 1fr !important;
}

html[data-pb-layout="workflow_cards"] :where(.td-dashboard-action, .td-job-card, .td-workflow-job, .td-list-row, .td-workflow-list-row) {
    border-left: 5px solid var(--pb-green) !important;
    min-height: 104px !important;
}

html[data-pb-layout="workflow_cards"] :where(.td-dashboard-board, .td-workflow-grid, .td-action-grid, .td-money-grid, .td-kpi-grid) {
    grid-template-columns: 1fr !important;
}

html[data-pb-layout="kanban_board"] {
    --pb-layout-marker: "Job Board";
}

html[data-pb-layout="kanban_board"] .td-production-grid,
html[data-pb-layout="kanban_board"] .td-workflow-grid {
    display: flex !important;
    align-items: stretch !important;
    gap: 14px !important;
    overflow-x: auto !important;
    padding-bottom: 12px !important;
    scroll-snap-type: x proximity;
}

html[data-pb-layout="kanban_board"] :where(.td-lane, .td-workflow-panel) {
    flex: 0 0 min(360px, 88vw) !important;
    scroll-snap-align: start;
}

html[data-pb-layout="kanban_board"] :where(.td-job-card, .td-workflow-job) {
    border-top: 4px solid color-mix(in srgb, var(--pb-green) 72%, var(--pb-button)) !important;
}

html[data-pb-layout="staff_counter"] {
    --pb-layout-marker: "Counter";
    --pb-lux-space: 14px;
    --pb-lux-gap: 10px;
}

html[data-pb-layout="staff_counter"] :where(.td-dashboard-title, .td-title, .fi-page-header-heading) {
    font-size: clamp(1.22rem, 2.4vw, 1.75rem) !important;
}

html[data-pb-layout="staff_counter"] :where(.td-dashboard-lede, .td-subtitle, .td-workflow-copy) {
    font-size: 0.78rem !important;
}

html[data-pb-layout="staff_counter"] :where(.td-dashboard-action) {
    min-height: 46px !important;
}

html[data-pb-layout="staff_counter"] :where(.td-dashboard-hero, .td-command__main, .td-workflow-hero) {
    grid-template-columns: 1fr !important;
}

html[data-pb-layout="production_control"] {
    --pb-layout-marker: "Production Control";
}

html[data-pb-layout="production_control"] :where(.td-dashboard-stat, .td-money, .td-kpi, .td-workflow-stat, .td-list-row) {
    border-left: 4px solid var(--pb-green) !important;
}

html[data-pb-layout="finance_accounts"] {
    --pb-layout-marker: "Finance";
}

html[data-pb-layout="finance_accounts"] :where(.td-money__value, .td-kpi__value, .td-dashboard-stat__value) {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0 !important;
}

html[data-pb-layout="finance_accounts"] :where(.td-money, .td-kpi, .td-dashboard-money, .td-dashboard-stat, .td-list-row, .td-workflow-list-row) {
    border-left: 4px solid color-mix(in srgb, var(--pb-green) 74%, var(--pb-button)) !important;
}

html[data-pb-layout="finance_accounts"] :where(.td-dashboard-board, .td-workflow-grid, .td-money-grid, .td-kpi-grid) {
    grid-template-columns: 1fr !important;
}

html[data-pb-layout] .fi-main::before {
    content: var(--pb-layout-marker, "");
    display: none;
}

@media (max-width: 900px) {
    html[data-pb-layout="kanban_board"] .td-production-grid,
    html[data-pb-layout="kanban_board"] .td-workflow-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        overflow-x: visible !important;
    }

    html[data-pb-layout="kanban_board"] :where(.td-lane, .td-workflow-panel) {
        flex-basis: auto !important;
        width: 100% !important;
    }
}

/*
    Dashboard polish pass
    Fixes the oversized workload panel, flat rows and casual dashboard feel.
*/

.td-shell--dashboard {
    gap: 16px !important;
}

.td-dashboard-hero {
    align-items: start !important;
    border-radius: 18px !important;
    padding: clamp(14px, 2vw, 20px) !important;
}

.td-dashboard-hero::before {
    inset: 0 22px auto 22px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--pb-green) 64%, transparent) !important;
    opacity: 0.78 !important;
}

.td-dashboard-hero__side {
    align-self: start !important;
    align-content: start !important;
    gap: 12px !important;
    min-height: auto !important;
    padding: clamp(14px, 1.6vw, 18px) !important;
}

.td-dashboard-pulse {
    align-items: center !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--pb-lux-line) !important;
}

.td-dashboard-pulse .td-panel__title {
    font-size: clamp(1.18rem, 2vw, 1.55rem) !important;
    line-height: 1.08 !important;
}

.td-dashboard-stat {
    position: relative;
    min-height: 0 !important;
    padding: 14px 14px 13px !important;
    overflow: hidden;
}

.td-dashboard-stat::after {
    content: "";
    position: absolute;
    inset: auto 12px 10px auto;
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--td-stat-color, var(--pb-green)) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--td-stat-color, var(--pb-green)) 8%, transparent);
}

.td-dashboard-stat__value {
    font-size: clamp(1.7rem, 4vw, 2.35rem) !important;
    font-weight: 860 !important;
    line-height: 0.95 !important;
}

.td-dashboard-stat__label {
    max-width: calc(100% - 34px);
    color: var(--pb-muted) !important;
    font-size: 0.76rem !important;
    font-weight: 780 !important;
    line-height: 1.2 !important;
}

.td-dashboard-money {
    border-radius: 14px !important;
    box-shadow: var(--pb-shadow-soft) !important;
}

.td-dashboard-money__row {
    min-height: 46px !important;
    align-items: center !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
}

.td-dashboard-money__row span {
    color: var(--pb-ink) !important;
    font-weight: 800 !important;
}

.td-dashboard-money__row strong {
    font-size: 0.92rem !important;
    font-variant-numeric: tabular-nums !important;
}

.td-panel__header {
    gap: 12px !important;
}

.td-panel__title {
    line-height: 1.18 !important;
}

.td-panel__body {
    display: grid !important;
    gap: 9px !important;
}

.td-list-row--dashboard {
    position: relative;
    align-items: center !important;
    min-height: 58px !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.td-list-row--dashboard:hover {
    border-color: color-mix(in srgb, var(--pb-green) 30%, var(--pb-border)) !important;
    background: color-mix(in srgb, var(--pb-green) 5%, #ffffff) !important;
}

.td-list-row__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 11px;
    min-width: 0;
}

.td-list-row__main > .td-list__title,
.td-list-row__main > .td-list__meta {
    grid-column: 2;
}

.td-list-row__marker {
    grid-row: 1 / span 2;
    width: 11px;
    height: 11px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: var(--pb-muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-muted) 14%, transparent);
}

.td-list-row__marker--green { background: var(--pb-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-green) 16%, transparent); }
.td-list-row__marker--blue { background: #246b8f; box-shadow: 0 0 0 3px rgb(36 107 143 / 0.14); }
.td-list-row__marker--teal { background: #177d72; box-shadow: 0 0 0 3px rgb(23 125 114 / 0.14); }
.td-list-row__marker--purple { background: #7057a3; box-shadow: 0 0 0 3px rgb(112 87 163 / 0.14); }
.td-list-row__marker--amber { background: #a96712; box-shadow: 0 0 0 3px rgb(169 103 18 / 0.14); }
.td-list-row__marker--neutral { background: var(--pb-muted); }

.td-pill--purple {
    border-color: color-mix(in srgb, #7057a3 28%, var(--pb-border)) !important;
    background: color-mix(in srgb, #7057a3 8%, #ffffff) !important;
    color: #594582 !important;
}

.td-pill--teal {
    border-color: color-mix(in srgb, #177d72 28%, var(--pb-border)) !important;
    background: color-mix(in srgb, #177d72 8%, #ffffff) !important;
    color: #15675f !important;
}

.td-pill--neutral {
    border-color: var(--pb-lux-line) !important;
    background: color-mix(in srgb, var(--pb-card) 90%, var(--pb-bg)) !important;
    color: var(--pb-muted) !important;
}

.td-next-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    width: fit-content;
    max-width: 100%;
    justify-self: end;
    border: 1px solid color-mix(in srgb, var(--pb-button) 18%, var(--pb-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--pb-button) 5%, #ffffff);
    color: var(--pb-ink);
    padding: 4px 9px;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
}

.td-activity-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.td-activity-row__time {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .td-dashboard-hero {
        padding: 12px !important;
    }

    .td-dashboard-hero::before {
        inset-inline: 14px !important;
    }

    .td-dashboard-pulse {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .td-dashboard-pulse .td-pill {
        align-self: flex-start !important;
    }

    .td-dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .td-list-row--dashboard,
    .td-activity-row {
        grid-template-columns: 1fr !important;
    }

    .td-list-row__end,
    .td-next-action,
    .td-activity-row__time {
        justify-self: start !important;
        text-align: left !important;
    }
}

@media (max-width: 430px) {
    .td-dashboard-stat-grid {
        grid-template-columns: 1fr !important;
    }

    .td-dashboard-money__row {
        grid-template-columns: 1fr !important;
    }

    .td-dashboard-money__row strong {
        text-align: left !important;
    }
}

/*
    Green reduction pass
    Print Buddy green is now a brand accent only. The main interface uses
    neutral charcoal, warm white and separate status colours.
*/

.fi-sidebar-item-button:hover {
    background: color-mix(in srgb, var(--pb-card) 72%, var(--pb-bg)) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: color-mix(in srgb, var(--pb-card) 62%, var(--pb-bg)) !important;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pb-brand-green) 55%, var(--pb-ink)) !important;
}

.td-eyebrow,
.td-panel__kicker,
.td-workflow-kicker,
.pb-help__eyebrow,
.pme-label,
.lab-field label,
.sih-field label {
    color: color-mix(in srgb, var(--pb-muted) 82%, var(--pb-ink)) !important;
}

.td-dashboard-hero,
.td-dashboard-hero::before {
    background: color-mix(in srgb, var(--pb-brand-green) 36%, transparent) !important;
}

.td-dashboard-action__icon {
    border-color: var(--pb-lux-line) !important;
    background: color-mix(in srgb, var(--pb-card) 88%, var(--pb-bg)) !important;
}

.td-dashboard-action__icon svg {
    stroke: var(--pb-ink) !important;
}

.td-dashboard-action:hover,
.td-action:hover,
.td-workflow-button:hover,
.td-workflow-link:hover,
.pb-help__button:hover,
.pb-help__small-button:hover,
.pme-button:hover,
.lab-button:hover,
.sih-button:hover,
.td-list-row--dashboard:hover {
    border-color: color-mix(in srgb, var(--pb-ink) 18%, var(--pb-border)) !important;
    background: color-mix(in srgb, var(--pb-card) 78%, var(--pb-bg)) !important;
}

.td-pill,
.td-workflow-pill,
.fi-badge,
.pme-pill,
.lab-pill,
.sih-pill,
.pb-help__chip,
.pb-help__step {
    border-color: var(--pb-lux-line) !important;
    background: color-mix(in srgb, var(--pb-card) 88%, var(--pb-bg)) !important;
    color: var(--pb-ink) !important;
}

.td-pill--green,
.td-workflow-pill--green,
.pme-pill.good,
.lab-pill.good,
.sih-pill.good {
    border-color: color-mix(in srgb, var(--pb-status-green) 24%, var(--pb-border)) !important;
    background: color-mix(in srgb, var(--pb-status-green) 7%, #ffffff) !important;
    color: color-mix(in srgb, var(--pb-status-green) 74%, var(--pb-ink)) !important;
}

.td-pill--blue,
.td-workflow-pill--blue {
    border-color: color-mix(in srgb, var(--pb-status-blue) 24%, var(--pb-border)) !important;
    background: color-mix(in srgb, var(--pb-status-blue) 7%, #ffffff) !important;
    color: color-mix(in srgb, var(--pb-status-blue) 78%, var(--pb-ink)) !important;
}

.td-pill--teal {
    border-color: color-mix(in srgb, var(--pb-status-teal) 24%, var(--pb-border)) !important;
    background: color-mix(in srgb, var(--pb-status-teal) 7%, #ffffff) !important;
    color: color-mix(in srgb, var(--pb-status-teal) 78%, var(--pb-ink)) !important;
}

.td-pill--purple {
    border-color: color-mix(in srgb, var(--pb-status-purple) 24%, var(--pb-border)) !important;
    background: color-mix(in srgb, var(--pb-status-purple) 7%, #ffffff) !important;
    color: color-mix(in srgb, var(--pb-status-purple) 78%, var(--pb-ink)) !important;
}

.td-list-row__marker--green {
    background: var(--pb-status-green) !important;
    box-shadow: 0 0 0 3px rgb(63 125 74 / 0.12) !important;
}

.td-list-row__marker--blue {
    background: var(--pb-status-blue) !important;
    box-shadow: 0 0 0 3px rgb(37 99 166 / 0.12) !important;
}

.td-list-row__marker--teal {
    background: var(--pb-status-teal) !important;
    box-shadow: 0 0 0 3px rgb(47 124 124 / 0.12) !important;
}

.td-list-row__marker--purple {
    background: var(--pb-status-purple) !important;
    box-shadow: 0 0 0 3px rgb(107 90 150 / 0.12) !important;
}

/*
    Layout cleanup pass
    Removes decorative strips, reduces green-heavy accents and fixes crowded
    dashboard, supplier and production-board layouts.
*/

.td-dashboard-hero::before,
.td-command::before,
.td-card::before,
.td-panel::before,
.td-focus-card::before,
.pb-supplier-directory::before,
html[data-pb-layout="production_control"] :where(.td-command, .td-panel, .td-workflow-panel)::before {
    display: none !important;
}

.td-dashboard-hero {
    gap: clamp(14px, 2vw, 22px) !important;
    border-color: var(--pb-lux-line) !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: clamp(12px, 2vw, 18px) !important;
}

.td-dashboard-hero__copy,
.td-dashboard-hero__side {
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgb(38 40 36 / 0.06) !important;
    padding: clamp(14px, 2vw, 18px) !important;
}

.td-dashboard-title,
.td-dashboard-lede {
    display: none !important;
}

.td-dashboard-actions,
.td-action-grid {
    display: grid !important;
    gap: 10px !important;
    align-items: stretch !important;
}

.td-dashboard-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.td-command .td-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.td-dashboard-action,
.td-action,
.td-workflow-button,
.td-workflow-link {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 72px !important;
    border-radius: 10px !important;
    align-items: center !important;
}

.td-dashboard-action__text,
.td-action span,
.td-list__title,
.td-list__meta,
.td-panel__title,
.td-subtitle,
.td-title,
.pb-supplier-directory__title,
.pb-supplier-directory__subtitle,
.pb-supplier-directory__copy,
.pb-supplier-directory__fact,
.pb-supplier-directory__contact {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.td-dashboard-pulse {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 0 12px !important;
}

.td-dashboard-pulse .td-panel__title {
    text-shadow: none !important;
}

.td-dashboard-stat-grid {
    gap: 10px !important;
}

.td-dashboard-stat {
    min-height: 110px !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.td-dashboard-stat::after {
    opacity: 0.16 !important;
    border-color: #ffffff !important;
}

.td-dashboard-stat--amber { background: #9a5b12 !important; }
.td-dashboard-stat--blue { background: #255f8e !important; }
.td-dashboard-stat--green { background: #3f7d4a !important; }
.td-dashboard-stat--coral { background: #a34a36 !important; }

.td-dashboard-stat__value,
.td-dashboard-stat__label {
    color: #ffffff !important;
}

.td-dashboard-money {
    display: grid !important;
    gap: 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.td-dashboard-money__row {
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.td-focus-card {
    border-left: 1px solid var(--pb-lux-line) !important;
}

.td-command,
.td-panel,
.td-card,
.td-lane {
    border-color: var(--pb-lux-line) !important;
}

.td-command {
    box-shadow: 0 12px 28px rgb(38 40 36 / 0.06) !important;
}

.td-production-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
    gap: 14px !important;
    overflow-x: visible !important;
    align-items: stretch !important;
}

html[data-pb-layout="kanban_board"] .td-production-grid,
html[data-pb-layout="production_control"] .td-production-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
    overflow-x: visible !important;
}

.td-lane {
    min-width: 0 !important;
    width: 100% !important;
    padding: 14px !important;
    border-radius: 14px !important;
}

.td-lane > div:last-child {
    display: grid !important;
    gap: 10px !important;
    min-height: 0 !important;
}

.td-empty {
    margin: 8px 0 0 !important;
    border-radius: 10px !important;
}

.td-job-card {
    min-width: 0 !important;
    border-radius: 12px !important;
}

.td-job-card__badges,
.fi-ta-text-item,
.fi-badge {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    max-width: 100% !important;
}

.td-job-card__badges {
    margin-top: 10px !important;
}

.fi-badge {
    border-radius: 8px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
}

.fi-page-header-actions,
.fi-ac {
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.fi-page-header-actions .fi-btn,
.fi-ac .fi-btn {
    justify-content: center !important;
}

.pb-supplier-directory {
    margin: 0 0 16px !important;
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgb(38 40 36 / 0.06) !important;
}

.pb-supplier-directory__content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
}

.pb-supplier-directory__header,
.pb-supplier-directory__identity,
.pb-supplier-directory__badges,
.pb-supplier-directory__actions,
.pb-supplier-directory__workflow,
.pb-supplier-directory__contacts {
    min-width: 0 !important;
}

.pb-supplier-directory__section {
    min-width: 0 !important;
    overflow: hidden !important;
}

.pb-supplier-directory__copy {
    display: block !important;
    max-width: 100% !important;
}

.pb-supplier-directory__button {
    border-radius: 8px !important;
}

.pb-supplier-directory__tag,
.pb-supplier-directory__badge {
    border-radius: 999px !important;
    max-width: 100% !important;
    white-space: normal !important;
}

@media (max-width: 1020px) {
    .td-dashboard-hero {
        grid-template-columns: 1fr !important;
    }

    .td-card--workflow .td-flow-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .td-card--workflow .td-flow-step:nth-child(4n)::after {
        display: none !important;
    }
}

/*
    Status colour and form refinement pass
*/

.td-dashboard-stat--status-action,
.td-dashboard-stat--amber {
    --td-stat-color: var(--pb-status-action);
    background: var(--pb-status-action) !important;
}

.td-dashboard-stat--status-production,
.td-dashboard-stat--blue,
.td-dashboard-stat--teal {
    --td-stat-color: var(--pb-status-production);
    background: var(--pb-status-production) !important;
}

.td-dashboard-stat--status-ready,
.td-dashboard-stat--green {
    --td-stat-color: var(--pb-status-ready);
    background: var(--pb-status-ready) !important;
}

.td-dashboard-stat--status-due,
.td-dashboard-stat--coral {
    --td-stat-color: var(--pb-status-due);
    background: var(--pb-status-due) !important;
}

.td-pill--status-action,
.td-workflow-pill--status-action,
.td-pill--amber,
.td-workflow-pill--amber,
.td-pill--purple,
.td-workflow-pill--purple {
    border-color: var(--pb-status-action) !important;
    background: var(--pb-status-action) !important;
    color: #ffffff !important;
}

.td-pill--status-production,
.td-workflow-pill--status-production,
.td-pill--blue,
.td-workflow-pill--blue,
.td-pill--teal,
.td-workflow-pill--teal {
    border-color: var(--pb-status-production) !important;
    background: var(--pb-status-production) !important;
    color: #ffffff !important;
}

.td-pill--status-due,
.td-workflow-pill--status-due,
.td-pill--coral,
.td-workflow-pill--coral {
    border-color: var(--pb-status-due) !important;
    background: var(--pb-status-due) !important;
    color: #ffffff !important;
}

.td-pill--status-ready,
.td-workflow-pill--status-ready,
.td-pill--green,
.td-workflow-pill--green {
    border-color: var(--pb-status-ready) !important;
    background: var(--pb-status-ready) !important;
    color: #ffffff !important;
}

.td-list-row__marker--status-action,
.td-list-row__marker--amber,
.td-list-row__marker--purple {
    background: var(--pb-status-action) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-status-action) 15%, transparent) !important;
}

.td-list-row__marker--status-production,
.td-list-row__marker--blue,
.td-list-row__marker--teal {
    background: var(--pb-status-production) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-status-production) 15%, transparent) !important;
}

.td-list-row__marker--status-ready,
.td-list-row__marker--green {
    background: var(--pb-status-ready) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-status-ready) 15%, transparent) !important;
}

.td-list-row__marker--status-due,
.td-list-row__marker--coral {
    background: var(--pb-status-due) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-status-due) 15%, transparent) !important;
}

.td-money--status-action,
.td-lane--status-action,
.td-job-card--status-action {
    --td-status-tone: var(--pb-status-action);
}

.td-money--status-production,
.td-lane--status-production,
.td-job-card--status-production {
    --td-status-tone: var(--pb-status-production);
}

.td-money--status-ready,
.td-lane--status-ready,
.td-job-card--status-ready {
    --td-status-tone: var(--pb-status-ready);
}

.td-money--status-due,
.td-lane--status-due,
.td-job-card--status-due {
    --td-status-tone: var(--pb-status-due);
}

.td-money--status-action,
.td-money--status-production,
.td-money--status-ready,
.td-money--status-due {
    border-left: 4px solid var(--td-status-tone) !important;
    background: color-mix(in srgb, var(--td-status-tone) 7%, var(--pb-card)) !important;
}

.td-lane--status-action,
.td-lane--status-production,
.td-lane--status-ready,
.td-lane--status-due {
    border-color: color-mix(in srgb, var(--td-status-tone) 32%, var(--pb-lux-line)) !important;
    background: color-mix(in srgb, var(--td-status-tone) 4%, var(--pb-card)) !important;
}

.td-job-card--status-action,
.td-job-card--status-production,
.td-job-card--status-ready,
.td-job-card--status-due {
    border-left: 4px solid var(--td-status-tone) !important;
}

.td-dashboard-pulse .td-pill--green {
    border-color: var(--pb-lux-line) !important;
    background: color-mix(in srgb, var(--pb-card) 88%, var(--pb-bg)) !important;
    color: var(--pb-ink) !important;
}

.td-card--workflow .td-flow-rail {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.td-card--workflow .td-flow-step {
    --td-flow-color: #6b7280;
    position: relative !important;
    display: flex !important;
    min-height: 84px !important;
    align-items: flex-start !important;
    gap: 10px !important;
    border-color: var(--td-flow-color) !important;
    background: var(--td-flow-color) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18) !important;
    transition: transform 160ms ease, border-color 160ms ease, filter 160ms ease !important;
}

.td-card--workflow .td-flow-step:hover {
    transform: translateY(-1px);
    border-color: var(--td-flow-color) !important;
    filter: none;
}

.td-card--workflow .td-flow-step:not(:last-child)::after {
    content: '\203A';
    position: absolute;
    top: 50%;
    right: -12px;
    z-index: 2;
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pb-lux-line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--td-flow-color);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    transform: translate(50%, -50%);
}

.td-card--workflow .td-flow-step__dot {
    width: 10px !important;
    height: 10px !important;
    margin-top: 4px;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgb(255 255 255 / 0.18);
}

.td-flow-step__content {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.td-card--workflow .td-flow-step__label {
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    white-space: normal !important;
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.18);
}

.td-flow-step__note {
    color: rgb(255 255 255 / 0.88);
    font-size: 0.66rem;
    font-weight: 650;
    line-height: 1.25;
}

.td-flow-step--customer { --td-flow-color: var(--td-flow-customer, #8D4059); }
.td-flow-step--quote { --td-flow-color: var(--td-flow-quote, #C86952); }
.td-flow-step--invoice { --td-flow-color: var(--td-flow-invoice, #285A73); }
.td-flow-step--payment { --td-flow-color: var(--td-flow-payment, #667A4A); }
.td-flow-step--artwork { --td-flow-color: var(--td-flow-artwork, #7A5A91); }
.td-flow-step--production { --td-flow-color: var(--td-flow-production, #2F6F7F); }
.td-flow-step--collection { --td-flow-color: var(--td-flow-collection, #4D806E); }
.td-flow-step--complete { --td-flow-color: var(--td-flow-complete, #5C626B); }

.fi-badge.fi-color {
    background: var(--color-600) !important;
    color: #ffffff !important;
    --tw-ring-color: color-mix(in srgb, var(--color-700) 55%, transparent) !important;
    font-weight: 700 !important;
}

.fi-badge.fi-color :where(.fi-badge-label, .fi-icon) {
    color: #ffffff !important;
}

.fi-badge:not(.fi-color) {
    border-color: var(--pb-lux-line) !important;
    background: color-mix(in srgb, var(--pb-card) 88%, var(--pb-bg)) !important;
    color: var(--pb-ink) !important;
}

.fi-ta .fi-badge,
.fi-in .fi-badge {
    max-width: 148px !important;
    min-height: 24px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 0.68rem !important;
    line-height: 1.12 !important;
}

.fi-ta .fi-badge .fi-badge-label,
.fi-in .fi-badge .fi-badge-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pb-supplier-directory {
    margin: 14px 0 18px !important;
}

.pb-supplier-directory__avatar {
    display: none !important;
}

.pb-supplier-directory__identity {
    grid-template-columns: minmax(0, 1fr) !important;
}

.pb-supplier-directory__section {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.pb-supplier-directory__section + .pb-supplier-directory__section {
    border-top: 1px solid var(--pb-lux-line) !important;
    padding-top: 12px !important;
}

.pb-supplier-directory__fact strong,
.pb-supplier-directory__contact strong {
    font-weight: 600 !important;
}

.td-source-radio .fi-fo-radio {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.td-source-radio .fi-fo-radio-option {
    flex: 1 1 96px !important;
}

.td-source-radio .fi-fo-radio-label {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 38px !important;
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
    font-weight: 750 !important;
}

.td-source-radio input:checked + .fi-fo-radio-label,
.td-source-radio .fi-fo-radio-label:has(input:checked) {
    border-color: var(--pb-button) !important;
    background: var(--pb-button) !important;
    color: var(--pb-button-text) !important;
}

/* Filament puts extra section classes on an outer schema wrapper, then renders
   the real card as a child .fi-section. Keep only one visible card shell. */
.fi-sc-section.td-checkout-panel,
.td-checkout-panel:not(.fi-section) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fi-sc-section.td-checkout-panel > .fi-section,
.td-checkout-panel > .fi-section {
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: var(--td-card-radius, 16px) !important;
    background: var(--pb-card) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.fi-sc-section.td-checkout-panel > .fi-section > .fi-section-content-ctn,
.td-checkout-panel > .fi-section > .fi-section-content-ctn {
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.fi-sc-section.td-checkout-panel > .fi-section > .fi-section-content-ctn > .fi-section-content,
.td-checkout-panel > .fi-section > .fi-section-content-ctn > .fi-section-content {
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.fi-sc-section.td-checkout-panel > .fi-section > .fi-section-header,
.td-checkout-panel > .fi-section > .fi-section-header {
    border-radius: calc(var(--td-card-radius, 16px) - 1px) calc(var(--td-card-radius, 16px) - 1px) 0 0 !important;
    border-bottom: 1px solid var(--pb-lux-line) !important;
    background: color-mix(in srgb, var(--pb-card) 96%, var(--pb-bg)) !important;
}

.fi-sc-section.td-checkout-panel > .fi-section > .fi-section-content-ctn:last-child,
.td-checkout-panel > .fi-section > .fi-section-content-ctn:last-child {
    border-radius: 0 0 calc(var(--td-card-radius, 16px) - 1px) calc(var(--td-card-radius, 16px) - 1px) !important;
}

.fi-sc-section.td-checkout-panel > .fi-section:not(:has(> .fi-section-header)) > .fi-section-content-ctn,
.td-checkout-panel > .fi-section:not(:has(> .fi-section-header)) > .fi-section-content-ctn {
    border-radius: calc(var(--td-card-radius, 16px) - 1px) !important;
}

.fi-sc-section.td-checkout-panel > .fi-section:not(:has(> .fi-section-header)) > .fi-section-content-ctn > .fi-section-content,
.td-checkout-panel > .fi-section:not(:has(> .fi-section-header)) > .fi-section-content-ctn > .fi-section-content {
    border-radius: inherit !important;
}

.fi-main .fi-section {
    border-radius: var(--td-card-radius, 16px) !important;
}

.fi-main .fi-section > .fi-section-header:first-child {
    border-radius: calc(var(--td-card-radius, 16px) - 1px) calc(var(--td-card-radius, 16px) - 1px) 0 0 !important;
}

.fi-main .fi-section > .fi-section-content-ctn:last-child {
    border-radius: 0 0 calc(var(--td-card-radius, 16px) - 1px) calc(var(--td-card-radius, 16px) - 1px) !important;
}

.fi-main .fi-section:not(:has(> .fi-section-header)) > .fi-section-content-ctn {
    border-radius: calc(var(--td-card-radius, 16px) - 1px) !important;
}

.td-invoice-header-preview {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
}

.td-invoice-header-preview__copy {
    min-width: 0 !important;
}

.td-invoice-header-preview__copy span {
    display: block !important;
    color: var(--pb-ink) !important;
    font-size: 1.05rem !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
}

.td-invoice-header-preview__copy strong {
    display: block !important;
    margin-top: 3px !important;
    color: var(--pb-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
}

.td-invoice-number-preview {
    display: flex !important;
    min-height: 42px !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 190px !important;
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    padding: 8px 10px !important;
}

.td-invoice-number-preview span {
    color: var(--pb-muted) !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.td-invoice-number-preview strong {
    overflow: hidden !important;
    color: var(--pb-ink) !important;
    font-size: 0.86rem !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.td-invoice-meta-field {
    align-self: end !important;
}

.td-invoice-meta-field .fi-fo-field-wrp-label,
.td-source-toggle .fi-fo-field-wrp-label {
    margin-bottom: 6px !important;
}

.td-invoice-date-field .fi-input-wrp {
    min-height: 50px !important;
    align-items: center !important;
    border-radius: 12px !important;
}

.td-invoice-date-field .fi-input {
    min-height: 48px !important;
}

/* Source toggle buttons: single visual owner.
   Layout-specific blocks may only change columns, width, wrapping, or compact density. */
.td-source-toggle:is(.fi-fo-toggle-buttons, .fi-btn-group),
.td-source-toggle :where(.fi-fo-toggle-buttons, .fi-btn-group) {
    display: grid !important;
    width: 100% !important;
    min-height: 50px !important;
    align-items: center !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    border: 1px solid color-mix(in srgb, var(--pb-lux-line, #d8d7cf) 82%, transparent) !important;
    border-radius: var(--pb-control-radius) !important;
    background: color-mix(in srgb, var(--pb-panel-bg, #f7f7f3) 86%, #ffffff) !important;
    padding: 6px !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.td-source-toggle .fi-fo-toggle-buttons-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    opacity: 0 !important;
    clip-path: inset(50%) !important;
    pointer-events: none !important;
}

.td-source-toggle .fi-btn {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid var(--pb-border) !important;
    border-radius: var(--pb-control-radius) !important;
    background: var(--pb-surface) !important;
    color: var(--pb-text) !important;
    padding: 0 14px !important;
    font-family: var(--pb-font, "Montserrat", Arial, sans-serif) !important;
    font-size: 13px !important;
    font-weight: var(--pb-button-weight) !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(23, 33, 31, 0.04) !important;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}

.td-source-toggle .fi-btn:hover {
    border-color: var(--pb-primary-border) !important;
    background: var(--pb-surface-soft) !important;
    color: var(--pb-text) !important;
    box-shadow: none !important;
}

.td-source-toggle .fi-btn span {
    overflow: hidden !important;
    max-width: 100% !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.td-source-toggle .fi-fo-toggle-buttons-input:checked + .fi-btn,
.td-source-toggle :where(.fi-btn[aria-pressed="true"], .fi-btn[aria-checked="true"], .fi-btn.fi-active),
.td-source-toggle label:has(input:checked) .fi-btn {
    border-color: var(--pb-primary) !important;
    background: var(--pb-primary) !important;
    color: var(--pb-button-text) !important;
    box-shadow: none !important;
}

.td-source-toggle .fi-fo-toggle-buttons-input:checked + .fi-btn:hover,
.td-source-toggle :where(.fi-btn[aria-pressed="true"], .fi-btn[aria-checked="true"], .fi-btn.fi-active):hover,
.td-source-toggle label:has(input:checked) .fi-btn:hover {
    border-color: var(--pb-primary-dark) !important;
    background: var(--pb-primary-dark) !important;
    color: var(--pb-button-text) !important;
}

.td-source-toggle .fi-fo-toggle-buttons-input:focus-visible + .fi-btn,
.td-source-toggle .fi-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--pb-primary) 35%, transparent) !important;
    outline-offset: 2px !important;
}

.td-source-toggle .fi-btn:not(:first-of-type) {
    margin-left: 0 !important;
}

.td-source-toggle--compact.fi-fo-toggle-buttons,
.td-source-toggle--compact .fi-fo-toggle-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.td-quote-status-field .td-source-toggle .fi-btn {
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 0.7rem !important;
    font-weight: 760 !important;
}

.td-turnaround-field .fi-input-wrp {
    min-height: 50px !important;
    align-items: center !important;
    border-radius: 12px !important;
}

.td-turnaround-field .fi-input,
.td-turnaround-field .fi-select-input,
.td-turnaround-field select {
    min-height: 48px !important;
    align-items: center !important;
    line-height: 1.2 !important;
}

.td-customer-select-field,
.td-walk-in-toggle-field {
    align-self: stretch !important;
}

.td-customer-select-field .fi-fo-select {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
}

.td-customer-select-field .fi-fo-select > :where(.fi-input-wrp-content-ctn, .fi-select-input, div.fi-select-input) {
    min-width: 0 !important;
}

.td-customer-select-field .fi-fo-select :where(.fi-input-wrp-suffix, .fi-input-wrp-suffix-action-ctn, .fi-ac) {
    display: contents !important;
}

.td-customer-select-field .fi-fo-select :where(.fi-icon-btn, .fi-btn):not(.fi-select-input-btn) {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid var(--pb-field-border-colour) !important;
    border-radius: var(--pb-field-radius) !important;
    background: var(--pb-field-bg) !important;
    color: var(--pb-muted) !important;
    box-shadow: none !important;
}

.td-customer-select-field .fi-fo-select :where(.fi-icon-btn, .fi-btn):not(.fi-select-input-btn):hover,
.td-customer-select-field .fi-fo-select :where(.fi-icon-btn, .fi-btn):not(.fi-select-input-btn):focus-visible {
    border-color: var(--pb-field-focus-border) !important;
    background: var(--pb-dropdown-option-hover-bg) !important;
    color: var(--pb-field-colour) !important;
}

.td-customer-select-field .fi-fo-select :where(.fi-icon-btn-icon, .fi-btn-icon, svg) {
    width: 16px !important;
    height: 16px !important;
}

@media (min-width: 768px) {
    .td-walk-in-toggle-field {
        display: flex !important;
        min-height: 76px !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding: 0 0 1px !important;
    }

    .td-walk-in-toggle-field.fi-fo-field-has-inline-label {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
}

.td-walk-in-toggle-field .fi-fo-field-label-col {
    min-height: 0 !important;
}

.td-walk-in-toggle-field .fi-fo-field-label,
.td-walk-in-toggle-field .fi-fo-field-wrp-label {
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 3px !important;
}

.td-walk-in-toggle-field .fi-fo-field-label-content {
    line-height: 1.2 !important;
}

.td-walk-in-toggle-field .fi-fo-field-wrp-helper-text {
    margin-top: 3px !important;
    line-height: 1.2 !important;
}

.td-walk-in-toggle {
    margin-top: 0 !important;
}

.td-checkout-panel .fi-fo-repeater-item,
.td-checkout-panel .fi-fo-builder-item {
    box-shadow: none !important;
}

.td-checkout-panel .fi-fo-repeater-item {
    border-color: var(--pb-lux-line) !important;
}

@media (max-width: 860px) {
    .td-dashboard-actions,
    .td-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .td-dashboard-actions,
    .td-action-grid,
    .td-dashboard-stat-grid,
    .td-production-grid,
    html[data-pb-layout="kanban_board"] .td-production-grid,
    html[data-pb-layout="production_control"] .td-production-grid {
        grid-template-columns: 1fr !important;
    }

    .td-dashboard-hero,
    .td-dashboard-hero__copy,
    .td-dashboard-hero__side,
    .td-command,
    .td-panel,
    .td-lane,
    .pb-supplier-directory {
        border-radius: 12px !important;
    }

    .td-dashboard-action,
    .td-action {
        min-height: 64px !important;
    }

    .td-card--workflow .td-flow-rail {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .td-card--workflow .td-flow-step {
        min-height: 68px !important;
    }

    .td-card--workflow .td-flow-step:nth-child(4n)::after,
    .td-card--workflow .td-flow-step:not(:last-child)::after {
        display: inline-flex !important;
    }

    .td-card--workflow .td-flow-step:not(:last-child)::after {
        content: '\2193';
        top: auto;
        right: auto;
        bottom: -22px;
        left: 28px;
        transform: translate(-50%, 50%);
    }

    .td-card--workflow .td-flow-step:last-child::after {
        display: none !important;
    }

    .fi-page-header-actions .fi-btn,
    .fi-ac .fi-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .td-source-toggle .fi-btn {
        min-height: 34px !important;
        padding: 6px 3px !important;
        font-size: 0.62rem !important;
    }

    .td-source-toggle--compact.fi-fo-toggle-buttons,
    .td-source-toggle--compact .fi-fo-toggle-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .td-artwork-charge-panel {
        padding: 10px !important;
    }

    .td-invoice-header-preview {
        gap: 8px !important;
    }

    .td-invoice-number-preview {
        min-width: 160px !important;
        padding: 7px 8px !important;
    }

    .td-walk-in-toggle-field {
        min-height: 0 !important;
        padding-top: 4px !important;
    }
}

/*
    Invoice card polish and configurable invoice/payment tones
*/

.td-pill--invoice-paid {
    border-color: var(--pb-invoice-paid) !important;
    background: var(--pb-invoice-paid) !important;
    color: #ffffff !important;
}

.td-pill--invoice-part-paid {
    border-color: var(--pb-invoice-part-paid) !important;
    background: var(--pb-invoice-part-paid) !important;
    color: #ffffff !important;
}

.td-pill--invoice-unpaid {
    border-color: var(--pb-invoice-unpaid) !important;
    background: var(--pb-invoice-unpaid) !important;
    color: #ffffff !important;
}

.td-pill--invoice-sent {
    border-color: var(--pb-invoice-sent) !important;
    background: var(--pb-invoice-sent) !important;
    color: #ffffff !important;
}

.td-pill--invoice-chasing {
    border-color: var(--pb-invoice-chasing) !important;
    background: var(--pb-invoice-chasing) !important;
    color: #ffffff !important;
}

.td-pill--invoice-closed {
    border-color: var(--pb-invoice-closed) !important;
    background: var(--pb-invoice-closed) !important;
    color: #ffffff !important;
}

/* Invoice action buttons now inherit the shared sticky actionbar contract.
   Invoice-specific classes remain for action identity only, not layout. */

/*
    Invoice and quote product/service lines
    Shared by the live invoice and quote forms. Keep this as the single source
    for line item cards, artwork controls, source buttons and the add-line action.
*/

.td-product-lines {
    --td-line-header-height: 42px;
}

/* Product/service lines own dense layout and overflow only.
   Field/dropdown visuals must inherit from section 07 shared controls. */
.fi-sc-section.td-product-lines > .fi-section,
.td-product-lines > .fi-section {
    overflow: visible !important; /* Dropdown popovers in measured rows must escape the card bounds. */
}

.fi-sc-section.td-product-lines > .fi-section > .fi-section-content-ctn,
.td-product-lines > .fi-section > .fi-section-content-ctn {
    border-radius: 0 0 calc(var(--td-card-radius, 10px) - 1px) calc(var(--td-card-radius, 10px) - 1px) !important;
    overflow: visible !important; /* Allows dropdowns and line controls to render outside their row. */
}

.td-product-lines .fi-fo-repeater {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.td-product-lines .fi-fo-repeater-item {
    position: relative !important;
    border: 1px solid var(--td-border, var(--pb-border)) !important;
    border-radius: var(--td-card-radius, 10px) !important;
    background: var(--td-card-bg, var(--pb-card)) !important;
    box-shadow: var(--td-shadow-soft, var(--pb-shadow-soft)) !important;
    overflow: visible !important;
    z-index: 1 !important;
}

.td-product-lines .fi-fo-repeater-item:focus-within {
    z-index: 20 !important;
}

.td-product-lines .fi-fo-repeater-item-header {
    position: static !important;
    display: flex !important;
    min-height: var(--td-line-header-height) !important;
    width: 100% !important;
    padding: 6px 12px !important;
    border-bottom: 1px solid var(--td-border, var(--pb-border)) !important;
    background: var(--td-section-header-bg, color-mix(in srgb, var(--td-card-bg, #ffffff) 94%, var(--td-page-bg, #f5f5f5))) !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto !important;
}

.td-product-lines .fi-fo-repeater-item-header-start-actions,
.td-product-lines .fi-fo-repeater-item-header-label,
.td-product-lines .fi-fo-repeater-item-header-collapsible-actions {
    display: none !important;
}

.td-product-lines .fi-fo-repeater-item-header-end-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-left: auto !important;
    pointer-events: auto !important;
}

.td-product-lines .fi-fo-repeater-item-header-end-actions > li:has(.td-line-actions-menu-action) {
    margin-right: 6px !important;
    padding-right: 10px !important;
    border-right: 1px solid color-mix(in srgb, var(--td-border, var(--pb-border)) 82%, transparent) !important;
}

.td-product-lines .fi-fo-repeater-item-header-end-actions .fi-icon-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    color: var(--pb-danger) !important;
    background: transparent !important;
}

.td-product-lines .fi-fo-repeater-item-header-end-actions .td-line-actions-menu-action.fi-icon-btn,
.td-product-lines .fi-fo-repeater-item-header-end-actions .td-line-actions-menu-action .fi-icon-btn {
    color: color-mix(in srgb, var(--td-ink-muted, var(--pb-muted)) 88%, var(--td-ink, var(--pb-ink))) !important;
}

.td-product-lines .fi-fo-repeater-item-header-end-actions .td-line-actions-menu-action.fi-icon-btn:hover,
.td-product-lines .fi-fo-repeater-item-header-end-actions .td-line-actions-menu-action .fi-icon-btn:hover {
    background: color-mix(in srgb, var(--td-accent, var(--pb-green)) 10%, transparent) !important;
    color: var(--td-ink, var(--pb-ink)) !important;
}

.td-product-lines .fi-fo-repeater-item-header-end-actions .fi-icon-btn:hover {
    background: color-mix(in srgb, var(--pb-danger) 10%, transparent) !important;
}

.td-product-lines .fi-fo-repeater-item-has-header > .fi-fo-repeater-item-content,
.td-product-lines .fi-fo-repeater-item-content {
    border-top: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.td-product-lines :where(.fi-section, .fi-section-content-ctn, .fi-section-content, .fi-sc, .fi-grid, .fi-fo-field-wrp, [data-field-wrapper]) {
    overflow: visible !important;
}

/* Product line dropdowns use the shared form/dropdown contract above.
   This section only keeps repeater layout wrappers from clipping menus. */
.td-product-lines :where(
    .fi-fo-select-wrp,
    .fi-fo-select-wrp .fi-fo-field-wrp-control,
    .fi-fo-select-wrp .fi-fo-field-wrp-control > div,
    .fi-input-wrp.fi-fo-select,
    .fi-input-wrp.fi-fo-select > .fi-input-wrp-content-ctn,
    div.fi-select-input,
    .fi-select-input-ctn,
    .choices
) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.td-product-lines .td-large-format-warning {
    max-width: 100% !important;
    padding: 9px 11px !important;
    border: 1px solid color-mix(in srgb, var(--td-coral, #b85c46) 24%, var(--td-border, var(--pb-border))) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--td-coral, #b85c46) 7%, var(--td-card-bg, #ffffff)) !important;
    color: color-mix(in srgb, var(--td-coral, #b85c46) 55%, var(--td-ink, var(--pb-ink))) !important;
    font-size: 0.76rem !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
}

.td-product-lines .td-measured-size-panel {
    width: 100% !important;
    max-width: 100% !important;
    align-items: end !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

.td-product-lines .td-production-spec-panel {
    width: 100% !important;
    max-width: 100% !important;
}

.td-product-lines .td-production-spec-panel > * {
    min-width: 0 !important;
    max-width: 100% !important;
    align-self: start !important;
}

.td-product-lines .td-production-spec-panel :where(.fi-fo-field-wrp, .fi-fo-field-wrp > div, .fi-fo-field-wrp-control) {
    min-width: 0 !important;
    max-width: 100% !important;
}

.td-product-lines .td-production-spec-panel :where(.choices, div.fi-select-input, .fi-select-input-ctn) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.td-product-lines .td-production-spec-panel :where(.fi-select-input-btn, select.fi-select-input, .choices__inner) {
    width: 100% !important;
}

.td-product-lines .td-production-spec-panel :where(.choices__list--single) {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    padding: 0 !important;
}

.td-product-lines .td-production-spec-panel :where(.choices__item, .choices__placeholder) {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.td-product-lines .td-measured-size-panel :where(.fi-fo-field-wrp-label, .fi-fo-field-label) {
    margin-bottom: 3px !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
}

.td-product-lines .td-production-spec-panel :where(.fi-fo-field-wrp-helper-text, .fi-fo-field-wrp-helper-text *, .fi-fo-field-wrp-hint, .fi-fo-field-wrp-hint *, .fi-fo-field-wrp-description, .fi-fo-field-wrp-description *, [class*="helper"], [class*="helper"] *) {
    max-width: 100% !important;
    color: color-mix(in srgb, var(--td-ink-muted, var(--pb-muted)) 62%, #ffffff) !important;
    margin-top: 2px !important;
    font-size: 0.36rem !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

@media (min-width: 1024px) {
    .td-product-lines .td-measured-size-panel {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        max-width: 100% !important;
    }
}

@media (max-width: 1023px) {
    .td-product-lines .td-production-spec-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .td-product-lines .td-production-spec-panel {
        grid-template-columns: 1fr !important;
    }
}

.td-product-lines.fi-fixed-positioning-context .fi-dropdown-panel,
.td-product-lines.fi-fixed-positioning-context .fi-select-panel {
    z-index: 9999 !important;
}

/* Measurable product admin cards */
.fi-main .td-measurable-product-card {
    width: 100% !important;
    max-width: 100% !important;
}

.fi-main .td-measurable-product-card > .fi-section,
.fi-main .td-measurable-product-card .fi-section {
    width: 100% !important;
}

.fi-main .td-measurable-product-card :where(.fi-section-header-description, .fi-fo-field-wrp-helper-text) {
    color: var(--td-ink-muted, var(--pb-muted)) !important;
    font-size: 0.76rem !important;
    line-height: 1.45 !important;
}

.fi-main .td-measurable-product-card :where(.fi-fo-field-wrp-label, .fi-fo-toggle label) {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

@media (max-width: 760px) {
    .fi-main .td-measurable-product-card :where(.fi-section-content, .fi-sc) {
        gap: 12px !important;
    }
}

.td-product-lines .td-finishing-options-panel {
    align-items: end !important;
    gap: 9px 11px !important;
    margin-top: 4px !important;
    padding-top: 2px !important;
}

.td-product-lines .td-finishing-options-panel :where(.fi-fo-field-wrp-label, .fi-fo-placeholder-label) {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--td-ink-muted, var(--pb-muted)) !important;
}

.td-product-lines .td-finishing-summary-preview {
    align-self: stretch !important;
    min-height: var(--pb-control-height) !important;
    padding: 9px 12px !important;
    border-left: 3px solid color-mix(in srgb, var(--td-accent, var(--pb-green)) 42%, var(--td-border, var(--pb-border))) !important;
    background: color-mix(in srgb, var(--pb-card, #ffffff) 96%, var(--pb-bg, #f6f5ef)) !important;
    color: var(--td-ink, var(--pb-ink)) !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    line-height: 1.22 !important;
}

.td-product-lines .fi-fo-repeater-item > :first-child,
.td-product-lines .fi-fo-repeater-item > :last-child,
.td-product-lines .fi-fo-repeater-item :where(.fi-section, .fi-section-content-ctn, .fi-section-content) {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.td-product-lines .fi-fo-repeater > .fi-ac {
    justify-content: center !important;
    width: 100% !important;
    margin-top: 16px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

.td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 9px 15px 9px 11px !important;
    border: 1px solid color-mix(in srgb, var(--td-accent, var(--pb-green)) 38%, var(--td-border, var(--pb-border))) !important;
    border-radius: calc(var(--td-control-radius, var(--pb-control-radius)) + 2px) !important;
    background: color-mix(in srgb, var(--td-accent, var(--pb-green)) 10%, var(--td-card-bg, var(--pb-card))) !important;
    color: var(--td-ink, var(--pb-ink)) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(48, 50, 47, 0.08) !important;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease !important;
}

.td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action:hover {
    border-color: color-mix(in srgb, var(--td-accent, var(--pb-green)) 58%, var(--td-border, var(--pb-border))) !important;
    background: color-mix(in srgb, var(--td-accent, var(--pb-green)) 16%, var(--td-card-bg, var(--pb-card))) !important;
    color: var(--td-ink, var(--pb-ink)) !important;
    box-shadow: 0 2px 5px rgba(48, 50, 47, 0.12) !important;
}

.td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 2px rgba(48, 50, 47, 0.08) !important;
}

.td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action .fi-btn-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action .fi-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    border: 1px solid color-mix(in srgb, var(--td-accent, var(--pb-green)) 36%, var(--td-border, var(--pb-border))) !important;
    border-radius: 999px !important;
    background: var(--td-card-bg, var(--pb-card)) !important;
    color: color-mix(in srgb, var(--td-accent, var(--pb-green)) 75%, var(--td-ink, var(--pb-ink))) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    line-height: 1 !important;
}

.td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action .fi-btn-icon::before {
    content: "+" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

.td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action .fi-btn-icon svg,
.td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
}

.td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action .fi-btn-icon svg {
    display: none !important;
}

.td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action .fi-btn-label::after {
    content: none !important;
    display: none !important;
}

.td-checkout-panel :where(.fi-input-wrp, .fi-select-input) {
    align-items: center !important;
}

.td-checkout-panel :where(.fi-input, .fi-select-input, select, input) {
    min-height: 42px !important;
    line-height: 1.2 !important;
}

.td-checkout-panel select.fi-select-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.td-checkout-panel .fi-input-wrp-prefix,
.td-checkout-panel .fi-input-wrp-suffix {
    display: inline-flex !important;
    min-height: 42px !important;
    align-items: center !important;
}

.td-walk-in-toggle-field .fi-fo-field-label-content,
.td-walk-in-toggle-field .fi-fo-field-wrp-label span {
    font-weight: 760 !important;
}

/* Invoice and quote line artwork controls: one clean switchboard row. */
.td-artwork-charge-panel {
    margin-top: 6px !important;
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, var(--pb-lux-line, #d8d7cf) 82%, transparent) !important;
    border-radius: var(--pb-control-radius) !important;
    background: color-mix(in srgb, var(--pb-panel-bg, #f7f7f3) 86%, #ffffff) !important;
    padding: 10px 12px !important;
}

.td-artwork-charge-panel > .grid {
    align-items: start !important;
    row-gap: 12px !important;
    column-gap: 14px !important;
}

.td-artwork-switchboard {
    display: flex !important;
    width: 100% !important;
    min-height: 54px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px 28px !important;
    border: 1px solid var(--pb-border) !important;
    border-radius: var(--pb-control-radius) !important;
    background: color-mix(in srgb, var(--pb-surface) 96%, var(--pb-bg)) !important;
    padding: 8px 12px !important;
}

.td-artwork-switchboard > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

.td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) {
    display: flex !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: max-content !important;
    min-height: 42px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    align-self: center !important;
}

.td-artwork-switchboard .td-artwork-source-toggle {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 380px !important;
    min-height: 42px !important;
    flex: 1 1 260px !important;
    align-items: center !important;
    align-self: center !important;
}

.td-artwork-switchboard .td-artwork-details-toggle {
    margin-left: auto !important;
    justify-self: auto !important;
}

.fi-main .td-artwork-switchboard > .fi-sc.fi-grid {
    width: 100% !important;
    align-items: center !important;
}

@media (min-width: 768px) {
    .fi-main .td-artwork-switchboard > .fi-sc.fi-grid > .fi-grid-col:has(.td-artwork-details-toggle) {
        grid-column: 11 / -1 !important;
        justify-self: end !important;
        width: auto !important;
        max-width: max-content !important;
        margin-left: auto !important;
        padding-right: 12px !important;
    }

    .fi-main .td-artwork-switchboard .td-artwork-details-toggle {
        width: auto !important;
        max-width: max-content !important;
        margin-left: auto !important;
        justify-self: end !important;
    }
}

@media (max-width: 767px) {
    .fi-main .td-artwork-switchboard > .fi-sc.fi-grid > .fi-grid-col:has(.td-artwork-details-toggle) {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
        width: auto !important;
        max-width: max-content !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
    }

    .fi-main .td-artwork-switchboard .td-artwork-details-toggle {
        margin-left: 0 !important;
        justify-self: start !important;
        padding-right: 0 !important;
    }
}

.td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle).fi-fo-field-has-inline-label {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

.td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) .fi-fo-field-wrp {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.td-artwork-switchboard .td-artwork-source-toggle .fi-fo-field-wrp {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) .fi-fo-field-label-col {
    min-height: 0 !important;
}

.td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) :where(.fi-fo-field-wrp-label, .fi-fo-field-label, .fi-fo-field-wrp-label label) {
    display: inline-flex !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: max-content !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    color: var(--pb-text) !important;
    font-size: 13px !important;
    font-weight: var(--pb-label-weight) !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field) :where(.fi-fo-field-wrp-hint) {
    display: inline-flex !important;
    width: 12px !important;
    min-width: 12px !important;
    height: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin-left: 3px !important;
    flex: 0 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.td-help-icon-field :where(.fi-fo-field-wrp-hint, .fi-fo-field-wrp-hint *, .fi-fo-field-wrp-hint button, .fi-fo-field-wrp-hint .fi-btn, .fi-fo-field-wrp-hint .fi-icon-btn, .fi-fo-field-wrp-hint-icon) {
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    flex: 0 0 12px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--td-ink-muted, var(--pb-muted)) 82%, var(--td-ink, var(--pb-ink))) !important;
    box-shadow: none !important;
    transform: none !important;
    appearance: none !important;
    line-height: 1 !important;
}

.td-help-icon-field :where(.fi-fo-field-wrp-hint, .fi-fo-field-wrp-hint-icon) {
    margin-left: 3px !important;
    align-self: center !important;
}

.td-help-icon-field :where(.fi-fo-field-wrp-hint svg, .fi-fo-field-wrp-hint-icon svg) {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    background: transparent !important;
    color: currentColor !important;
    fill: none !important;
    stroke: currentColor !important;
}

.td-help-icon-field :where(.fi-sc-icon, svg.fi-sc-icon) {
    display: inline-flex !important;
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    flex: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--pb-muted) !important;
    fill: none !important;
    stroke: currentColor !important;
    box-shadow: none !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.td-help-icon-field :where(.fi-sc-icon.fi-color, svg.fi-sc-icon.fi-color) {
    background: transparent !important;
    color: color-mix(in srgb, var(--td-ink-muted, var(--pb-muted)) 82%, var(--td-ink, var(--pb-ink))) !important;
}

.td-artwork-required-field.td-help-icon-field :where(.fi-fo-field-wrp-hint, .fi-fo-field-wrp-hint *, .fi-fo-field-wrp-hint-icon, .fi-sc-icon, svg.fi-sc-icon) {
    color: #B8995A !important;
}

.td-print-ready-artwork-field.td-help-icon-field :where(.fi-fo-field-wrp-hint, .fi-fo-field-wrp-hint *, .fi-fo-field-wrp-hint-icon, .fi-sc-icon, svg.fi-sc-icon) {
    color: #AABA8B !important;
}

.td-help-icon-field :where(.fi-fo-field-wrp-hint button:hover, .fi-fo-field-wrp-hint .fi-btn:hover, .fi-fo-field-wrp-hint .fi-icon-btn:hover, .fi-fo-field-wrp-hint button:focus-visible, .fi-fo-field-wrp-hint .fi-btn:focus-visible, .fi-fo-field-wrp-hint .fi-icon-btn:focus-visible) {
    background: transparent !important;
    color: color-mix(in srgb, var(--td-accent, var(--pb-green)) 70%, var(--td-ink, var(--pb-ink))) !important;
    box-shadow: none !important;
    transform: none !important;
}

.td-artwork-required-field.td-help-icon-field :where(.fi-fo-field-wrp-hint button:hover, .fi-fo-field-wrp-hint button:hover *, .fi-fo-field-wrp-hint .fi-btn:hover, .fi-fo-field-wrp-hint .fi-btn:hover *, .fi-fo-field-wrp-hint .fi-icon-btn:hover, .fi-fo-field-wrp-hint .fi-icon-btn:hover *, .fi-fo-field-wrp-hint button:focus-visible, .fi-fo-field-wrp-hint button:focus-visible *, .fi-fo-field-wrp-hint .fi-btn:focus-visible, .fi-fo-field-wrp-hint .fi-btn:focus-visible *, .fi-fo-field-wrp-hint .fi-icon-btn:focus-visible, .fi-fo-field-wrp-hint .fi-icon-btn:focus-visible *) {
    color: #B8995A !important;
}

.td-print-ready-artwork-field.td-help-icon-field :where(.fi-fo-field-wrp-hint button:hover, .fi-fo-field-wrp-hint button:hover *, .fi-fo-field-wrp-hint .fi-btn:hover, .fi-fo-field-wrp-hint .fi-btn:hover *, .fi-fo-field-wrp-hint .fi-icon-btn:hover, .fi-fo-field-wrp-hint .fi-icon-btn:hover *, .fi-fo-field-wrp-hint button:focus-visible, .fi-fo-field-wrp-hint button:focus-visible *, .fi-fo-field-wrp-hint .fi-btn:focus-visible, .fi-fo-field-wrp-hint .fi-btn:focus-visible *, .fi-fo-field-wrp-hint .fi-icon-btn:focus-visible, .fi-fo-field-wrp-hint .fi-icon-btn:focus-visible *) {
    color: #AABA8B !important;
}

.td-artwork-source-toggle .td-source-toggle.fi-fo-toggle-buttons,
.td-artwork-source-toggle .td-source-toggle .fi-fo-toggle-buttons,
.td-artwork-source-toggle .fi-fo-toggle-buttons,
.td-artwork-source-toggle .fi-btn-group {
    display: grid !important;
    width: 100% !important;
    min-height: 38px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px !important;
}

.td-artwork-source-toggle .td-source-toggle .fi-btn,
.td-artwork-source-toggle .td-artwork-source-toggle-buttons .fi-btn,
.td-artwork-source-toggle .fi-btn-group .fi-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 680 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

.td-artwork-source-toggle .td-source-toggle .fi-btn span,
.td-artwork-source-toggle .td-artwork-source-toggle-buttons .fi-btn span,
.td-artwork-source-toggle .fi-btn-group .fi-btn span {
    overflow: hidden !important;
    max-width: 100% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.td-artwork-charge-select,
.td-artwork-price-field {
    align-self: end !important;
}

.td-artwork-charge-select .fi-input-wrp,
.td-artwork-charge-select .choices__inner,
.td-artwork-price-field .fi-input-wrp,
.td-artwork-charge-panel .fi-input-wrp,
.td-artwork-charge-panel .fi-select-input,
.td-artwork-charge-panel select {
    min-height: var(--pb-control-height) !important;
    border-radius: var(--pb-control-radius) !important;
    align-items: center !important;
}

.td-artwork-notes-field textarea,
.td-artwork-notes-field .fi-textarea {
    min-height: 112px !important;
    line-height: 1.45 !important;
}

.td-artwork-files-field .fi-fo-file-upload {
    min-height: 112px !important;
}

.td-artwork-files-field .fi-fo-file-upload,
.td-artwork-notes-field .fi-input-wrp {
    border-radius: var(--pb-control-radius) !important;
}

.td-artwork-required-field .fi-fo-field-wrp-helper-text,
.td-print-ready-artwork-field .fi-fo-field-wrp-helper-text,
.td-artwork-charge-panel .fi-fo-field-wrp-helper-text {
    color: var(--pb-muted) !important;
    font-size: 0.62rem !important;
    line-height: 1.15 !important;
}

@media (max-width: 1180px) {
    .td-artwork-switchboard {
        gap: 12px 22px !important;
    }

    .td-artwork-switchboard .td-artwork-source-toggle {
        flex: 1 1 100% !important;
        max-width: 360px !important;
        order: 4 !important;
    }

    .td-artwork-switchboard .td-artwork-details-toggle {
        grid-column: auto !important;
        justify-self: auto !important;
        order: 5 !important;
    }
}

@media (max-width: 860px) {
    .td-artwork-switchboard {
        gap: 10px 12px !important;
    }

    .td-artwork-switchboard .td-artwork-source-toggle,
    .td-artwork-switchboard .td-artwork-details-toggle {
        grid-column: auto !important;
        justify-self: auto !important;
    }

    .td-artwork-switchboard .td-artwork-details-toggle .fi-fo-field-wrp {
        justify-content: flex-start !important;
    }
}

@media (max-width: 640px) {
    .td-artwork-switchboard .td-artwork-details-toggle {
        margin-left: 0 !important;
    }
}

@media (max-width: 560px) {
    .td-artwork-switchboard {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle, .td-artwork-source-toggle),
    .td-artwork-source-toggle .td-source-toggle.fi-fo-toggle-buttons,
    .td-artwork-source-toggle .td-source-toggle .fi-fo-toggle-buttons,
    .td-artwork-source-toggle .fi-fo-toggle-buttons,
    .td-artwork-source-toggle .fi-btn-group {
        width: 100% !important;
    }

    .td-artwork-switchboard :where(.fi-fo-field-wrp) {
        width: 100% !important;
    }
}

/*
    Theme preset editor
*/

.td-theme-gallery {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
}

.td-theme-gallery__intro {
    max-width: 72rem !important;
    color: var(--pb-muted) !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
}

.td-theme-gallery__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
    gap: 14px !important;
}

.fi-main .td-theme-apply-actions .fi-ac {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

.fi-main .td-theme-apply-actions .fi-ac .fi-btn {
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
}

.fi-main .td-theme-apply-actions .fi-ac .fi-btn-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.fi-main .td-payment-settings-links {
    display: grid;
    gap: 8px;
}

.fi-main .td-payment-settings-links span {
    display: grid;
    gap: 4px;
}

.fi-main .td-payment-settings-links code {
    display: block;
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-control-radius);
    background: var(--pb-surface-soft);
    padding: 8px 10px;
    color: var(--pb-text);
    font-size: 12px;
}

.fi-main .td-payment-settings-links small {
    color: var(--pb-muted);
}

.td-theme-card {
    display: grid !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid color-mix(in srgb, var(--theme-border) 92%, transparent) !important;
    border-radius: 12px !important;
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 1px 2px rgb(30 30 30 / 0.04) !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease !important;
}

.td-theme-card:hover,
.td-theme-card:focus-visible {
    border-color: color-mix(in srgb, var(--theme-primary) 72%, var(--theme-border)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 14%, transparent), 0 8px 22px rgb(30 30 30 / 0.06) !important;
    transform: translateY(-1px) !important;
}

.td-theme-card--active {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 18%, transparent) !important;
}

.td-theme-card__top {
    display: flex !important;
    min-width: 0 !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.td-theme-card__top > div {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
}

.td-theme-card__top strong {
    color: var(--theme-text) !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.td-theme-card__top span {
    color: var(--theme-muted) !important;
    font-size: 0.68rem !important;
    font-weight: 650 !important;
}

.td-theme-card__top em {
    flex: 0 0 auto !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: var(--theme-secondary) !important;
    color: var(--theme-primary) !important;
    font-size: 0.64rem !important;
    font-style: normal !important;
    font-weight: 800 !important;
}

.td-theme-card__swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.td-theme-card__swatch {
    width: 22px !important;
    height: 22px !important;
    border: 1px solid rgb(0 0 0 / 0.12) !important;
    border-radius: 7px !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.32) !important;
}

.td-theme-card__scene {
    display: grid !important;
    min-height: 152px !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--theme-border) 90%, transparent) !important;
    border-radius: 10px !important;
    background: var(--theme-card) !important;
}

.td-theme-card__scene::before {
    content: "" !important;
    grid-column: 1 / -1 !important;
    height: 7px !important;
    background: var(--theme-topbar) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent) !important;
}

.td-theme-card__scene aside {
    display: grid !important;
    align-content: start !important;
    gap: 9px !important;
    padding: 10px !important;
    background: var(--theme-sidebar) !important;
}

.td-theme-card__scene aside b,
.td-theme-card__scene aside i {
    display: block !important;
    height: 9px !important;
    border-radius: 999px !important;
}

.td-theme-card__scene aside b {
    background: var(--theme-sidebar-active) !important;
}

.td-theme-card__scene aside i {
    background: rgb(255 255 255 / 0.32) !important;
}

.td-theme-card__scene main {
    display: grid !important;
    gap: 9px !important;
    align-content: start !important;
    min-width: 0 !important;
    padding: 10px !important;
    background: var(--theme-card) !important;
}

.td-theme-card__scene header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.td-theme-card__scene header span {
    width: 46% !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: var(--theme-secondary) !important;
}

.td-theme-card__scene header b,
.td-theme-card__apply {
    display: inline-flex !important;
    min-height: 26px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--theme-primary) !important;
    color: var(--theme-button-text) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    font-style: normal !important;
}

.td-theme-card__scene section {
    display: grid !important;
    gap: 5px !important;
    padding: 10px !important;
    border: 1px solid color-mix(in srgb, var(--theme-border) 90%, transparent) !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, var(--theme-card) 90%, var(--theme-bg)) !important;
}

.td-theme-card__scene section strong {
    color: var(--theme-text) !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
}

.td-theme-card__scene section p {
    margin: 0 !important;
    color: var(--theme-muted) !important;
    font-size: 0.64rem !important;
    line-height: 1.25 !important;
}

.td-theme-card__input {
    min-height: 24px !important;
    padding: 6px 8px !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 8px !important;
    background: var(--theme-input) !important;
    color: var(--theme-muted) !important;
    font-size: 0.64rem !important;
    font-weight: 650 !important;
}

.td-theme-card__table {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    border: 1px solid color-mix(in srgb, var(--theme-border) 88%, transparent) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--theme-secondary) 50%, var(--theme-card)) !important;
}

.td-theme-card__table strong,
.td-theme-card__table span {
    min-width: 0 !important;
    color: var(--theme-text) !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.td-theme-card__table span {
    color: var(--theme-muted) !important;
    font-size: 0.56rem !important;
}

.td-theme-card__row,
.td-theme-card__checks {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.td-theme-card__row span {
    padding: 5px 8px !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 8px !important;
    background: var(--theme-input) !important;
    color: var(--theme-text) !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
}

.td-theme-card__row span:nth-child(1) {
    background: color-mix(in srgb, var(--theme-success) 14%, #ffffff) !important;
    color: var(--theme-success) !important;
}

.td-theme-card__row span:nth-child(2) {
    background: color-mix(in srgb, var(--theme-warning) 14%, #ffffff) !important;
    color: var(--theme-warning) !important;
}

.td-theme-card__checks i {
    width: 30px !important;
    height: 18px !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 999px !important;
    background: var(--theme-secondary) !important;
}

.td-theme-card__checks i:first-child {
    background: var(--theme-accent) !important;
}

.td-theme-card__apply {
    justify-self: start !important;
    background: var(--theme-card) !important;
    color: var(--theme-primary) !important;
    border: 1px solid var(--theme-border) !important;
}

.td-theme-card__apply--active {
    background: var(--theme-primary) !important;
    color: var(--theme-button-text) !important;
    border-color: var(--theme-primary) !important;
}

.td-theme-palette-preview {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px !important;
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--pb-card) 88%, var(--pb-bg)) !important;
}

.td-theme-palette-preview__copy {
    max-width: 68rem !important;
    color: var(--pb-muted) !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
}

.td-theme-palette-preview__swatches {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.td-theme-swatch {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    border: 1px solid var(--pb-lux-line) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
}

.td-theme-swatch__chip {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border: 1px solid color-mix(in srgb, #000000 12%, transparent) !important;
    border-radius: 9px !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28) !important;
}

.td-theme-swatch__text {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
}

.td-theme-swatch__text strong {
    overflow: hidden !important;
    color: var(--pb-ink) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.td-theme-swatch__text code {
    color: var(--pb-muted) !important;
    font-size: 0.68rem !important;
    font-weight: 650 !important;
}

@media (max-width: 900px) {
    .td-theme-palette-preview__swatches {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .td-theme-palette-preview__swatches {
        grid-template-columns: 1fr !important;
    }
}

/*
    Front desk journey - responsive layout shifts and editable colours
*/

.td-card--journey {
    overflow: hidden !important;
    padding-inline: clamp(14px, 2vw, 24px) !important;
    padding-bottom: clamp(16px, 2vw, 24px) !important;
}

.td-card--journey .td-flow-rail {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: visible !important;
    padding: clamp(16px, 1.8vw, 22px) 4px clamp(16px, 1.8vw, 22px) !important;
}

.td-card--journey .td-flow-step {
    min-width: 0 !important;
    min-height: 104px !important;
    margin-left: -15px !important;
    padding: 20px 24px 20px 34px !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 20px 50%) !important;
    isolation: isolate !important;
}

.td-card--journey .td-flow-step:first-child {
    margin-left: 0 !important;
    padding-left: 24px !important;
    border-radius: 10px 0 0 10px !important;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%) !important;
}

.td-card--journey .td-flow-step:last-child {
    border-radius: 0 10px 10px 0 !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20px 50%) !important;
}

.td-card--journey .td-flow-step__label,
.td-card--journey .td-flow-step__note {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.td-card--journey .td-flow-step__label {
    white-space: nowrap !important;
}

.td-card--journey .td-flow-step__note {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
}

.td-card--journey .td-flow-step--customer { --td-flow-color: var(--td-flow-customer, #8d4059); }
.td-card--journey .td-flow-step--quote { --td-flow-color: var(--td-flow-quote, #c86952); }
.td-card--journey .td-flow-step--invoice { --td-flow-color: var(--td-flow-invoice, #285a73); }
.td-card--journey .td-flow-step--payment { --td-flow-color: var(--td-flow-payment, #667a4a); }
.td-card--journey .td-flow-step--artwork { --td-flow-color: var(--td-flow-artwork, #7a5a91); }
.td-card--journey .td-flow-step--production { --td-flow-color: var(--td-flow-production, #2f6f7f); }
.td-card--journey .td-flow-step--collection { --td-flow-color: var(--td-flow-collection, #4d806e); }
.td-card--journey .td-flow-step--complete { --td-flow-color: var(--td-flow-complete, #5c626b); }

@media (max-width: 1280px) {
    .td-card--journey .td-flow-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    .td-card--journey .td-flow-step,
    .td-card--journey .td-flow-step:first-child,
    .td-card--journey .td-flow-step:last-child {
        min-height: 86px !important;
        margin-left: 0 !important;
        padding: 18px !important;
        border-radius: 8px !important;
        clip-path: none !important;
    }
}

@media (max-width: 860px) {
    .td-card--journey .td-flow-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .td-card--journey .td-flow-step,
    .td-card--journey .td-flow-step:first-child,
    .td-card--journey .td-flow-step:last-child {
        min-height: 78px !important;
        padding: 16px !important;
    }
}

@media (max-width: 560px) {
    .td-card--journey {
        padding-inline: 12px !important;
        padding-bottom: 14px !important;
    }

    .td-card--journey .td-flow-rail {
        grid-template-columns: 1fr !important;
        padding: 14px 0 !important;
    }

    .td-card--journey .td-flow-step,
    .td-card--journey .td-flow-step:first-child,
    .td-card--journey .td-flow-step:last-child {
        min-height: 72px !important;
        border-radius: 8px !important;
    }

    .td-card--journey .td-flow-step__label {
        white-space: normal !important;
    }
}

html[data-pb-layout="workflow_saas"] {
    --pb-layout-marker: "Workflow SaaS";
    --pb-lux-space: clamp(16px, 2vw, 28px);
    --pb-lux-gap: 16px;
    --td-card-radius: 14px;
    --td-control-radius: 10px;
    --td-shadow: 0 1px 0 color-mix(in srgb, var(--td-border) 84%, transparent);
    --td-shadow-soft: 0 1px 0 color-mix(in srgb, var(--td-border) 76%, transparent);
    --pb-saas-accent: var(--pb-green);
    --pb-saas-control: var(--pb-button);
    --pb-saas-card: var(--pb-card);
    --pb-saas-panel: color-mix(in srgb, var(--pb-button) 4%, var(--pb-card));
    --pb-saas-border: color-mix(in srgb, var(--pb-border) 68%, var(--pb-ink));
    --pb-saas-border-soft: color-mix(in srgb, var(--pb-border) 82%, var(--pb-ink));
    --pb-saas-line: color-mix(in srgb, var(--pb-border) 78%, #ffffff);
    --pb-saas-muted: color-mix(in srgb, var(--pb-muted) 76%, var(--pb-ink));
    --pb-saas-shadow: 0 1px 2px rgb(17 24 39 / 0.045), 0 14px 34px rgb(17 24 39 / 0.07);
}

html[data-pb-layout="workflow_saas"] :where(.td-dashboard-board, .td-workflow-grid, .td-action-grid, .td-money-grid, .td-kpi-grid) {
    gap: 12px !important;
}

html[data-pb-layout="workflow_saas"] :where(.td-dashboard-action, .td-job-card, .td-workflow-job, .td-list-row, .td-workflow-list-row) {
    min-height: 88px !important;
    border-left: 0 !important;
}

html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-rail {
    gap: 10px !important;
}

html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-step,
html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-step:first-child,
html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-step:last-child {
    clip-path: none !important;
    margin-left: 0 !important;
    border-radius: 8px !important;
}

html[data-pb-layout="workflow_saas"] :where(.td-command__main, .td-dashboard-hero, .td-workflow-hero) {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr) !important;
    gap: 18px !important;
}

html[data-pb-layout="workflow_saas"] :where(.fi-tabs, .fi-tabs-header) {
    border: 1px solid var(--pb-saas-line) !important;
    border-radius: 12px !important;
    background: var(--pb-saas-panel) !important;
    padding: 4px !important;
}

html[data-pb-layout="workflow_saas"] :where(.fi-tabs-item, .fi-tabs-tab, [role="tab"]) {
    border-radius: 8px !important;
}

/*
    Button and badge refinement
*/

:where(.td-pill, .fi-badge) {
    border-radius: 7px !important;
    font-size: 0.72rem !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.td-pill,
.fi-badge {
    min-height: 22px !important;
    padding: 4px 9px !important;
    border: 0 !important;
    line-height: 1.15 !important;
}

.td-next-action,
.td-workflow-link,
.td-workflow-button,
.pb-action-button {
    min-width: var(--pb-button-small-min-width) !important;
    min-height: var(--pb-button-small-min-height) !important;
    padding: 0 var(--pb-button-small-padding-x) !important;
    border: var(--pb-button-border) !important;
    border-radius: var(--pb-button-small-radius) !important;
    background: var(--pb-button-bg) !important;
    color: var(--pb-button-colour) !important;
    font-size: var(--pb-button-small-font-size) !important;
    font-weight: var(--pb-button-weight) !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}

.td-workflow-link--primary,
.td-workflow-button--primary,
.pb-action-button--primary {
    --pb-button-border: 1px solid var(--pb-primary);
    --pb-button-bg: var(--pb-primary);
    --pb-button-colour: var(--pb-button-text);
    --pb-button-hover-border: var(--pb-primary-dark);
    --pb-button-hover-bg: var(--pb-primary-dark);
    background: var(--pb-button) !important;
    color: var(--pb-button-text) !important;
}

.td-next-action:hover,
.td-workflow-link:not(.td-workflow-link--primary):hover,
.td-workflow-button:not(.td-workflow-button--primary):hover,
.pb-action-button:not(.pb-action-button--primary):not(.pb-action-button--danger):hover {
    border-color: var(--pb-button-hover-border) !important;
    background: var(--pb-button-hover-bg) !important;
    color: var(--pb-button-colour) !important;
}

.td-workflow-link--primary:hover,
.td-workflow-button--primary:hover,
.pb-action-button--primary:hover {
    border-color: var(--pb-primary-dark) !important;
    background: var(--pb-primary-dark) !important;
    color: var(--pb-button-text) !important;
}

/*
    Workflow SaaS Workspace contrast pass
    Uses editable theme/status colours while keeping the clean SaaS layout.
*/

html[data-pb-layout="workflow_saas"] :where(body, .fi-body) {
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--pb-saas-accent) 10%, transparent), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--pb-bg) 92%, #ffffff), color-mix(in srgb, var(--pb-button) 7%, var(--pb-bg))) !important;
    color: var(--pb-ink) !important;
}

html[data-pb-layout="workflow_saas"] :where(.fi-sidebar, .fi-sidebar-header) {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--pb-button) 8%, #ffffff), color-mix(in srgb, var(--pb-saas-accent) 7%, #ffffff)) !important;
    border-color: var(--pb-saas-border-soft) !important;
}

html[data-pb-layout="workflow_saas"] :where(.fi-sidebar-item-btn, .fi-sidebar-group-btn) {
    color: color-mix(in srgb, var(--pb-ink) 88%, var(--pb-muted)) !important;
}

html[data-pb-layout="workflow_saas"] :where(.fi-sidebar-item-active .fi-sidebar-item-btn, .fi-sidebar-item-btn[aria-current="page"]) {
    background: color-mix(in srgb, var(--pb-saas-accent) 18%, #ffffff) !important;
    color: var(--pb-ink) !important;
    box-shadow: inset 4px 0 0 var(--pb-saas-accent) !important;
}

html[data-pb-layout="workflow_saas"] :where(.fi-topbar) {
    background: color-mix(in srgb, var(--pb-card) 95%, transparent) !important;
    border-color: var(--pb-saas-border-soft) !important;
}

html[data-pb-layout="workflow_saas"] :where(.td-title, .td-dashboard-title, .fi-page-header-heading, .td-panel__title, .td-workflow-panel__title, .td-list__title) {
    color: var(--pb-ink) !important;
}

html[data-pb-layout="workflow_saas"] :where(.td-subtitle, .td-dashboard-lede, .td-workflow-copy, .td-list__meta, .td-dashboard-action__desc) {
    color: var(--pb-saas-muted) !important;
}

html[data-pb-layout="workflow_saas"] :where(.fi-tabs, .fi-tabs-header) {
    border-color: var(--pb-saas-border-soft) !important;
    background: color-mix(in srgb, var(--pb-button) 6%, var(--pb-card)) !important;
}

html[data-pb-layout="workflow_saas"] :where(.fi-tabs-item.fi-active, .fi-tabs-tab.fi-active, [role="tab"][aria-selected="true"]) {
    background: var(--pb-saas-control) !important;
    color: var(--pb-button-text) !important;
}

html[data-pb-layout="workflow_saas"] :where(.td-dashboard-action:nth-child(1), .td-dashboard-stat:nth-child(1), .td-kpi:nth-child(1), .td-money:nth-child(1)) {
    border-color: color-mix(in srgb, var(--pb-status-action) 30%, var(--pb-saas-border-soft)) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pb-status-action) 15%, #ffffff), var(--pb-card)) !important;
}

html[data-pb-layout="workflow_saas"] :where(.td-dashboard-action:nth-child(2), .td-dashboard-stat:nth-child(2), .td-kpi:nth-child(2), .td-money:nth-child(2)) {
    border-color: color-mix(in srgb, var(--pb-status-production) 30%, var(--pb-saas-border-soft)) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pb-status-production) 14%, #ffffff), var(--pb-card)) !important;
}

html[data-pb-layout="workflow_saas"] :where(.td-dashboard-action:nth-child(3), .td-dashboard-stat:nth-child(3), .td-kpi:nth-child(3), .td-money:nth-child(3)) {
    border-color: color-mix(in srgb, var(--pb-status-ready) 30%, var(--pb-saas-border-soft)) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pb-status-ready) 14%, #ffffff), var(--pb-card)) !important;
}

html[data-pb-layout="workflow_saas"] :where(.td-dashboard-action:nth-child(4), .td-dashboard-stat:nth-child(4), .td-kpi:nth-child(4), .td-money:nth-child(4)) {
    border-color: color-mix(in srgb, var(--pb-status-due) 30%, var(--pb-saas-border-soft)) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pb-status-due) 13%, #ffffff), var(--pb-card)) !important;
}

html[data-pb-layout="workflow_saas"] :where(.td-card--journey .td-flow-step) {
    background: var(--td-flow-color) !important;
    color: #ffffff !important;
}

html[data-pb-layout="workflow_saas"] :where(.td-card--journey .td-flow-step small, .td-card--journey .td-flow-step span) {
    color: rgb(255 255 255 / 0.92) !important;
}

/*
    Sidebar icon polish and collapsed-menu spacing
    Keeps every section readable when the desktop sidebar is collapsed.
*/

:where(.fi-sidebar) {
    --pb-sidebar-icon-size: 20px;
    --pb-sidebar-collapsed-size: 42px;
}

:where(.fi-sidebar-nav) {
    padding-inline: 10px !important;
}

:where(.fi-sidebar-nav-groups) {
    gap: 10px !important;
}

:where(.fi-sidebar-group) {
    margin-block: 4px !important;
}

:where(.fi-sidebar-group-items) {
    display: grid !important;
    gap: 4px !important;
}

:where(.fi-sidebar-item-button, .fi-sidebar-item-btn, .fi-sidebar-group-button, .fi-sidebar-group-btn) {
    min-height: 42px !important;
    gap: 12px !important;
    padding: 9px 12px !important;
    border-radius: 11px !important;
}

:where(.fi-sidebar-item-icon, .fi-sidebar-group-icon) {
    width: var(--pb-sidebar-icon-size) !important;
    height: var(--pb-sidebar-icon-size) !important;
    min-width: var(--pb-sidebar-icon-size) !important;
    flex: 0 0 var(--pb-sidebar-icon-size) !important;
    stroke-width: 1.9 !important;
}

:where(.fi-sidebar-item-label, .fi-sidebar-group-label) {
    line-height: 1.15 !important;
}

:where(.fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-nav) {
    padding-inline: 8px !important;
}

:where(.fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-nav-groups) {
    align-items: center !important;
    gap: 8px !important;
}

:where(.fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-group) {
    width: 100% !important;
    margin-block: 3px !important;
}

:where(.fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-group-items) {
    gap: 5px !important;
}

:where(.fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-item-button,
    .fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-item-btn,
    .fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-group-button,
    .fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-group-btn) {
    width: var(--pb-sidebar-collapsed-size) !important;
    min-width: var(--pb-sidebar-collapsed-size) !important;
    height: var(--pb-sidebar-collapsed-size) !important;
    min-height: var(--pb-sidebar-collapsed-size) !important;
    justify-content: center !important;
    gap: 0 !important;
    margin-inline: auto !important;
    padding: 0 !important;
}

:where(.fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-item-label,
    .fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-group-label,
    .fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-group-collapse-button,
    .fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-group-collapse-btn) {
    display: none !important;
}

:where(.fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-item-icon,
    .fi-sidebar:is(.fi-sidebar-collapsed, .fi-collapsed, [data-collapsed="true"]) .fi-sidebar-group-icon) {
    margin: 0 !important;
}

@media (min-width: 1024px) {
    :where(body:has(.fi-sidebar.fi-sidebar-collapsed) .fi-sidebar-nav,
        body:has(.fi-sidebar.fi-collapsed) .fi-sidebar-nav,
        body:has(.fi-sidebar[data-collapsed="true"]) .fi-sidebar-nav) {
        padding-inline: 8px !important;
    }
}

/*
    Workflow SaaS priority workload card contrast.
    Removes the washed-out white overlay from the four workload tiles and
    uses a restrained dark overlay so the selected status colours stay visible.
*/

html[data-pb-layout="workflow_saas"] .td-dashboard-hero__side .td-dashboard-stat {
    position: relative !important;
    overflow: hidden !important;
    border-color: rgb(17 24 39 / 0.14) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgb(17 24 39 / 0.08), 0 16px 34px rgb(17 24 39 / 0.10) !important;
}

html[data-pb-layout="workflow_saas"] .td-dashboard-hero__side .td-dashboard-stat::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(135deg, rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.05) 52%, rgb(255 255 255 / 0.08)) !important;
}

html[data-pb-layout="workflow_saas"] .td-dashboard-hero__side .td-dashboard-stat > * {
    position: relative !important;
    z-index: 1 !important;
}

html[data-pb-layout="workflow_saas"] .td-dashboard-hero__side .td-dashboard-stat__value,
html[data-pb-layout="workflow_saas"] .td-dashboard-hero__side .td-dashboard-stat__label {
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.18) !important;
}

html[data-pb-layout="workflow_saas"] .td-dashboard-hero__side .td-dashboard-stat--status-action {
    background: linear-gradient(135deg, var(--pb-status-action), color-mix(in srgb, var(--pb-status-action) 72%, #111827)) !important;
}

html[data-pb-layout="workflow_saas"] .td-dashboard-hero__side .td-dashboard-stat--status-production {
    background: linear-gradient(135deg, var(--pb-status-production), color-mix(in srgb, var(--pb-status-production) 72%, #111827)) !important;
}

html[data-pb-layout="workflow_saas"] .td-dashboard-hero__side .td-dashboard-stat--status-ready {
    background: linear-gradient(135deg, var(--pb-status-ready), color-mix(in srgb, var(--pb-status-ready) 72%, #111827)) !important;
}

html[data-pb-layout="workflow_saas"] .td-dashboard-hero__side .td-dashboard-stat--status-due {
    background: linear-gradient(135deg, var(--pb-status-due), color-mix(in srgb, var(--pb-status-due) 72%, #111827)) !important;
}

/*
    Recycle Bin and Bulk Delete admin pages.
    These records are recovery/safety tools, so the layout is calm, clear
    and action-focused without looking like a raw database list.
*/

.td-recycle,
.td-admin-cleanup {
    display: grid !important;
    gap: 18px !important;
}

.td-recycle__hero,
.td-admin-cleanup__hero {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 24px !important;
    border: 1px solid var(--pb-lux-line, #deded7) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--pb-surface, #f6f6f2) 78%, #ffffff)) !important;
    box-shadow: 0 1px 2px rgb(17 24 39 / 0.05) !important;
}

.td-recycle__bulk-link,
.td-admin-cleanup__link {
    display: inline-flex !important;
    min-height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    border: 1px solid color-mix(in srgb, var(--pb-ink, #202820) 18%, var(--pb-lux-line, #deded7)) !important;
    background: #ffffff !important;
    color: var(--pb-ink, #202820) !important;
    font-size: 0.78rem !important;
    font-weight: 760 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.td-recycle__stats,
.td-admin-cleanup__grid {
    display: grid !important;
    gap: 14px !important;
}

.td-recycle__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.td-recycle__stat,
.td-admin-cleanup__card,
.td-admin-cleanup__controls,
.td-recycle__section {
    border: 1px solid var(--pb-lux-line, #deded7) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgb(17 24 39 / 0.05) !important;
}

.td-recycle__stat {
    display: grid !important;
    gap: 8px !important;
    padding: 18px !important;
}

.td-recycle__stat span,
.td-admin-cleanup__field span {
    color: var(--pb-muted, #6f756f) !important;
    font-size: 0.72rem !important;
    font-weight: 760 !important;
}

.td-recycle__stat strong {
    color: var(--pb-ink, #202820) !important;
    font-size: clamp(1.45rem, 3vw, 2.1rem) !important;
    line-height: 1 !important;
    font-weight: 820 !important;
}

.td-recycle__notice,
.td-admin-cleanup__warning {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border: 1px solid color-mix(in srgb, #b8792f 24%, var(--pb-lux-line, #deded7)) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, #b8792f 8%, #ffffff) !important;
    color: var(--pb-ink, #202820) !important;
}

.td-recycle__notice strong,
.td-admin-cleanup__warning strong {
    flex: 0 0 auto !important;
    font-size: 0.78rem !important;
    font-weight: 820 !important;
}

.td-recycle__notice span,
.td-admin-cleanup__warning span {
    color: var(--pb-muted, #6f756f) !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

.td-recycle__section {
    overflow: hidden !important;
}

.td-recycle__section-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--pb-lux-line, #deded7) !important;
}

.td-recycle__section-head h3,
.td-admin-cleanup__card h3 {
    margin: 0 !important;
    color: var(--pb-ink, #202820) !important;
    font-size: 1rem !important;
    font-weight: 820 !important;
}

.td-recycle__section-head p,
.td-admin-cleanup__note {
    margin: 4px 0 0 !important;
    color: var(--pb-muted, #6f756f) !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
}

.td-recycle__list {
    display: grid !important;
}

.td-recycle__record {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--pb-lux-line, #deded7) 72%, transparent) !important;
}

.td-recycle__record:last-child {
    border-bottom: 0 !important;
}

.td-recycle__record-main {
    display: grid !important;
    gap: 9px !important;
    min-width: 0 !important;
}

.td-recycle__record-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.td-recycle__record-top h4 {
    margin: 0 !important;
    color: var(--pb-ink, #202820) !important;
    font-size: 0.96rem !important;
    font-weight: 820 !important;
    overflow-wrap: anywhere !important;
}

.td-recycle__badges {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.td-recycle__badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    border-radius: 999px !important;
    padding: 3px 9px !important;
    border: 1px solid color-mix(in srgb, #5f6b76 18%, var(--pb-lux-line, #deded7)) !important;
    background: color-mix(in srgb, #5f6b76 8%, #ffffff) !important;
    color: #4b5563 !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.td-recycle__badge--urgent {
    border-color: color-mix(in srgb, #c2412d 24%, var(--pb-lux-line, #deded7)) !important;
    background: color-mix(in srgb, #c2412d 10%, #ffffff) !important;
    color: #9f2f20 !important;
}

.td-recycle__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    color: var(--pb-muted, #6f756f) !important;
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
}

.td-recycle__meta span {
    position: relative !important;
}

.td-recycle__meta span:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    right: -7px !important;
    top: 50% !important;
    width: 3px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--pb-muted, #6f756f) 42%, transparent) !important;
}

.td-recycle__reason {
    margin: 0 !important;
    color: var(--pb-muted, #6f756f) !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

.td-recycle__reason strong {
    color: var(--pb-ink, #202820) !important;
}

.td-recycle__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.td-recycle__button,
.td-admin-cleanup__button {
    display: inline-flex !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    padding: 0 12px !important;
    border: 0 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.td-recycle__button--restore {
    background: color-mix(in srgb, var(--td-accent, #8fbd35) 18%, #ffffff) !important;
    color: color-mix(in srgb, var(--td-green, #3f7d4a) 80%, #111827) !important;
}

.td-recycle__button--clear,
.td-admin-cleanup__button--danger {
    background: color-mix(in srgb, #c2412d 10%, #ffffff) !important;
    color: #9f2f20 !important;
}

.td-recycle__empty {
    padding: 22px !important;
    color: var(--pb-muted, #6f756f) !important;
    font-size: 0.82rem !important;
}

.td-admin-cleanup__controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) !important;
    gap: 14px !important;
    padding: 18px !important;
}

.td-admin-cleanup__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.td-admin-cleanup__card {
    display: grid !important;
    gap: 14px !important;
    padding: 20px !important;
}

.td-admin-cleanup__card-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.td-admin-cleanup__count {
    display: inline-flex !important;
    min-width: 48px !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: var(--pb-ink, #202820) !important;
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 820 !important;
}

.td-admin-cleanup__field {
    display: grid !important;
    gap: 7px !important;
}

.td-admin-cleanup__field textarea,
.td-admin-cleanup__field input,
.td-admin-cleanup__field select {
    width: 100% !important;
    min-height: var(--pb-field-min-height) !important;
    border: var(--pb-field-border) !important;
    border-radius: var(--pb-field-radius) !important;
    background: var(--pb-field-bg) !important;
    color: var(--pb-field-colour) !important;
    padding: 10px var(--pb-field-padding-x) !important;
    font-size: var(--pb-field-font-size) !important;
    line-height: 1.35 !important;
}

.td-admin-cleanup__field textarea {
    resize: vertical !important;
}

.td-admin-cleanup__check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: var(--pb-ink, #202820) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
}

.td-admin-cleanup__check input {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
}

.td-admin-cleanup__button {
    width: fit-content !important;
    min-height: 42px !important;
    padding-inline: 16px !important;
}

@media (max-width: 980px) {
    .td-recycle__hero,
    .td-admin-cleanup__hero,
    .td-recycle__record,
    .td-admin-cleanup__controls {
        grid-template-columns: 1fr !important;
    }

    .td-recycle__hero,
    .td-admin-cleanup__hero {
        display: grid !important;
    }

    .td-recycle__stats,
    .td-admin-cleanup__grid {
        grid-template-columns: 1fr !important;
    }

    .td-recycle__actions {
        justify-content: flex-start !important;
    }
}

@media (max-width: 620px) {
    .td-recycle__hero,
    .td-admin-cleanup__hero,
    .td-recycle__section-head,
    .td-recycle__record,
    .td-admin-cleanup__card,
    .td-admin-cleanup__controls {
        padding: 16px !important;
    }

    .td-recycle__record-top {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .td-recycle__actions,
    .td-recycle__button,
    .td-admin-cleanup__button {
        width: 100% !important;
    }
}

/* Invoice and quote mobile/tablet polish. Desktop layout is intentionally untouched. */
@media (max-width: 1024px) {
    .fi-main :where(.td-checkout-panel, .td-product-lines),
    .fi-main :where(.td-checkout-panel, .td-product-lines) * {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .fi-main :where(.td-checkout-panel, .td-product-lines) :where(.fi-section-content, .fi-fo-repeater-item-content) {
        max-width: 100% !important;
        overflow: visible !important;
    }

    .td-invoice-header-preview {
        align-items: stretch !important;
    }

    .td-invoice-number-preview {
        min-width: 160px !important;
        max-width: 100% !important;
    }

    .td-source-toggle.fi-fo-toggle-buttons,
    .td-source-toggle .fi-fo-toggle-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .td-source-toggle .fi-btn {
        min-height: 36px !important;
        padding-inline: 10px !important;
        font-size: 12px !important;
    }

    .td-product-lines .fi-fo-repeater-item {
        max-width: 100% !important;
    }

    .td-product-lines .fi-fo-repeater-item-header {
        padding-inline: 10px !important;
    }

    .td-product-lines .fi-fo-repeater-item-header-end-actions {
        gap: 12px !important;
    }

    .td-product-lines .fi-fo-repeater-item-header-end-actions > li:has(.td-line-actions-menu-action) {
        margin-right: 8px !important;
        padding-right: 12px !important;
    }

    .td-product-lines .fi-fo-repeater-item-header-end-actions .fi-icon-btn {
        width: 34px !important;
        height: 34px !important;
    }

    .td-product-lines .fi-sc.fi-grid:not(.td-artwork-switchboard),
    .td-product-lines .grid:not(.td-artwork-switchboard) {
        column-gap: 12px !important;
        row-gap: 14px !important;
    }

    .td-artwork-switchboard {
        min-height: 0 !important;
        gap: 10px 14px !important;
        padding: 8px 10px !important;
    }

    .td-invoice-summary,
    .td-invoice-summary__box {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {
    .fi-main .td-checkout-panel > .fi-section,
    .fi-main .fi-sc-section.td-checkout-panel > .fi-section {
        border-radius: 12px !important;
    }

    .fi-main .td-checkout-panel > .fi-section > .fi-section-header,
    .fi-main .fi-sc-section.td-checkout-panel > .fi-section > .fi-section-header {
        padding: 14px 14px 10px !important;
    }

    .fi-main .td-checkout-panel > .fi-section > .fi-section-content-ctn > .fi-section-content,
    .fi-main .fi-sc-section.td-checkout-panel > .fi-section > .fi-section-content-ctn > .fi-section-content {
        padding: 14px !important;
    }

    .td-invoice-header-preview {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .td-invoice-number-preview {
        width: 100% !important;
        min-width: 0 !important;
    }

    .td-source-toggle.fi-fo-toggle-buttons,
    .td-source-toggle .fi-fo-toggle-buttons {
        min-height: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 5px !important;
    }

    .td-customer-select-field,
    .td-walk-in-toggle-field {
        align-self: auto !important;
    }

    .td-walk-in-toggle-field {
        min-width: 0 !important;
    }

    .td-product-lines .fi-fo-repeater-item-header {
        min-height: 38px !important;
        padding: 5px 8px !important;
    }

    .td-product-lines .fi-fo-repeater-item-content {
        padding: 12px !important;
    }

    .td-product-lines .fi-sc.fi-grid:not(.td-artwork-switchboard),
    .td-product-lines .grid:not(.td-artwork-switchboard) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .td-artwork-switchboard {
        align-items: flex-start !important;
    }

    .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) {
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 38px !important;
    }

    .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) :where(.fi-fo-field-wrp-label, .fi-fo-field-label, .fi-fo-field-wrp-label label) {
        gap: 9px !important;
        font-size: 12px !important;
    }

    .td-artwork-source-toggle .td-source-toggle.fi-fo-toggle-buttons,
    .td-artwork-source-toggle .td-source-toggle .fi-fo-toggle-buttons,
    .td-artwork-source-toggle .fi-fo-toggle-buttons,
    .td-artwork-source-toggle .fi-btn-group {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        min-height: 0 !important;
    }

    .td-invoice-summary__row {
        gap: 12px !important;
        padding: 10px 0 !important;
        font-size: 0.82rem !important;
    }

    .td-invoice-summary__row > :last-child {
        text-align: right !important;
    }
}

@media (max-width: 560px) {
    .fi-main .td-checkout-panel > .fi-section > .fi-section-header,
    .fi-main .fi-sc-section.td-checkout-panel > .fi-section > .fi-section-header {
        padding: 12px 12px 9px !important;
    }

    .fi-main .td-checkout-panel > .fi-section > .fi-section-content-ctn > .fi-section-content,
    .fi-main .fi-sc-section.td-checkout-panel > .fi-section > .fi-section-content-ctn > .fi-section-content {
        padding: 12px !important;
    }

    .td-source-toggle.fi-fo-toggle-buttons,
    .td-source-toggle .fi-fo-toggle-buttons {
        grid-template-columns: 1fr !important;
    }

    .td-source-toggle .fi-btn {
        min-height: 34px !important;
        justify-content: center !important;
        white-space: normal !important;
        line-height: 1.15 !important;
    }

    .td-product-lines .fi-sc.fi-grid:not(.td-artwork-switchboard),
    .td-product-lines .grid:not(.td-artwork-switchboard) {
        grid-template-columns: 1fr !important;
    }

    .td-product-lines .fi-fo-repeater > .fi-ac {
        margin-top: 12px !important;
    }

    .td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action {
        width: 100% !important;
        min-height: 42px !important;
        white-space: normal !important;
    }

    .td-artwork-switchboard {
        gap: 8px !important;
        padding: 8px !important;
    }

    .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle),
    .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) .fi-fo-field-wrp {
        width: 100% !important;
        max-width: 100% !important;
    }

    .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) :where(.fi-fo-field-wrp-label, .fi-fo-field-label, .fi-fo-field-wrp-label label) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-content: space-between !important;
        white-space: normal !important;
    }

    .td-artwork-source-toggle .td-source-toggle.fi-fo-toggle-buttons,
    .td-artwork-source-toggle .td-source-toggle .fi-fo-toggle-buttons,
    .td-artwork-source-toggle .fi-fo-toggle-buttons,
    .td-artwork-source-toggle .fi-btn-group {
        grid-template-columns: 1fr !important;
    }

    .td-invoice-summary__balance {
        margin-top: 8px !important;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .td-invoice-source-field .td-source-toggle.fi-fo-toggle-buttons,
    .td-invoice-source-field .td-source-toggle .fi-fo-toggle-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) and (min-width: 381px) {
    .td-invoice-source-field .td-source-toggle.fi-fo-toggle-buttons,
    .td-invoice-source-field .td-source-toggle .fi-fo-toggle-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 380px) {
    .td-invoice-source-field .td-source-toggle.fi-fo-toggle-buttons,
    .td-invoice-source-field .td-source-toggle .fi-fo-toggle-buttons {
        grid-template-columns: 1fr !important;
    }
}

/* Jobs list declutter: richer cells, fewer visible badge columns. */
.fi-main .td-job-table-summary,
.fi-main .td-job-table-workflow,
.fi-main .td-job-table-payment {
    display: grid;
    min-width: 0;
    max-width: 100%;
    gap: 4px;
}

.fi-main .td-job-table-summary {
    min-width: min(320px, 52vw);
}

.fi-main .td-job-table-summary__number {
    color: var(--pb-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fi-main .td-job-table-summary__title {
    color: var(--pb-ink);
    font-size: 0.9rem;
    font-weight: 780;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.fi-main .td-job-table-summary__meta,
.fi-main .td-job-table-payment__balance {
    color: var(--pb-muted);
    font-size: 0.74rem;
    font-weight: 620;
    line-height: 1.35;
}

.fi-main .td-job-table-workflow {
    display: flex;
    max-width: 320px;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.fi-main .td-job-table-workflow .td-pill {
    min-height: 24px !important;
    padding: 4px 9px !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
}

.fi-main .td-job-table-chip {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--pb-border) 82%, #ffffff);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pb-card) 82%, var(--pb-bg));
    color: color-mix(in srgb, var(--pb-muted) 88%, var(--pb-ink));
    padding: 4px 8px;
    font-size: 0.67rem;
    font-weight: 760;
    line-height: 1.1;
    white-space: nowrap;
}

.fi-main .td-job-table-chip--danger {
    border-color: color-mix(in srgb, var(--pb-danger) 28%, #ffffff);
    background: color-mix(in srgb, var(--pb-danger) 9%, #ffffff);
    color: color-mix(in srgb, var(--pb-danger) 78%, var(--pb-ink));
}

.fi-main .td-job-table-payment {
    gap: 5px;
}

.fi-main .td-job-table-payment .td-pill {
    width: max-content;
    min-height: 24px !important;
    padding: 4px 9px !important;
    font-size: 0.68rem !important;
}

/* Dashboard polish: keep the current Print Buddy look, but reduce visual noise. */
.td-shell--dashboard {
    gap: clamp(14px, 1.7vw, 20px) !important;
}

.td-shell--dashboard .td-dashboard-hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr) !important;
    align-items: stretch !important;
    border-color: color-mix(in srgb, var(--pb-border) 88%, #ffffff) !important;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--pb-card) 94%, var(--pb-bg)) 0%,
            #ffffff 54%,
            color-mix(in srgb, var(--pb-brand-green) 5%, #ffffff) 100%) !important;
    box-shadow: 0 1px 2px rgb(20 24 22 / 0.05), 0 16px 34px rgb(20 24 22 / 0.07) !important;
}

.td-shell--dashboard .td-dashboard-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-content: start !important;
}

@media (max-width: 980px) {
    .td-shell--dashboard .td-dashboard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .td-shell--dashboard .td-dashboard-actions {
        grid-template-columns: 1fr !important;
    }
}

.td-shell--dashboard .td-dashboard-action {
    min-height: 68px !important;
    border-color: color-mix(in srgb, var(--pb-border) 86%, #ffffff) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 1px 1px rgb(20 24 22 / 0.04) !important;
}

.td-shell--dashboard .td-dashboard-action:hover {
    border-color: color-mix(in srgb, var(--pb-brand-green) 26%, var(--pb-border)) !important;
    background: #ffffff !important;
    transform: translateY(-1px);
}

.td-shell--dashboard .td-dashboard-action__arrow {
    opacity: 0.45;
}

.td-shell--dashboard .td-dashboard-quick-links {
    margin-top: 14px !important;
    padding: 14px !important;
    border: 1px solid color-mix(in srgb, var(--pb-border) 86%, #ffffff) !important;
    border-radius: var(--pb-radius-lg) !important;
    background: color-mix(in srgb, var(--pb-card) 92%, var(--pb-bg)) !important;
    box-shadow: 0 1px 1px rgb(20 24 22 / 0.035) !important;
}

.td-shell--dashboard .td-dashboard-quick-links__head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
    color: var(--pb-text) !important;
    font-size: 0.76rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

.td-shell--dashboard .td-dashboard-quick-links__head small {
    color: var(--pb-muted) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.td-shell--dashboard .td-dashboard-quick-links__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important;
    gap: 10px !important;
}

.td-shell--dashboard .td-dashboard-quick-link {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 20px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 54px !important;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb, var(--pb-border) 84%, #ffffff) !important;
    border-radius: var(--pb-radius) !important;
    background: #ffffff !important;
    color: var(--pb-text) !important;
    text-decoration: none !important;
    box-shadow: 0 1px 1px rgb(20 24 22 / 0.035) !important;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease !important;
}

.td-shell--dashboard .td-dashboard-quick-link:hover {
    border-color: color-mix(in srgb, var(--pb-brand-green) 28%, var(--pb-border)) !important;
    background: color-mix(in srgb, var(--pb-brand-green) 4%, #ffffff) !important;
    transform: translateY(-1px) !important;
}

.td-shell--dashboard .td-dashboard-quick-link__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid color-mix(in srgb, var(--pb-border) 84%, #ffffff) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--pb-bg) 62%, #ffffff) !important;
    color: var(--pb-primary) !important;
}

.td-shell--dashboard .td-dashboard-quick-link__icon svg {
    width: 17px !important;
    height: 17px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Dashboard quick links editor
   Keeps the Company Settings repeater aligned with the shared admin card and
   field language instead of raw Filament defaults. */
.td-dashboard-quick-links-editor {
    width: 100% !important;
}

.td-dashboard-quick-links-editor .fi-fo-repeater,
.td-dashboard-quick-links-editor .fi-fo-repeater > .fi-fo-repeater-items {
    width: 100% !important;
}

.td-dashboard-quick-links-editor .fi-fo-repeater {
    display: grid !important;
    gap: 14px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

.td-dashboard-quick-links-editor .fi-fo-repeater > * {
    min-width: 0 !important;
}

.td-dashboard-quick-links-editor .fi-fo-repeater > .fi-fo-repeater-items {
    display: grid !important;
    gap: 14px !important;
}

.td-dashboard-quick-links-editor .fi-fo-repeater-item {
    border: 1px solid color-mix(in srgb, var(--pb-border) 86%, #ffffff) !important;
    border-radius: 16px !important;
    background: var(--pb-card) !important;
    box-shadow: var(--pb-shadow-soft) !important;
    overflow: hidden !important;
}

.td-dashboard-quick-links-editor .fi-fo-repeater-item-header {
    min-height: 40px !important;
    padding: 0 14px !important;
    background: var(--pb-panel-header-bg) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--pb-border) 82%, #ffffff) !important;
}

.td-dashboard-quick-links-editor .fi-fo-repeater-item-header :where(button, .fi-icon-btn) {
    min-height: 32px !important;
    min-width: 32px !important;
}

.td-dashboard-quick-links-editor .fi-fo-repeater-item-content {
    padding: 16px !important;
    background: var(--pb-card) !important;
}

.td-dashboard-quick-links-editor .fi-fo-repeater-item-content > .fi-grid {
    align-items: end !important;
    column-gap: 16px !important;
    row-gap: 16px !important;
}

.td-dashboard-quick-links-editor .fi-grid,
.td-dashboard-quick-links-editor .fi-grid-col {
    align-items: end !important;
}

.td-dashboard-quick-links-editor .fi-grid-col {
    min-width: 0 !important;
}

.td-dashboard-quick-links-editor .fi-fo-field-wrp {
    min-width: 0 !important;
}

.td-dashboard-quick-links-editor .fi-fo-field-wrp-label {
    margin-bottom: 6px !important;
}

.td-dashboard-quick-links-editor .fi-fo-field-wrp-label span {
    font-size: 0.72rem !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
}

.td-dashboard-quick-links-editor .fi-fo-field-wrp:has(.fi-toggle) {
    display: flex !important;
    align-items: center !important;
    min-height: var(--pb-control-height, 42px) !important;
}

.td-dashboard-quick-links-editor .fi-fo-field-wrp:has(.fi-toggle) .fi-fo-field-wrp-control {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.td-dashboard-quick-links-editor .fi-fo-field-wrp:has(.fi-toggle) .fi-fo-field-wrp-label {
    margin: 0 !important;
}

.td-dashboard-quick-links-editor .fi-input-wrp,
.td-dashboard-quick-links-editor .fi-select-input,
.td-dashboard-quick-links-editor input[type="text"],
.td-dashboard-quick-links-editor input[type="url"] {
    min-height: var(--pb-control-height, 42px) !important;
}

.td-dashboard-quick-links-editor > .fi-ac,
.td-dashboard-quick-links-editor .fi-fo-repeater > .fi-ac {
    display: flex !important;
    justify-content: center !important;
    margin-top: 4px !important;
    padding-inline: 12px !important;
}

:where(.fi-dropdown-panel, .tippy-box[data-theme~="light"]):has(
    .fi-sidebar-item-button,
    .fi-sidebar-item-btn,
    .fi-sidebar-group-button,
    .fi-sidebar-group-btn
) {
    border-color: var(--pb-border) !important;
    background: var(--pb-card) !important;
    color: var(--pb-ink) !important;
    box-shadow: var(--pb-shadow) !important;
}

:where(.fi-dropdown-panel, .tippy-box[data-theme~="light"]):has(
    .fi-sidebar-item-button,
    .fi-sidebar-item-btn,
    .fi-sidebar-group-button,
    .fi-sidebar-group-btn
) :where(
    .fi-sidebar-item-button,
    .fi-sidebar-item-btn,
    .fi-sidebar-group-button,
    .fi-sidebar-group-btn,
    .fi-sidebar-item-label,
    .fi-sidebar-group-label,
    .fi-sidebar-item-icon,
    .fi-sidebar-group-icon
) {
    color: var(--pb-ink) !important;
}

.td-dashboard-quick-links-editor > .fi-ac .fi-btn,
.td-dashboard-quick-links-editor .fi-fo-repeater > .fi-ac .fi-btn {
    min-width: 180px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
}

@media (max-width: 900px) {
    .td-dashboard-quick-links-editor .fi-fo-repeater {
        padding: 10px !important;
    }

    .td-dashboard-quick-links-editor .fi-fo-repeater-item-content {
        padding: 14px !important;
    }

    .td-dashboard-quick-links-editor .fi-fo-repeater-item-content > .fi-grid {
        column-gap: 14px !important;
        row-gap: 14px !important;
    }
}

@media (max-width: 640px) {
    .td-dashboard-quick-links-editor .fi-fo-repeater {
        padding: 8px !important;
    }

    .td-dashboard-quick-links-editor .fi-fo-repeater-item {
        border-radius: 12px !important;
    }

    .td-dashboard-quick-links-editor .fi-fo-repeater-item-header {
        padding-inline: 10px !important;
    }

    .td-dashboard-quick-links-editor .fi-fo-repeater-item-content {
        padding: 12px !important;
    }

    .td-dashboard-quick-links-editor > .fi-ac .fi-btn,
    .td-dashboard-quick-links-editor .fi-fo-repeater > .fi-ac .fi-btn {
        width: 100% !important;
    }
}

.td-shell--dashboard .td-dashboard-quick-link__text {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.td-shell--dashboard .td-dashboard-quick-link__label,
.td-shell--dashboard .td-dashboard-quick-link__desc {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.td-shell--dashboard .td-dashboard-quick-link__label {
    font-size: 0.84rem !important;
    font-weight: 760 !important;
}

.td-shell--dashboard .td-dashboard-quick-link__desc {
    color: var(--pb-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 520 !important;
}

.td-shell--dashboard .td-dashboard-quick-link__arrow {
    display: inline-flex !important;
    justify-content: flex-end !important;
    color: var(--pb-muted) !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    opacity: 0.6 !important;
}

.td-shell--dashboard .td-focus-strip {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 10px !important;
}

.td-shell--dashboard .td-focus-card {
    min-height: 104px !important;
    border-color: color-mix(in srgb, var(--pb-border) 88%, #ffffff) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgb(20 24 22 / 0.045) !important;
}

.td-shell--dashboard .td-dashboard-board {
    gap: clamp(12px, 1.5vw, 18px) !important;
}

.td-shell--dashboard .td-panel {
    border-color: color-mix(in srgb, var(--pb-border) 88%, #ffffff) !important;
    box-shadow: 0 1px 2px rgb(20 24 22 / 0.045) !important;
}

/* Dashboard journey progress rail: strong start-to-done stage cards. */
.td-shell--dashboard .td-card--journey {
    overflow: hidden !important;
    border-color: color-mix(in srgb, var(--pb-border) 78%, #ffffff) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--pb-bg) 42%, #ffffff) 100%) !important;
    box-shadow: 0 14px 34px rgb(20 24 22 / 0.08) !important;
}

.td-shell--dashboard .td-card--journey .td-flow-rail {
    position: relative !important;
    counter-reset: td-journey-step !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: clamp(16px, 1.8vw, 22px) 0 clamp(16px, 1.8vw, 22px) !important;
}

.td-shell--dashboard .td-card--journey .td-flow-rail::before {
    display: none !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step,
.td-shell--dashboard .td-card--journey .td-flow-step:first-child,
.td-shell--dashboard .td-card--journey .td-flow-step:last-child {
    counter-increment: td-journey-step !important;
    min-height: 108px !important;
    margin-left: 0 !important;
    padding: 18px 34px 17px 16px !important;
    border: 1px solid var(--td-flow-color) !important;
    border-radius: 8px !important;
    background: var(--td-flow-color) !important;
    clip-path: none !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgb(20 24 22 / 0.10) !important;
    z-index: 1 !important;
    isolation: isolate !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step:hover {
    border-color: var(--td-flow-color) !important;
    background: var(--td-flow-color) !important;
    filter: none !important;
    box-shadow: 0 12px 24px rgb(20 24 22 / 0.14) !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step:not(:last-child)::after {
    top: 50% !important;
    right: 10px !important;
    width: 22px !important;
    height: 22px !important;
    border: 1px solid rgb(255 255 255 / 0.30) !important;
    background: rgb(255 255 255 / 0.16) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16) !important;
    transform: translateY(-50%) !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step__dot {
    display: inline-flex !important;
    width: 24px !important;
    height: 24px !important;
    margin-top: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgb(255 255 255 / 0.58) !important;
    background: rgb(255 255 255 / 0.18) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18) !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step__dot::before {
    content: counter(td-journey-step);
}

.td-shell--dashboard .td-card--journey .td-flow-step__label {
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.16) !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step__note {
    color: rgb(255 255 255 / 0.86) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step--customer { --td-flow-color: var(--td-flow-customer, #9A7F8C); }
.td-shell--dashboard .td-card--journey .td-flow-step--quote { --td-flow-color: var(--td-flow-quote, #C98573); }
.td-shell--dashboard .td-card--journey .td-flow-step--invoice { --td-flow-color: var(--td-flow-invoice, #607C88); }
.td-shell--dashboard .td-card--journey .td-flow-step--payment { --td-flow-color: var(--td-flow-payment, #7C887F); }
.td-shell--dashboard .td-card--journey .td-flow-step--artwork { --td-flow-color: var(--td-flow-artwork, #B8B9A7); }
.td-shell--dashboard .td-card--journey .td-flow-step--production { --td-flow-color: var(--td-flow-production, #607C88); }
.td-shell--dashboard .td-card--journey .td-flow-step--collection { --td-flow-color: var(--td-flow-collection, #7C887F); }
.td-shell--dashboard .td-card--journey .td-flow-step--complete { --td-flow-color: var(--td-flow-complete, #7C8780); }

@media (max-width: 1280px) {
    .td-shell--dashboard .td-card--journey .td-flow-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .td-shell--dashboard .td-card--journey .td-flow-step:nth-child(4n)::after {
        display: inline-flex !important;
    }
}

@media (max-width: 860px) {
    .td-shell--dashboard .td-card--journey .td-flow-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .td-shell--dashboard .td-card--journey .td-flow-step:nth-child(2n)::after {
        display: inline-flex !important;
    }
}

@media (max-width: 560px) {
    .td-shell--dashboard .td-card--journey .td-flow-rail {
        grid-template-columns: 1fr !important;
    }

    .td-shell--dashboard .td-card--journey .td-flow-step:not(:last-child)::after,
    .td-shell--dashboard .td-card--journey .td-flow-step:nth-child(2n)::after,
    .td-shell--dashboard .td-card--journey .td-flow-step:nth-child(4n)::after {
        content: "\2193" !important;
        top: auto !important;
        right: 12px !important;
        bottom: 12px !important;
        left: auto !important;
        display: inline-flex !important;
        transform: none !important;
    }
}

/* Dashboard responsive stabilisation: home page only. */
.td-shell--dashboard {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
}

.td-shell--dashboard :where(
    .td-dashboard-hero,
    .td-dashboard-hero__copy,
    .td-dashboard-hero__side,
    .td-dashboard-actions,
    .td-dashboard-action,
    .td-dashboard-action__text,
    .td-dashboard-stat-grid,
    .td-dashboard-board,
    .td-focus-strip,
    .td-focus-card,
    .td-card--journey,
    .td-flow-rail,
    .td-flow-step,
    .td-panel,
    .td-panel__header,
    .td-list-row,
    .td-list-row__main,
    .td-list-row__end
) {
    min-width: 0 !important;
    max-width: 100% !important;
}

.td-shell--dashboard .td-dashboard-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 430px) !important;
    gap: clamp(12px, 1.4vw, 18px) !important;
    align-items: start !important;
}

.td-shell--dashboard .td-dashboard-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.td-shell--dashboard .td-dashboard-action {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 24px !important;
    gap: 12px !important;
    min-height: 70px !important;
    padding: 12px 14px !important;
}

.td-shell--dashboard .td-dashboard-action__icon,
.td-shell--dashboard .td-dashboard-action__arrow {
    flex: 0 0 auto !important;
}

.td-shell--dashboard .td-dashboard-action__label,
.td-shell--dashboard .td-dashboard-action__desc,
.td-shell--dashboard .td-focus-card__label,
.td-shell--dashboard .td-focus-card__note,
.td-shell--dashboard .td-list__title,
.td-shell--dashboard .td-list__meta,
.td-shell--dashboard .td-next-action {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.td-shell--dashboard .td-dashboard-action__label,
.td-shell--dashboard .td-list__title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
}

.td-shell--dashboard .td-dashboard-action__desc,
.td-shell--dashboard .td-focus-card__note,
.td-shell--dashboard .td-list__meta {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
}

.td-shell--dashboard .td-dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.td-shell--dashboard .td-focus-strip {
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)) !important;
}

.td-shell--dashboard .td-dashboard-board {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.td-shell--dashboard .td-dashboard-board > .td-panel:first-child {
    grid-column: 1 / -1 !important;
}

.td-shell--dashboard .td-list-row--dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
}

.td-shell--dashboard .td-list-row__end {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step:not(:last-child)::after {
    content: "\203A" !important;
}

@media (max-width: 1440px) {
    .td-shell--dashboard .td-dashboard-hero {
        grid-template-columns: 1fr !important;
    }

    .td-shell--dashboard .td-dashboard-hero__side {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr) !important;
        gap: 12px !important;
        align-items: start !important;
    }

    .td-shell--dashboard .td-dashboard-pulse {
        grid-column: 1 / -1 !important;
    }

    .td-shell--dashboard .td-card--journey .td-flow-step:nth-child(4n):not(:last-child)::after {
        content: "\2193" !important;
        top: auto !important;
        right: 12px !important;
        bottom: 12px !important;
        left: auto !important;
        transform: none !important;
    }
}

@media (max-width: 1080px) {
    .td-shell--dashboard .td-dashboard-board {
        grid-template-columns: 1fr !important;
    }

    .td-shell--dashboard .td-dashboard-hero__side {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {

    .td-shell--dashboard .td-card--journey .td-flow-step:nth-child(4n):not(:last-child)::after {
        content: "\203A" !important;
        top: 50% !important;
        right: 10px !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
    }

    .td-shell--dashboard .td-card--journey .td-flow-step:nth-child(2n):not(:last-child)::after {
        content: "\2193" !important;
        top: auto !important;
        right: 12px !important;
        bottom: 12px !important;
        transform: none !important;
    }
}

@media (max-width: 640px) {
    .td-shell--dashboard {
        gap: 12px !important;
    }

    .td-shell--dashboard .td-dashboard-actions,
    .td-shell--dashboard .td-dashboard-stat-grid,
    .td-shell--dashboard .td-focus-strip,
    .td-shell--dashboard .td-card--journey .td-flow-rail {
        grid-template-columns: 1fr !important;
    }

    .td-shell--dashboard .td-dashboard-action {
        grid-template-columns: 36px minmax(0, 1fr) 22px !important;
        min-height: 64px !important;
        padding: 11px 12px !important;
    }

    .td-shell--dashboard .td-panel__header,
    .td-shell--dashboard .td-list-row--dashboard {
        grid-template-columns: 1fr !important;
    }

    .td-shell--dashboard .td-list-row__end {
        justify-content: flex-start !important;
    }

    .td-shell--dashboard .td-card--journey .td-flow-step,
    .td-shell--dashboard .td-card--journey .td-flow-step:first-child,
    .td-shell--dashboard .td-card--journey .td-flow-step:last-child {
        min-height: 82px !important;
        padding: 13px 38px 13px 13px !important;
    }

    .td-shell--dashboard .td-card--journey .td-flow-step:not(:last-child)::after,
    .td-shell--dashboard .td-card--journey .td-flow-step:nth-child(2n):not(:last-child)::after,
    .td-shell--dashboard .td-card--journey .td-flow-step:nth-child(4n):not(:last-child)::after {
        content: "\2193" !important;
        top: auto !important;
        right: 12px !important;
        bottom: 12px !important;
        left: auto !important;
        transform: none !important;
    }
}

@media (max-width: 390px) {
    .td-shell--dashboard .td-dashboard-action {
        grid-template-columns: 32px minmax(0, 1fr) 20px !important;
        gap: 9px !important;
    }

    .td-shell--dashboard .td-dashboard-action__icon {
        width: 32px !important;
        height: 32px !important;
    }
}

/* Z Fold dashboard audit repair.
   Keeps the home page app-like and compact without touching invoice layout. */
@media (max-width: 820px) {
    .fi-main .td-shell--dashboard {
        gap: 12px !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-hero {
        gap: 12px !important;
        padding: 12px !important;
        border-radius: 12px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-action {
        grid-template-columns: 32px minmax(0, 1fr) 20px !important;
        min-height: 54px !important;
        padding: 9px 10px !important;
        border-radius: 10px !important;
        gap: 8px !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-action__icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-action__icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-action__label {
        font-size: 0.78rem !important;
        line-height: 1.12 !important;
        -webkit-line-clamp: 1 !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-action__desc {
        margin-top: 1px !important;
        font-size: 0.68rem !important;
        line-height: 1.15 !important;
        -webkit-line-clamp: 1 !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-hero__side {
        gap: 10px !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-pulse {
        min-height: 0 !important;
        padding: 10px 12px !important;
        border-radius: 11px !important;
    }

    .fi-main .td-shell--dashboard .td-panel__kicker {
        font-size: 0.58rem !important;
        line-height: 1 !important;
    }

    .fi-main .td-shell--dashboard .td-panel__title {
        font-size: 0.98rem !important;
        line-height: 1.14 !important;
    }

    .fi-main .td-shell--dashboard .td-pill {
        min-height: 24px !important;
        padding: 5px 9px !important;
        font-size: 0.64rem !important;
        line-height: 1 !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-stat-grid,
    .fi-main .td-shell--dashboard .td-focus-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-stat {
        min-height: 76px !important;
        padding: 12px !important;
        border-radius: 11px !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-stat__value {
        font-size: 1.45rem !important;
        line-height: 1 !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-stat__label {
        font-size: 0.68rem !important;
        line-height: 1.15 !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-money {
        border-radius: 11px !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-money__row {
        min-height: 34px !important;
        padding: 8px 10px !important;
        border-radius: 9px !important;
        font-size: 0.72rem !important;
    }

    .fi-main .td-shell--dashboard .td-focus-card {
        min-height: 78px !important;
        padding: 11px 12px !important;
        border-radius: 11px !important;
    }

    .fi-main .td-shell--dashboard .td-focus-card__label,
    .fi-main .td-shell--dashboard .td-focus-card__note {
        font-size: 0.66rem !important;
        line-height: 1.16 !important;
    }

    .fi-main .td-shell--dashboard .td-focus-card__value {
        font-size: 1.2rem !important;
        line-height: 1 !important;
    }

    .fi-main .td-shell--dashboard .td-card--journey {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .fi-main .td-shell--dashboard .td-card--journey .td-panel__header {
        padding: 0 0 10px !important;
        border-bottom: 0 !important;
        background: transparent !important;
    }

    .fi-main .td-shell--dashboard .td-card--journey .td-flow-rail {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    .fi-main .td-shell--dashboard .td-card--journey .td-flow-step,
    .fi-main .td-shell--dashboard .td-card--journey .td-flow-step:first-child,
    .fi-main .td-shell--dashboard .td-card--journey .td-flow-step:last-child {
        min-height: 70px !important;
        padding: 11px 26px 11px 11px !important;
        border-radius: 10px !important;
    }

    .fi-main .td-shell--dashboard .td-card--journey .td-flow-step__dot {
        width: 10px !important;
        height: 10px !important;
    }

    .fi-main .td-shell--dashboard .td-card--journey .td-flow-step__label {
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
    }

    .fi-main .td-shell--dashboard .td-card--journey .td-flow-step__note {
        font-size: 0.62rem !important;
        line-height: 1.12 !important;
    }

    .fi-main .td-shell--dashboard .td-card--journey .td-flow-step:not(:last-child)::after,
    .fi-main .td-shell--dashboard .td-card--journey .td-flow-step:nth-child(2n):not(:last-child)::after,
    .fi-main .td-shell--dashboard .td-card--journey .td-flow-step:nth-child(4n):not(:last-child)::after {
        content: none !important;
        display: none !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-board {
        gap: 10px !important;
    }

    .fi-main .td-shell--dashboard .td-panel {
        border-radius: 12px !important;
    }

    .fi-main .td-shell--dashboard .td-panel__header {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .fi-main .td-shell--dashboard .td-panel__body {
        padding: 10px 12px !important;
    }

    .fi-main .td-shell--dashboard .td-list-row--dashboard {
        min-height: 0 !important;
        padding: 10px !important;
        border-radius: 10px !important;
        gap: 8px !important;
    }
}

@media (max-width: 420px) {
    .fi-main .td-shell--dashboard .td-dashboard-stat-grid,
    .fi-main .td-shell--dashboard .td-focus-strip,
    .fi-main .td-shell--dashboard .td-card--journey .td-flow-rail {
        grid-template-columns: 1fr !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-action__desc {
        display: none !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-action {
        min-height: 48px !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-stat {
        min-height: 64px !important;
    }

    .fi-main .td-shell--dashboard .td-card--journey .td-flow-step,
    .fi-main .td-shell--dashboard .td-card--journey .td-flow-step:first-child,
    .fi-main .td-shell--dashboard .td-card--journey .td-flow-step:last-child {
        min-height: 58px !important;
    }
}

@media (max-width: 340px) {
    .fi-main .td-shell--dashboard .td-dashboard-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Topbar global search and compact bank holiday notice. */
.fi-topbar {
    overflow: visible !important;
}

.td-topbar-tools {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    right: 88px !important;
    left: max(360px, 32vw) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 45 !important;
}

.td-global-search {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 220px !important;
    max-width: 580px !important;
}

.td-global-search__input {
    width: 100% !important;
    height: 38px !important;
    padding: 0 38px !important;
    border: 1px solid color-mix(in srgb, var(--pb-border) 88%, #ffffff) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--pb-ink) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 1px 2px rgb(20 24 22 / 0.04) !important;
    outline: none !important;
}

.td-global-search__input::placeholder {
    color: color-mix(in srgb, var(--pb-muted) 72%, #ffffff) !important;
    opacity: 1 !important;
}

.td-global-search__input:focus {
    border-color: color-mix(in srgb, var(--pb-brand-green) 42%, var(--pb-border)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-brand-green) 13%, transparent), 0 1px 2px rgb(20 24 22 / 0.05) !important;
}

.td-global-search__icon {
    position: absolute !important;
    top: 50% !important;
    left: 14px !important;
    width: 15px !important;
    height: 15px !important;
    color: var(--pb-muted) !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

.td-global-search__clear {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    display: inline-flex !important;
    width: 26px !important;
    height: 26px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--pb-bg) 74%, #ffffff) !important;
    color: var(--pb-muted) !important;
    font-size: 1rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
}

.td-global-search__clear:hover {
    background: color-mix(in srgb, var(--pb-brand-green) 9%, #ffffff) !important;
    color: var(--pb-ink) !important;
}

.td-global-search__panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    max-height: min(540px, calc(100vh - 96px)) !important;
    overflow: auto !important;
    border: 1px solid color-mix(in srgb, var(--pb-border) 88%, #ffffff) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 48px rgb(20 24 22 / 0.16), 0 2px 6px rgb(20 24 22 / 0.08) !important;
    padding: 8px !important;
}

.td-global-search__group + .td-global-search__group {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid color-mix(in srgb, var(--pb-border) 70%, transparent) !important;
}

.td-global-search__group-label {
    padding: 5px 8px 6px !important;
    color: color-mix(in srgb, var(--pb-green) 72%, var(--pb-ink)) !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.td-global-search__result {
    display: grid !important;
    gap: 2px !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
    color: var(--pb-ink) !important;
    text-decoration: none !important;
}

.td-global-search__result:hover,
.td-global-search__result:focus-visible {
    background: color-mix(in srgb, var(--pb-brand-green) 8%, #ffffff) !important;
    outline: none !important;
}

.td-global-search__result-title {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
}

.td-global-search__result-meta,
.td-global-search__empty {
    color: var(--pb-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
}

.td-global-search__result-meta {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.td-global-search__empty {
    padding: 12px !important;
    text-align: center !important;
}

.td-topbar-tools .td-bank-holidays {
    position: static !important;
    left: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 210px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 11px !important;
    transform: none !important;
    gap: 6px !important;
    align-items: center !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: 0.66rem !important;
    white-space: nowrap !important;
}

.td-topbar-tools .td-bank-holidays__label {
    display: inline !important;
    color: var(--pb-muted) !important;
    font-weight: 850 !important;
    text-transform: none !important;
    flex: 0 0 auto !important;
}

.td-topbar-tools .td-bank-holidays__items {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: hidden !important;
}

.td-topbar-tools .td-bank-holidays__item {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.td-topbar-tools .td-bank-holidays__more {
    flex: 0 0 auto !important;
    color: var(--pb-green) !important;
    font-weight: 900 !important;
}

@media (max-width: 980px) {
    .td-topbar-tools {
        right: 74px !important;
        left: 260px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .td-topbar-tools .td-bank-holidays {
        display: none !important;
    }
}

@media (max-width: 760px) {
    .td-topbar-tools {
        order: 3 !important;
        flex: 1 1 100% !important;
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 6px 0 0 !important;
        transform: none !important;
    }

    .td-global-search {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .td-global-search__panel {
        position: fixed !important;
        top: 62px !important;
        right: 10px !important;
        left: 10px !important;
        max-height: calc(100vh - 78px) !important;
    }
}

.fi-main .td-invoice-source-field .td-source-toggle.fi-btn-group,
.fi-main .td-invoice-source-field .td-source-toggle .fi-btn-group {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 5px !important;
    overflow: visible !important;
}

@media (max-width: 1024px) {
    .fi-main .td-invoice-source-field .td-source-toggle.fi-btn-group,
    .fi-main .td-invoice-source-field .td-source-toggle .fi-btn-group {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .fi-topbar {
        display: flex !important;
        height: auto !important;
        min-height: 0 !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .fi-topbar-start {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .fi-topbar-end {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    .fi-main .td-invoice-source-field .td-source-toggle.fi-btn-group,
    .fi-main .td-invoice-source-field .td-source-toggle .fi-btn-group {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fi-main .td-invoice-source-field .td-source-toggle .fi-btn {
        width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        line-height: 1.15 !important;
    }

    .fi-main .td-invoice-source-field .td-source-toggle .fi-btn span {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }
}

@media (max-width: 420px) {
    .td-global-search__input {
        height: 36px !important;
        padding-inline: 34px !important;
        font-size: 0.78rem !important;
    }
}

@media (max-width: 380px) {
    .fi-main .td-invoice-source-field .td-source-toggle.fi-btn-group,
    .fi-main .td-invoice-source-field .td-source-toggle .fi-btn-group {
        grid-template-columns: 1fr !important;
    }
}

/* Shared pastel pill refresh.
   Keeps status meaning through colour, but uses the calmer outlined chip style. */
.td-pill,
.td-workflow-pill {
    --pb-pill-tone: var(--pb-green, #8cb52b);
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100% !important;
    min-height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border: 1px solid color-mix(in srgb, var(--pb-pill-tone) 22%, var(--pb-border, #d8d7cf)) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--pb-pill-tone) 8%, #ffffff) !important;
    color: color-mix(in srgb, var(--pb-pill-tone) 54%, var(--pb-ink, #30322f)) !important;
    font-size: 0.74rem !important;
    font-weight: 720 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgb(20 24 22 / 0.04) !important;
}

.td-pill[href]:hover,
a.td-pill:hover,
button.td-pill:hover,
.td-workflow-pill[href]:hover,
a.td-workflow-pill:hover,
button.td-workflow-pill:hover {
    border-color: color-mix(in srgb, var(--pb-pill-tone) 34%, var(--pb-border, #d8d7cf)) !important;
    background: color-mix(in srgb, var(--pb-pill-tone) 13%, #ffffff) !important;
    color: color-mix(in srgb, var(--pb-pill-tone) 66%, var(--pb-ink, #30322f)) !important;
    box-shadow: none !important;
}

.td-pill--green,
.td-pill--status-ready,
.td-pill--invoice-paid,
.td-workflow-pill--green,
.td-workflow-pill--status-ready {
    --pb-pill-tone: var(--pb-status-ready, var(--pb-status-green, #7f9653));
}

.td-pill--blue,
.td-pill--teal,
.td-pill--status-production,
.td-pill--invoice-sent,
.td-workflow-pill--blue,
.td-workflow-pill--teal,
.td-workflow-pill--status-production {
    --pb-pill-tone: var(--pb-status-production, var(--pb-status-blue, #39798a));
}

.td-pill--amber,
.td-pill--purple,
.td-pill--status-action,
.td-pill--invoice-part-paid,
.td-workflow-pill--amber,
.td-workflow-pill--purple,
.td-workflow-pill--status-action {
    --pb-pill-tone: var(--pb-status-action, #9a5a76);
}

.td-pill--coral,
.td-pill--status-due,
.td-pill--invoice-unpaid,
.td-pill--invoice-chasing,
.td-workflow-pill--coral,
.td-workflow-pill--status-due {
    --pb-pill-tone: var(--pb-status-due, #b85c46);
}

.td-pill--neutral,
.td-pill--invoice-closed {
    --pb-pill-tone: var(--pb-muted, #74766f);
}

/* Dashboard journey cards: theme-aware flow.
   Uses the editable Customer To Completed Job colours exactly as selected. */
.td-shell--dashboard .td-card--journey {
    overflow: visible !important;
    border-color: color-mix(in srgb, var(--pb-border, #d9d6ca) 86%, #ffffff) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgb(20 24 22 / 0.04) !important;
}

.td-shell--dashboard .td-card--journey .td-flow-rail {
    gap: 10px !important;
    padding: clamp(14px, 1.6vw, 20px) 0 clamp(14px, 1.6vw, 20px) !important;
}

.td-shell--dashboard .td-card--journey .td-flow-rail::before {
    display: none !important;
    content: none !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step,
.td-shell--dashboard .td-card--journey .td-flow-step:first-child,
.td-shell--dashboard .td-card--journey .td-flow-step:last-child,
html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-step,
html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-step:first-child,
html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-step:last-child {
    min-height: 104px !important;
    padding: 16px 34px 16px 16px !important;
    border: 1px solid var(--td-flow-color) !important;
    border-radius: 9px !important;
    background: var(--td-flow-color) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    clip-path: none !important;
    filter: none !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step:hover,
html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-step:hover {
    border-color: var(--td-flow-color) !important;
    background: var(--td-flow-color) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: translateY(-1px) !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step:not(:last-child)::after {
    border: 1px solid rgb(255 255 255 / 0.42) !important;
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step__dot {
    border: 1px solid rgb(255 255 255 / 0.58) !important;
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step__label,
html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-step__label {
    color: #ffffff !important;
    text-shadow: none !important;
}

.td-shell--dashboard .td-card--journey .td-flow-step__note,
html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-step__note,
html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-step small,
html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-step span {
    color: rgb(255 255 255 / 0.86) !important;
    text-shadow: none !important;
}

/* UI settings font preview and layout-card badge spacing. */
.td-font-preview {
    display: grid !important;
    gap: 9px !important;
    padding: 14px 16px !important;
    border: 1px solid color-mix(in srgb, var(--pb-border, #d9d6ca) 86%, #ffffff) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
}

.td-font-preview__meta {
    color: var(--pb-muted, #7c8780) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.td-font-preview__sample,
.td-font-preview__body {
    font-family: var(--td-font-preview-family, var(--pb-font, Montserrat, Inter, sans-serif)) !important;
}

.td-font-preview__sample {
    color: var(--pb-ink, #30322f) !important;
    font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
}

.td-font-preview__body {
    color: var(--pb-muted, #7c8780) !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

/*
    Interface layout selector single owner
    The active layout shows one badge only: "Live".
*/

.td-layout-switcher,
.td-layout-switcher.fi-fo-radio {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
    padding: 12px 0 18px !important;
}

    .td-layout-switcher :where(.fi-fo-radio, .fi-fo-radio-options) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
        gap: 12px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .td-layout-switcher :where(.fi-fo-radio-options) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
        gap: 12px !important;
        align-items: stretch !important;
        width: 100% !important;
}

.td-layout-switcher :where(.fi-fo-radio-option) {
    min-width: 0 !important;
}

.td-layout-switcher .fi-fo-radio-label {
    position: relative !important;
    display: grid !important;
    gap: 8px !important;
    min-height: 158px !important;
    height: 100% !important;
    padding: 14px 82px 16px 14px !important;
    overflow: hidden !important;
    border: 1px solid var(--pb-lux-line, var(--td-border, #d9d6ca)) !important;
    border-radius: 14px !important;
    background: var(--pb-card, var(--td-card-bg, #ffffff)) !important;
    box-shadow: var(--pb-shadow-soft, var(--td-shadow-soft, none)) !important;
    cursor: pointer !important;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.td-layout-switcher .fi-fo-radio-label:hover {
    border-color: color-mix(in srgb, var(--pb-button, var(--td-button, #30322f)) 22%, var(--pb-border, var(--td-border, #d9d6ca))) !important;
    background: color-mix(in srgb, var(--pb-card, #ffffff) 94%, var(--pb-bg, #f6f5ef)) !important;
    transform: translateY(-1px) !important;
}

.td-layout-switcher .fi-fo-radio-label:has(.fi-radio-input:checked) {
    border-color: color-mix(in srgb, var(--pb-button, var(--td-button, #30322f)) 56%, var(--pb-border, var(--td-border, #d9d6ca))) !important;
    background: color-mix(in srgb, var(--pb-button, var(--td-button, #30322f)) 5%, var(--pb-card, #ffffff)) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pb-button, var(--td-button, #30322f)) 18%, transparent), var(--pb-shadow-soft, var(--td-shadow-soft, none)) !important;
}

.td-layout-switcher .fi-fo-radio-label::before,
.td-layout-switcher .fi-fo-radio-label::after {
    content: none !important;
    display: none !important;
}

.td-layout-switcher :where(.fi-badge, [class*="badge"]) {
    display: none !important;
}

.td-layout-switcher .fi-fo-radio-label:has(.fi-radio-input:checked) .fi-fo-radio-label-text::before {
    content: "Live" !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 52px !important;
    height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: var(--pb-button, var(--td-button, #30322f)) !important;
    color: var(--pb-button-text, var(--td-button-text, #ffffff)) !important;
    font-size: 0.65rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

.td-layout-switcher .fi-fo-radio-label > .fi-radio-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    margin: 0 !important;
    opacity: 0 !important;
    clip-path: inset(50%) !important;
    pointer-events: none !important;
    appearance: none !important;
    transform: none !important;
}

.td-layout-switcher .fi-fo-radio-label-text {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding-left: 0 !important;
}

.td-layout-switcher .fi-fo-radio-label-text p:first-child {
    max-width: 100% !important;
    color: var(--pb-ink, var(--td-ink, #30322f)) !important;
    font-size: 0.96rem !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
}

.td-layout-switcher .fi-fo-radio-label-description {
    max-width: 100% !important;
    color: var(--pb-muted, var(--td-ink-muted, #7c8780)) !important;
    font-size: 0.75rem !important;
    line-height: 1.38 !important;
    overflow-wrap: anywhere !important;
}

.td-layout-switcher .fi-fo-radio-label-text::after {
    content: "" !important;
    display: block !important;
    width: min(260px, 100%) !important;
    max-width: 100% !important;
    height: 44px !important;
    margin-top: 8px !important;
    border: 1px solid var(--pb-lux-line, var(--td-border, #d9d6ca)) !important;
    border-radius: 13px !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--pb-button, #30322f) 14%, #ffffff) 0 22%, transparent 22% 28%, #ffffff 28% 100%),
        linear-gradient(180deg, transparent 0 23%, color-mix(in srgb, var(--pb-green, #3f7d4a) 18%, transparent) 23% 30%, transparent 30% 100%) !important;
}

.td-layout-switcher .fi-fo-radio-option:nth-child(1) .fi-fo-radio-label-text::after {
    background:
        linear-gradient(90deg, #ffffff 0 42%, transparent 42% 50%, var(--pb-bg, #f6f5ef) 50% 100%) !important;
}

.td-layout-switcher .fi-fo-radio-option:nth-child(2) .fi-fo-radio-label-text::after {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--pb-button, #30322f) 14%, #ffffff) 0 22%, transparent 22% 28%, #ffffff 28% 100%),
        linear-gradient(180deg, transparent 0 23%, color-mix(in srgb, var(--pb-green, #3f7d4a) 22%, transparent) 23% 30%, transparent 30% 100%),
        linear-gradient(90deg, transparent 32%, color-mix(in srgb, var(--pb-green, #3f7d4a) 16%, #ffffff) 32% 52%, transparent 52% 56%, color-mix(in srgb, var(--pb-info, #2563a6) 14%, #ffffff) 56% 76%, transparent 76% 80%, color-mix(in srgb, var(--pb-warning, #c08a2c) 12%, #ffffff) 80% 100%) !important;
}

.td-layout-switcher .fi-fo-radio-option:nth-child(3) .fi-fo-radio-label-text::after {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--pb-green, #3f7d4a) 18%, #ffffff) 0 100%),
        repeating-linear-gradient(180deg, transparent 0 9px, color-mix(in srgb, var(--pb-green, #3f7d4a) 16%, transparent) 9px 10px) !important;
}

.td-layout-switcher .fi-fo-radio-option:nth-child(4) .fi-fo-radio-label-text::after {
    background:
        linear-gradient(90deg, var(--pb-bg, #f6f5ef) 0 31%, transparent 31% 34%, var(--pb-bg, #f6f5ef) 34% 65%, transparent 65% 68%, var(--pb-bg, #f6f5ef) 68% 100%) !important;
}

.td-layout-switcher .fi-fo-radio-option:nth-child(5) .fi-fo-radio-label-text::after {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--pb-button, #30322f) 12%, #ffffff) 0 28%, transparent 28% 36%, var(--pb-bg, #f6f5ef) 36% 100%) !important;
}

.td-layout-switcher .fi-fo-radio-option:nth-child(6) .fi-fo-radio-label-text::after {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--pb-green, #3f7d4a) 30%, #ffffff) 0 5px, transparent 5px),
        repeating-linear-gradient(180deg, var(--pb-bg, #f6f5ef) 0 8px, #ffffff 8px 17px) !important;
}

.td-layout-switcher .fi-fo-radio-option:nth-child(7) .fi-fo-radio-label-text::after {
    background:
        linear-gradient(90deg, #ffffff 0 34%, transparent 34% 40%, color-mix(in srgb, var(--pb-green, #3f7d4a) 9%, #ffffff) 40% 100%),
        linear-gradient(180deg, transparent 0 42%, color-mix(in srgb, var(--pb-green, #3f7d4a) 26%, transparent) 42% 48%, transparent 48%) !important;
}

@media (min-width: 1024px) {
    .td-layout-switcher :where(.fi-fo-radio, .fi-fo-radio-options) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .td-layout-switcher :where(.fi-fo-radio, .fi-fo-radio-options) {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }

    .td-layout-switcher .fi-fo-radio-label {
        min-height: 146px !important;
    }
}

@media (max-width: 640px) {
    .td-layout-switcher :where(.fi-fo-radio, .fi-fo-radio-options) {
        grid-template-columns: 1fr !important;
    }

    .td-layout-switcher .fi-fo-radio-label {
        min-height: 132px !important;
        padding-right: 76px !important;
    }
}

/* UX layout modes
   These modes intentionally sit above colour themes. They change presentation,
   density and emphasis while active theme variables still own the colours. */
html[data-pb-layout="calm_document"] .fi-main {
    padding-inline: clamp(18px, 3vw, 38px) !important;
}

html[data-pb-layout="calm_document"] :where(.fi-page, .fi-page-content) {
    max-width: 1240px !important;
    margin-inline: auto !important;
}

html[data-pb-layout="calm_document"] :where(.fi-section, .td-panel, .td-checkout-panel, .td-document-sheet) {
    border-radius: calc(var(--td-card-radius, 10px) + 4px) !important;
}

html[data-pb-layout="calm_document"] :where(.fi-section-header, .fi-ta-header, .fi-fo-repeater-item-header) {
    background: color-mix(in srgb, var(--td-card-bg) 92%, var(--td-page-bg)) !important;
}

html[data-pb-layout="calm_document"] :where(.td-document-view, .td-document-sheet) {
    max-width: 1180px !important;
    margin-inline: auto !important;
}

html[data-pb-layout="calm_document"] :where(.fi-section-content, .fi-fo-repeater-item-content, .td-document-section) {
    padding-block: clamp(18px, 2.1vw, 28px) !important;
}

html[data-pb-layout="command_centre"] .fi-main {
    padding: clamp(12px, 1.4vw, 18px) !important;
}

html[data-pb-layout="command_centre"] :where(.fi-page, .fi-page-content) {
    max-width: none !important;
}

html[data-pb-layout="command_centre"] :where(.fi-section, .td-panel, .td-checkout-panel, .td-dashboard-action) {
    border-left: 4px solid color-mix(in srgb, var(--td-accent) 58%, var(--td-border)) !important;
}

html[data-pb-layout="command_centre"] :where(.td-dashboard-hero, .td-command, .td-dashboard-board) {
    border-width: 1px !important;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--td-border) 84%, transparent) !important;
}

html[data-pb-layout="command_centre"] .td-dashboard-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html[data-pb-layout="command_centre"] :where(.td-dashboard-action, .td-dashboard-stat) {
    min-height: 86px !important;
}

html[data-pb-layout="search_desk"] .td-topbar-tools {
    flex: 1 1 min(760px, 100%) !important;
    max-width: min(860px, 100%) !important;
}

html[data-pb-layout="search_desk"] :where(.fi-topbar, .fi-topbar nav) {
    min-height: 76px !important;
}

html[data-pb-layout="search_desk"] .td-global-search {
    min-height: 46px !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--td-border) 80%, transparent), var(--td-shadow-soft) !important;
}

html[data-pb-layout="search_desk"] .td-global-search__input {
    font-weight: 600 !important;
}

html[data-pb-layout="search_desk"] .td-global-search__panel {
    border-radius: 12px !important;
    box-shadow: 0 18px 42px rgb(30 30 30 / 0.14) !important;
}

html[data-pb-layout="production_board"] :where(.td-flow-rail, .td-dashboard-stat-grid) {
    gap: 14px !important;
}

html[data-pb-layout="production_board"] :where(.fi-section-header, .fi-ta-header, .td-card__header, .td-panel__header) {
    border-bottom: 2px solid color-mix(in srgb, var(--td-accent) 32%, var(--td-border)) !important;
}

html[data-pb-layout="production_board"] .td-flow-step {
    min-height: 96px !important;
    align-items: center !important;
}

html[data-pb-layout="production_board"] :where(.td-dashboard-board, .td-command) {
    border-color: color-mix(in srgb, var(--td-accent) 26%, var(--td-border)) !important;
}

html[data-pb-layout="production_board"] .td-dashboard-stat {
    min-height: 112px !important;
}

html[data-pb-layout="compact_ops"] {
    --pb-layout-compact-gap: 10px;
}

html[data-pb-layout="compact_ops"] .fi-main {
    padding: 12px !important;
}

html[data-pb-layout="compact_ops"] :where(.fi-page, .fi-page-content) {
    gap: 10px !important;
}

html[data-pb-layout="compact_ops"] :where(.fi-section-content, .fi-fo-repeater-item-content) {
    padding: 14px !important;
}

html[data-pb-layout="compact_ops"] :where(.fi-section, .td-panel, .td-checkout-panel, .td-dashboard-action) {
    border-radius: 8px !important;
}

html[data-pb-layout="compact_ops"] :where(.fi-input-wrp, .fi-select-input-ctn, .fi-textarea-wrp) {
    min-height: 38px !important;
}

html[data-pb-layout="compact_ops"] :where(.fi-fo-field-wrp-label, .fi-section-header-heading, .fi-ta-header-heading) {
    font-size: 0.88rem !important;
}

html[data-pb-layout="compact_ops"] :where(.td-dashboard-actions, .td-dashboard-stat-grid) {
    gap: var(--pb-layout-compact-gap) !important;
}

html[data-pb-layout="mobile_first"] .fi-main {
    padding-inline: clamp(10px, 2vw, 18px) !important;
}

html[data-pb-layout="mobile_first"] :where(.fi-page, .fi-page-content) {
    max-width: 760px !important;
    margin-inline: auto !important;
}

html[data-pb-layout="mobile_first"] :where(.fi-section, .td-panel, .td-checkout-panel, .td-document-sheet) {
    width: 100% !important;
    border-radius: 12px !important;
}

html[data-pb-layout="mobile_first"] :where(.td-dashboard-actions, .td-dashboard-stat-grid, .td-document-addresses, .td-document-keyline) {
    grid-template-columns: 1fr !important;
}

html[data-pb-layout="mobile_first"] :where(.td-dashboard-action, .fi-btn, .td-page-back-btn) {
    min-height: 44px !important;
}

@media (max-width: 900px) {
    html[data-pb-layout] :where(.td-dashboard-actions, .td-dashboard-stat-grid) {
        grid-template-columns: 1fr !important;
    }
}

/* App workspace header and responsive content shell.
   Keeps Filament resource pages feeling like an app surface while preserving
   page-specific content/layout rules underneath. */
.fi-main .fi-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.fi-main .fi-page-header:not(:has(.td-invoice-post-save-action)) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 42px !important;
    gap: 8px 16px !important;
    margin: 0 0 12px !important;
    padding: 8px 10px !important;
    border: 1px solid color-mix(in srgb, var(--pb-border, #d8d7cf) 78%, transparent) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--pb-card, #ffffff) 94%, var(--pb-bg, #f6f5ef)) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--pb-border, #d8d7cf) 45%, transparent) !important;
}

.fi-main .fi-page-header > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

.fi-main :where(.fi-page-header-main, .fi-page-header .fi-header-heading) {
    min-width: 0 !important;
}

.fi-main .fi-breadcrumbs {
    display: none !important;
}

.fi-main .fi-breadcrumbs ol,
.fi-main .fi-breadcrumbs ul,
.fi-main .fi-breadcrumbs-list {
    display: flex !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 6px !important;
}

.fi-main .fi-breadcrumbs-item,
.fi-main .fi-breadcrumbs-item-label {
    min-width: 0 !important;
    max-width: 100% !important;
}

.fi-main .fi-breadcrumbs-item-label {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.fi-main .fi-page-header-heading {
    max-width: 100% !important;
    color: var(--pb-ink, #30322f) !important;
    font-size: clamp(0.94rem, 0.26vw + 0.9rem, 1.08rem) !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
}

.fi-main .fi-page-header-subheading {
    max-width: 760px !important;
    margin-top: 4px !important;
    color: var(--pb-muted, #6f756e) !important;
    font-size: 0.86rem !important;
    font-weight: 520 !important;
    line-height: 1.45 !important;
}

.fi-main :where(.fi-page-header-actions, .fi-header-actions):not(:has(.td-invoice-post-save-action)) {
    display: flex !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.fi-main .fi-page-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-top: 0 !important;
}

.fi-main .fi-page-content > *,
.fi-main .fi-page-content :where(
    .fi-form,
    form,
    .fi-sc,
    .fi-sc-component,
    .fi-section,
    .fi-section-content,
    .fi-section-content-ctn,
    .fi-grid,
    .fi-grid-col,
    .fi-fo-field-wrp,
    .fi-fo-field-wrp-content,
    .fi-input-wrp,
    .fi-select-input-ctn,
    .fi-fo-repeater,
    .fi-fo-repeater-item,
    .td-panel,
    .td-card,
    .td-command,
    .td-workflow-panel
) {
    min-width: 0;
    max-width: 100%;
}

/* Shared responsive guardrails.
   Layout wrappers own width and wrapping only; fields, buttons and dropdowns
   keep their shared component styling from the contracts above. */
@media (max-width: 1024px) {
    .fi-body,
    .fi-main,
    .fi-main .fi-page,
    .fi-main .fi-page-main,
    .fi-main .fi-page-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .fi-main :where(
        .fi-form,
        form,
        .fi-sc,
        .fi-sc-component,
        .fi-grid,
        .fi-grid-col,
        .fi-section,
        .fi-section-content,
        .fi-section-content-ctn,
        .fi-fo-field-wrp,
        .fi-fo-field-wrp-control,
        .fi-input-wrp,
        .fi-select-input-ctn,
        .fi-fo-repeater,
        .fi-fo-repeater-item,
        .td-checkout-panel,
        .td-product-lines,
        .td-panel,
        .td-card,
        .td-command,
        .td-workflow-panel
    ) {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .fi-main :where(.fi-section, .fi-section-content, .fi-section-content-ctn, .fi-sc, .fi-sc-component, .fi-grid, .fi-grid-col, .fi-fo-field-wrp, .fi-input-wrp, .fi-select-input-ctn) {
        overflow: visible;
    }

    .fi-main :where(.fi-ta-content-ctn, .fi-ta-table-ctn) {
        max-width: 100%;
        overflow-x: auto;
    }

    .fi-main :where(.fi-ac, .fi-btn-group):not(.td-source-toggle):not(.td-order-source-toggle) {
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
    }

    .fi-main :where(.fi-btn, .fi-link, .fi-icon-btn) {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .fi-main :where(.fi-section, .td-checkout-panel, .td-product-lines, .td-panel, .td-card) {
        width: 100%;
        max-width: 100%;
    }

    .fi-main :where(.fi-input-wrp, .fi-select-input-ctn, .fi-fo-select, .fi-textarea-wrp, .fi-input, input, select, textarea, .fi-select-input, .fi-select-input-btn) {
        max-width: 100%;
    }

    .fi-main :where(.fi-dropdown-panel, .fi-select-panel, .fi-select-input-ctn .fi-dropdown-panel) {
        max-width: min(94vw, 420px);
    }
}

@media (max-width: 1024px) {
    .fi-main .fi-page-header:not(:has(.td-invoice-post-save-action)) {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 9px !important;
    }

    .fi-main :where(.fi-page-header-actions, .fi-header-actions):not(:has(.td-invoice-post-save-action)) {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 760px) {
    .fi-main .fi-page-header:not(:has(.td-invoice-post-save-action)) {
        min-height: 38px !important;
        margin-bottom: 10px !important;
        padding: 7px 8px !important;
    }

    .fi-main .fi-page-header-heading {
        font-size: clamp(0.92rem, 3.8vw, 1.04rem) !important;
        line-height: 1.16 !important;
    }

    .fi-main .fi-page-header-subheading {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 520px) {

    .fi-main :where(.fi-page-header-actions, .fi-header-actions):not(:has(.td-invoice-post-save-action)) {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding-bottom: 2px !important;
        scrollbar-width: none;
    }

    .fi-main :where(.fi-page-header-actions, .fi-header-actions):not(:has(.td-invoice-post-save-action))::-webkit-scrollbar {
        display: none;
    }
}

/* Invoice order source mobile layout.
   Keep the five source buttons in two rows on phone screens. */
@media (max-width: 640px) and (min-width: 361px) {
    .fi-main .td-invoice-source-field .td-source-toggle:is(.fi-fo-toggle-buttons, .fi-btn-group),
    .fi-main .td-invoice-source-field .td-source-toggle :where(.fi-fo-toggle-buttons, .fi-btn-group) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .fi-main .td-invoice-source-field .td-source-toggle .fi-btn {
        min-height: 36px !important;
        padding-inline: 7px !important;
        font-size: 11.5px !important;
        line-height: 1.08 !important;
        white-space: normal !important;
    }
}

@media (max-width: 360px) {
    .fi-main .td-invoice-source-field .td-source-toggle:is(.fi-fo-toggle-buttons, .fi-btn-group),
    .fi-main .td-invoice-source-field .td-source-toggle :where(.fi-fo-toggle-buttons, .fi-btn-group) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Filament live header owner.
   The current admin markup uses .fi-header, not .fi-page-header. Keep the
   page title compact without adding a webpage breadcrumb trail or extra box. */
.fi-main .fi-page-header-main-ctn > .fi-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px 16px !important;
    min-height: 34px !important;
    margin: 0 0 clamp(8px, 1vw, 12px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fi-main .fi-page-header-main-ctn > .fi-header > div {
    min-width: 0 !important;
    max-width: 100% !important;
}

.fi-main .fi-header .fi-breadcrumbs {
    display: none !important;
}

.fi-main .fi-header-heading {
    display: inline-flex !important;
    max-width: 100% !important;
    align-items: center !important;
    gap: 0 !important;
    color: var(--pb-ink, #30322f) !important;
    font-size: clamp(1.06rem, 0.42vw + 0.98rem, 1.26rem) !important;
    font-weight: 780 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.fi-main .fi-header-heading::before {
    content: none !important;
    display: none !important;
}

.fi-main .fi-header-subheading {
    margin-top: 2px !important;
    color: var(--pb-muted, #6f756e) !important;
    font-size: 0.78rem !important;
    font-weight: 520 !important;
    line-height: 1.35 !important;
}

.fi-main .fi-header-actions-ctn {
    min-width: 0 !important;
    max-width: 100% !important;
}

.fi-main .fi-header-actions-ctn > .fi-ac {
    display: flex !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

@media (max-width: 1024px) {
    .fi-main .fi-page-header-main-ctn > .fi-header {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .fi-main .fi-header-actions-ctn > .fi-ac {
        justify-content: flex-start !important;
    }
}

@media (max-width: 640px) {
    .fi-main .fi-page-header-main-ctn > .fi-header {
        min-height: 30px !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    .fi-main .fi-header-heading {
        font-size: clamp(1.04rem, 4.5vw, 1.2rem) !important;
        line-height: 1.14 !important;
    }
}

/* Fold / large-phone admin shell tightening.
   Prevents the topbar/logo/search area and page header from eating the first
   screen on devices such as Galaxy Z Fold. */
@media (max-width: 820px) {
    .fi-topbar {
        min-height: 0 !important;
        height: auto !important;
        padding: 8px 12px !important;
        gap: 8px 10px !important;
        align-items: center !important;
    }

    .fi-topbar-start {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        align-self: center !important;
        gap: 8px !important;
    }

    .fi-topbar-start > a,
    .fi-topbar-start > .fi-logo {
        min-height: 0 !important;
        padding-block: 0 !important;
    }

    .fi-topbar .fi-logo img,
    .fi-logo img {
        max-width: min(178px, 48vw) !important;
        max-height: 38px !important;
    }

    .fi-topbar-end {
        min-height: 34px !important;
        padding: 2px !important;
    }

    .td-topbar-tools {
        margin-top: 4px !important;
        gap: 0 !important;
    }

    .td-global-search__input {
        height: 36px !important;
        font-size: 0.8rem !important;
    }

    .fi-main .fi-page,
    .fi-main .fi-page-header-main-ctn,
    .fi-main .fi-page-main {
        gap: 10px !important;
    }

    .fi-main .fi-page-header-main-ctn > .fi-header {
        margin-bottom: 8px !important;
    }
}

@media (max-width: 480px) {
    .fi-topbar {
        padding-inline: 10px !important;
    }

    .fi-topbar .fi-logo img,
    .fi-logo img {
        max-width: min(150px, 44vw) !important;
        max-height: 34px !important;
    }

    .td-global-search__input {
        height: 34px !important;
        padding-inline: 34px !important;
    }
}

/* Z Fold invoice form polish.
   Keeps the current single-column mobile flow, but makes the Create Invoice
   screen denser and stops source buttons/product lines from feeling cramped. */
@media (max-width: 820px) {
    .fi-main .td-checkout-panel > .fi-section,
    .fi-main .fi-sc-section.td-checkout-panel > .fi-section {
        border-radius: 10px !important;
    }

    .fi-main .td-checkout-panel > .fi-section > .fi-section-header,
    .fi-main .fi-sc-section.td-checkout-panel > .fi-section > .fi-section-header {
        padding: 10px 12px 8px !important;
    }

    .fi-main .td-checkout-panel > .fi-section > .fi-section-content-ctn > .fi-section-content,
    .fi-main .fi-sc-section.td-checkout-panel > .fi-section > .fi-section-content-ctn > .fi-section-content {
        padding: 10px 12px !important;
    }

    .fi-main .td-checkout-panel :where(.fi-section-header-heading, .fi-section-header h2, .fi-section-header h3) {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }

    .fi-main .td-checkout-panel :where(.fi-section-header-description, .fi-section-header p) {
        margin-top: 2px !important;
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
    }

    .fi-main .td-checkout-panel :where(.fi-fo-field-wrp, [data-field-wrapper]) {
        row-gap: 5px !important;
    }

    .fi-main .td-checkout-panel :where(.fi-fo-field-wrp-label, .fi-fo-field-label) {
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
    }

    .fi-main .td-checkout-panel :where(.fi-input-wrp, .fi-select-input-ctn, .fi-fo-select, .fi-textarea-wrp) {
        border-radius: 8px !important;
    }

    .fi-main .td-checkout-panel :where(.fi-input, input, select, textarea, .fi-select-input) {
        font-size: 0.82rem !important;
    }

    .fi-main .td-invoice-source-field .td-source-toggle:is(.fi-fo-toggle-buttons, .fi-btn-group),
    .fi-main .td-invoice-source-field .td-source-toggle :where(.fi-fo-toggle-buttons, .fi-btn-group) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        min-height: 0 !important;
        gap: 5px !important;
        padding: 5px !important;
    }

    .fi-main .td-invoice-source-field .td-source-toggle .fi-btn {
        min-height: 34px !important;
        padding-inline: 6px !important;
        font-size: 11px !important;
        line-height: 1.08 !important;
        white-space: normal !important;
    }

    .fi-main .td-product-lines .fi-fo-repeater-item {
        border-radius: 9px !important;
    }

    .fi-main .td-product-lines .fi-fo-repeater-item-header {
        min-height: 34px !important;
        padding: 5px 7px !important;
    }

    .fi-main .td-product-lines .fi-fo-repeater-item-content {
        padding: 10px !important;
    }

    .fi-main .td-product-lines .fi-sc.fi-grid:not(.td-artwork-switchboard),
    .fi-main .td-product-lines .grid:not(.td-artwork-switchboard) {
        gap: 10px !important;
    }

    .fi-main .td-artwork-switchboard {
        gap: 7px !important;
        padding: 7px !important;
    }

    .fi-main .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) :where(.fi-fo-field-wrp-label, .fi-fo-field-label, .fi-fo-field-wrp-label label) {
        font-size: 0.76rem !important;
    }

    .fi-main .td-product-lines .fi-fo-repeater > .fi-ac {
        margin-top: 10px !important;
    }

    .fi-main .td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action {
        min-height: 38px !important;
        border-radius: 8px !important;
        font-size: 0.76rem !important;
    }

    .fi-main .td-invoice-summary__row {
        padding: 8px 0 !important;
        font-size: 0.78rem !important;
    }
}

@media (max-width: 380px) {
}

/* Z Fold audit repair: final owners for the invoice controls that were still
   being overridden by older mobile/tablet rules. */
@media (max-width: 980px) {
    .fi-main .td-invoice-source-field .td-source-toggle:is(.fi-fo-toggle-buttons, .fi-btn-group),
    .fi-main .td-invoice-source-field .td-source-toggle :where(.fi-fo-toggle-buttons, .fi-btn-group) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-height: 0 !important;
        gap: 5px !important;
        padding: 5px !important;
    }

    .fi-main .td-invoice-source-field .td-source-toggle .fi-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        padding-inline: 6px !important;
        font-size: 11px !important;
        line-height: 1.08 !important;
        white-space: normal !important;
    }

    .fi-main .td-product-lines .td-artwork-switchboard {
        min-height: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .fi-main .td-product-lines .td-artwork-switchboard > .fi-sc.fi-grid,
    .fi-main .td-product-lines .td-artwork-switchboard > .grid {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 9px 10px !important;
    }

    .fi-main .td-product-lines .td-artwork-switchboard > .fi-sc.fi-grid > .fi-grid-col,
    .fi-main .td-product-lines .td-artwork-switchboard > .grid > .fi-grid-col {
        grid-column: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .fi-main .td-product-lines .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 36px !important;
        flex: 1 1 auto !important;
    }

    .fi-main .td-product-lines .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) .fi-fo-field-wrp {
        width: 100% !important;
        min-height: 36px !important;
    }

    .fi-main .td-product-lines .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) :where(.fi-fo-field-wrp-label, .fi-fo-field-label, .fi-fo-field-wrp-label label) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 8px !important;
        font-size: 0.76rem !important;
        justify-content: flex-start !important;
        white-space: normal !important;
    }

    .fi-main .td-product-lines .td-artwork-source-toggle,
    .fi-main .td-product-lines .td-artwork-details-toggle {
        margin-left: 0 !important;
        justify-self: stretch !important;
    }

    .fi-main .td-product-lines .td-artwork-source-toggle .fi-btn-group,
    .fi-main .td-product-lines .td-artwork-source-toggle .fi-fo-toggle-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fi-main .td-product-lines .td-artwork-charge-panel {
        margin-top: 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .fi-main .td-product-lines .td-artwork-notes-field textarea,
    .fi-main .td-product-lines .td-artwork-notes-field .fi-textarea,
    .fi-main .td-product-lines .td-artwork-files-field .fi-fo-file-upload {
        min-height: 88px !important;
    }

    .fi-main .td-product-lines .fi-fo-repeater > .fi-ac {
        display: flex !important;
        justify-content: center !important;
        margin-top: 8px !important;
    }

    .fi-main .td-product-lines .fi-fo-repeater > .fi-ac .td-add-product-service-action {
        width: auto !important;
        min-width: min(260px, 100%) !important;
        max-width: 100% !important;
        min-height: 36px !important;
        padding-inline: 14px !important;
    }
}

@media (max-width: 460px) {
    .fi-main .td-product-lines .td-artwork-switchboard > .fi-sc.fi-grid,
    .fi-main .td-product-lines .td-artwork-switchboard > .grid {
        grid-template-columns: 1fr !important;
    }
}

/* Z Fold landscape product/service card repair.
   Owns only the invoice/quote line-item card when the screen is wide enough
   for two clean columns but still too narrow for desktop layout. */
@media (min-width: 560px) and (max-width: 980px) and (orientation: landscape) {
    .fi-main .td-product-lines .fi-fo-repeater-item-content {
        padding: 14px 16px !important;
    }

    .fi-main .td-product-lines .td-line-fields-stack,
    .fi-main .td-product-lines .td-line-fields-stack > :where(.fi-sc, .fi-sc-component, .fi-grid-col),
    .fi-main .td-product-lines .td-line-fields-stack > :where(.fi-sc, .fi-sc-component, .fi-grid-col):has(.td-line-product-picker-grid),
    .fi-main .td-product-lines .td-line-fields-stack > :where(.fi-sc, .fi-sc-component, .fi-grid-col):has(.td-line-price-grid),
    .fi-main .td-product-lines :where(.fi-sc, .fi-sc-component, .fi-grid-col):has(.td-line-product-picker-grid),
    .fi-main .td-product-lines :where(.fi-sc, .fi-sc-component, .fi-grid-col):has(.td-line-price-grid) {
        display: block !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: stretch !important;
    }

    .fi-main .td-product-lines .td-line-product-picker-grid,
    .fi-main .td-product-lines .td-line-price-grid {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 13px 16px !important;
        align-items: end !important;
    }

    .fi-main .td-product-lines .td-line-product-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fi-main .td-product-lines .td-line-price-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .fi-main .td-product-lines :where(.td-line-product-picker-grid, .td-line-price-grid) > *,
    .fi-main .td-product-lines :where(.td-line-product-picker-grid, .td-line-price-grid) > :where(.fi-grid-col, .fi-sc-component, [style*="--col-span"]) {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: stretch !important;
    }

    .fi-main .td-product-lines .td-line-product-picker-grid > :where(.fi-grid-col, .fi-sc-component, [style*="--col-span"]):has(.td-line-product-group-field),
    .fi-main .td-product-lines .td-line-product-picker-grid > :where(.fi-grid-col, .fi-sc-component, [style*="--col-span"]):has(.td-line-product-type-field) {
        grid-column: span 1 !important;
    }

    .fi-main .td-product-lines .td-line-price-grid > :where(.fi-grid-col, .fi-sc-component, [style*="--col-span"]):has(.td-line-description-field) {
        grid-column: 1 / -1 !important;
    }

    .fi-main .td-product-lines .td-line-price-grid > :where(.fi-grid-col, .fi-sc-component, [style*="--col-span"]):has(.td-line-quantity-field),
    .fi-main .td-product-lines .td-line-price-grid > :where(.fi-grid-col, .fi-sc-component, [style*="--col-span"]):has(.td-line-unit-price-field),
    .fi-main .td-product-lines .td-line-price-grid > :where(.fi-grid-col, .fi-sc-component, [style*="--col-span"]):has(.td-line-total-field) {
        grid-column: span 2 !important;
    }

    .fi-main .td-product-lines .td-line-product-group-field,
    .fi-main .td-product-lines .td-line-product-type-field,
    .fi-main .td-product-lines .td-line-description-field,
    .fi-main .td-product-lines .td-line-quantity-field,
    .fi-main .td-product-lines .td-line-unit-price-field,
    .fi-main .td-product-lines .td-line-total-field {
        align-self: end !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .fi-main .td-product-lines :where(.td-line-product-picker-grid, .td-line-price-grid) :where(.fi-fo-field-wrp-label, .fi-fo-field-label, .fi-fo-field-wrp-label label) {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .fi-main .td-product-lines :where(.td-line-product-picker-grid, .td-line-price-grid) :where(.fi-input-wrp, .fi-select-input-ctn, .fi-fo-select, .fi-input, input, select) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .fi-main .td-product-lines .td-artwork-switchboard {
        width: 100% !important;
        margin-top: 4px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .fi-main .td-product-lines .td-artwork-switchboard > .fi-sc.fi-grid,
    .fi-main .td-product-lines .td-artwork-switchboard > .grid {
        display: flex !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px 22px !important;
    }

    .fi-main .td-product-lines .td-artwork-switchboard > .fi-sc.fi-grid > .fi-grid-col,
    .fi-main .td-product-lines .td-artwork-switchboard > .grid > .fi-grid-col {
        width: auto !important;
        max-width: max-content !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .fi-main .td-product-lines .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle),
    .fi-main .td-product-lines .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) .fi-fo-field-wrp {
        width: auto !important;
        max-width: max-content !important;
        min-width: 0 !important;
        min-height: 34px !important;
    }

    .fi-main .td-product-lines .td-artwork-switchboard :where(.td-artwork-required-field, .td-print-ready-artwork-field, .td-line-urgent-field, .td-artwork-details-toggle) :where(.fi-fo-field-wrp-label, .fi-fo-field-label, .fi-fo-field-wrp-label label) {
        display: inline-flex !important;
        width: auto !important;
        max-width: max-content !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        font-size: 0.76rem !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
    }

}

@media (min-width: 820px) and (max-width: 980px) and (orientation: landscape) {
    .fi-main .td-product-lines .td-line-product-picker-grid,
    .fi-main .td-product-lines .td-line-price-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

    .fi-main .td-product-lines .td-line-product-picker-grid > :where(.fi-grid-col, .fi-sc-component, [style*="--col-span"]):has(.td-line-product-group-field) {
        grid-column: span 4 !important;
    }

    .fi-main .td-product-lines .td-line-product-picker-grid > :where(.fi-grid-col, .fi-sc-component, [style*="--col-span"]):has(.td-line-product-type-field) {
        grid-column: span 5 !important;
    }

    .fi-main .td-product-lines .td-line-price-grid > :where(.fi-grid-col, .fi-sc-component, [style*="--col-span"]):has(.td-line-description-field) {
        grid-column: span 6 !important;
    }
}

/* Invoice order-source final owner.
   The source toggle has several Filament wrappers; the actual button group
   must be owned with its parents or old flex rules keep it on one row. */
@media (max-width: 980px) {
    .fi-main .td-invoice-source-field {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .fi-main .td-invoice-source-field :where(.fi-fo-field-wrp, .fi-fo-field-wrp-control, .fi-fo-field-wrp-control > div) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .fi-main .td-invoice-source-field .td-source-toggle:is(.fi-fo-toggle-buttons, .fi-btn-group),
    .fi-main .td-invoice-source-field .td-source-toggle :where(.fi-fo-toggle-buttons, .fi-btn-group),
    .fi-main .td-invoice-source-field :where(.fi-fo-toggle-buttons, .fi-btn-group):has(.fi-btn) {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 5px !important;
        border-radius: 12px !important;
        overflow: visible !important;
    }

    .fi-main .td-invoice-source-field .td-source-toggle :where(label, .fi-btn),
    .fi-main .td-invoice-source-field :where(.fi-fo-toggle-buttons, .fi-btn-group):has(.fi-btn) :where(label, .fi-btn) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .fi-main .td-invoice-source-field .td-source-toggle .fi-btn,
    .fi-main .td-invoice-source-field :where(.fi-fo-toggle-buttons, .fi-btn-group):has(.fi-btn) .fi-btn {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 38px !important;
        padding-inline: 6px !important;
        justify-content: center !important;
        font-size: clamp(10.5px, 1.55vw, 12px) !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    .fi-main .td-invoice-source-field .td-source-toggle .fi-btn span,
    .fi-main .td-invoice-source-field :where(.fi-fo-toggle-buttons, .fi-btn-group):has(.fi-btn) .fi-btn span {
        min-width: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }
}

@media (max-width: 430px) {
    .fi-main .td-invoice-source-field .td-source-toggle:is(.fi-fo-toggle-buttons, .fi-btn-group),
    .fi-main .td-invoice-source-field .td-source-toggle :where(.fi-fo-toggle-buttons, .fi-btn-group),
    .fi-main .td-invoice-source-field :where(.fi-fo-toggle-buttons, .fi-btn-group):has(.fi-btn) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Z Fold dashboard panel actions.
   Keeps View/Open pills and job status actions on the right instead of
   dropping into the title/body text on fold-sized screens. */
@media (min-width: 520px) and (max-width: 820px) {
    .fi-main .td-shell--dashboard .td-dashboard-board .td-panel__header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px 12px !important;
        padding: 10px 12px !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-board .td-panel__header > div {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-board .td-panel__header > .td-pill {
        justify-self: end !important;
        align-self: center !important;
        white-space: nowrap !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-board .td-panel__title {
        max-width: 100% !important;
        font-size: clamp(0.94rem, 2.7vw, 1.12rem) !important;
        line-height: 1.12 !important;
    }

    .fi-main .td-shell--dashboard .td-list-row--dashboard {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: center !important;
        gap: 10px 14px !important;
    }

    .fi-main .td-shell--dashboard .td-list-row__main {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .fi-main .td-shell--dashboard .td-list-row__end {
        display: flex !important;
        width: max-content !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        white-space: nowrap !important;
    }

    .fi-main .td-shell--dashboard .td-list-row__end :where(.td-pill, .td-next-action, .td-list__meta),
    .fi-main .td-shell--dashboard .td-list-row--dashboard > .td-next-action {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .fi-main .td-shell--dashboard .td-list-row__end .td-list__meta {
        overflow: visible !important;
        text-overflow: clip !important;
        color: var(--pb-muted, #74766f) !important;
    }
}

@media (max-width: 519px) {
    .fi-main .td-shell--dashboard .td-dashboard-board .td-panel__header {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .fi-main .td-shell--dashboard .td-dashboard-board .td-panel__header > .td-pill {
        justify-self: end !important;
        white-space: nowrap !important;
    }

    .fi-main .td-shell--dashboard .td-list-row__end {
        margin-top: 8px !important;
        justify-content: flex-start !important;
        gap: 7px !important;
    }
}

/* Fresh Order Source owner.
   Invoice/quote source buttons now use td-order-source-toggle so they do not
   inherit the older shared td-source-toggle rules used by artwork/status
   controls. */
.fi-main .td-invoice-source-field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.fi-main .td-invoice-source-field .td-order-source-toggle:is(.fi-fo-toggle-buttons, .fi-btn-group),
.fi-main .td-invoice-source-field .td-order-source-toggle :where(.fi-fo-toggle-buttons, .fi-btn-group) {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 5px !important;
    border: 1px solid color-mix(in srgb, var(--pb-border, #d8d7cf) 86%, transparent) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--pb-panel-bg, #f7f7f3) 88%, #fff) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.fi-main .td-invoice-source-field .td-order-source-toggle :where(label, .fi-btn) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.fi-main .td-invoice-source-field .td-order-source-toggle .fi-fo-toggle-buttons-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    opacity: 0 !important;
    clip-path: inset(50%) !important;
    pointer-events: none !important;
}

.fi-main .td-invoice-source-field .td-order-source-toggle .fi-btn {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 8px !important;
    border: 1px solid var(--pb-border, #d8d7cf) !important;
    border-radius: 10px !important;
    background: var(--pb-surface, #fff) !important;
    color: var(--pb-text, #30322f) !important;
    box-shadow: none !important;
    font-family: var(--pb-font, "Montserrat", Arial, sans-serif) !important;
    font-size: 0.76rem !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
}

.fi-main .td-invoice-source-field .td-order-source-toggle .fi-btn span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.fi-main .td-invoice-source-field .td-order-source-toggle .fi-btn:hover {
    border-color: color-mix(in srgb, var(--pb-primary, #30322f) 34%, var(--pb-border, #d8d7cf)) !important;
    background: var(--pb-surface-soft, #f8f8f4) !important;
    color: var(--pb-text, #30322f) !important;
    box-shadow: none !important;
}

.fi-main .td-invoice-source-field .td-order-source-toggle .fi-fo-toggle-buttons-input:checked + .fi-btn,
.fi-main .td-invoice-source-field .td-order-source-toggle :where(.fi-btn[aria-pressed="true"], .fi-btn[aria-checked="true"], .fi-btn.fi-active),
.fi-main .td-invoice-source-field .td-order-source-toggle label:has(input:checked) .fi-btn {
    border-color: var(--pb-primary, #30322f) !important;
    background: var(--pb-primary, #30322f) !important;
    color: var(--pb-button-text, #fff) !important;
}

@media (max-width: 720px) {
    .fi-main .td-invoice-source-field .td-order-source-toggle:is(.fi-fo-toggle-buttons, .fi-btn-group),
    .fi-main .td-invoice-source-field .td-order-source-toggle :where(.fi-fo-toggle-buttons, .fi-btn-group) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 430px) {
    .fi-main .td-invoice-source-field .td-order-source-toggle:is(.fi-fo-toggle-buttons, .fi-btn-group),
    .fi-main .td-invoice-source-field .td-order-source-toggle :where(.fi-fo-toggle-buttons, .fi-btn-group) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Product/service Fold reset.
   Below desktop width, keep invoice line fields as clean stacked controls.
   This avoids Filament md column spans squeezing fields on devices such as
   Galaxy Z Fold landscape. */
@media (max-width: 1023px) {
    .fi-main .td-product-lines > .fi-section > .fi-section-header,
    .fi-main .fi-sc-section.td-product-lines > .fi-section > .fi-section-header {
        padding: 10px 16px 9px !important;
    }

    .fi-main .td-product-lines > .fi-section > .fi-section-content-ctn > .fi-section-content,
    .fi-main .fi-sc-section.td-product-lines > .fi-section > .fi-section-content-ctn > .fi-section-content {
        padding: 14px 18px 18px !important;
    }

    .fi-main .td-product-lines .fi-fo-repeater-item-header {
        min-height: 38px !important;
        padding: 6px 9px !important;
    }

    .fi-main .td-product-lines .fi-fo-repeater-item-content {
        padding: 13px clamp(14px, 3vw, 22px) 15px !important;
    }

    .fi-main .td-product-lines .td-line-fields-stack,
    .fi-main .td-product-lines .td-line-product-picker-grid,
    .fi-main .td-product-lines .td-line-price-grid {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: start !important;
    }

    .fi-main .td-product-lines :where(.td-line-product-picker-grid, .td-line-price-grid) > :where(.fi-grid-col, .fi-sc-component, [style*="--col-span"], *) {
        display: block !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        justify-self: stretch !important;
    }

    .fi-main .td-product-lines :where(
        .td-line-product-group-field,
        .td-line-product-type-field,
        .td-line-description-field,
        .td-line-quantity-field,
        .td-line-unit-price-field,
        .td-line-total-field
    ),
    .fi-main .td-product-lines :where(
        .td-line-product-group-field,
        .td-line-product-type-field,
        .td-line-description-field,
        .td-line-quantity-field,
        .td-line-unit-price-field,
        .td-line-total-field
    ) :where(.fi-fo-field-wrp, .fi-input-wrp, .fi-select-input-ctn, .fi-fo-select, .fi-input, input, select) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .fi-main .td-product-lines :where(
        .td-line-product-group-field,
        .td-line-product-type-field,
        .td-line-description-field,
        .td-line-quantity-field,
        .td-line-unit-price-field,
        .td-line-total-field
    ) :where(.fi-fo-field-wrp, [data-field-wrapper]) {
        row-gap: 6px !important;
    }

    .fi-main .td-product-lines :where(
        .td-line-product-group-field,
        .td-line-product-type-field,
        .td-line-description-field,
        .td-line-quantity-field,
        .td-line-unit-price-field,
        .td-line-total-field
    ) :where(.fi-fo-field-wrp-label, .fi-fo-field-label, .fi-fo-field-wrp-label label) {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 4px !important;
        color: var(--pb-text, #30322f) !important;
        font-size: 0.86rem !important;
        font-weight: 650 !important;
        line-height: 1.22 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .fi-main .td-product-lines :where(
        .td-line-product-group-field,
        .td-line-product-type-field,
        .td-line-description-field,
        .td-line-quantity-field,
        .td-line-unit-price-field,
        .td-line-total-field
    ) :where(.fi-input-wrp, .fi-select-input-ctn, .fi-fo-select) {
        min-height: 46px !important;
        border-radius: 10px !important;
    }

    .fi-main .td-product-lines :where(
        .td-line-product-group-field,
        .td-line-product-type-field,
        .td-line-description-field,
        .td-line-quantity-field,
        .td-line-unit-price-field,
        .td-line-total-field
    ) :where(.fi-input, input, select, .fi-select-input) {
        min-height: 44px !important;
        font-size: 0.88rem !important;
        line-height: 1.22 !important;
    }

    .fi-main .td-product-lines .td-artwork-switchboard {
        margin-top: 14px !important;
    }

    .fi-main .td-product-lines .fi-fo-repeater > .fi-ac {
        margin-top: 13px !important;
    }
}

@media (max-width: 640px) {
    .fi-main .td-product-lines > .fi-section > .fi-section-content-ctn > .fi-section-content,
    .fi-main .fi-sc-section.td-product-lines > .fi-section > .fi-section-content-ctn > .fi-section-content {
        padding: 12px 12px 16px !important;
    }

    .fi-main .td-product-lines .fi-fo-repeater-item-content {
        padding: 11px 12px 13px !important;
    }

    .fi-main .td-product-lines .td-line-fields-stack,
    .fi-main .td-product-lines .td-line-product-picker-grid,
    .fi-main .td-product-lines .td-line-price-grid {
        gap: 12px !important;
    }

    .fi-main .td-product-lines :where(
        .td-line-product-group-field,
        .td-line-product-type-field,
        .td-line-description-field,
        .td-line-quantity-field,
        .td-line-unit-price-field,
        .td-line-total-field
    ) :where(.fi-input-wrp, .fi-select-input-ctn, .fi-fo-select) {
        min-height: 44px !important;
    }

    .fi-main .td-product-lines :where(
        .td-line-product-group-field,
        .td-line-product-type-field,
        .td-line-description-field,
        .td-line-quantity-field,
        .td-line-unit-price-field,
        .td-line-total-field
    ) :where(.fi-input, input, select, .fi-select-input) {
        min-height: 42px !important;
        font-size: 0.84rem !important;
    }
}

/* Tiny live CSS stamp for manual deployment checks. */
body::after {
    content: "PB 2026-06-25 17:45:00";
    position: fixed;
    right: 6px;
    bottom: 4px;
    z-index: 2147483647;
    color: rgba(48, 50, 47, 0.42);
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    pointer-events: none;
    user-select: none;
}

/* Idle action cue cleanup.
   Decorative circles inside buttons/cards were reading like loading spinners.
   Keep real Filament/Livewire loading indicators untouched; only remove custom
   dashboard/dashboard-flow idle circle affordances. */
.fi-main .td-shell--dashboard .td-dashboard-action {
    grid-template-columns: 38px minmax(0, 1fr) !important;
}

.fi-main .td-shell--dashboard .td-dashboard-action__arrow {
    display: none !important;
}

.fi-main .td-shell--dashboard .td-card--journey .td-flow-step:not(:last-child)::after,
html[data-pb-layout="workflow_saas"] .td-card--journey .td-flow-step:not(:last-child)::after {
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
}

@media (max-width: 820px) {
    .fi-main .td-shell--dashboard .td-dashboard-action {
        grid-template-columns: 32px minmax(0, 1fr) !important;
    }
}

/* App-style page chrome.
   Standalone page headings like "Create Invoice" waste app workspace and
   feel webpage-like. Hide only headers with no action toolbar; saved/edit
   pages with real header actions keep their toolbar visible. */
.fi-main .fi-page-header-main-ctn > .fi-header:not(:has(.fi-header-actions-ctn)) {
    display: none !important;
}

/* Global app chrome cleanup.
   Print Buddy should feel like a desktop application, so Filament's standalone
   webpage-style breadcrumbs and page titles are removed everywhere. Action
   toolbars stay visible because they are operational controls, not page chrome. */
.fi-main :where(
    .fi-breadcrumbs,
    .fi-header .fi-breadcrumbs,
    .fi-page-header .fi-breadcrumbs,
    .fi-header-heading,
    .fi-page-header-heading,
    .fi-header-subheading,
    .fi-page-header-subheading,
    .fi-header h1,
    .fi-header h2:first-child,
    .fi-page-header h1,
    .fi-page-header h2:first-child,
    .fi-header [class*="heading"],
    .fi-page-header [class*="heading"],
    .fi-header [class*="subheading"],
    .fi-page-header [class*="subheading"]
) {
    display: none !important;
}

.fi-main :where(
    .fi-page-header,
    .fi-page-header-main-ctn > .fi-header
):not(:has(.fi-btn, .fi-icon-btn, .fi-ac-btn-action, .fi-header-actions button, .fi-header-actions a, .fi-page-header-actions button, .fi-page-header-actions a, .td-invoice-post-save-action)) {
    display: none !important;
}

.fi-main :where(
    .fi-page-header,
    .fi-page-header-main-ctn > .fi-header
):has(.fi-btn, .fi-icon-btn, .fi-ac-btn-action, .fi-header-actions button, .fi-header-actions a, .fi-page-header-actions button, .fi-page-header-actions a, .td-invoice-post-save-action) {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fi-main :where(
    .fi-page-header,
    .fi-page-header-main-ctn > .fi-header
):has(.fi-btn, .fi-icon-btn, .fi-ac-btn-action, .fi-header-actions button, .fi-header-actions a, .fi-page-header-actions button, .fi-page-header-actions a, .td-invoice-post-save-action)
    :where(.fi-page-header-actions, .fi-header-actions, .fi-header-actions-ctn) {
    margin-left: auto !important;
}

/* Final page-title suppression.
   Filament renders page chrome as:
   .fi-page > .fi-page-header-main-ctn > header.fi-header > div:first-child.
   Hide that title/breadcrumb stack globally, but keep any real action toolbar
   visible so list/create/edit actions still work. Section/card headings are not
   matched by these selectors. */
.fi-page > .fi-page-header-main-ctn {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.fi-page > .fi-page-header-main-ctn > .fi-header {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fi-page > .fi-page-header-main-ctn > .fi-header > div:first-child,
.fi-page > .fi-page-header-main-ctn > .fi-header :where(
    .fi-breadcrumbs,
    .fi-header-heading,
    .fi-header-subheading,
    .fi-page-header-heading,
    .fi-page-header-subheading
) {
    display: none !important;
}

.fi-page > .fi-page-header-main-ctn > .fi-header:not(:has(.fi-header-actions-ctn :where(.fi-btn, .fi-icon-btn, button, a[href], [role="button"]))):not(:has(.td-page-backbar)) {
    display: none !important;
    margin: 0 !important;
}

.fi-page > .fi-page-header-main-ctn > .fi-header:has(.fi-header-actions-ctn :where(.fi-btn, .fi-icon-btn, button, a[href], [role="button"])),
.fi-page > .fi-page-header-main-ctn > .fi-header:has(.td-page-backbar) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 14px !important;
}

.fi-page > .fi-page-header-main-ctn > .fi-header > .fi-header-actions-ctn {
    width: auto !important;
    margin-left: auto !important;
}

.fi-page > .fi-page-header-main-ctn > .fi-header:has(.td-page-backbar) > div:first-child {
    display: flex !important;
    align-items: center !important;
    min-width: max-content !important;
}

.fi-page > .fi-page-header-main-ctn > .fi-header:has(.td-page-backbar) .fi-header-actions-ctn {
    display: flex !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
}

.fi-page > .fi-page-header-main-ctn > .fi-header:has(.td-page-backbar) .fi-ac {
    justify-content: flex-end !important;
    gap: 8px !important;
}

.td-page-backbar {
    display: flex;
    justify-content: flex-start;
    margin: 0;
}

.td-page-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-button-small-radius);
    background: var(--pb-card);
    color: var(--pb-ink);
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.td-page-back-btn:hover {
    border-color: var(--pb-border-strong);
    background: var(--pb-surface-soft);
    color: var(--pb-ink);
}

.td-page-back-btn span {
    color: var(--pb-muted);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

/* Sticky actionbars are owned by the shared .td-sticky-actionbar system below. */

/* Read-only document views.
   Simple saved-record presentation for View Invoice / View Job. This follows
   the Create Invoice card language without turning the view page into another
   edit form. */
.td-document-view {
    width: 100%;
    max-width: 100%;
}

.td-document-view--invoice {
    max-width: 1180px;
    margin-inline: auto;
}

.td-document-view--job {
    max-width: 1180px;
    margin-inline: auto;
}

.td-document-sheet {
    position: relative;
    border-color: color-mix(in srgb, var(--pb-border) 82%, transparent) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--pb-accent) 7%, transparent), transparent 34%),
        color-mix(in srgb, var(--pb-card) 98%, var(--pb-bg)) !important;
    box-shadow: 0 1px 1px rgb(20 24 22 / 0.035), 0 22px 56px rgb(20 24 22 / 0.07) !important;
    overflow: visible !important;
}

.td-document-sheet::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto;
    height: 5px;
    border-radius: var(--pb-card-radius) var(--pb-card-radius) 0 0;
    background: linear-gradient(90deg, var(--pb-accent), color-mix(in srgb, var(--pb-button) 76%, var(--pb-accent)));
}

.td-document-sheet__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: stretch;
    justify-content: stretch;
    gap: clamp(20px, 4vw, 46px);
    padding: clamp(24px, 3vw, 36px);
    border-bottom: 1px solid color-mix(in srgb, var(--pb-border) 72%, transparent);
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--pb-accent) 10%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--pb-card) 96%, var(--pb-bg)), color-mix(in srgb, var(--pb-card) 100%, var(--pb-bg)));
}

.td-document-logo {
    display: flex;
    align-items: center;
    min-height: 38px;
    margin-bottom: clamp(20px, 4vw, 38px);
}

.td-document-logo img {
    display: block;
    width: min(225px, 54vw);
    max-height: 80px;
    object-fit: contain;
    object-position: left center;
}

.td-document-logo strong {
    color: var(--pb-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.td-document-title {
    margin: 2px 0 0;
    color: var(--pb-ink);
    font-size: clamp(1.65rem, 2.2vw, 2.35rem);
    font-weight: 560;
    line-height: 1.12;
}

.td-document-subtitle {
    margin: 8px 0 0;
    color: var(--pb-muted);
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.35;
}

.td-document-header-meta {
    display: grid;
    align-content: start;
    gap: 12px;
}

.td-document-status-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 360px;
}

.td-document-due-card {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--pb-border) 76%, transparent);
    border-radius: calc(var(--pb-card-radius) - 2px);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--pb-accent) 11%, var(--pb-card)), color-mix(in srgb, var(--pb-card) 96%, var(--pb-bg)));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 54%, transparent), 0 12px 24px rgb(20 24 22 / 0.045);
}

.td-document-due-card span {
    color: color-mix(in srgb, var(--pb-muted) 86%, var(--pb-ink));
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.td-document-due-card strong {
    color: var(--pb-ink);
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    font-weight: 560;
    line-height: 1.05;
}

.td-document-due-card small {
    color: var(--pb-muted);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.35;
}

.td-document-keyline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--pb-border) 72%, transparent);
    background: color-mix(in srgb, var(--pb-card) 97%, var(--pb-bg));
}

.td-document-keyline > div,
.td-document-facts > div,
.td-document-totals > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 14px clamp(16px, 2vw, 22px);
    color: var(--pb-muted);
}

.td-document-keyline > div + div {
    border-left: 1px solid color-mix(in srgb, var(--pb-border) 72%, transparent);
}

.td-document-keyline span,
.td-document-facts span,
.td-document-totals span,
.td-document-section__title span {
    color: color-mix(in srgb, var(--pb-muted) 86%, var(--pb-ink));
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.td-document-keyline strong,
.td-document-facts strong,
.td-document-totals strong,
.td-document-section__title strong {
    min-width: 0;
    color: var(--pb-ink);
    font-size: 0.92rem;
    font-weight: 520;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.td-document-keyline__balance {
    background: color-mix(in srgb, var(--td-summary-balance-bg, var(--pb-button)) 10%, transparent);
}

.td-document-section {
    padding: clamp(18px, 2.2vw, 28px) clamp(22px, 2.4vw, 34px);
    overflow: visible !important;
}

.td-document-section--items {
    padding-bottom: clamp(18px, 2vw, 24px);
}

.td-document-addresses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: clamp(18px, 2.2vw, 26px) clamp(22px, 2.4vw, 34px);
    border-bottom: 1px solid color-mix(in srgb, var(--pb-border) 72%, transparent);
    background: color-mix(in srgb, var(--pb-card) 94%, var(--pb-bg));
}

.td-document-addresses > section {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 15px 16px 15px 18px;
    border: 1px solid color-mix(in srgb, var(--pb-border) 68%, transparent);
    border-radius: calc(var(--pb-card-radius) - 4px);
    background: color-mix(in srgb, var(--pb-card) 98%, var(--pb-bg));
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent);
}

.td-document-addresses > section::before {
    content: "";
    position: absolute;
    inset: 14px auto 14px 0;
    width: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pb-accent) 64%, var(--pb-border));
}

.td-document-addresses span {
    color: color-mix(in srgb, var(--pb-muted) 84%, var(--pb-ink));
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.td-document-addresses strong {
    color: var(--pb-ink);
    font-size: 0.94rem;
    font-weight: 520;
    line-height: 1.3;
}

.td-document-addresses p {
    margin: 0;
    color: var(--pb-muted);
    font-size: 0.83rem;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.td-document-section__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.td-document-items {
    display: grid;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--pb-border) 70%, transparent);
    border-radius: calc(var(--pb-card-radius) - 4px);
    background: color-mix(in srgb, var(--pb-card) 99%, var(--pb-bg));
    box-shadow: 0 12px 26px rgb(20 24 22 / 0.04);
}

.td-document-items__head,
.td-document-items__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px 110px 120px;
    gap: 12px;
    align-items: center;
}

.td-document-items--job .td-document-items__head,
.td-document-items--job .td-document-items__row {
    grid-template-columns: minmax(0, 1fr) 74px minmax(120px, 0.45fr) minmax(120px, 0.45fr);
}

.td-document-items__head {
    padding: 11px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--pb-border) 68%, transparent);
    background: color-mix(in srgb, var(--pb-bg) 64%, var(--pb-card));
    color: var(--pb-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.td-document-items__row {
    padding: 14px 16px;
    color: var(--pb-muted);
    font-size: 0.86rem;
    font-weight: 500;
}

.td-document-items__row + .td-document-items__row {
    border-top: 1px solid color-mix(in srgb, var(--pb-border) 62%, transparent);
}

.td-document-items__row strong {
    display: block;
    color: var(--pb-ink);
    font-weight: 540;
    line-height: 1.35;
}

.td-document-items__row small {
    display: block;
    margin-top: 3px;
    color: var(--pb-muted);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
}

.td-document-total-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 0 clamp(22px, 2.4vw, 34px) clamp(20px, 2.4vw, 30px);
}

.td-document-muted {
    margin: 2px 0 0;
    color: var(--pb-muted);
    font-size: 0.74rem;
    font-weight: 500;
}

.td-document-totals {
    position: relative;
    display: grid;
    align-content: start;
    width: min(100%, 440px);
    min-width: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--pb-border) 70%, transparent);
    border-radius: calc(var(--pb-card-radius) - 4px);
    background: var(--pb-card);
    box-shadow: none;
}

.td-document-totals::before {
    display: none;
}

.td-document-totals > div {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-block: 13px;
    padding-inline: 16px;
}

.td-document-totals > div + div {
    border-top: 1px solid color-mix(in srgb, var(--pb-border) 72%, transparent);
}

.td-document-totals__balance {
    margin: 6px;
    border-radius: calc(var(--pb-card-radius) - 6px);
    background: color-mix(in srgb, var(--td-summary-balance-bg, var(--pb-button)) 13%, var(--pb-card));
    color: var(--pb-ink) !important;
}

.td-document-totals__balance span,
.td-document-totals__balance strong {
    font-size: 0.94rem;
    font-weight: 560;
}

.td-document-totals__balance span,
.td-document-totals__balance strong {
    color: inherit !important;
}

.td-document-linked-footer {
    margin: 0 clamp(22px, 2.4vw, 34px) clamp(18px, 2.2vw, 26px);
    border-top: 1px solid color-mix(in srgb, var(--pb-border) 70%, transparent);
    color: var(--pb-muted);
}

.td-document-linked-footer summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding-top: 13px;
    color: var(--pb-muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.td-document-linked-footer summary span {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    border: 1px solid var(--pb-border);
    border-radius: 999px;
    background: var(--pb-card);
    color: var(--pb-ink);
    font-size: 0.7rem;
    letter-spacing: 0;
}

.td-document-linked-footer__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.td-document-linked-footer__row {
    display: inline-grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    max-width: min(100%, 340px);
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--pb-border) 78%, transparent);
    border-radius: var(--pb-radius-sm);
    background: color-mix(in srgb, var(--pb-card) 92%, var(--pb-bg));
    color: var(--pb-ink);
    text-decoration: none;
}

.td-document-linked-footer__row strong,
.td-document-linked-footer__row small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-document-linked-footer__row strong {
    font-size: 0.78rem;
    font-weight: 540;
}

.td-document-linked-footer__row small {
    color: var(--pb-muted);
    font-size: 0.72rem;
    font-weight: 500;
}

.td-document-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.td-document-facts > div {
    padding: 0;
}

.td-document-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 14px;
    padding: 0 clamp(22px, 2.4vw, 34px) clamp(20px, 2.4vw, 30px);
}

.td-document-linked {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--pb-border) 70%, transparent);
    border-radius: calc(var(--pb-card-radius) - 4px);
    background: color-mix(in srgb, var(--pb-card) 98%, var(--pb-bg));
}

.td-document-bottom .td-document-section__title {
    margin-bottom: 0;
}

.td-document-bottom .td-document-facts {
    gap: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--pb-border) 68%, transparent);
    border-radius: calc(var(--pb-card-radius) - 6px);
}

.td-document-bottom .td-document-facts > div {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--pb-card) 96%, var(--pb-bg));
}

.td-document-bottom .td-document-facts > div + div {
    border-top: 1px solid color-mix(in srgb, var(--pb-border) 64%, transparent);
}

.td-document-view--job .td-document-totals {
    width: 100%;
    box-shadow: none;
}

.td-document-details {
    margin: 0 20px 18px;
    padding-top: 12px;
    border-top: 1px solid var(--pb-border);
}

.td-document-details summary {
    cursor: pointer;
    color: var(--pb-ink);
    font-size: 0.84rem;
    font-weight: 540;
}

.td-document-note-stack {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.td-document-note-stack p {
    display: grid;
    gap: 4px;
    margin: 0;
    color: var(--pb-muted);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.5;
}

.td-document-note-stack strong {
    color: var(--pb-ink);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .td-document-sheet__header {
        grid-template-columns: 1fr;
    }

    .td-document-status-row {
        justify-content: flex-start;
    }
}

@media (max-width: 860px) {
    .td-document-keyline,
    .td-document-addresses {
        grid-template-columns: 1fr 1fr;
    }

    .td-document-keyline > div:nth-child(odd) {
        border-left: 0;
    }

    .td-document-keyline > div:nth-child(n + 3) {
        border-top: 1px solid color-mix(in srgb, var(--pb-border) 72%, transparent);
    }

    .td-document-items__head,
    .td-document-items__row,
    .td-document-items--job .td-document-items__head,
    .td-document-items--job .td-document-items__row {
        grid-template-columns: minmax(0, 1fr) 74px 96px 100px;
    }
}

@media (max-width: 640px) {
    .td-document-sheet__header,
    .td-document-section,
    .td-document-total-wrap {
        padding-inline: 14px;
    }

    .td-document-logo {
        margin-bottom: 24px;
    }

    .td-document-logo img {
        width: min(210px, 70vw);
    }

    .td-document-due-card strong {
        font-size: 1.6rem;
    }

    .td-document-keyline,
    .td-document-addresses,
    .td-document-facts {
        grid-template-columns: 1fr;
    }

    .td-document-keyline > div {
        border-left: 0 !important;
    }

    .td-document-keyline > div + div {
        border-top: 1px solid color-mix(in srgb, var(--pb-border) 72%, transparent);
    }

    .td-document-addresses > section {
        padding-inline: 14px;
    }

    .td-document-items {
        overflow: visible;
    }

    .td-document-items__head {
        display: none;
    }

    .td-document-items__row,
    .td-document-items--job .td-document-items__row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .td-document-items__row > span {
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    .td-document-items__row > span::before {
        content: attr(data-label);
        color: var(--pb-muted);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .td-document-details {
        margin-inline: 14px;
    }

    .td-document-total-wrap {
        justify-content: stretch;
    }

    .td-document-totals {
        width: 100%;
    }

    .td-document-linked-footer {
        margin-inline: 14px;
    }

    .td-document-linked-footer__row {
        width: 100%;
        max-width: 100%;
    }

    .td-document-bottom {
        grid-template-columns: 1fr;
        padding-inline: 14px;
    }
}

/* Night Control Room dark completeness pass.
   This is intentionally scoped to the active preset marker so light themes keep
   their approved Print Buddy look. It neutralises older hardcoded white shells
   without changing layout, invoice logic, forms, routes or data behaviour. */
html[data-pb-theme-preset="copper_grove"] {
    color-scheme: dark;
    --pb-bg: #080c09;
    --pb-card: #111711;
    --pb-card-soft: #151d16;
    --pb-surface: #111711;
    --pb-surface-soft: #0d130e;
    --pb-panel-header-bg: #0f150f;
    --pb-border: #263126;
    --pb-border-strong: #3a4938;
    --pb-ink: #f1f6ec;
    --pb-muted: #aeb9aa;
    --pb-field-bg: #0c120d;
    --pb-field-colour: #f1f6ec;
    --pb-field-placeholder: #7f8a7b;
    --pb-field-disabled-bg: #111711;
    --pb-dropdown-panel-bg: #0c120d;
    --pb-dropdown-panel-border-colour: #2a352a;
    --pb-dropdown-option-hover-bg: #172217;
    --pb-dropdown-option-selected-bg: #20351d;
    --pb-dropdown-panel-shadow: 0 18px 42px rgb(0 0 0 / 0.42);
    --pb-shadow: 0 1px 0 rgb(0 0 0 / 0.45);
    --pb-shadow-soft: 0 1px 0 rgb(0 0 0 / 0.35);
}

html[data-pb-theme-preset="copper_grove"] body {
    background: var(--pb-bg) !important;
    color: var(--pb-ink) !important;
}

html[data-pb-theme-preset="copper_grove"] body::after {
    color: rgb(241 246 236 / 0.34);
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-layout,
    .fi-body,
    .fi-main,
    .fi-page,
    .fi-page-content,
    .fi-main-ctn,
    .fi-panel-main,
    .fi-topbar,
    .fi-sidebar,
    .fi-sidebar-header,
    .fi-sidebar-nav,
    .fi-sidebar-nav-groups
) {
    background: var(--pb-bg) !important;
    color: var(--pb-ink) !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-section,
    .fi-section-content,
    .fi-section-content-ctn,
    .fi-card,
    .fi-ta,
    .fi-ta-content,
    .fi-ta-content-ctn,
    .fi-ta-table,
    .fi-ta-table-ctn,
    .fi-modal-window,
    .fi-fo-repeater-item,
    .fi-fo-repeater-item-header,
    .fi-fo-repeater-item-content,
    .td-panel,
    .td-card,
    .td-command,
    .td-workflow-panel,
    .td-checkout-panel,
    .td-product-lines,
    .td-dashboard-action,
    .td-dashboard-workload,
    .td-dashboard-metric,
    .td-theme-card,
    .td-ui-layout-card
) {
    border-color: var(--pb-border) !important;
    background: var(--pb-card) !important;
    color: var(--pb-ink) !important;
    box-shadow: var(--pb-shadow-soft) !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-section-header,
    .fi-ta-header,
    .fi-fo-repeater-item-header,
    .td-card__header,
    .td-panel__header,
    .td-checkout-panel > .fi-section > .fi-section-header,
    .td-product-lines > .fi-section > .fi-section-header
) {
    border-color: var(--pb-border) !important;
    background: var(--pb-panel-header-bg) !important;
    color: var(--pb-ink) !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-section-header-description,
    .fi-fo-field-wrp-helper-text,
    .fi-ta-text,
    .fi-ta-text-item,
    .text-gray-500,
    .text-gray-600,
    .td-muted,
    .td-card__subtitle,
    .td-panel__subtitle
) {
    color: var(--pb-muted) !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-input-wrp,
    .fi-select-input-ctn,
    .fi-fo-select,
    .fi-textarea-wrp,
    .fi-input,
    .fi-select-input,
    .fi-select-input-btn,
    .fi-select-input-value-ctn,
    .fi-select-input-search-ctn .fi-input-wrp,
    .fi-dropdown-panel .fi-input-wrp,
    input,
    select,
    textarea,
    .choices__inner,
    .choices__input
) {
    border-color: var(--pb-border) !important;
    background: var(--pb-field-bg) !important;
    color: var(--pb-field-colour) !important;
    box-shadow: none !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-input::placeholder,
    .fi-select-input-placeholder,
    input::placeholder,
    textarea::placeholder,
    .choices__placeholder
) {
    color: var(--pb-field-placeholder) !important;
    opacity: 1 !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-input-wrp:focus-within,
    .fi-select-input-ctn:focus-within,
    .fi-fo-select:focus-within,
    .fi-textarea-wrp:focus-within
) {
    border-color: var(--td-primary, #b7d96a) !important;
    box-shadow: 0 0 0 3px rgb(140 181 43 / 0.22) !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-dropdown-panel,
    .fi-select-panel,
    .fi-select-input-ctn .fi-dropdown-panel,
    .choices__list--dropdown,
    .choices__list[aria-expanded]
) {
    border-color: var(--pb-dropdown-panel-border-colour) !important;
    background: var(--pb-dropdown-panel-bg) !important;
    color: var(--pb-field-colour) !important;
    box-shadow: var(--pb-dropdown-panel-shadow) !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-dropdown-list-item,
    .fi-select-input-option,
    .choices__item--choice,
    [role="option"]
) {
    color: var(--pb-field-colour) !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-dropdown-list-item:hover,
    .fi-select-input-option:hover,
    .choices__item--choice:hover,
    [role="option"]:hover
) {
    background: var(--pb-dropdown-option-hover-bg) !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-dropdown-list-item[aria-selected="true"],
    .fi-select-input-option[aria-selected="true"],
    .choices__item--choice.is-highlighted,
    [role="option"][aria-selected="true"]
) {
    background: var(--pb-dropdown-option-selected-bg) !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-ta-row,
    .fi-ta-record,
    .fi-ta-cell,
    .fi-ta-header-cell
) {
    border-color: var(--pb-border) !important;
    background: var(--pb-card) !important;
    color: var(--pb-ink) !important;
}

html[data-pb-theme-preset="copper_grove"] :where(.fi-ta-row:hover, .fi-ta-record:hover) {
    background: #151e16 !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-btn-color-gray,
    .fi-ac-btn-action:not(.fi-btn-color-primary):not(.fi-btn-color-danger),
    .fi-icon-btn,
    .fi-link.fi-ac-link-action
) {
    border-color: var(--pb-border) !important;
    background: #151d16 !important;
    color: var(--pb-ink) !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-btn-color-gray:hover,
    .fi-ac-btn-action:not(.fi-btn-color-primary):not(.fi-btn-color-danger):hover,
    .fi-icon-btn:hover,
    .fi-link.fi-ac-link-action:hover
) {
    background: #1b261c !important;
}

html[data-pb-theme-preset="copper_grove"] :where(
    .fi-badge,
    .td-status-pill,
    .td-pill,
    .td-chip
) {
    border-color: var(--pb-border) !important;
    background: #151d16 !important;
    color: var(--pb-ink) !important;
}

/* Dashboard + record action footer stabilisation
   Scoped final owner so older experimental blocks cannot make the dashboard
   feel over-bold or leave record actions stranded in the page header. */
.fi-main .td-shell--dashboard :where(
    .td-dashboard-title,
    .td-panel__title,
    .td-title,
    .td-card--journey .td-flow-step__label
) {
    font-weight: 620 !important;
}

.fi-main .td-shell--dashboard :where(
    .td-dashboard-action__label,
    .td-dashboard-stat__value,
    .td-list__title,
    .td-workflow-panel__title,
    .td-job-card strong
) {
    font-weight: 600 !important;
}

.fi-main .td-shell--dashboard :where(
    .td-dashboard-action__desc,
    .td-dashboard-lede,
    .td-dashboard-stat__label,
    .td-list__meta,
    .td-flow-step__note,
    .td-job-card span,
    .td-job-card small
) {
    font-weight: 420 !important;
}

/* Global sticky actionbar system.
   Filament renders Back, normal buttons and More/kebab buttons in different
   wrappers. The provider decorates that header as .td-sticky-actionbar so one
   contract controls every saved-record sticky action menu. */
body:has(.td-sticky-actionbar) .fi-main {
    padding-bottom: max(88px, env(safe-area-inset-bottom) + 72px) !important;
}

.fi-page > .fi-page-header-main-ctn > .fi-header.td-sticky-actionbar {
    position: fixed !important;
    inset: auto auto max(14px, env(safe-area-inset-bottom)) 50% !important;
    transform: translateX(-50%) !important;
    z-index: 120 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: min(70vw, 1120px) !important;
    max-width: calc(100vw - 32px) !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    overflow: visible !important;
    border: 1px solid var(--pb-border, rgba(48, 50, 47, 0.14)) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--pb-card, #ffffff) 94%, transparent) !important;
    box-shadow: 0 18px 44px rgb(48 50 47 / 0.14) !important;
    backdrop-filter: blur(14px) saturate(1.1) !important;
}

.td-sticky-actionbar__start {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: center !important;
    min-width: max-content !important;
    margin: 0 !important;
}

.td-sticky-actionbar > div:first-child,
.td-sticky-actionbar .td-page-backbar,
.td-sticky-actionbar .fi-header-actions-ctn,
.td-sticky-actionbar__actions,
.td-sticky-actionbar__actions .fi-ac,
.td-sticky-actionbar .fi-ac,
.td-sticky-actionbar .fi-dropdown,
.td-sticky-actionbar__actions .fi-dropdown-trigger,
.td-sticky-actionbar .fi-dropdown-trigger,
.td-sticky-actionbar__actions .fi-ac-grouped-action {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    min-height: 40px !important;
    margin-block: 0 !important;
}

.td-sticky-actionbar__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    width: auto !important;
    margin-left: auto !important;
}

.td-sticky-actionbar__actions .fi-ac {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 40px !important;
    overflow: visible !important;
}

.td-sticky-actionbar :where(.fi-btn, .fi-icon-btn, .td-page-back-btn),
.td-sticky-actionbar__actions :where(.fi-btn, .fi-icon-btn, button.fi-btn, button.fi-icon-btn, a.fi-btn, a.fi-icon-btn, .fi-dropdown-trigger > button, .fi-ac-grouped-action > button, .td-invoice-action-more button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    padding-block: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.td-sticky-actionbar :where(.fi-icon-btn),
.td-sticky-actionbar__actions :where(.td-invoice-action-more.fi-icon-btn, .td-invoice-action-more .fi-icon-btn, .td-invoice-action-more button, .fi-dropdown-trigger > button, .fi-ac-grouped-action > button, .fi-icon-btn) {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding-inline: 0 !important;
}

.td-sticky-actionbar :where(.fi-btn-label, .fi-icon:not(.fi-loading-indicator), .fi-btn-icon, .fi-icon-btn-icon, .td-page-back-btn span) {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.td-sticky-actionbar :where(.td-invoice-action-more, .td-invoice-action-more button, .fi-ac-grouped-action > button) :where(.fi-icon:not(.fi-loading-indicator), .fi-btn-icon, .fi-icon-btn-icon, svg:not(.fi-loading-indicator)) {
    color: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.td-sticky-actionbar :where(
    .td-invoice-action-more,
    .td-invoice-action-more .fi-dropdown,
    .td-invoice-action-more .fi-dropdown-trigger,
    .td-invoice-action-more .fi-ac-grouped-action,
    .td-invoice-action-more .fi-ac-grouped-action > div,
    .td-invoice-action-more .fi-ac-grouped-action > span,
    .td-invoice-action-more .fi-dropdown-trigger > button,
    .td-invoice-action-more .fi-ac-grouped-action > button,
    .td-invoice-action-more button.fi-icon-btn,
    .td-record-sticky-action.td-invoice-action-more,
    .td-record-sticky-action.td-invoice-action-more .fi-dropdown,
    .td-record-sticky-action.td-invoice-action-more .fi-dropdown-trigger,
    .td-record-sticky-action.td-invoice-action-more .fi-ac-grouped-action,
    .td-record-sticky-action.td-invoice-action-more .fi-ac-grouped-action > div,
    .td-record-sticky-action.td-invoice-action-more .fi-dropdown-trigger > button
) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    padding: 0 !important;
}

.td-sticky-actionbar .fi-dropdown-panel {
    z-index: 9999 !important;
}

@media (max-width: 720px) {
    body:has(.td-sticky-actionbar) .fi-main {
        padding-bottom: max(136px, env(safe-area-inset-bottom) + 118px) !important;
    }

    .fi-page > .fi-page-header-main-ctn > .fi-header.td-sticky-actionbar {
        inset: auto 10px max(10px, env(safe-area-inset-bottom)) 10px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        min-height: 0 !important;
        padding: 10px !important;
        border-radius: 16px !important;
    }

    .td-sticky-actionbar__start,
    .td-sticky-actionbar__actions,
    .td-sticky-actionbar__actions .fi-ac {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .td-sticky-actionbar__actions .fi-ac :where(.fi-btn) {
        flex: 1 1 148px !important;
    }

    .td-sticky-actionbar__actions .fi-ac :where(.fi-icon-btn) {
        flex: 0 0 40px !important;
    }
}

.td-document-payment-history,
.td-invoice-payment-history {
    margin-top: 18px;
    border: 1px solid var(--pb-border, rgba(48, 50, 47, 0.14));
    border-radius: var(--pb-radius, 14px);
    background: var(--pb-card, #ffffff);
    overflow: hidden;
}

.td-document-payment-history {
    margin-inline: clamp(22px, 2.4vw, 34px);
    margin-bottom: clamp(20px, 2.4vw, 30px);
}

.td-document-payment-history__head,
.td-invoice-payment-history__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--pb-border, rgba(48, 50, 47, 0.12));
    background: var(--pb-surface-soft, rgba(236, 235, 227, 0.42));
}

.td-document-payment-history__head span,
.td-invoice-payment-history__head span {
    color: var(--pb-muted, #6f746d);
    font-size: 0.72rem;
    font-weight: 620;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.td-document-payment-history__head strong,
.td-invoice-payment-history__head strong {
    color: var(--pb-ink, #30322f);
    font-size: 0.86rem;
    font-weight: 620;
}

.td-document-payment-history__empty,
.td-invoice-payment-history > p {
    margin: 0;
    padding: 14px 16px;
    color: var(--pb-muted, #6f746d);
    font-size: 0.86rem;
    font-weight: 420;
}

.td-document-payment-history__list,
.td-invoice-payment-history__list {
    display: grid;
    gap: 0;
    padding: 0;
}

.td-document-payment-history__table-head,
.td-invoice-payment-history__table-head,
.td-document-payment-history__row,
.td-invoice-payment-history__row {
    display: grid;
    grid-template-columns: minmax(90px, 120px) minmax(86px, 120px) minmax(100px, 132px) minmax(180px, 2fr);
    align-items: center;
    column-gap: 16px;
}

.td-document-payment-history__table-head,
.td-document-payment-history__row {
    grid-template-columns: minmax(90px, 120px) minmax(86px, 120px) minmax(100px, 132px) minmax(100px, 150px) minmax(180px, 2fr);
}

.td-invoice-payment-history__table-head,
.td-invoice-payment-history__row {
    grid-template-columns: minmax(88px, 120px) minmax(110px, 1fr) minmax(96px, 132px);
}

.td-document-payment-history__table-head,
.td-invoice-payment-history__table-head {
    padding: 8px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--pb-border, rgba(48, 50, 47, 0.14)) 72%, transparent);
    background: color-mix(in srgb, var(--pb-surface-soft, #ecebe3) 46%, var(--pb-card, #ffffff));
    color: var(--pb-muted, #6f746d);
    font-size: 0.68rem;
    font-weight: 620;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.td-document-payment-history__row,
.td-invoice-payment-history__row {
    min-height: 42px;
    padding: 9px 16px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--pb-border, rgba(48, 50, 47, 0.14)) 68%, transparent);
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.td-document-payment-history__row:last-child,
.td-invoice-payment-history__row:last-child {
    border-bottom: 0;
}

.td-document-payment-history__row:hover,
.td-invoice-payment-history__row:hover {
    background: color-mix(in srgb, var(--pb-accent, #8aa63f) 7%, var(--pb-card, #ffffff));
    transform: none;
}

.td-document-payment-history__amount strong,
.td-invoice-payment-history__amount strong {
    color: var(--pb-ink, #30322f);
    font-size: 0.92rem;
    font-weight: 620;
}

.td-document-payment-history__method,
.td-document-payment-history__date,
.td-document-payment-history__reference,
.td-document-payment-history__notes,
.td-invoice-payment-history__method,
.td-invoice-payment-history__date,
.td-invoice-payment-history__reference {
    color: var(--pb-muted, #6f746d);
    font-size: 0.8rem;
    font-weight: 420;
    line-height: 1.35;
}

.td-document-payment-history__reference,
.td-document-payment-history__notes,
.td-invoice-payment-history__reference {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .td-document-payment-history {
        margin-inline: 14px;
    }

    .td-document-payment-history__table-head,
    .td-invoice-payment-history__table-head {
        display: none;
    }

    .td-document-payment-history__row,
    .td-invoice-payment-history__row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "amount date"
            "method reference"
            "notes notes";
        gap: 3px 12px;
        min-height: 50px;
        padding: 10px 14px;
    }

    .td-invoice-payment-history__row {
        grid-template-areas:
            "amount date"
            "method method";
    }

    .td-document-payment-history__amount,
    .td-invoice-payment-history__amount {
        grid-area: amount;
    }

    .td-document-payment-history__date,
    .td-invoice-payment-history__date {
        grid-area: date;
        text-align: right;
        white-space: nowrap;
    }

    .td-document-payment-history__method,
    .td-invoice-payment-history__method {
        grid-area: method;
    }

    .td-document-payment-history__reference,
    .td-invoice-payment-history__reference {
        grid-area: reference;
        max-width: 42vw;
        text-align: right;
    }

    .td-document-payment-history__notes {
        grid-area: notes;
        max-width: none;
        text-align: left;
    }
}

@media (max-width: 390px) {
    .td-document-payment-history__row,
    .td-invoice-payment-history__row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "amount"
            "method"
            "date"
            "reference"
            "notes";
    }

    .td-invoice-payment-history__row {
        grid-template-areas:
            "amount"
            "method"
            "date";
    }

    .td-document-payment-history__date,
    .td-document-payment-history__reference,
    .td-document-payment-history__notes,
    .td-invoice-payment-history__date,
    .td-invoice-payment-history__reference {
        max-width: none;
        text-align: left;
    }
}

/* App-wide font weight + View Job final polish.
   Keeps the existing theme but pulls back the old 800/900-heavy rules that
   made the admin feel shouty, especially dashboards and document views. */
.fi-body :where(
    h1,
    h2,
    h3,
    .fi-section-header-heading,
    .fi-page-header-heading,
    .td-title,
    .td-panel__title,
    .td-document-title,
    .td-dashboard-title
) {
    font-weight: 620 !important;
}

.fi-body :where(
    h4,
    h5,
    h6,
    strong,
    b,
    .fi-btn-label,
    .fi-ac-btn-action,
    .fi-badge,
    .td-pill,
    .td-status-pill,
    .td-chip,
    .td-document-section__title strong,
    .td-document-items__row strong,
    .td-document-totals strong,
    .td-document-facts strong,
    .td-dashboard-action__label,
    .td-list__title
) {
    font-weight: 560 !important;
}

.fi-body :where(
    p,
    small,
    label,
    .fi-section-header-description,
    .fi-fo-field-wrp-label,
    .fi-fo-field-wrp-helper-text,
    .td-document-subtitle,
    .td-document-items__row,
    .td-document-note-stack p,
    .td-dashboard-action__desc,
    .td-list__meta
) {
    font-weight: 420;
}

.td-document-view--job .td-document-sheet {
    overflow: hidden !important;
}

.td-document-view--job .td-document-sheet__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.td-document-view--job .td-document-status-row {
    align-content: center;
    justify-content: end;
    max-width: 420px;
}

.td-document-view--job .td-document-status-row .td-pill {
    min-width: 128px;
    justify-content: center;
    padding: 12px 16px;
    border-radius: var(--pb-radius, 10px);
    font-size: 0.82rem;
    line-height: 1.15;
}

.td-document-view--job .td-document-keyline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.td-document-view--job .td-document-section {
    padding-top: 24px;
}

.td-document-view--job .td-document-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 16px;
    align-items: start;
}

.td-document-view--job .td-document-linked,
.td-document-view--job .td-document-totals {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--pb-border) 72%, transparent);
    border-radius: var(--pb-card-radius, 14px);
    background: color-mix(in srgb, var(--pb-card) 98%, var(--pb-bg));
    box-shadow: 0 1px 0 rgb(20 24 22 / 0.035);
}

.td-document-view--job .td-document-linked {
    padding: 16px;
}

.td-document-view--job .td-document-facts,
.td-document-view--job .td-document-totals {
    display: grid;
    gap: 0;
    overflow: hidden;
}

.td-document-view--job .td-document-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid color-mix(in srgb, var(--pb-border) 66%, transparent);
    border-radius: calc(var(--pb-card-radius, 14px) - 6px);
}

.td-document-view--job .td-document-facts > div,
.td-document-view--job .td-document-totals > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--pb-card) 96%, var(--pb-bg));
}

.td-document-view--job .td-document-facts > div:nth-child(even) {
    border-left: 1px solid color-mix(in srgb, var(--pb-border) 62%, transparent);
}

.td-document-view--job .td-document-facts > div:nth-child(n + 3),
.td-document-view--job .td-document-totals > div + div {
    border-top: 1px solid color-mix(in srgb, var(--pb-border) 62%, transparent);
}

.td-document-view--job .td-document-totals {
    width: 100%;
    padding: 0;
}

.td-document-view--job .td-document-totals::before {
    display: none;
}

.td-document-view--job .td-document-details {
    margin: 0 clamp(22px, 2.4vw, 34px) clamp(20px, 2.4vw, 30px);
    padding: 13px 16px;
    border: 1px solid color-mix(in srgb, var(--pb-border) 70%, transparent);
    border-radius: var(--pb-card-radius, 14px);
    background: color-mix(in srgb, var(--pb-card) 98%, var(--pb-bg));
}

@media (max-width: 900px) {
    .td-document-view--job .td-document-sheet__header,
    .td-document-view--job .td-document-keyline,
    .td-document-view--job .td-document-bottom {
        grid-template-columns: 1fr;
    }

    .td-document-view--job .td-document-status-row {
        justify-content: start;
    }
}

@media (max-width: 640px) {
    .td-document-view--job .td-document-facts {
        grid-template-columns: 1fr;
    }

    .td-document-view--job .td-document-facts > div {
        border-left: 0 !important;
    }

    .td-document-view--job .td-document-facts > div + div {
        border-top: 1px solid color-mix(in srgb, var(--pb-border) 62%, transparent);
    }

    .td-document-view--job .td-document-details {
        margin-inline: 14px;
    }
}

/* Admin tool pages cohesion
   Workflow preview, production board, product labs, recycle bin and cleanup
   should read as Print Buddy admin screens rather than isolated prototypes. */
.fi-main :where(
    .td-workflow-v2,
    .td-shell:not(.td-shell--dashboard),
    .pme,
    .product-layout-lab,
    .td-recycle,
    .td-admin-cleanup
) {
    --td-tool-card: var(--pb-card, var(--td-card-bg, #ffffff));
    --td-tool-bg: var(--pb-bg, var(--td-page-bg, #f4f2eb));
    --td-tool-border: color-mix(in srgb, var(--pb-border, var(--td-border, #d9d9d6)) 82%, transparent);
    --td-tool-border-strong: color-mix(in srgb, var(--pb-border, var(--td-border, #d9d9d6)) 72%, var(--pb-text, #202820));
    --td-tool-text: var(--pb-text, var(--td-ink, #202820));
    --td-tool-muted: var(--pb-muted, var(--td-ink-muted, #66716b));
    --td-tool-accent: var(--pb-primary, var(--td-accent, #5f8f6b));
    display: grid !important;
    gap: clamp(14px, 1.5vw, 20px) !important;
    width: 100% !important;
    max-width: 100% !important;
    color: var(--td-tool-text) !important;
}

.fi-main :where(
    .td-command,
    .td-workflow-picker,
    .td-workflow-card,
    .td-workflow-panel,
    .td-workflow-job,
    .td-workflow-list-row,
    .td-lane,
    .td-job-card,
    .td-money,
    .pme-card,
    .pme-toolbar,
    .lab-card,
    .lab-toolbar,
    .td-recycle__hero,
    .td-recycle__stat,
    .td-recycle__notice,
    .td-recycle__section,
    .td-admin-cleanup__hero,
    .td-admin-cleanup__warning,
    .td-admin-cleanup__controls,
    .td-admin-cleanup__card
) {
    border: 1px solid var(--td-tool-border) !important;
    border-radius: var(--pb-card-radius, 14px) !important;
    background: var(--td-tool-card) !important;
    box-shadow: 0 1px 2px rgb(20 24 22 / 0.045) !important;
    color: var(--td-tool-text) !important;
}

.fi-main :where(.td-command) {
    overflow: visible !important;
}

.fi-main :where(.td-command__main, .td-workflow-hero) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr) !important;
    gap: clamp(14px, 1.4vw, 20px) !important;
    align-items: stretch !important;
}

.fi-main :where(
    .td-workflow-panel__head,
    .pme-heading,
    .lab-panel-heading,
    .td-recycle__section-head
) {
    border-bottom: 1px solid var(--td-tool-border) !important;
    background: color-mix(in srgb, var(--td-tool-card) 94%, var(--td-tool-bg)) !important;
}

.fi-main :where(
    .td-workflow-panel__body,
    .pme-body,
    .lab-panel-body
) {
    padding: clamp(14px, 1.5vw, 20px) !important;
}

.fi-main :where(
    .td-title,
    .td-panel__title,
    .td-workflow-panel h2,
    .td-workflow-job h3,
    .pme-heading strong,
    .lab-panel-heading strong,
    .td-recycle__record-top h4,
    .td-admin-cleanup__card h3
) {
    color: var(--td-tool-text) !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
}

.fi-main :where(
    .td-subtitle,
    .td-panel__subtitle,
    .td-workflow-copy,
    .td-list__meta,
    .td-admin-cleanup__note,
    .td-recycle__reason,
    .td-recycle__meta,
    .pme-label,
    .lab-field label
) {
    color: var(--td-tool-muted) !important;
    font-weight: 430 !important;
    line-height: 1.45 !important;
}

.fi-main :where(
    .td-eyebrow,
    .td-panel__kicker,
    .td-workflow-kicker,
    .td-money__label,
    .td-recycle__stat span,
    .td-admin-cleanup__field span,
    .pme-label,
    .lab-field label
) {
    color: color-mix(in srgb, var(--td-tool-accent) 78%, var(--td-tool-text)) !important;
    font-size: 0.68rem !important;
    font-weight: 680 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
}

.fi-main :where(
    .td-action,
    .td-workflow-button,
    .td-workflow-link,
    .pme-button,
    .lab-button,
    .td-recycle__bulk-link,
    .td-admin-cleanup__link,
    .td-recycle__button,
    .td-admin-cleanup__button
) {
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--td-tool-border-strong) !important;
    border-radius: var(--pb-button-radius, 10px) !important;
    background: var(--td-tool-card) !important;
    color: var(--td-tool-text) !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    font-weight: 560 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.fi-main :where(
    .td-action:hover,
    .td-workflow-button:hover,
    .td-workflow-link:hover,
    .pme-button:hover,
    .lab-button:hover,
    .td-recycle__bulk-link:hover,
    .td-admin-cleanup__link:hover
) {
    border-color: color-mix(in srgb, var(--td-tool-accent) 42%, var(--td-tool-border-strong)) !important;
    background: color-mix(in srgb, var(--td-tool-accent) 7%, var(--td-tool-card)) !important;
    transform: none !important;
}

.fi-main :where(
    .td-workflow-button--primary,
    .td-workflow-link--primary,
    .pme-button.primary,
    .lab-button.primary
) {
    border-color: var(--pb-button, var(--td-tool-text)) !important;
    background: var(--pb-button, var(--td-tool-text)) !important;
    color: var(--pb-button-text, #ffffff) !important;
}

.fi-main :where(.td-workflow-button--danger, .pme-button.danger, .lab-button.danger, .td-recycle__button--clear, .td-admin-cleanup__button--danger) {
    border-color: color-mix(in srgb, #b84d42 30%, var(--td-tool-border)) !important;
    background: color-mix(in srgb, #b84d42 8%, var(--td-tool-card)) !important;
    color: #96352d !important;
}

.fi-main :where(
    .td-production-grid,
    .td-money-grid,
    .td-workflow-grid,
    .td-workflow-summary,
    .td-workflow-steps,
    .td-workflow-meta,
    .td-recycle__stats,
    .td-admin-cleanup__grid,
    .pme-form-grid,
    .lab-grid
) {
    display: grid !important;
    gap: clamp(10px, 1.2vw, 16px) !important;
}

.fi-main :where(.td-production-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
}

.fi-main :where(.td-money-grid, .td-workflow-summary, .td-recycle__stats) {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)) !important;
}

.fi-main :where(.td-admin-cleanup__grid, .td-workflow-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)) !important;
}

.fi-main :where(.td-lane) {
    padding: 14px !important;
    min-width: 0 !important;
}

.fi-main :where(.td-lane__header, .td-workflow-job__head, .td-recycle__record-top, .td-admin-cleanup__card-head) {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.fi-main :where(.td-job-card, .td-workflow-job, .td-workflow-list-row) {
    display: grid !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: calc(var(--pb-card-radius, 14px) - 4px) !important;
    text-decoration: none !important;
    min-width: 0 !important;
}

.fi-main :where(.td-job-card__badges, .td-workflow-pillbar, .td-recycle__badges) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.fi-main :where(.td-pill, .pme-pill, .lab-pill, .td-recycle__badge) {
    min-height: 24px !important;
    border-radius: 999px !important;
    border: 1px solid var(--td-tool-border) !important;
    background: color-mix(in srgb, var(--td-tool-bg) 70%, var(--td-tool-card)) !important;
    color: var(--td-tool-text) !important;
    font-size: 0.68rem !important;
    font-weight: 540 !important;
    line-height: 1 !important;
}

.fi-main :where(.pme-toolbar, .lab-toolbar) {
    position: sticky !important;
    top: 8px !important;
    z-index: 25 !important;
    border-radius: var(--pb-card-radius, 14px) !important;
    background: color-mix(in srgb, var(--td-tool-card) 90%, var(--td-tool-bg)) !important;
    backdrop-filter: blur(10px) !important;
}

.fi-main :where(
    .pme-input,
    .pme-select,
    .pme-textarea,
    .lab-input,
    .lab-select,
    .lab-textarea,
    .td-workflow-select,
    .td-admin-cleanup__field textarea,
    .td-admin-cleanup__field input,
    .td-admin-cleanup__field select
) {
    min-height: var(--pb-control-height, 42px) !important;
    border: 1px solid var(--td-tool-border-strong) !important;
    border-radius: var(--pb-field-radius, 10px) !important;
    background: var(--pb-field-bg, #ffffff) !important;
    color: var(--td-tool-text) !important;
    padding: 9px 12px !important;
    font-size: var(--pb-field-font-size, 0.88rem) !important;
    font-weight: 420 !important;
    outline: none !important;
}

.fi-main :where(
    .pme-input:focus,
    .pme-select:focus,
    .pme-textarea:focus,
    .lab-input:focus,
    .lab-select:focus,
    .lab-textarea:focus,
    .td-workflow-select:focus,
    .td-admin-cleanup__field textarea:focus,
    .td-admin-cleanup__field input:focus,
    .td-admin-cleanup__field select:focus
) {
    border-color: color-mix(in srgb, var(--td-tool-accent) 48%, var(--td-tool-border-strong)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--td-tool-accent) 14%, transparent) !important;
}

.fi-main :where(.pme-matrix-wrap, .lab-matrix-wrap) {
    border: 1px solid var(--td-tool-border) !important;
    border-radius: var(--pb-card-radius, 14px) !important;
    background: var(--td-tool-card) !important;
    box-shadow: none !important;
}

.fi-main :where(.pme-matrix th, .lab-matrix th) {
    background: color-mix(in srgb, var(--td-tool-bg) 72%, var(--td-tool-card)) !important;
    color: var(--td-tool-muted) !important;
    font-weight: 620 !important;
}

.fi-main :where(.td-recycle__record) {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

@media (max-width: 980px) {
    .fi-main :where(.td-command__main, .td-workflow-hero, .td-recycle__record) {
        grid-template-columns: 1fr !important;
    }

    .fi-main :where(.td-lane__header, .td-workflow-job__head, .td-recycle__record-top, .td-admin-cleanup__card-head) {
        align-items: flex-start !important;
    }
}

@media (max-width: 640px) {
    .fi-main :where(
        .td-command,
        .td-workflow-picker,
        .td-workflow-card,
        .td-workflow-panel,
        .td-lane,
        .pme-card,
        .pme-toolbar,
        .lab-card,
        .lab-toolbar,
        .td-recycle__hero,
        .td-recycle__stat,
        .td-recycle__section,
        .td-admin-cleanup__hero,
        .td-admin-cleanup__controls,
        .td-admin-cleanup__card
    ) {
        border-radius: 12px !important;
    }

    .fi-main :where(.td-action, .td-workflow-button, .td-workflow-link, .pme-button, .lab-button) {
        width: 100% !important;
        min-height: 40px !important;
    }

    .fi-main :where(.td-recycle__actions) {
        justify-content: stretch !important;
    }
}

/* Broader custom admin page cohesion
   Accounts chasing, supplier directory and supplier import pages use older
   custom markup. Keep their structure, but align them with the shared app
   card, button, field and responsive language. */
.fi-main :where(.supplier-import-hub, .pb-supplier-directory) {
    --td-tool-card: var(--pb-card, var(--td-card-bg, #ffffff));
    --td-tool-bg: var(--pb-bg, var(--td-page-bg, #f4f2eb));
    --td-tool-border: color-mix(in srgb, var(--pb-border, var(--td-border, #d9d9d6)) 82%, transparent);
    --td-tool-border-strong: color-mix(in srgb, var(--pb-border, var(--td-border, #d9d9d6)) 72%, var(--pb-text, #202820));
    --td-tool-text: var(--pb-text, var(--td-ink, #202820));
    --td-tool-muted: var(--pb-muted, var(--td-ink-muted, #66716b));
    --td-tool-accent: var(--pb-primary, var(--td-accent, #5f8f6b));
    color: var(--td-tool-text) !important;
}

.fi-main :where(
    .sih-card,
    .sih-toolbar,
    .sih-batch,
    .sih-table-wrap,
    .pb-supplier-directory,
    .pb-supplier-directory__section,
    .pb-supplier-directory__fact,
    .pb-supplier-directory__contact
) {
    border: 1px solid var(--td-tool-border) !important;
    border-radius: var(--pb-card-radius, 14px) !important;
    background: var(--td-tool-card) !important;
    box-shadow: 0 1px 2px rgb(20 24 22 / 0.045) !important;
    color: var(--td-tool-text) !important;
}

.fi-main :where(.sih-card__head) {
    border-bottom: 1px solid var(--td-tool-border) !important;
    background: color-mix(in srgb, var(--td-tool-card) 94%, var(--td-tool-bg)) !important;
}

.fi-main :where(.sih-card__body) {
    padding: clamp(14px, 1.5vw, 20px) !important;
}

.fi-main :where(
    .sih-title,
    .pb-supplier-directory__title,
    .pb-supplier-directory__fact strong,
    .pb-supplier-directory__contact strong
) {
    color: var(--td-tool-text) !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
}

.fi-main :where(
    .sih-help,
    .sih-field__hint,
    .pb-supplier-directory__subtitle,
    .pb-supplier-directory__copy,
    .pb-supplier-directory__address
) {
    color: var(--td-tool-muted) !important;
    font-weight: 430 !important;
    line-height: 1.45 !important;
}

.fi-main :where(.sih-field label, .pb-supplier-directory__section-title) {
    color: color-mix(in srgb, var(--td-tool-accent) 78%, var(--td-tool-text)) !important;
    font-size: 0.68rem !important;
    font-weight: 680 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
}

.fi-main :where(.sih-button, .pb-supplier-directory__button) {
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--td-tool-border-strong) !important;
    border-radius: var(--pb-button-radius, 10px) !important;
    background: var(--td-tool-card) !important;
    color: var(--td-tool-text) !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    font-weight: 560 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.fi-main :where(.sih-button:hover, .pb-supplier-directory__button:hover) {
    border-color: color-mix(in srgb, var(--td-tool-accent) 42%, var(--td-tool-border-strong)) !important;
    background: color-mix(in srgb, var(--td-tool-accent) 7%, var(--td-tool-card)) !important;
    transform: none !important;
}

.fi-main :where(.sih-button.primary, .sih-button.accent, .pb-supplier-directory__button--primary) {
    border-color: var(--pb-button, var(--td-tool-text)) !important;
    background: var(--pb-button, var(--td-tool-text)) !important;
    color: var(--pb-button-text, #ffffff) !important;
}

.fi-main :where(.sih-button.danger) {
    border-color: color-mix(in srgb, #b84d42 30%, var(--td-tool-border)) !important;
    background: color-mix(in srgb, #b84d42 8%, var(--td-tool-card)) !important;
    color: #96352d !important;
}

.fi-main :where(.sih-grid, .sih-row, .pb-supplier-directory__workflow, .pb-supplier-directory__contacts) {
    display: grid !important;
    gap: clamp(10px, 1.2vw, 16px) !important;
}

.fi-main :where(.sih-grid) {
    grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr) !important;
}

.fi-main :where(.sih-row, .pb-supplier-directory__workflow, .pb-supplier-directory__contacts) {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important;
}

.fi-main :where(.sih-pill, .pb-supplier-directory__badge, .pb-supplier-directory__tag) {
    min-height: 24px !important;
    border-radius: 999px !important;
    border: 1px solid var(--td-tool-border) !important;
    background: color-mix(in srgb, var(--td-tool-bg) 70%, var(--td-tool-card)) !important;
    color: var(--td-tool-text) !important;
    font-size: 0.68rem !important;
    font-weight: 540 !important;
    line-height: 1 !important;
}

.fi-main :where(.sih-toolbar) {
    position: sticky !important;
    top: 8px !important;
    z-index: 25 !important;
    border-radius: var(--pb-card-radius, 14px) !important;
    background: color-mix(in srgb, var(--td-tool-card) 90%, var(--td-tool-bg)) !important;
    backdrop-filter: blur(10px) !important;
}

.fi-main :where(.sih-input, .sih-select, .sih-textarea, .sih-price-input) {
    min-height: var(--pb-control-height, 42px) !important;
    border: 1px solid var(--td-tool-border-strong) !important;
    border-radius: var(--pb-field-radius, 10px) !important;
    background: var(--pb-field-bg, #ffffff) !important;
    color: var(--td-tool-text) !important;
    padding: 9px 12px !important;
    font-size: var(--pb-field-font-size, 0.88rem) !important;
    font-weight: 420 !important;
    outline: none !important;
}

.fi-main :where(.sih-input:focus, .sih-select:focus, .sih-textarea:focus, .sih-price-input:focus) {
    border-color: color-mix(in srgb, var(--td-tool-accent) 48%, var(--td-tool-border-strong)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--td-tool-accent) 14%, transparent) !important;
}

.fi-main :where(.sih-table-wrap) {
    overflow: auto !important;
    max-width: 100% !important;
    box-shadow: none !important;
}

.fi-main :where(.sih-table) {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.fi-main :where(.sih-table th) {
    background: color-mix(in srgb, var(--td-tool-bg) 72%, var(--td-tool-card)) !important;
    color: var(--td-tool-muted) !important;
    font-weight: 620 !important;
}

.fi-main :where(.sih-table td, .sih-table th) {
    border-bottom: 1px solid var(--td-tool-border) !important;
    color: var(--td-tool-text) !important;
}

.fi-main :where(.pb-supplier-directory) {
    width: 100% !important;
    overflow: visible !important;
}

.fi-main :where(.pb-supplier-directory)::before {
    display: none !important;
}

.fi-main :where(.pb-supplier-directory__content) {
    display: grid !important;
    gap: 14px !important;
}

.fi-main :where(.pb-supplier-directory__header) {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.fi-main :where(.td-panel .td-list-row--dashboard) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 14px 16px !important;
    border: 1px solid var(--td-tool-border) !important;
    border-radius: calc(var(--pb-card-radius, 14px) - 4px) !important;
    background: var(--td-tool-card) !important;
    box-shadow: none !important;
}

.fi-main :where(.td-panel .td-list-row--dashboard + .td-list-row--dashboard) {
    margin-top: 10px !important;
}

.fi-main :where(.td-panel .td-list-row--dashboard strong) {
    font-weight: 620 !important;
}

@media (max-width: 980px) {
    .fi-main :where(.sih-grid, .pb-supplier-directory__header, .td-panel .td-list-row--dashboard) {
        grid-template-columns: 1fr !important;
    }

    .fi-main :where(.pb-supplier-directory__header) {
        flex-direction: column !important;
    }
}

@media (max-width: 640px) {
    .fi-main :where(.sih-card, .sih-toolbar, .pb-supplier-directory, .pb-supplier-directory__section) {
        border-radius: 12px !important;
    }

    .fi-main :where(.sih-button, .pb-supplier-directory__button) {
        width: 100% !important;
        min-height: 40px !important;
    }
}

/* Collapse Filament / Livewire loading spinner SVGs in action controls.
   Keep normal action icons visible; only loading indicators lose their
   footprint so they cannot create an empty icon gap before labels. */
.fi-body :where(.fi-btn, .fi-icon-btn, .fi-dropdown-list-item, .fi-ac, .td-sticky-actionbar, .td-record-sticky-action) svg.fi-loading-indicator,
.fi-body :where(.fi-btn, .fi-icon-btn, .fi-dropdown-list-item, .fi-ac, .td-sticky-actionbar, .td-record-sticky-action) .fi-loading-indicator,
.fi-body svg.fi-loading-indicator,
.fi-body .fi-loading-indicator {
    display: none !important;
    visibility: hidden !important;
    inline-size: 0 !important;
    block-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
}

/* ==========================================================================
   Needs verification
   --------------------------------------------------------------------------
   These areas intentionally remain in place because they contain responsive
   or Filament-specific overrides where deleting by selector name alone could
   change the current live look. They should be cleaned manually page-by-page:
   - .td-card--journey / .td-flow-rail responsive journey rules
   - .td-artwork-charge-panel and .td-artwork-source-toggle invoice controls
   - .td-product-lines repeater action button rules
   - broad Filament shell rules such as .fi-main, .fi-topbar and .fi-sidebar
   ========================================================================== */


/* =====================================================================
   PHASE 1 ACCESSIBILITY FIXES (Manus, surgical, end-of-file authority)
   Goal: meet WCAG AA contrast without changing layout, spacing, dark mode
   or dropdown/popover containment. Hue preserved; only lightness lowered.
   ===================================================================== */

/* 1) Active sidebar item: white text on lime failed (2.40). Darken active bg. */
:root,
html[data-pb-theme="light"],
html.fi {
    --td-nav-active-bg: #63801E;        /* was #8CB52B -> white text 4.51 AA */
    --pb-shell-nav-active-bg: #63801E;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: #63801E !important;     /* authoritative; beats earlier 3 copies */
    color: #FFFFFF !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #FFFFFF !important;
}

/* 2) Hero status stat tiles: amber white-text failed (2.96). Darken amber only.
      production/ready/due already pass with white text, so left unchanged. */
.td-dashboard-stat--status-action,
.td-dashboard-stat--amber {
    --pb-status-action: #9C6E22;        /* was #C58B2B -> white text 4.52 AA */
    --td-stat-color: #9C6E22;
    background: #9C6E22 !important;
}

/* 3) Focus ring: lime on white was nearly invisible (1.89). Strengthen. */
:root,
html.fi {
    --td-focus-ring: #668029;           /* darker, visible focus colour */
}
:where(.fi-input, .fi-select-input, .fi-btn, a, button, input, select, textarea):focus-visible {
    outline: 2px solid #668029 !important;
    outline-offset: 2px !important;
}

/* Dark mode: keep active text readable on the darkened lime too (white passes). */
.fi.dark .fi-sidebar-item.fi-active .fi-sidebar-item-button,
html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: #63801E !important;
    color: #FFFFFF !important;
}


/* =====================================================================
   ROUND 2 UI/UX FIXES (Manus, surgical, end-of-file authority)
   Addresses: active-item class mismatch, settings tabs not responsive,
   3-dot row-actions dropdown clipping, per-page select cramped.
   No layout-wide changes; protected containment rules untouched.
   ===================================================================== */

/* R2-1) ACTIVE SIDEBAR ITEM — correct class is .fi-sidebar-item-btn (this
   Filament build), not .fi-sidebar-item-button. Earlier rules targeted the
   stale class and never applied, leaving the active item pale/low-contrast.
   Re-target the live class so the accessible green + white text actually
   render. Active bg #63801E gives white-text contrast 4.53 (AA). */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: #63801E !important;
    border-radius: 8px !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg,
.fi-sidebar-item.fi-active .fi-sidebar-item-btn svg {
    color: #FFFFFF !important;
    fill: currentColor !important;
}
/* Hover state on non-active items: keep readable (light tint, dark text). */
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    background-color: rgba(255,255,255,0.06) !important;
}
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: #FFFFFF !important;
}
/* Dark mode parity */
.fi.dark .fi-sidebar-item.fi-active .fi-sidebar-item-btn,
html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: #63801E !important;
}

/* R2-2) SETTINGS TABS RESPONSIVE — nav.fi-tabs.fi-contained holds 7 tab
   buttons that overflow/overlap on narrow widths. Make the tab strip scroll
   horizontally with no wrapping/overlap, keep items intact, and tidy spacing.
   Applies at all widths but only "kicks in" visually when space is tight. */
nav.fi-tabs,
.fi-tabs.fi-contained,
.fi-sc-tabs .fi-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    gap: 0.25rem !important;
    max-width: 100% !important;
}
nav.fi-tabs .fi-tabs-item,
.fi-tabs.fi-contained .fi-tabs-item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}
/* Thin, unobtrusive scrollbar for the tab strip (WebKit). */
nav.fi-tabs::-webkit-scrollbar,
.fi-tabs.fi-contained::-webkit-scrollbar { height: 6px !important; }
nav.fi-tabs::-webkit-scrollbar-thumb,
.fi-tabs.fi-contained::-webkit-scrollbar-thumb {
    background: rgba(38,53,31,0.28) !important;
    border-radius: 999px !important;
}
/* Active tab readability: dark green text + clear underline. */
nav.fi-tabs .fi-tabs-item.fi-active,
.fi-tabs.fi-contained .fi-tabs-item.fi-active {
    color: #26351F !important;
}

/* R2-3) 3-DOT ROW ACTIONS DROPDOWN — panel was cramped/clipped at the right
   table edge. Give it a sensible min-width and comfortable item padding, and
   ensure it can paint outside the table without being squeezed. This does NOT
   touch the protected .fi-dropdown-panel containment/overflow logic; it only
   sets sizing/padding on the actions menu. */
.fi-dropdown-panel {
    min-width: 12rem !important;
}
.fi-dropdown-list {
    padding: 0.375rem !important;
}
.fi-dropdown-list-item {
    padding-block: 0.5rem !important;
    padding-inline: 0.75rem !important;
    white-space: nowrap !important;
}
/* The table action cell must not clip the trigger to a sliver. */
.fi-ta-actions,
.fi-ta-row-actions {
    flex: 0 0 auto !important;
    min-width: max-content !important;
}

/* R2-4) PER-PAGE SELECT — native select looked cramped. Normalise height,
   padding, radius and font so it matches other inputs. */
.fi-pagination .fi-select-input,
.fi-pagination select.fi-select-input {
    min-height: 2.25rem !important;
    padding-block: 0.25rem !important;
    padding-inline: 0.625rem 2rem !important;
    border-radius: 0.5rem !important;
    line-height: 1.4 !important;
    font-size: 0.875rem !important;
}
.fi-pagination .fi-input-wrp {
    min-width: 4.5rem !important;
}


/* =====================================================================
   ROUND 3 — PREMIUM LOGIN PAGE  (Manus)
   Scoped strictly to Filament's simple (auth) layout so nothing leaks
   into the authenticated app. Pure presentation; no markup/logic change.
   Brand palette: deep greens + lime accent (#8CB52B / #63801E / #26351F).
   ===================================================================== */

/* Brand backdrop: layered gradient + soft glow, replaces the empty cream. */
body:has(.fi-simple-layout),
.fi-body:has(.fi-simple-layout) {
    background:
        radial-gradient(1200px 600px at 12% -10%, rgba(140,181,43,0.22), transparent 60%),
        radial-gradient(1000px 700px at 110% 120%, rgba(99,128,30,0.30), transparent 55%),
        linear-gradient(135deg, #1c2a16 0%, #26351F 42%, #2f4326 100%) !important;
    min-height: 100vh !important;
}

.fi-simple-layout {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
}
/* Subtle dotted texture overlay for depth (very low contrast). */
.fi-simple-layout::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px) !important;
    background-size: 22px 22px !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.fi-simple-main-ctn {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1rem !important;
    position: relative !important;
    z-index: 1 !important;
}

/* The auth card: elevated, rounded, glassy white with a green hairline. */
main.fi-simple-main {
    width: 100% !important;
    max-width: 27rem !important;
    background: rgba(255,255,255,0.98) !important;
    border: 1px solid rgba(140,181,43,0.35) !important;
    border-radius: 1.25rem !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 24px 60px -18px rgba(15,26,10,0.55),
        0 8px 24px -12px rgba(15,26,10,0.40) !important;
    padding: 2.25rem 2rem 2rem !important;
    backdrop-filter: blur(6px) !important;
}
/* Accent strip across the top of the card. */
main.fi-simple-main::before {
    content: "" !important;
    display: block !important;
    height: 4px !important;
    width: 64px !important;
    margin: 0 auto 1.25rem !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #8CB52B, #63801E) !important;
}

/* Logo + heading area */
.fi-simple-header {
    text-align: center !important;
}
.fi-simple-header .fi-logo,
main.fi-simple-main img[alt],
main.fi-simple-main .fi-logo {
    margin: 0 auto 0.5rem !important;
    max-height: 56px !important;
    width: auto !important;
}
.fi-simple-header-heading,
main.fi-simple-main h1 {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* Keep the login card calm: logo first, then one simple instruction. */
.fi-simple-header::after {
    content: "Use your staff email and password to continue." !important;
    display: block !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #6b7766 !important;
    margin-top: 0.45rem !important;
    letter-spacing: 0 !important;
}

/* Form fields: comfortable, clearly focusable */
main.fi-simple-main .fi-input,
main.fi-simple-main .fi-input-wrp {
    border-radius: 0.625rem !important;
}
main.fi-simple-main .fi-input-wrp {
    border: 1px solid #d8ddcf !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
main.fi-simple-main .fi-input-wrp:focus-within {
    border-color: #63801E !important;
    box-shadow: 0 0 0 3px rgba(99,128,30,0.18) !important;
}
main.fi-simple-main .fi-fo-field-wrp-label,
main.fi-simple-main label {
    font-weight: 600 !important;
    color: #2c3a23 !important;
}

/* Primary "Sign in" button: gradient + hover lift */
main.fi-simple-main .fi-btn-color-primary,
main.fi-simple-main button[type="submit"] {
    background: linear-gradient(180deg, #6f9223 0%, #5c7a1c 100%) !important;
    border: none !important;
    border-radius: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    padding-block: 0.75rem !important;
    box-shadow: 0 10px 20px -10px rgba(92,122,28,0.8) !important;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
main.fi-simple-main .fi-btn-color-primary:hover,
main.fi-simple-main button[type="submit"]:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
    box-shadow: 0 16px 26px -12px rgba(92,122,28,0.9) !important;
}

/* Remember-me row tidy */
main.fi-simple-main .fi-fo-checkbox,
main.fi-simple-main .fi-checkbox-input {
    accent-color: #63801E !important;
}

/* Responsive: phones & Z Fold cover screen */
@media (max-width: 480px) {
    .fi-simple-main-ctn { padding: 1.25rem 0.75rem !important; }
    main.fi-simple-main { padding: 1.75rem 1.25rem 1.5rem !important; border-radius: 1rem !important; }
    
}
@media (max-width: 300px) {
    main.fi-simple-main { padding: 1.25rem 0.9rem 1.1rem !important; }
    .fi-simple-header::after { font-size: 0.75rem !important; }
}


/* =====================================================================
   ROUND 3 — ICON WEIGHT NORMALISATION  (Manus)
   Some Heroicons render with a heavy stroke that looks "thick". Where an
   outline (stroked) icon remains, thin the stroke so all nav icons read
   crisp and light. Filled icons (no stroke) are unaffected. Sidebar only.
   ===================================================================== */
.fi-sidebar .fi-icon svg[fill="none"],
.fi-sidebar-item .fi-icon svg[fill="none"],
.fi-sidebar-group-label .fi-icon svg[fill="none"],
.fi-sidebar svg[stroke][fill="none"] {
    stroke-width: 1.5 !important;       /* default Heroicon outline is ~1.5; clamp heavier overrides */
    vector-effect: non-scaling-stroke !important;
}
/* Consistent, slightly smaller nav icon box for a tidier rail. */
.fi-sidebar-item .fi-icon,
.fi-sidebar-group-label .fi-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
}