/* MOTIF UI — V1.0 RELEASE CANDIDATE (2026-10-08)
   Canonical markup: invpos-* classes extracted from the approved Fast Moving Products page.
   All selectors scoped under .motif except global SweetAlert and toast overlays.
   Keep the existing HTML/JS hooks. See motif-component-reference.md.
   This is a candidate pending browser screenshot/regression sign-off. */

/* ============================================================================
   MOTIF UI — Portable Design System
   Version: 2.0.0-bootstrap-adapter | October 2026
   ============================================================================
   PURPOSE
   A reusable, opt-in design foundation for PHP, Bootstrap, and other web apps.
   No JavaScript dependency. Scoped Bootstrap 5 + DataTables 1.13 adapters.

   QUICK START
   1. Load this stylesheet AFTER Bootstrap (if your app uses Bootstrap).
      <link rel="stylesheet" href="assets/css/motif-ui.css">
   2. Add class="motif" to the page's root wrapper or <body>.
   3. Use .motif-* classes on elements you want to migrate.
   4. For dark mode: set data-theme="dark" on the SAME .motif element.
      Example: <body class="motif" data-theme="dark">
   5. For system theme: remove data-theme; CSS follows OS preference.
      For a forced light theme: data-theme="light".

   EDITING GUIDE
   - Change visual identity in SECTION 01 (tokens) first.
   - Change dark palette in SECTION 02.
   - Change component appearance in SECTIONS 04–13.
   - Do not rename token keys without searching every reference.
   - Avoid broad rules like .btn, table, input or body: they may break legacy UI.
   - This stylesheet is intentionally scoped; old pages stay unchanged.

   CONTENTS
   01. Typography / sizing / spacing / shape tokens
   02. Light / dark semantic colors
   03. Root canvas, accessibility and utilities
   04. Page headings and actions
   05. Buttons, badges and status
   06. Bootstrap / DataTables adapters and table utilities
   07. Forms and inline validation
   08. Detail / view sections
   09. Banners / alerts
   10. Empty states
   11. Native toast
   12. Modal/dialog styling hooks
   13. Navigation and dashboard primitives
   14. Responsive and print helpers

   INTEGRATION NOTE
   This is a reusable FOUNDATION, not a drop-in rewrite of the locked PHP
   pages. Existing page-specific markup, JS, RBAC and business logic remain.
   Match/extend these classes during one-page-at-a-time migration and review.
   ============================================================================ */

/* 01 — FOUNDATION TOKENS ------------------------------------------------------
   Main readability dial: --motif-font-base. Current baseline: 14px.
   All component typography derives from these tokens where practical. */
.motif {
  --motif-font-family: 'Nunito', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --motif-font-xs: 12px;          /* micro labels / compact metadata ONLY */
  --motif-font-sm: 13px;          /* helper text, compact field labels */
  --motif-font-base: 14px;        /* standard reading text — adjustable */
  --motif-font-md: 16px;          /* section headings */
  --motif-font-lg: 19px;          /* large section / card numbers */
  --motif-font-title: 24px;       /* page title */
  --motif-line-height: 1.5;
  --motif-space-1: 4px;
  --motif-space-2: 8px;
  --motif-space-3: 12px;
  --motif-space-4: 16px;
  --motif-space-5: 20px;
  --motif-space-6: 24px;
  --motif-space-8: 32px;
  --motif-radius-input: 8px;
  --motif-radius-button: 10px;
  --motif-radius-panel: 14px;
  --motif-control-height: 42px;
  --motif-content-width: 1440px;
  --motif-transition: 160ms ease;
}

/* 02 — SEMANTIC COLORS --------------------------------------------------------
   Components refer to meaning (surface/text/border), NOT hardcoded colors.
   Adjust palette here to rebrand an entire project. */
.motif, .motif[data-theme="light"] {
  color-scheme: light;
  --motif-page: #f8f9fa;
  --motif-surface: #ffffff;
  --motif-surface-subtle: #f5f7f8;
  --motif-surface-hover: #f0f4f4;
  --motif-text: #202b34;
  --motif-text-secondary: #63717d;
  --motif-text-tertiary: #87929b;
  --motif-border: #e3e8ec;
  --motif-border-strong: #cbd4db;
  --motif-primary: #168553;
  --motif-primary-hover: #116c43;
  --motif-primary-tint: #e8f5ee;
  --motif-on-primary: #ffffff;
  --motif-info: #2877b8;
  --motif-info-tint: #eff6fc;
  --motif-warning: #a96b17;
  --motif-warning-tint: #fff7e9;
  --motif-danger: #c44747;
  --motif-danger-tint: #fff0f0;
  --motif-success: #168553;
  --motif-success-tint: #eaf7ef;
  --motif-shadow: 0 5px 22px rgb(21 37 49 / 5%);
  --motif-focus: 0 0 0 3px rgb(22 133 83 / 17%);
}
.motif[data-theme="dark"] {
  color-scheme: dark;
  --motif-page: #151b23;
  --motif-surface: #222b35;
  --motif-surface-subtle: #293541;
  --motif-surface-hover: #33414e;
  --motif-text: #edf2f6;
  --motif-text-secondary: #b5c1cb;
  --motif-text-tertiary: #8e9eaa;
  --motif-border: #394653;
  --motif-border-strong: #52616f;
  --motif-primary: #4fc18b;
  --motif-primary-hover: #64d19d;
  --motif-primary-tint: #203d33;
  --motif-on-primary: #10251b;
  --motif-info: #80bfff;
  --motif-info-tint: #21384c;
  --motif-warning: #f2c279;
  --motif-warning-tint: #453825;
  --motif-danger: #ff9a9a;
  --motif-danger-tint: #492b30;
  --motif-success: #66d79b;
  --motif-success-tint: #244535;
  --motif-shadow: 0 8px 30px rgb(0 0 0 / 18%);
  --motif-focus: 0 0 0 3px rgb(79 193 139 / 27%);
}
@media (prefers-color-scheme: dark) {
  .motif:not([data-theme]) {
    color-scheme: dark;
    --motif-page:#151b23; --motif-surface:#222b35;
    --motif-surface-subtle:#293541; --motif-surface-hover:#33414e;
    --motif-text:#edf2f6; --motif-text-secondary:#b5c1cb;
    --motif-text-tertiary:#8e9eaa; --motif-border:#394653;
    --motif-border-strong:#52616f; --motif-primary:#4fc18b;
    --motif-primary-hover:#64d19d; --motif-primary-tint:#203d33;
    --motif-on-primary:#10251b; --motif-info:#80bfff;
    --motif-info-tint:#21384c; --motif-warning:#f2c279;
    --motif-warning-tint:#453825; --motif-danger:#ff9a9a;
    --motif-danger-tint:#492b30; --motif-success:#66d79b;
    --motif-success-tint:#244535; --motif-shadow:0 8px 30px rgb(0 0 0 / 18%);
    --motif-focus:0 0 0 3px rgb(79 193 139 / 27%);
  }
}

/* 03 — ROOT AND SHARED UTILITIES ---------------------------------------------
   Apply .motif to a page wrapper; no site-wide element selectors outside it. */
.motif { font-family:var(--motif-font-family);font-size:var(--motif-font-base);line-height:var(--motif-line-height);color:var(--motif-text);background:var(--motif-page); }
.motif *, .motif *::before, .motif *::after {box-sizing:border-box;}
.motif .motif-muted {color:var(--motif-text-secondary);}
.motif .motif-faint {color:var(--motif-text-tertiary);}
.motif .motif-small {font-size:var(--motif-font-sm);}
.motif .motif-xs {font-size:var(--motif-font-xs);}
.motif .motif-surface {background:var(--motif-surface);border:1px solid var(--motif-border);border-radius:var(--motif-radius-panel);}
.motif .motif-divider {height:1px;border:0;background:var(--motif-border);margin:var(--motif-space-6) 0;}
.motif .motif-stack {display:flex;flex-direction:column;gap:var(--motif-space-4);}
.motif .motif-inline {display:flex;align-items:center;gap:var(--motif-space-2);flex-wrap:wrap;}
.motif :where(a) {color:var(--motif-primary);}
.motif :where(button,input,select,textarea,a):focus-visible {outline:2px solid var(--motif-primary);outline-offset:2px;}

/* 04 — PAGE HEADER ------------------------------------------------------------
   Example: <div class="motif-page-header"><div>...</div><div>actions</div></div> */
.motif .motif-page {max-width:var(--motif-content-width);margin-inline:auto;padding:var(--motif-space-6);}
.motif .motif-page-header {display:flex;align-items:flex-start;justify-content:space-between;gap:var(--motif-space-4);margin-bottom:var(--motif-space-6);}
.motif .motif-page-title {font-size:var(--motif-font-title);font-weight:700;line-height:1.25;letter-spacing:-.025em;margin:0;}
.motif .motif-page-subtitle {font-size:var(--motif-font-sm);color:var(--motif-text-secondary);margin:6px 0 0;}
.motif .motif-section-title {font-size:var(--motif-font-md);font-weight:700;margin:0;}
.motif .motif-section-subtitle {font-size:var(--motif-font-sm);color:var(--motif-text-secondary);margin:4px 0 0;}

/* 05 — BUTTONS AND STATUS -----------------------------------------------------
   Buttons: motif-btn + motif-btn-primary / motif-btn-secondary / motif-btn-ghost.
   Keep destructive actions explicit: motif-btn-danger. */
.motif .motif-btn {min-height:var(--motif-control-height);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 15px;border:1px solid transparent;border-radius:var(--motif-radius-button);font:600 var(--motif-font-sm)/1.3 var(--motif-font-family);text-decoration:none;cursor:pointer;transition:background var(--motif-transition),border-color var(--motif-transition);}
.motif .motif-btn-primary {background:var(--motif-primary);color:var(--motif-on-primary);}
.motif .motif-btn-primary:hover {background:var(--motif-primary-hover);color:var(--motif-on-primary);}
.motif .motif-btn-secondary {background:var(--motif-primary-tint);color:var(--motif-primary);}
.motif .motif-btn-ghost {background:transparent;border-color:var(--motif-border);color:var(--motif-text);}
.motif .motif-btn-ghost:hover {background:var(--motif-surface-hover);}
.motif .motif-btn-danger {background:var(--motif-danger-tint);color:var(--motif-danger);}
.motif .motif-btn:disabled {opacity:.5;cursor:not-allowed;}
.motif .motif-badge {display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:8px;background:var(--motif-surface-subtle);color:var(--motif-text-secondary);font-size:var(--motif-font-xs);font-weight:700;}
.motif .motif-badge-success {background:var(--motif-success-tint);color:var(--motif-success);}
.motif .motif-badge-warning {background:var(--motif-warning-tint);color:var(--motif-warning);}
.motif .motif-badge-danger {background:var(--motif-danger-tint);color:var(--motif-danger);}
.motif .motif-badge-info {background:var(--motif-info-tint);color:var(--motif-info);}

/* 06 — BOOTSTRAP 5 + DATATABLES 1.13 ADAPTER ------------------------------
   Bootstrap owns table structure, layout and responsive behavior.
   DataTables owns sorting, pagination, searching and AJAX.
   Motif ONLY adjusts their appearance inside .motif.

   Recommended markup:
     <div class="motif table-responsive">
       <table class="table table-hover motif-data-table">...</table>
     </div>

   Load order: Bootstrap CSS -> DataTables Bootstrap CSS -> motif-ui.css.
   Avoid Bootstrap .table-bordered for our quiet Table V1.
   NOTE: DataTables adds .dataTables_wrapper around tables automatically. */
.motif {
  --bs-body-font-size:var(--motif-font-base);
  --bs-body-color:var(--motif-text);
  --bs-border-color:var(--motif-border);
  --bs-secondary-color:var(--motif-text-secondary);
}
.motif .table.motif-data-table {
  --bs-table-bg:var(--motif-surface);
  --bs-table-color:var(--motif-text);
  --bs-table-border-color:var(--motif-border);
  --bs-table-hover-bg:var(--motif-surface-hover);
  --bs-table-hover-color:var(--motif-text);
  margin-bottom:0;
  font-size:var(--motif-font-base);
}
.motif .table.motif-data-table > :not(caption) > * > * {
  padding:11px 16px;
  border-left:0;
  border-right:0;
  border-top:0;
  border-bottom:1px solid var(--motif-border);
  box-shadow:none;
  vertical-align:middle;
}
.motif .table.motif-data-table thead th {
  color:var(--motif-text-secondary);
  background:var(--motif-surface-subtle);
  font-size:var(--motif-font-sm);
  font-weight:600;
  white-space:nowrap;
}
.motif .table.motif-data-table tbody tr:last-child td {border-bottom:0;}
.motif .table.motif-data-table tbody tr:hover > * {background:var(--motif-surface-hover);}
.motif .motif-row-title {font-weight:600;color:var(--motif-text);}
.motif .motif-row-meta {font-size:var(--motif-font-sm);color:var(--motif-text-tertiary);margin-top:3px;}
.motif .motif-table-toolbar,.motif .motif-table-footer {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px 16px;}
.motif .motif-table-footer {border-top:1px solid var(--motif-border);font-size:var(--motif-font-sm);color:var(--motif-text-secondary);}
.motif .motif-align-right {text-align:right!important;}
/* DataTables Bootstrap 5 pagination: adjust color/shape, not pagination logic. */
.motif .dataTables_wrapper .dataTables_info,
.motif .dataTables_wrapper .dataTables_length {color:var(--motif-text-secondary);font-size:var(--motif-font-sm);}
.motif .dataTables_wrapper .page-link {border-radius:8px;color:var(--motif-text-secondary);background:var(--motif-surface);border-color:transparent;}
.motif .dataTables_wrapper .page-item.active .page-link {color:var(--motif-on-primary);background:var(--motif-primary);border-color:var(--motif-primary);}
.motif .dataTables_wrapper .page-item:not(.active):not(.disabled) .page-link:hover {background:var(--motif-surface-hover);border-color:var(--motif-border);}
/* Bootstrap forms/buttons: configure through native variables, preserve behavior. */
.motif .form-control,.motif .form-select {background-color:var(--motif-surface);color:var(--motif-text);border-color:var(--motif-border-strong);border-radius:var(--motif-radius-input);font-size:var(--motif-font-base);}
.motif .form-control:focus,.motif .form-select:focus {border-color:var(--motif-primary);box-shadow:var(--motif-focus);}
.motif .btn {--bs-btn-border-radius:var(--motif-radius-button);--bs-btn-font-size:var(--motif-font-base);}
.motif .btn-primary {--bs-btn-bg:var(--motif-primary);--bs-btn-border-color:var(--motif-primary);--bs-btn-hover-bg:var(--motif-primary-hover);--bs-btn-hover-border-color:var(--motif-primary-hover);--bs-btn-color:var(--motif-on-primary);}

/* 07 — FORMS AND INLINE VALIDATION -------------------------------------------
   .motif-field contains label, input, optional hint, optional error.
   Toggle .is-invalid on .motif-field when client/server validation fails.
   Add aria-invalid="true" and aria-describedby="field-error-id" to input. */
.motif .motif-field {display:flex;flex-direction:column;gap:7px;min-width:0;}
.motif .motif-label {font-size:var(--motif-font-sm);font-weight:700;color:var(--motif-text-secondary);}
.motif .motif-required {color:var(--motif-danger);}
.motif .motif-input,.motif .motif-select,.motif .motif-textarea {width:100%;min-height:var(--motif-control-height);padding:10px 12px;border:1px solid var(--motif-border-strong);border-radius:var(--motif-radius-input);background:var(--motif-surface);color:var(--motif-text);font:400 var(--motif-font-base)/1.4 var(--motif-font-family);transition:border-color var(--motif-transition),box-shadow var(--motif-transition);}
.motif .motif-input::placeholder,.motif .motif-textarea::placeholder {color:var(--motif-text-tertiary);}
.motif .motif-input:focus,.motif .motif-select:focus,.motif .motif-textarea:focus {outline:0;border-color:var(--motif-primary);box-shadow:var(--motif-focus);}
.motif .motif-input:disabled,.motif .motif-select:disabled {background:var(--motif-surface-subtle);opacity:.75;}
.motif .motif-field-hint {font-size:var(--motif-font-sm);color:var(--motif-text-tertiary);}
.motif .motif-field-error {display:none;font-size:var(--motif-font-sm);color:var(--motif-danger);}
.motif .motif-field.is-invalid .motif-field-error {display:block;}
.motif .motif-field.is-invalid :is(.motif-input,.motif-select,.motif-textarea) {border-color:var(--motif-danger);}
.motif .motif-field.is-valid :is(.motif-input,.motif-select,.motif-textarea) {border-color:var(--motif-success);}
.motif .motif-form-section {padding:24px 0;border-bottom:1px solid var(--motif-border);}
.motif .motif-form-section:last-child {border-bottom:0;}

/* 08 — DETAIL / VIEW V1 -------------------------------------------------------
   Use sections with whitespace rather than a grid of decorative cards. */
.motif .motif-detail-section {padding:var(--motif-space-6) 0;border-top:1px solid var(--motif-border);}
.motif .motif-detail-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.motif .motif-detail-label {font-size:var(--motif-font-sm);color:var(--motif-text-secondary);margin-bottom:5px;}
.motif .motif-detail-value {font-size:var(--motif-font-base);font-weight:600;overflow-wrap:anywhere;}

/* 09 — BANNERS / ALERTS V1 ----------------------------------------------------
   Persistent page context; unlike a toast, it does NOT auto-dismiss.
   Only show close buttons for notices that are safe to dismiss. */
.motif .motif-alert {display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid var(--motif-border);border-radius:var(--motif-radius-panel);background:var(--motif-surface);}
.motif .motif-alert-info {background:var(--motif-info-tint);border-color:transparent;--motif-alert-accent:var(--motif-info);}
.motif .motif-alert-warning {background:var(--motif-warning-tint);border-color:transparent;--motif-alert-accent:var(--motif-warning);}
.motif .motif-alert-success {background:var(--motif-success-tint);border-color:transparent;--motif-alert-accent:var(--motif-success);}
.motif .motif-alert-danger {background:var(--motif-danger-tint);border-color:transparent;--motif-alert-accent:var(--motif-danger);}
.motif .motif-alert-icon {flex:0 0 22px;color:var(--motif-alert-accent,var(--motif-text-secondary));}
.motif .motif-alert-body {flex:1;min-width:0;}
.motif .motif-alert-title {font-size:var(--motif-font-base);font-weight:700;margin:0 0 4px;}
.motif .motif-alert-text {font-size:var(--motif-font-sm);color:var(--motif-text-secondary);margin:0;}
.motif .motif-alert-action {display:inline-block;margin-top:10px;font-size:var(--motif-font-sm);font-weight:700;color:var(--motif-alert-accent,var(--motif-primary));}

/* 10 — EMPTY STATES V1 --------------------------------------------------------
   No data, no search matches, and no filter matches share one visual structure.
   Content/action wording should differ based on the reason for emptiness. */
.motif .motif-empty {display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:52px 24px;min-height:260px;}
.motif .motif-empty-icon {display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--motif-surface-subtle);color:var(--motif-text-secondary);margin-bottom:16px;}
.motif .motif-empty-title {font-size:var(--motif-font-md);font-weight:700;margin:0 0 6px;}
.motif .motif-empty-description {max-width:380px;font-size:var(--motif-font-sm);color:var(--motif-text-secondary);margin:0 0 18px;}

/* 11 — NATIVE TOAST V1 --------------------------------------------------------
   CSS only: your JS creates/removes the toast, pauses on hover and controls
   progress. Use top-right .motif-toast-region outside clipping containers. */
.motif .motif-toast-region {position:fixed;top:20px;right:20px;z-index:1090;width:min(320px,calc(100vw - 32px));pointer-events:none;}
.motif .motif-toast {position:relative;display:flex;align-items:flex-start;gap:12px;min-height:52px;padding:13px 16px 16px;border:1px solid var(--motif-border);border-radius:9px;background:var(--motif-surface);box-shadow:var(--motif-shadow);overflow:hidden;pointer-events:auto;}
.motif .motif-toast-title {font-size:var(--motif-font-sm);font-weight:700;}
.motif .motif-toast-message {font-size:var(--motif-font-sm);color:var(--motif-text-secondary);}
.motif .motif-toast-progress {position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--motif-success);transform-origin:left;}
.motif .motif-toast[data-type="error"] .motif-toast-progress {background:var(--motif-danger);}
.motif .motif-toast[data-type="warning"] .motif-toast-progress {background:var(--motif-warning);}
.motif .motif-toast[data-type="info"] .motif-toast-progress {background:var(--motif-info);}

/* 12 — DIALOG / SWEETALERT HOOKS ---------------------------------------------
   Optional customClass for SweetAlert2:
   customClass:{popup:'motif-dialog',confirmButton:'motif-btn motif-btn-primary'}
   SweetAlert2 injects dialogs outside .motif: apply class directly to popup.
   NOTE: CSS below uses standalone .motif-dialog intentionally. */
.motif-dialog {border-radius:16px!important;background:var(--motif-surface,#fff)!important;color:var(--motif-text,#202b34)!important;padding:24px!important;}
.motif-dialog .swal2-title {font-size:20px!important;font-weight:700!important;}
.motif-dialog .swal2-html-container {font-size:14px!important;line-height:1.5!important;}

/* 13 — NAVIGATION AND DASHBOARD PRIMITIVES -----------------------------------
   These are reusable visual hooks. Do not replace sidebar RBAC, chart logic,
   date filtering, or persistence scripts with CSS. */
.motif .motif-nav {background:var(--motif-surface);border-right:1px solid var(--motif-border);}
.motif .motif-nav-link {display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:var(--motif-text-secondary);text-decoration:none;font-size:var(--motif-font-sm);}
.motif .motif-nav-link:hover {background:var(--motif-surface-hover);color:var(--motif-text);}
.motif .motif-nav-link.is-active {background:var(--motif-primary-tint);color:var(--motif-primary);font-weight:700;}
.motif .motif-stat-label {font-size:var(--motif-font-sm);color:var(--motif-text-secondary);}
.motif .motif-stat-value {font-size:clamp(21px,2vw,29px);font-weight:700;letter-spacing:-.03em;line-height:1.25;}
.motif .motif-scroll-panel {max-height:252px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--motif-border-strong) transparent;}
.motif .motif-scroll-panel .table.motif-data-table thead th {position:sticky;top:0;z-index:1;}

/* 14 — RESPONSIVE / PRINT ----------------------------------------------------- */
@media (max-width:767px) {
  .motif .motif-page {padding:16px;}
  .motif .motif-page-header {flex-direction:column;align-items:stretch;}
  .motif .motif-detail-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .motif .table.motif-data-table td,.motif .table.motif-data-table th {padding:11px 12px;}
}
@media (max-width:480px) {
  .motif .motif-detail-grid {grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce) {
  .motif *, .motif *::before, .motif *::after {transition-duration:.01ms!important;animation-duration:.01ms!important;}
}
@media print {
  .motif {background:#fff!important;color:#111!important;}
  .motif .motif-no-print {display:none!important;}
  .motif .motif-surface,.motif .motif-table-wrap {box-shadow:none!important;}
}


/* ==========================================================================
   15 — LOCKED TABLE / PAGE COMPONENTS — GOLDEN REFERENCE
   ==========================================================================
   Reuses the locked existing invpos-* markup while pages migrate to Motif.
   Scoped to .motif so other systems/pages are not affected.
   The invpos-* names below are the canonical V1 HTML contract.
   ========================================================================== */

.motif .invpos-table-shell{background:#fff;border:1px solid #e6e8eb;border-radius:14px;overflow:visible}
.motif .invpos-table-toolbar{min-height:64px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #eceef0}
.motif .invpos-table-search{flex:1;max-width:520px;display:flex;align-items:center;gap:10px}
.motif .invpos-table-search i{font-size:19px;color:#737982}
.motif .invpos-table-search input{width:100%;height:40px;border:0;outline:0;box-shadow:none;background:transparent;font-size:14px;color:#20242a}
.motif .invpos-table-search input::placeholder{color:#969ba3}
.motif .invpos-table-toolbar-actions{display:flex;align-items:center;gap:8px}
.motif .invpos-table-tool, .motif .invpos-icon-button{height:38px;border:1px solid #e2e5e9;background:#fff;color:#41464d;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;transition:background-color .15s ease,border-color .15s ease}
.motif .invpos-table-tool{padding:0 12px;gap:7px}.motif .invpos-icon-button{width:38px;padding:0}
.motif .invpos-table-tool:hover, .motif .invpos-icon-button:hover{background:#f7f8f9;border-color:#d8dce1}
.motif .invpos-table-toolbar{flex-wrap:wrap}
.motif .invpos-table-search{min-width:280px}
.motif .invpos-table-toolbar-actions{flex:1;justify-content:flex-end;min-width:0}
.motif .invpos-inline-filters{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.motif .invpos-inline-filter{position:relative;display:inline-flex;align-items:center}
.motif .invpos-inline-filter select{
    height:36px;
    min-width:104px;
    max-width:150px;
    padding:0 30px 0 11px;
    border:1px solid #e2e5e9;
    border-radius:9px;
    outline:0;
    background:#fff;
    color:#555b62;
    font-size:12px;
    font-weight:500;
    line-height:36px;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.motif .invpos-inline-filter:nth-child(3) select{min-width:122px;max-width:160px}
.motif .invpos-inline-filter select:hover{background:#f9fafb;border-color:#d8dce1}
.motif .invpos-inline-filter select:focus{border-color:#b9cfd2;box-shadow:0 0 0 3px rgba(18,117,128,.07)}
.motif .invpos-inline-filter.is-active select{background:#f4f8f8;border-color:#bfd6d8;color:#155f67}
.motif .invpos-inline-filter i{position:absolute;right:9px;pointer-events:none;color:#858b92;font-size:15px}
.motif .invpos-inline-filter.is-active i{color:#397a80}
.motif .invpos-clear-filters{
    display:none;
    height:36px;
    padding:0 7px;
    border:0;
    background:transparent;
    color:#727981;
    font-size:12px;
    font-weight:500;
    cursor:pointer;
}
.motif .invpos-clear-filters:hover{color:#242a30}
.motif .invpos-clear-filters.is-visible{display:inline-flex;align-items:center}
@media (max-width:1200px){
    .motif .invpos-table-toolbar-actions{flex-basis:100%;justify-content:flex-start}
    .motif .invpos-inline-filters{justify-content:flex-start}
}
.motif .invpos-data-table{margin:0!important;border-collapse:separate!important;border-spacing:0!important;font-size:13px;color:#292d32}
.motif .invpos-data-table>:not(caption)>*>*{box-shadow:none!important}
.motif .invpos-data-table thead th{height:46px;padding:0 16px!important;background:#fafafa!important;color:#656b73;border:0!important;border-bottom:1px solid #e8eaed!important;vertical-align:middle;font-size:12px;font-weight:600;white-space:nowrap}
.motif .invpos-data-table tbody td{min-height:56px;padding:11px 16px!important;background:#fff;border:0!important;border-bottom:1px solid #eceef0!important;vertical-align:middle;transition:background-color .12s ease}
.motif .invpos-data-table tbody tr:hover td{background:#fafbfc}.motif .invpos-data-table tbody tr:last-child td{border-bottom:0!important}
.motif .invpos-cell-primary{color:#20242a;font-size:13px;font-weight:550;line-height:1.35}.motif .invpos-cell-secondary{margin-top:3px;color:#858b93;font-size:11.5px;font-weight:400;line-height:1.35}.motif .invpos-cell-secondary+.invpos-cell-secondary{margin-top:1px}
.motif .invpos-qty{font-size:14px;font-weight:600;color:#20242a}.motif .invpos-qty-out{color:#dc3545}.motif .invpos-price{font-variant-numeric:tabular-nums}.motif .invpos-price-secondary{color:#858b93;font-size:11.5px;margin-top:3px;font-variant-numeric:tabular-nums}
.motif .dataTables_filter{display:none!important}.motif .dataTables_wrapper .bottom{min-height:58px;padding:10px 16px;border-top:1px solid #eceef0;display:flex!important;align-items:center!important}.motif .dataTables_wrapper .dataTables_info{padding:0!important;color:#747a82;font-size:12px}.motif .dataTables_wrapper .dataTables_length{font-size:12px;color:#747a82}.motif .dataTables_wrapper .dataTables_length select{min-width:68px;height:34px;margin:0 6px;border:1px solid #e1e4e8;border-radius:8px;background:#fff;font-size:12px}.motif .dataTables_wrapper .dataTables_paginate{padding:0!important}.motif .dataTables_wrapper .dataTables_paginate .paginate_button{min-width:34px!important;height:34px!important;margin:0 2px!important;padding:7px 10px!important;border:1px solid transparent!important;border-radius:8px!important;background:transparent!important;color:#555b63!important;font-size:12px}.motif .dataTables_wrapper .dataTables_paginate .paginate_button:hover{border-color:#e3e6ea!important;background:#f7f8f9!important;color:#20242a!important}.motif .dataTables_wrapper .dataTables_paginate .paginate_button.current, .motif .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{border-color:#e1e4e8!important;background:#f5f6f7!important;color:#20242a!important}.motif .dataTables_processing{border:1px solid #e4e7eb!important;border-radius:10px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 8px 28px rgba(20,24,32,.08);color:#555b63!important;font-size:13px}

/* =========================================================
   Fast Moving Products V2
   ========================================================= */

/* Page actions */
.motif .invpos-page-actions{display:flex;justify-content:space-between;align-items:center;gap:16px}
.motif .invpos-primary-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.motif .invpos-branch-chip{height:32px;padding:0 11px;display:inline-flex;align-items:center;border:1px solid #e2e5e9;border-radius:999px;background:#fff;color:#626870;font-size:12px;font-weight:600}

.motif .invpos-split-pill{height:38px;display:inline-flex;align-items:stretch;border-radius:9px;overflow:hidden;text-decoration:none!important;font-size:12.5px;font-weight:600;box-shadow:0 1px 2px rgba(20,24,32,.05);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.motif .invpos-split-pill:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,24,32,.10);filter:saturate(1.04)}
.motif .invpos-split-pill-label{padding:0 13px;display:inline-flex;align-items:center;white-space:nowrap}
.motif .invpos-split-pill-icon{width:38px;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
.motif .invpos-split-pill-green .invpos-split-pill-label{background:#198754;color:#fff}.motif .invpos-split-pill-green .invpos-split-pill-icon{background:#116a40;color:#fff}
.motif .invpos-split-pill-teal .invpos-split-pill-label{background:#0f6f7b;color:#fff}.motif .invpos-split-pill-teal .invpos-split-pill-icon{background:#095965;color:#fff}
.motif .invpos-split-pill-blue .invpos-split-pill-label{background:#eef8fb;color:#18728a}.motif .invpos-split-pill-blue .invpos-split-pill-icon{background:#dceff4;color:#11677d}

/* Filter popover */
.motif .invpos-filter-wrap{position:relative}
.motif .invpos-filter-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:2100;width:390px;padding:16px;background:#fff;border:1px solid #e3e6ea;border-radius:12px;box-shadow:0 14px 40px rgba(20,24,32,.13),0 3px 10px rgba(20,24,32,.05);display:none}
.motif .invpos-filter-panel.is-open{display:block}
.motif .invpos-filter-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.motif .invpos-filter-title{font-size:14px;font-weight:650;color:#20242a}
.motif .invpos-filter-subtitle{margin-top:2px;font-size:11.5px;color:#8a9098}
.motif .invpos-filter-close{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:7px;background:transparent;color:#777e87;font-size:20px}
.motif .invpos-filter-close:hover{background:#f4f5f6;color:#20242a}
.motif .invpos-filter-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.motif .invpos-filter-field{min-width:0}
.motif .invpos-filter-field label{display:block;margin:0 0 5px;font-size:11.5px;font-weight:600;color:#666d75}
.motif .invpos-filter-field .form-select{height:38px;border:1px solid #dfe3e7;border-radius:8px;background-color:#fff;color:#30353b;font-size:12.5px;box-shadow:none}
.motif .invpos-filter-field .form-select:focus{border-color:#9abfc7;box-shadow:0 0 0 3px rgba(15,111,123,.08)}
.motif .invpos-filter-footer{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:4px;padding-top:12px;border-top:1px solid #eef0f2}
.motif .invpos-filter-reset, .motif .invpos-filter-apply{height:36px;padding:0 13px;border-radius:8px;font-size:12.5px;font-weight:600}
.motif .invpos-filter-reset{border:1px solid #dfe3e7;background:#fff;color:#555c64}
.motif .invpos-filter-reset:hover{background:#f7f8f9}
.motif .invpos-filter-apply{border:1px solid #0f6f7b;background:#0f6f7b;color:#fff}
.motif .invpos-filter-apply:hover{background:#0b616b}

/* Server-rendered badges nested in V1 cells */
.motif .invpos-cell-primary .badge, .motif .invpos-qty .badge{font-size:10.5px;font-weight:600;line-height:1;padding:.34em .58em;border-radius:6px}
.motif .invpos-qty .badge{display:inline-flex;align-items:center;justify-content:center}
.motif .invpos-qty-out{color:inherit}

@media (max-width:767px){
    .motif .invpos-page-actions{align-items:flex-start;flex-direction:column}
    .motif .invpos-primary-actions{justify-content:flex-start}
    .motif .invpos-filter-panel{position:fixed;left:12px;right:12px;top:auto;width:auto}
    .motif .invpos-filter-form{grid-template-columns:1fr}
}


/* =========================================================
   Fast Moving Products V3
   ========================================================= */
.motif .invpos-page-actions{min-height:40px;align-items:center}
.motif .invpos-page-title{margin:0;color:#20242a;font-size:24px;font-weight:500;line-height:1.2}
.motif .invpos-page-note{margin-top:2px}
.motif .invpos-branch-chip{border-radius:999px}
.motif .invpos-split-pill{border-radius:12px}
.motif .invpos-split-pill-label{padding-left:15px;padding-right:15px}
.motif .invpos-split-pill-icon{width:40px}

.motif .dataTables_wrapper .bottom{
    min-height:58px;padding:10px 16px;display:flex !important;
    align-items:center !important;justify-content:space-between !important;
    gap:16px;flex-wrap:wrap;
}
.motif .dataTables_wrapper .dataTables_info{float:none !important;padding:0 !important;margin:0 !important}
.motif .dataTables_wrapper .dataTables_paginate{
    float:none !important;margin-left:auto !important;padding:0 !important;
    display:flex;align-items:center;
}
.motif .dataTables_wrapper .dataTables_paginate .paginate_button, .motif .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .motif .dataTables_wrapper .dataTables_paginate .paginate_button:active{
    box-sizing:border-box !important;min-width:34px !important;height:34px !important;
    margin:0 2px !important;padding:0 10px !important;display:inline-flex !important;
    align-items:center !important;justify-content:center !important;
    border:1px solid transparent !important;border-radius:9px !important;
    background:transparent !important;background-image:none !important;
    box-shadow:none !important;color:#555b63 !important;font-size:12.5px !important;
    line-height:1 !important;
}
.motif .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    border-color:#e3e6ea !important;background:#f6f7f8 !important;color:#20242a !important;
}
.motif .dataTables_wrapper .dataTables_paginate .paginate_button.current, .motif .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    border-color:#0f6f7b !important;background:#0f6f7b !important;color:#fff !important;
}
.motif .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .motif .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
    border-color:transparent !important;background:transparent !important;
    color:#b7bcc2 !important;cursor:default !important;
}
.motif .dataTables_wrapper .dataTables_paginate .ellipsis{padding:0 7px;color:#7c8289}
@media (max-width:767px){
    .motif .invpos-page-actions{align-items:stretch}
    .motif .invpos-page-title{font-size:22px}
    .motif .dataTables_wrapper .bottom{align-items:flex-start !important;flex-direction:column}
    .motif .dataTables_wrapper .dataTables_paginate{margin-left:0 !important}
}

/* Actions V1 */
.motif .invpos-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px}.motif .invpos-row-action{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:8px;background:transparent;color:#7a8088;font-size:18px;line-height:1;cursor:pointer;transition:background-color .14s ease,color .14s ease}.motif .invpos-row-action:hover{background:#f3f4f6;color:#20242a}.motif .invpos-row-action:focus-visible{outline:2px solid #0f6b78;outline-offset:2px}.motif .invpos-action-menu-wrap{position:relative}.motif .invpos-action-menu{position:absolute;top:calc(100% + 5px);right:0;z-index:2000;width:180px;padding:6px;background:#fff;border:1px solid #e4e7eb;border-radius:10px;box-shadow:0 8px 24px rgba(20,24,32,.10),0 2px 6px rgba(20,24,32,.04);display:none;text-align:left}.motif .invpos-action-menu.is-open{display:block}.motif .invpos-action-menu-item{width:100%;min-height:36px;padding:8px 10px;display:flex;align-items:center;gap:9px;border:0;border-radius:7px;background:transparent;color:#343940;font-size:13px;font-weight:450;text-align:left;cursor:pointer;transition:background-color .12s ease,color .12s ease}.motif .invpos-action-menu-item i{width:17px;color:#7b8189;font-size:17px;text-align:center}.motif .invpos-action-menu-item:hover{background:#f5f6f7}.motif .invpos-action-menu-item.danger{color:#c93b43}.motif .invpos-action-menu-item.danger i{color:#c93b43}.motif .invpos-action-menu-item.danger:hover{background:#fff3f3;color:#b52f37}
@media (max-width:991px){.motif .invpos-table-toolbar{align-items:stretch;flex-direction:column}.motif .invpos-table-search{max-width:none}.motif .invpos-table-toolbar-actions{justify-content:flex-end}}




/* 16 — APPROVED FEEDBACK DIALOG */

/* =========================================================
   InvPOS Feedback V1 — Standard Dialog
   ========================================================= */
.swal2-container.swal2-backdrop-show:not(.swal2-top-end){
    background:rgba(28,33,38,.38)!important;
    backdrop-filter:blur(1.5px);
}
.swal2-popup.invpos-dialog{
    width:440px!important;
    max-width:calc(100vw - 32px)!important;
    min-height:400px!important;
    padding:0!important;
    border:1px solid #e3e6e9!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 22px 65px rgba(20,27,35,.18)!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
}
.invpos-dialog .swal2-close{
    position:absolute!important;
    left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:32px!important;height:32px!important;
    top:18px!important;right:18px!important;
    border:1px solid #e1e4e7!important;
    border-radius:9px!important;
    color:#555c63!important;
    background:#fff!important;
    font-size:22px!important;
    font-weight:300!important;
    line-height:1!important;
    box-shadow:none!important;
}
.invpos-dialog .swal2-close:hover{background:#f7f8f9!important;color:#20242a!important}
.invpos-dialog .swal2-html-container{
    margin:0!important;
    padding:48px 34px 24px!important;
    flex:1 1 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
}
.invpos-dialog-copy{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
.invpos-dialog-icon{
    width:42px;height:42px;
    margin-bottom:16px;
    border-radius:10px;
    display:grid;place-items:center;
    font-size:21px;
}
.invpos-dialog-icon.danger{background:#fff0f1;color:#dc3545}
.invpos-dialog-icon.warning{background:#fff7e8;color:#a66b00}
.invpos-dialog-icon.confirm{background:#edf6f7;color:#0f6f7b}
.invpos-dialog-icon.success{background:#eaf8ef;color:#198754}
.invpos-dialog-title{
    margin:0 0 7px;
    color:#20242a;
    font-size:19px;
    font-weight:650;
    line-height:1.3;
}
.invpos-dialog-text{
    max-width:330px;
    margin:0;
    color:#858b93;
    font-size:12.5px;
    line-height:1.55;
}
.invpos-dialog .swal2-actions{
    width:100%!important;
    margin:0!important;
    padding:0 34px 28px!important;
    border-top:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
}
.invpos-dialog .swal2-confirm,
.invpos-dialog .swal2-cancel{
    width:100%!important;
    min-height:40px!important;
    margin:0!important;
    padding:0 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:9px!important;
    box-shadow:none!important;
    font-family:inherit!important;
    font-size:12.5px!important;
    font-weight:600!important;
    line-height:1!important;
    cursor:pointer!important;
}
.invpos-dialog .swal2-confirm{order:1}
.invpos-dialog .swal2-cancel{order:2}
.invpos-dialog .swal2-cancel{
    background:#fff!important;
    color:#4f565d!important;
    border:1px solid #dfe3e7!important;
}
.invpos-dialog .swal2-cancel:hover{background:#f7f8f9!important}
.invpos-dialog .swal2-confirm.invpos-danger-btn{
    background:#dc3545!important;color:#fff!important;border:1px solid #dc3545!important;
}
.invpos-dialog .swal2-confirm.invpos-danger-btn:hover{background:#c92f3e!important}
.invpos-dialog .swal2-confirm.invpos-primary-btn{
    background:#0f6f7b!important;color:#fff!important;border:1px solid #0f6f7b!important;
}
.invpos-dialog .swal2-confirm.invpos-primary-btn:hover{background:#0c606b!important}
.invpos-dialog .swal2-confirm.invpos-success-btn{
    background:#198754!important;color:#fff!important;border:1px solid #198754!important;
}
.invpos-dialog .swal2-confirm.invpos-success-btn:hover{background:#157347!important}
.invpos-dialog .swal2-confirm:focus,
.invpos-dialog .swal2-cancel:focus,
.invpos-dialog .swal2-close:focus{box-shadow:none!important}

@media(max-width:520px){
    .swal2-popup.invpos-dialog{width:calc(100vw - 24px)!important;min-height:380px!important}
    .invpos-dialog .swal2-html-container{padding:46px 24px 22px!important}
    .invpos-dialog .swal2-actions{padding:0 24px 24px!important}
}
/* 17 — APPROVED NATIVE TOAST */

/* InvPOS Native Toast V1 — page-local CSS */
#invposToastStack{
    position:fixed !important;
    top:20px !important;
    right:22px !important;
    bottom:auto !important;
    left:auto !important;
    width:350px !important;
    max-width:calc(100vw - 44px) !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    overflow:visible !important;
    z-index:2147483647 !important;
    pointer-events:none !important;
}
.invpos-native-toast{
    --toast-accent:#2fb36d;
    position:relative !important;
    width:100% !important;
    min-height:58px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    margin:0 !important;
    padding:12px 42px 12px 14px !important;
    overflow:hidden !important;
    background:#fff !important;
    border:1px solid #e6e9ec !important;
    border-radius:10px !important;
    box-shadow:0 10px 28px rgba(25,31,38,.12) !important;
    pointer-events:auto !important;
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease;
}
.invpos-native-toast.is-visible{opacity:1;transform:translateY(0)}
.invpos-native-toast.is-leaving{opacity:0;transform:translateY(-6px)}
.invpos-native-toast[data-type="error"]{--toast-accent:#e9553f}
.invpos-native-toast[data-type="warning"]{--toast-accent:#f2a316}
.invpos-native-toast[data-type="info"]{--toast-accent:#2388dc}

.invpos-native-toast__icon{
    width:22px;height:22px;flex:0 0 22px;
    display:grid;place-items:center;
    border-radius:50%;
    background:var(--toast-accent);
    color:#fff;
    font:700 13px/1 Arial,sans-serif;
}
.invpos-native-toast__copy{min-width:0;flex:1}
.invpos-native-toast__title{
    overflow:hidden;
    color:#242a30;
    font-size:12.5px;
    font-weight:600;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.invpos-native-toast__text{
    margin-top:2px;
    color:#838a91;
    font-size:11.5px;
    line-height:1.35;
}
.invpos-native-toast__close{
    position:absolute;
    top:50%;right:10px;
    transform:translateY(-50%);
    width:24px;height:24px;
    display:grid;place-items:center;
    padding:0;border:0;border-radius:6px;
    background:transparent;color:#92989e;
    font:400 18px/1 Arial,sans-serif;
    cursor:pointer;
}
.invpos-native-toast__close:hover{background:#f4f5f6;color:#343a40}
.invpos-native-toast__progress{
    position:absolute;
    left:0;bottom:0;
    width:100%;height:3px;
    background:var(--toast-accent);
    transform-origin:left center;
    animation:invposToastCountdown var(--toast-duration) linear forwards;
}
.invpos-native-toast.is-paused .invpos-native-toast__progress{animation-play-state:paused}
@keyframes invposToastCountdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media(max-width:520px){
    #invposToastStack{top:14px!important;right:16px!important;left:16px!important;width:auto!important;max-width:none!important}
}

/* 18 — APPROVED TOAST REFINEMENT */

/* InvPOS Toast V1 — Dribbble refinement */
#invposToastStack{
    width:320px !important;
    top:18px !important;
    right:20px !important;
}
.invpos-native-toast{
    min-height:52px !important;
    padding:10px 38px 10px 12px !important;
    gap:10px !important;
    border-color:#edf0f2 !important;
    border-radius:9px !important;
    box-shadow:
        0 2px 3px rgba(24,30,36,.05),
        0 8px 18px rgba(24,30,36,.08) !important;
}
.invpos-native-toast__icon{
    width:20px !important;
    height:20px !important;
    flex-basis:20px !important;
    font-size:11px !important;
}
.invpos-native-toast__title{
    font-size:12px !important;
    font-weight:600 !important;
    color:#20252a !important;
}
.invpos-native-toast__close{
    right:8px !important;
    width:22px !important;
    height:22px !important;
    font-size:16px !important;
    color:#737a80 !important;
}
.invpos-native-toast__progress{
    height:3px !important;
    width:100% !important;
}

/* 19 — TEXT COMPATIBILITY */

/* MOTIF V2 — Fast Moving Products compatibility bridge.
   Page-specific only; framework adapter lives in motif-ui.css.
   Existing locked invpos-* styles are retained during the pilot. */
.motif {font-size:var(--motif-font-base);background:transparent;}
.motif .invpos-data-table .invpos-cell-primary,
.motif .invpos-data-table .invpos-qty {font-size:var(--motif-font-base);}
.motif .invpos-data-table .invpos-cell-secondary,
.motif .invpos-data-table .invpos-price-secondary {font-size:var(--motif-font-sm);}
.motif .invpos-page-note {font-size:var(--motif-font-sm);}


/* =============================================================
   MOTIF UI — BUTTON / LINK NORMALIZATION V1
   Applies only to explicitly opted-in button components.
   Keep native link navigation and button submission semantics.
   ============================================================= */
.motif :where(button.motif-btn,a.motif-btn,input.motif-btn,button.invpos-split-pill,a.invpos-split-pill){
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;text-align:center;text-decoration:none;
  vertical-align:middle;cursor:pointer;user-select:none;
}
.motif :where(button.invpos-split-pill,a.invpos-split-pill){
  align-items:stretch;justify-content:center;padding:0;border:0;
  border-radius:9px;overflow:hidden;line-height:1.2;
  outline:none;box-shadow:0 1px 2px rgba(20,24,32,.05);
}
.motif :where(a.motif-btn,a.invpos-split-pill):is(:link,:visited,:hover){text-decoration:none}
.motif :where(.motif-btn,.invpos-split-pill):focus:not(:focus-visible){outline:none}
.motif :where(.motif-btn,.invpos-split-pill):focus-visible{
  outline:2px solid var(--motif-primary,#087f8c);outline-offset:3px;
}
.motif :where(button.motif-btn,button.invpos-split-pill,input.motif-btn):disabled,
.motif :where(.motif-btn,.invpos-split-pill)[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;
}
/* Shared inline text-filter appearance (including Model filter). */
.motif .invpos-inline-filter input[type="search"]{
  -webkit-appearance:none;appearance:none;height:36px;min-width:0;
  padding:0 11px;border:1px solid #e2e5e9;border-radius:9px;
  background:var(--motif-surface,#fff);color:#555b62;
  font-family:inherit;font-size:12px;font-weight:500;outline:none;box-shadow:none;
}
.motif .invpos-inline-filter input[type="search"]:focus{
  border-color:#b9cfd2;box-shadow:0 0 0 3px rgba(18,117,128,.07);
}
.motif .invpos-inline-filter input[type="search"]::placeholder{color:#555b62;opacity:1}


/* =============================================================
   20 — MOTIF SUMMARY STRIP V1 (page-defined metrics)
   Reusable shell. Metrics, scope, values and endpoints belong to each page.
   ============================================================= */
.motif .motif-summary-strip{margin:0 0 18px}
.motif .motif-summary-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px}
.motif .motif-summary-caption{font-size:12px;font-weight:600;color:var(--motif-text-secondary)}
.motif .motif-summary-scope{font-size:11px;color:var(--motif-text-tertiary);display:inline-flex;align-items:center;gap:5px}
.motif .motif-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.motif .motif-summary-card{min-width:0;padding:15px 17px;background:var(--motif-surface);border:1px solid var(--motif-border);border-radius:12px;display:flex;flex-direction:column;gap:7px}
.motif .motif-summary-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.motif .motif-summary-label{font-size:12px;font-weight:550;color:var(--motif-text-secondary)}
.motif .motif-summary-icon{font-size:18px;line-height:1;color:var(--motif-text-tertiary)}
.motif .motif-summary-value{font-size:24px;font-weight:650;letter-spacing:-.035em;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--motif-text)}
.motif .motif-summary-note{font-size:11px;line-height:1.35;color:var(--motif-text-tertiary)}
.motif .motif-summary-card[data-status="error"] .motif-summary-note{color:var(--motif-danger)}
.motif .motif-summary-card[data-status="loading"] .motif-summary-value{color:var(--motif-text-tertiary)}
@media(max-width:1000px){.motif .motif-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.motif .motif-summary-grid{grid-template-columns:1fr 1fr;gap:8px}.motif .motif-summary-card{padding:12px}.motif .motif-summary-value{font-size:21px}}
@media(max-width:360px){.motif .motif-summary-grid{grid-template-columns:1fr}}


/* 21 — MOTIF LOADING STATES V1.2: quiet first-load panel (Option C)
   Single real DataTable only. The panel occupies the table stage while the
   first server response is pending; it is removed after initComplete. */
.motif .motif-table-stage{position:relative;min-height:0}
.motif .motif-table-is-loading .motif-table-stage{min-height:360px;overflow:hidden}
.motif .motif-table-is-loading #productsTable_wrapper{visibility:hidden;position:absolute;inset:0;pointer-events:none}
@keyframes motif-skeleton-shimmer{to{background-position-x:-220%}}
@keyframes motif-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.motif .motif-table-loading-indicator,.motif .motif-summary-card[data-status="loading"] .motif-summary-value::after{animation:none}}



/* =============================================================
   22 — MOTIF V1.1 READABILITY PASS | 15-inch laptop baseline
   Presentation-only overrides. No changes to layout/JS hooks.
   ============================================================= */
.motif {
  --motif-font-xs: 12.5px;
  --motif-font-sm: 13.5px;
  --motif-font-base: 14px;
  --motif-font-md: 16px;
  --motif-font-title: 24px;
}
/* Product identity remains visually dominant; metadata stays readable. */
.motif .invpos-data-table {font-size:14px;}
.motif .invpos-data-table thead th {font-size:13px;}
.motif .invpos-data-table .invpos-cell-primary,
.motif .invpos-data-table .invpos-qty {font-size:14px;}
.motif .invpos-data-table .invpos-cell-secondary,
.motif .invpos-data-table .invpos-price-secondary {font-size:13px;line-height:1.45;}
.motif .invpos-data-table .invpos-cell-primary .badge,
.motif .invpos-data-table .invpos-qty .badge {font-size:11.5px;}
/* Toolbar, filters, controls and table footer. */
.motif .invpos-table-search input {font-size:14px;}
.motif .invpos-inline-filter select,
.motif .invpos-inline-filter input[type="search"],
.motif .invpos-clear-filters {font-size:13px;}
.motif .invpos-table-tool,
.motif .invpos-icon-button {font-size:13.5px;}
.motif .invpos-filter-subtitle,
.motif .invpos-filter-field label {font-size:13px;}
.motif .invpos-filter-field .form-select,
.motif .invpos-filter-reset,
.motif .invpos-filter-apply {font-size:13.5px;}
.motif .dataTables_wrapper .dataTables_info,
.motif .dataTables_wrapper .dataTables_length,
.motif .dataTables_wrapper .dataTables_length select {font-size:13px;}
.motif .dataTables_wrapper .dataTables_paginate .paginate_button,
.motif .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.motif .dataTables_wrapper .dataTables_paginate .paginate_button:active {font-size:13px!important;}
/* Summary metrics: numbers retain hierarchy; explanations are legible. */
.motif .motif-summary-caption,
.motif .motif-summary-label {font-size:13.5px;}
.motif .motif-summary-scope,
.motif .motif-summary-note {font-size:12.5px;line-height:1.45;}
/* Forms, actions and messages. */
.motif .invpos-page-note,
.motif .invpos-branch-chip,
.motif .invpos-action-menu-item {font-size:13.5px;}
.motif .invpos-split-pill {font-size:13.5px;}
.invpos-dialog-text {font-size:14px;}
.invpos-dialog .swal2-confirm,
.invpos-dialog .swal2-cancel {font-size:14px!important;}
.invpos-native-toast__title {font-size:13.5px!important;}
.invpos-native-toast__text {font-size:12.5px;}