/* Rasbree v2 admin — shell layout. PrimeVue/Aura styles the components;
   this file only lays out the shell (sidebar / header / content). */

/* === FONTS START (web fonts — generated by /settings/appearance) === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..800&display=swap');
/* === FONTS END === */

/* === PALETTE START (named colours — generated by /settings/appearance) === */
:root {
    --rb-c-ink: #020617; /* Ink */
    --rb-time-color: #595c5f96; /* the clock part of every date-time */
    --rb-c-slate-700: #334155; /* Slate 700 */
    --rb-c-slate-800: #1e293b; /* Slate 800 */
    --rb-c-page-grey: #f1f1f1; /* Page grey */
    --rb-c-header-grey: #3a3a3a; /* Header grey */
    --rb-c-header-grey-soft: #4b4b4b; /* Header grey soft */
    --rb-c-grey-200: #e5e5e5; /* Grey 200 */
    --rb-c-indigo: #6366f1; /* Indigo */
    --rb-c-white: #ffffff; /* White */
    --rb-c-slate-600: #475569; /* Slate 600 */
    --rb-c-slate-100: #f1f5f9; /* Slate 100 */
    --rb-c-slate-300: #cbd5e1; /* Slate 300 */
    --rb-c-slate-400: #94a3b8; /* Slate 400 */
    --rb-c-table-head-background: #f9f9fb; /* Table head background */
    --rb-c-table-head: #616161; /* Table head */
    --rb-c-slate-200: #e2e8f0; /* Slate 200 */
    --rb-c-tab-active: #202e78; /* Tab active */
    --rb-c-slate-900: #48494c; /* Slate 900 */
    --rb-c-menu-active-background: #c7c7c7; /* Menu active background */
    --rb-c-menu-active: #121212; /* Menu active */
    --rb-c-teal: #2dd4bf; /* Teal */
    --rb-c-tab-shadow: #101828; /* Tab shadow */
    --rb-c-tab-hover: #f1f2f4; /* tab hover */
    --rb-c-tab-border-grey: #d7dae0; /* Tab border grey */
    --rb-c-table-text: #565a62; /* Table text */
    --rb-c-hover-grey: #f6f6f7; /* Hover grey */
    --rb-c-muted-grey: #595c5f; /* Muted grey */
    --rb-c-muted-grey-2: #595c5f; /* Muted grey */
    --rb-c-table-text-2: #565a62; /* Table text */
    --rb-c-table-text-3: #595c5fe8; /* Table text */
    --rb-c-tab-text: #7a8194; /* Tab text */
    --rb-c-tab-hover-text: #303030; /* Tab hover text */
    --rb-c-nav-active: #303030; /* Nav active */
    --rb-c-nav-icon: #b5b5b5; /* Nav icon */
    --rb-c-button-slate: #5a6178; /* Button slate */
    --rb-c-button-slate-dark: #474d60; /* Button slate dark */
    --rb-c-btn-shadow-color: #b5b5b5; /* btn shadow color */
    --rb-c-slate-900-2: #0f172a; /* Slate 900 */
    --rb-c-green: #0e7a50; /* green */
}
/* === PALETTE END === */

/* === SCALES START (named sizes — generated by /settings/appearance) === */
:root {
    /* Font size */
    --rb-fs-8-px: 8px; /* 8 px */
    --rb-fs-xs: 10px; /* XS */
    --rb-fs-11-px: 11px; /* 11 px */
    --rb-fs-sm: 12px; /* SM */
    --rb-fs-13-px: 13px; /* 13 px */
    --rb-fs-md: 14px; /* MD */
    --rb-fs-lg: 16px; /* LG */
    --rb-fs-xl: 18px; /* XL */
    /* Spacing */
    --rb-sp-none: 0px; /* None */
    --rb-sp-xs: 2px; /* XS */
    --rb-sp-3-px: 3px; /* 3 px */
    --rb-sp-sm: 4px; /* SM */
    --rb-sp-5-px: 5px; /* 5 px */
    --rb-sp-6-px: 6px; /* 6 px */
    --rb-sp-7-px: 7px; /* 7 px */
    --rb-sp-md: 8px; /* MD */
    --rb-sp-9-px: 9px; /* 9 px */
    --rb-sp-10-px: 10px; /* 10 px */
    --rb-sp-lg: 12px; /* LG */
    --rb-sp-14-px: 14px; /* 14 px */
    --rb-sp-xl: 16px; /* XL */
    --rb-sp-20-px: 20px; /* 20 px */
    --rb-sp-21-px: 21px; /* 21 px */
    --rb-sp-xxl: 16px; /* 2XL */
    --rb-sp-1-px: 2px; /* 1 px */
    --rb-sp-1px: 1px; /* 1px */
    /* Corner radius */
    --rb-rd-none: 0px; /* None */
    --rb-rd-sm: 4px; /* SM */
    --rb-rd-6-px: 6px; /* 6 px */
    --rb-rd-md: 8px; /* MD */
    --rb-rd-10-px: 10px; /* 10 px */
    --rb-rd-lg: 12px; /* LG */
    --rb-rd-14-px: 14px; /* 14 px */
    --rb-rd-xl: 16px; /* XL */
    --rb-rd-32-px: 32px; /* 32 px */
    --rb-rd-sm-2: 4px; /* sm */
    --rb-rd-md-2: 8px; /* md */
    --rb-rd-6px: 6px; /* 6px */
    /* Shadow */
    --rb-sh-none-x: 0px; /* None */
    --rb-sh-none-y: 0px;
    --rb-sh-none-blur: 0px;
    --rb-sh-none-spread: 0px;
    --rb-sh-none-color: var(--rb-c-slate-900);
    --rb-sh-none-alpha: 0;
    --rb-sh-none: var(--rb-sh-none-x) var(--rb-sh-none-y) var(--rb-sh-none-blur) var(--rb-sh-none-spread) color-mix(in srgb, var(--rb-sh-none-color) calc(var(--rb-sh-none-alpha) * 1%), transparent);
    --rb-sh-sm-x: 0px; /* SM */
    --rb-sh-sm-y: 1px;
    --rb-sh-sm-blur: 3px;
    --rb-sh-sm-spread: 0px;
    --rb-sh-sm-color: var(--rb-c-slate-900);
    --rb-sh-sm-alpha: 14;
    --rb-sh-sm: var(--rb-sh-sm-x) var(--rb-sh-sm-y) var(--rb-sh-sm-blur) var(--rb-sh-sm-spread) color-mix(in srgb, var(--rb-sh-sm-color) calc(var(--rb-sh-sm-alpha) * 1%), transparent);
    --rb-sh-md-x: 0px; /* MD */
    --rb-sh-md-y: 2px;
    --rb-sh-md-blur: 8px;
    --rb-sh-md-spread: 0px;
    --rb-sh-md-color: var(--rb-c-slate-900);
    --rb-sh-md-alpha: 16;
    --rb-sh-md: var(--rb-sh-md-x) var(--rb-sh-md-y) var(--rb-sh-md-blur) var(--rb-sh-md-spread) color-mix(in srgb, var(--rb-sh-md-color) calc(var(--rb-sh-md-alpha) * 1%), transparent);
    --rb-sh-lg-x: 0px; /* LG */
    --rb-sh-lg-y: 4px;
    --rb-sh-lg-blur: 13px;
    --rb-sh-lg-spread: 0px;
    --rb-sh-lg-color: var(--rb-c-slate-900);
    --rb-sh-lg-alpha: 22;
    --rb-sh-lg: var(--rb-sh-lg-x) var(--rb-sh-lg-y) var(--rb-sh-lg-blur) var(--rb-sh-lg-spread) color-mix(in srgb, var(--rb-sh-lg-color) calc(var(--rb-sh-lg-alpha) * 1%), transparent);
    --rb-sh-xl-x: 0px; /* XL */
    --rb-sh-xl-y: 8px;
    --rb-sh-xl-blur: 24px;
    --rb-sh-xl-spread: 0px;
    --rb-sh-xl-color: var(--rb-c-slate-900);
    --rb-sh-xl-alpha: 28;
    --rb-sh-xl: var(--rb-sh-xl-x) var(--rb-sh-xl-y) var(--rb-sh-xl-blur) var(--rb-sh-xl-spread) color-mix(in srgb, var(--rb-sh-xl-color) calc(var(--rb-sh-xl-alpha) * 1%), transparent);
    --rb-sh-edge-x: 0px; /* Edge */
    --rb-sh-edge-y: 1px;
    --rb-sh-edge-blur: 0px;
    --rb-sh-edge-spread: 0px;
    --rb-sh-edge-color: var(--rb-c-slate-200);
    --rb-sh-edge-alpha: 100;
    --rb-sh-edge: var(--rb-sh-edge-x) var(--rb-sh-edge-y) var(--rb-sh-edge-blur) var(--rb-sh-edge-spread) color-mix(in srgb, var(--rb-sh-edge-color) calc(var(--rb-sh-edge-alpha) * 1%), transparent);
    --rb-sh-btn-shadow-x: 0px; /* btn shadow */
    --rb-sh-btn-shadow-y: 1px;
    --rb-sh-btn-shadow-blur: 0px;
    --rb-sh-btn-shadow-spread: 0px;
    --rb-sh-btn-shadow-color: var(--rb-c-btn-shadow-color);
    --rb-sh-btn-shadow-alpha: 100;
    --rb-sh-btn-shadow: var(--rb-sh-btn-shadow-x) var(--rb-sh-btn-shadow-y) var(--rb-sh-btn-shadow-blur) var(--rb-sh-btn-shadow-spread) color-mix(in srgb, var(--rb-sh-btn-shadow-color) calc(var(--rb-sh-btn-shadow-alpha) * 1%), transparent);
}
/* === SCALES END === */

/* === THEME START (generated by /settings/appearance — do not hand-edit) === */
:root {
    --rb-primary: var(--rb-c-ink);
    --rb-primary-hover: var(--rb-c-button-slate-dark);
    --rb-text-color: var(--rb-c-ink);
    --rb-page-bg: var(--rb-c-page-grey);
    --rb-font-family: 'Inter';
    --rb-font-weight: 400;
    --rb-header-bg: var(--rb-c-header-grey);
    --rb-header-search-bg: var(--rb-c-header-grey-soft);
    --rb-header-search-color: var(--rb-c-grey-200);
    --rb-header-search-pos: center;
    --rb-header-search-pos-ml: auto;
    --rb-header-search-pos-mr: auto;
    --rb-nav-active: var(--rb-c-nav-active);
    --rb-nav-icon: var(--rb-c-nav-icon);
    --rb-nav-weight: 400;
    --rb-nav-active-weight: 600;
    --rb-nav-line-height: 13px;
    --rb-nav-align: center;
    --rb-nav-bg: var(--rb-c-white);
    --rb-nav-color: var(--rb-c-slate-600);
    --rb-nav-hover-bg: var(--rb-c-slate-100);
    --rb-btn-weight: 500;
    --rb-btn-align: center;
    --rb-input-bg: var(--rb-c-white);
    --rb-input-color: var(--rb-c-button-slate);
    --rb-input-border: var(--rb-c-slate-300);
    --rb-input-hover-border: var(--rb-c-slate-400);
    --rb-input-align: left;
    --rb-input-focus-glow: on;
    --rb-input-focus-mult: 1;
    --rb-input-focus-border: var(--rb-c-ink);
    --rb-input-focus-color: var(--rb-c-ink);
    --rb-input-focus-size: 1px;
    --rb-input-focus-blur: 2px;
    --rb-input-focus-alpha: 16;
    --rb-tag-weight: 500;
    --rb-tag-line-height: 11px;
    --rb-tag-secondary-bg: var(--rb-c-slate-100);
    --rb-tag-secondary-color: var(--rb-c-table-text);
    --rb-tag-secondary-weight: 400;
    --rb-chip-bg: var(--rb-c-white);
    --rb-chip-color: var(--rb-c-slate-800);
    --rb-chip-border: var(--rb-c-slate-200);
    --rb-badge-weight: 600;
    --rb-badge-valign: super;
    --rb-badge-valign-shift: -0.4em;
    --rb-card-bg: var(--rb-c-white);
    --rb-card-title-weight: 600;
    --rb-card-align: left;
    --rb-card-pos: left;
    --rb-card-pos-ml: 0;
    --rb-card-pos-mr: 0;
    --rb-table-color: var(--rb-c-table-text);
    --rb-table-muted: var(--rb-c-muted-grey);
    --rb-table-line-height: 15.2px;
    --rb-table-head-line-height: 16.7px;
    --rb-table-weight: 400;
    --rb-table-font-family: 'Inter';
    --rb-table-link-weight: 650;
    --rb-table-wrap: nowrap;
    --rb-table-head-weight: 550;
    --rb-table-head-bg: var(--rb-c-table-head-background);
    --rb-table-head-color: var(--rb-c-table-head);
    --rb-table-border: var(--rb-c-slate-200);
    --rb-table-hover-bg: var(--rb-c-hover-grey);
    --rb-table-align: left;
    --rb-table-pos: left;
    --rb-table-pos-ml: 0;
    --rb-table-pos-mr: 0;
    --rb-dialog-bg: var(--rb-c-white);
    --rb-dialog-title-weight: 600;
    --rb-dialog-pos: center;
    --rb-dialog-pos-ml: auto;
    --rb-dialog-pos-mr: auto;
    --rb-dialog-align: left;
    --rb-msg-align: left;
    --rb-msg-pos: left;
    --rb-msg-pos-ml: 0;
    --rb-msg-pos-mr: 0;
    --rb-tab-weight: 600;
    --rb-tab-color: var(--rb-c-tab-text);
    --rb-tab-bar-bg: var(--rb-c-white);
    --rb-tab-active-bg: var(--rb-c-white);
    --rb-tab-active-color: var(--rb-c-tab-active);
    --rb-tab-active-weight: 700;
    --rb-tab-active-border: var(--rb-c-tab-border-grey);
    --rb-tab-hover-bg: var(--rb-c-tab-hover);
    --rb-tab-hover-color: var(--rb-c-tab-hover-text);
    --rb-tab-count-bg: var(--rb-c-page-grey);
    --rb-tab-count-color: var(--rb-c-table-head);
    --rb-tab-count-weight: 600;
    --rb-tab-align: left;
    --rb-menu-bg: var(--rb-c-white);
    --rb-menu-color: var(--rb-c-slate-700);
    --rb-menu-hover-bg: var(--rb-c-slate-100);
    --rb-menu-active-bg: var(--rb-c-slate-200);
    --rb-menu-active-color: var(--rb-c-menu-active);
    --rb-pg-align: center;
    --rb-avatar-bg: var(--rb-c-teal);
    --rb-checkbox-size: 18px;
    --rb-checkbox-border: var(--rb-c-slate-300);
    --rb-divider-color: var(--rb-c-slate-200);
    --rb-skeleton-color: var(--rb-c-grey-200);
    --rb-slider-track: var(--rb-c-slate-200);
    --rb-slider-height: 4px;
    --rb-drawer-bg: var(--rb-c-white);
    --rb-drawer-width: 408px;
    --rb-drawer-pos: left;
    --rb-drawer-pos-ml: 0;
    --rb-drawer-pos-mr: 0;
    --rb-tooltip-bg: var(--rb-c-slate-900);
    --rb-tooltip-color: var(--rb-c-white);
    --rb-font-size: var(--rb-fs-md);
    --rb-nav-font-size: var(--rb-fs-13-px);
    --rb-btn-font-size: var(--rb-fs-md);
    --rb-input-font-size: var(--rb-fs-sm);
    --rb-tag-font-size: var(--rb-fs-11-px);
    --rb-chip-font-size: var(--rb-fs-sm);
    --rb-badge-font-size: var(--rb-fs-11-px);
    --rb-card-title-size: var(--rb-fs-sm);
    --rb-table-font-size: var(--rb-fs-sm);
    --rb-table-head-font-size: var(--rb-fs-11-px);
    --rb-dialog-title-size: var(--rb-fs-13-px);
    --rb-msg-font-size: var(--rb-fs-11-px);
    --rb-tab-font-size: var(--rb-fs-sm);
    --rb-tab-count-font-size: var(--rb-fs-sm);
    --rb-menu-font-size: var(--rb-fs-sm);
    --rb-pg-font-size: var(--rb-fs-11-px);
    --rb-selbtn-font-size: var(--rb-fs-13-px);
    --rb-tooltip-font-size: var(--rb-fs-sm);
    --rb-radius: var(--rb-rd-6px);
    --rb-btn-radius: var(--rb-rd-6-px);
    --rb-input-radius: var(--rb-rd-6-px);
    --rb-tag-radius: var(--rb-rd-xl);
    --rb-chip-radius: var(--rb-rd-md);
    --rb-card-radius: var(--rb-rd-14-px);
    --rb-dialog-radius: var(--rb-rd-lg);
    --rb-msg-radius: var(--rb-rd-md);
    --rb-tab-radius: var(--rb-rd-6-px);
    --rb-tab-count-radius: var(--rb-rd-xl);
    --rb-menu-radius: var(--rb-rd-10-px);
    --rb-pg-radius: var(--rb-rd-md);
    --rb-avatar-radius: var(--rb-rd-md);
    --rb-checkbox-radius: var(--rb-rd-sm);
    --rb-selbtn-radius: var(--rb-rd-md);
    --rb-page-pad-t: var(--rb-sp-21-px);
    --rb-page-pad-r: var(--rb-sp-21-px);
    --rb-page-pad-b: var(--rb-sp-21-px);
    --rb-page-pad-l: var(--rb-sp-21-px);
    --rb-header-pad-t: var(--rb-sp-sm);
    --rb-header-pad-r: var(--rb-sp-14-px);
    --rb-header-pad-b: var(--rb-sp-sm);
    --rb-header-pad-l: var(--rb-sp-14-px);
    --rb-nav-pad-t: var(--rb-sp-3-px);
    --rb-nav-pad-r: var(--rb-sp-xxl);
    --rb-nav-pad-b: var(--rb-sp-3-px);
    --rb-nav-pad-l: var(--rb-sp-xxl);
    --rb-btn-pad-t: var(--rb-sp-sm);
    --rb-btn-pad-r: var(--rb-sp-14-px);
    --rb-btn-pad-b: var(--rb-sp-sm);
    --rb-btn-pad-l: var(--rb-sp-14-px);
    --rb-input-pad-t: var(--rb-sp-7-px);
    --rb-input-pad-r: var(--rb-sp-7-px);
    --rb-input-pad-b: var(--rb-sp-6-px);
    --rb-input-pad-l: var(--rb-sp-7-px);
    --rb-tag-pad-t: var(--rb-sp-xs);
    --rb-tag-pad-r: var(--rb-sp-6-px);
    --rb-tag-pad-b: var(--rb-sp-xs);
    --rb-tag-pad-l: var(--rb-sp-6-px);
    --rb-chip-pad-t: var(--rb-sp-5-px);
    --rb-chip-pad-r: var(--rb-sp-9-px);
    --rb-chip-pad-b: var(--rb-sp-5-px);
    --rb-chip-pad-l: var(--rb-sp-9-px);
    --rb-badge-pad-t: var(--rb-sp-1px);
    --rb-badge-pad-r: var(--rb-sp-md);
    --rb-badge-pad-b: var(--rb-sp-1px);
    --rb-badge-pad-l: var(--rb-sp-md);
    --rb-card-pad-t: var(--rb-sp-lg);
    --rb-card-pad-r: var(--rb-sp-lg);
    --rb-card-pad-b: var(--rb-sp-lg);
    --rb-card-pad-l: var(--rb-sp-lg);
    --rb-table-pad-t: var(--rb-sp-1-px);
    --rb-table-pad-r: var(--rb-sp-7-px);
    --rb-table-pad-b: var(--rb-sp-1-px);
    --rb-table-pad-l: var(--rb-sp-7-px);
    --rb-table-head-pad-t: var(--rb-sp-6-px);
    --rb-table-head-pad-r: var(--rb-sp-7-px);
    --rb-table-head-pad-b: var(--rb-sp-6-px);
    --rb-table-head-pad-l: var(--rb-sp-7-px);
    --rb-table-lead-pad-l: var(--rb-sp-14-px);
    --rb-dialog-pad-t: var(--rb-sp-14-px);
    --rb-dialog-pad-r: var(--rb-sp-14-px);
    --rb-dialog-pad-b: var(--rb-sp-14-px);
    --rb-dialog-pad-l: var(--rb-sp-14-px);
    --rb-msg-pad-t: var(--rb-sp-md);
    --rb-msg-pad-r: var(--rb-sp-lg);
    --rb-msg-pad-b: var(--rb-sp-md);
    --rb-msg-pad-l: var(--rb-sp-lg);
    --rb-tab-pad-t: var(--rb-sp-6-px);
    --rb-tab-pad-r: var(--rb-sp-lg);
    --rb-tab-pad-b: var(--rb-sp-3-px);
    --rb-tab-pad-l: var(--rb-sp-lg);
    --rb-menu-pad-t: var(--rb-sp-5-px);
    --rb-menu-pad-r: var(--rb-sp-9-px);
    --rb-menu-pad-b: var(--rb-sp-5-px);
    --rb-menu-pad-l: var(--rb-sp-9-px);
    --rb-pg-pad-t: var(--rb-sp-sm);
    --rb-pg-pad-r: var(--rb-sp-sm);
    --rb-pg-pad-b: var(--rb-sp-sm);
    --rb-pg-pad-l: var(--rb-sp-sm);
    --rb-selbtn-pad-t: var(--rb-sp-sm);
    --rb-selbtn-pad-r: var(--rb-sp-10-px);
    --rb-selbtn-pad-b: var(--rb-sp-sm);
    --rb-selbtn-pad-l: var(--rb-sp-10-px);
    --rb-drawer-pad-t: var(--rb-sp-20-px);
    --rb-drawer-pad-r: var(--rb-sp-20-px);
    --rb-drawer-pad-b: var(--rb-sp-20-px);
    --rb-drawer-pad-l: var(--rb-sp-20-px);
    --rb-tooltip-pad-t: var(--rb-sp-sm);
    --rb-tooltip-pad-r: var(--rb-sp-md);
    --rb-tooltip-pad-b: var(--rb-sp-sm);
    --rb-tooltip-pad-l: var(--rb-sp-md);
    --rb-btn-margin-t: var(--rb-sp-none);
    --rb-btn-margin-r: var(--rb-sp-none);
    --rb-btn-margin-b: var(--rb-sp-none);
    --rb-btn-margin-l: var(--rb-sp-none);
    --rb-input-margin-t: var(--rb-sp-none);
    --rb-input-margin-r: var(--rb-sp-none);
    --rb-input-margin-b: var(--rb-sp-none);
    --rb-input-margin-l: var(--rb-sp-none);
    --rb-tag-margin-t: var(--rb-sp-none);
    --rb-tag-margin-r: var(--rb-sp-none);
    --rb-tag-margin-b: var(--rb-sp-none);
    --rb-tag-margin-l: var(--rb-sp-none);
    --rb-chip-margin-t: var(--rb-sp-none);
    --rb-chip-margin-r: var(--rb-sp-none);
    --rb-chip-margin-b: var(--rb-sp-none);
    --rb-chip-margin-l: var(--rb-sp-none);
    --rb-badge-margin-t: var(--rb-sp-none);
    --rb-badge-margin-r: var(--rb-sp-none);
    --rb-badge-margin-b: var(--rb-sp-none);
    --rb-badge-margin-l: var(--rb-sp-none);
    --rb-card-margin-t: var(--rb-sp-none);
    --rb-card-margin-r: var(--rb-sp-none);
    --rb-card-margin-b: var(--rb-sp-none);
    --rb-card-margin-l: var(--rb-sp-none);
    --rb-table-margin-t: var(--rb-sp-3-px);
    --rb-table-margin-r: var(--rb-sp-3-px);
    --rb-table-margin-b: var(--rb-sp-3-px);
    --rb-table-margin-l: var(--rb-sp-3-px);
    --rb-msg-margin-t: var(--rb-sp-none);
    --rb-msg-margin-r: var(--rb-sp-none);
    --rb-msg-margin-b: var(--rb-sp-none);
    --rb-msg-margin-l: var(--rb-sp-none);
    --rb-tab-margin-t: var(--rb-sp-none);
    --rb-tab-margin-r: var(--rb-sp-xs);
    --rb-tab-margin-b: var(--rb-sp-none);
    --rb-tab-margin-l: var(--rb-sp-xs);
    --rb-pg-margin-t: var(--rb-sp-none);
    --rb-pg-margin-r: var(--rb-sp-none);
    --rb-pg-margin-b: var(--rb-sp-none);
    --rb-pg-margin-l: var(--rb-sp-none);
    --rb-avatar-margin-t: var(--rb-sp-none);
    --rb-avatar-margin-r: var(--rb-sp-none);
    --rb-avatar-margin-b: var(--rb-sp-none);
    --rb-avatar-margin-l: var(--rb-sp-none);
    --rb-checkbox-margin-t: var(--rb-sp-none);
    --rb-checkbox-margin-r: var(--rb-sp-none);
    --rb-checkbox-margin-b: var(--rb-sp-none);
    --rb-checkbox-margin-l: var(--rb-sp-none);
    --rb-divider-margin-t: var(--rb-sp-lg);
    --rb-divider-margin-r: var(--rb-sp-none);
    --rb-divider-margin-b: var(--rb-sp-lg);
    --rb-divider-margin-l: var(--rb-sp-none);
    --rb-skeleton-margin-t: var(--rb-sp-5-px);
    --rb-skeleton-margin-r: var(--rb-sp-none);
    --rb-skeleton-margin-b: var(--rb-sp-5-px);
    --rb-skeleton-margin-l: var(--rb-sp-none);
    --rb-selbtn-margin-t: var(--rb-sp-none);
    --rb-selbtn-margin-r: var(--rb-sp-none);
    --rb-selbtn-margin-b: var(--rb-sp-none);
    --rb-selbtn-margin-l: var(--rb-sp-none);
    --rb-slider-margin-t: var(--rb-sp-none);
    --rb-slider-margin-r: var(--rb-sp-none);
    --rb-slider-margin-b: var(--rb-sp-none);
    --rb-slider-margin-l: var(--rb-sp-none);
    --rb-header-shadow: var(--rb-sh-none);
    --rb-nav-shadow: var(--rb-sh-none);
    --rb-btn-shadow: var(--rb-sh-btn-shadow);
    --rb-input-shadow: var(--rb-sh-none);
    --rb-tag-shadow: var(--rb-sh-none);
    --rb-chip-shadow: var(--rb-sh-none);
    --rb-badge-shadow: var(--rb-sh-none);
    --rb-card-shadow: var(--rb-sh-none);
    --rb-table-shadow: var(--rb-sh-none);
    --rb-dialog-shadow: var(--rb-sh-lg);
    --rb-msg-shadow: var(--rb-sh-md);
    --rb-tab-shadow: var(--rb-sh-btn-shadow);
    --rb-menu-shadow: var(--rb-sh-md);
    --rb-pg-shadow: var(--rb-sh-none);
    --rb-avatar-shadow: var(--rb-sh-none);
    --rb-checkbox-shadow: var(--rb-sh-none);
    --rb-selbtn-shadow: var(--rb-sh-btn-shadow);
    --rb-drawer-shadow: var(--rb-sh-lg);
    --rb-tooltip-shadow: var(--rb-sh-none);
    --rb-page-pad: var(--rb-page-pad-t) var(--rb-page-pad-r) var(--rb-page-pad-b) var(--rb-page-pad-l);
    --rb-header-pad: var(--rb-header-pad-t) var(--rb-header-pad-r) var(--rb-header-pad-b) var(--rb-header-pad-l);
    --rb-nav-pad: var(--rb-nav-pad-t) var(--rb-nav-pad-r) var(--rb-nav-pad-b) var(--rb-nav-pad-l);
    --rb-btn-pad: var(--rb-btn-pad-t) var(--rb-btn-pad-r) var(--rb-btn-pad-b) var(--rb-btn-pad-l);
    --rb-input-pad: var(--rb-input-pad-t) var(--rb-input-pad-r) var(--rb-input-pad-b) var(--rb-input-pad-l);
    --rb-tag-pad: var(--rb-tag-pad-t) var(--rb-tag-pad-r) var(--rb-tag-pad-b) var(--rb-tag-pad-l);
    --rb-chip-pad: var(--rb-chip-pad-t) var(--rb-chip-pad-r) var(--rb-chip-pad-b) var(--rb-chip-pad-l);
    --rb-badge-pad: var(--rb-badge-pad-t) var(--rb-badge-pad-r) var(--rb-badge-pad-b) var(--rb-badge-pad-l);
    --rb-card-pad: var(--rb-card-pad-t) var(--rb-card-pad-r) var(--rb-card-pad-b) var(--rb-card-pad-l);
    --rb-table-pad: var(--rb-table-pad-t) var(--rb-table-pad-r) var(--rb-table-pad-b) var(--rb-table-pad-l);
    --rb-table-head-pad: var(--rb-table-head-pad-t) var(--rb-table-head-pad-r) var(--rb-table-head-pad-b) var(--rb-table-head-pad-l);
    --rb-dialog-pad: var(--rb-dialog-pad-t) var(--rb-dialog-pad-r) var(--rb-dialog-pad-b) var(--rb-dialog-pad-l);
    --rb-msg-pad: var(--rb-msg-pad-t) var(--rb-msg-pad-r) var(--rb-msg-pad-b) var(--rb-msg-pad-l);
    --rb-tab-pad: var(--rb-tab-pad-t) var(--rb-tab-pad-r) var(--rb-tab-pad-b) var(--rb-tab-pad-l);
    --rb-menu-pad: var(--rb-menu-pad-t) var(--rb-menu-pad-r) var(--rb-menu-pad-b) var(--rb-menu-pad-l);
    --rb-pg-pad: var(--rb-pg-pad-t) var(--rb-pg-pad-r) var(--rb-pg-pad-b) var(--rb-pg-pad-l);
    --rb-selbtn-pad: var(--rb-selbtn-pad-t) var(--rb-selbtn-pad-r) var(--rb-selbtn-pad-b) var(--rb-selbtn-pad-l);
    --rb-drawer-pad: var(--rb-drawer-pad-t) var(--rb-drawer-pad-r) var(--rb-drawer-pad-b) var(--rb-drawer-pad-l);
    --rb-tooltip-pad: var(--rb-tooltip-pad-t) var(--rb-tooltip-pad-r) var(--rb-tooltip-pad-b) var(--rb-tooltip-pad-l);
    --rb-btn-margin: var(--rb-btn-margin-t) var(--rb-btn-margin-r) var(--rb-btn-margin-b) var(--rb-btn-margin-l);
    --rb-input-margin: var(--rb-input-margin-t) var(--rb-input-margin-r) var(--rb-input-margin-b) var(--rb-input-margin-l);
    --rb-tag-margin: var(--rb-tag-margin-t) var(--rb-tag-margin-r) var(--rb-tag-margin-b) var(--rb-tag-margin-l);
    --rb-chip-margin: var(--rb-chip-margin-t) var(--rb-chip-margin-r) var(--rb-chip-margin-b) var(--rb-chip-margin-l);
    --rb-badge-margin: var(--rb-badge-margin-t) var(--rb-badge-margin-r) var(--rb-badge-margin-b) var(--rb-badge-margin-l);
    --rb-card-margin: var(--rb-card-margin-t) var(--rb-card-margin-r) var(--rb-card-margin-b) var(--rb-card-margin-l);
    --rb-table-margin: var(--rb-table-margin-t) var(--rb-table-margin-r) var(--rb-table-margin-b) var(--rb-table-margin-l);
    --rb-msg-margin: var(--rb-msg-margin-t) var(--rb-msg-margin-r) var(--rb-msg-margin-b) var(--rb-msg-margin-l);
    --rb-tab-margin: var(--rb-tab-margin-t) var(--rb-tab-margin-r) var(--rb-tab-margin-b) var(--rb-tab-margin-l);
    --rb-pg-margin: var(--rb-pg-margin-t) var(--rb-pg-margin-r) var(--rb-pg-margin-b) var(--rb-pg-margin-l);
    --rb-avatar-margin: var(--rb-avatar-margin-t) var(--rb-avatar-margin-r) var(--rb-avatar-margin-b) var(--rb-avatar-margin-l);
    --rb-checkbox-margin: var(--rb-checkbox-margin-t) var(--rb-checkbox-margin-r) var(--rb-checkbox-margin-b) var(--rb-checkbox-margin-l);
    --rb-divider-margin: var(--rb-divider-margin-t) var(--rb-divider-margin-r) var(--rb-divider-margin-b) var(--rb-divider-margin-l);
    --rb-skeleton-margin: var(--rb-skeleton-margin-t) var(--rb-skeleton-margin-r) var(--rb-skeleton-margin-b) var(--rb-skeleton-margin-l);
    --rb-selbtn-margin: var(--rb-selbtn-margin-t) var(--rb-selbtn-margin-r) var(--rb-selbtn-margin-b) var(--rb-selbtn-margin-l);
    --rb-slider-margin: var(--rb-slider-margin-t) var(--rb-slider-margin-r) var(--rb-slider-margin-b) var(--rb-slider-margin-l);
}
/* === THEME END === */

/* Component rules driven by the theme variables (edited via the
   /settings/appearance page). !important: PrimeVue's runtime stylesheet
   loads after this file, so overrides must outrank it. */

/* Tags / chips / badges */
.p-tag { font-size: var(--rb-tag-font-size) !important; line-height: var(--rb-tag-line-height, 11px) !important; letter-spacing: normal; border-radius: var(--rb-tag-radius) !important; font-weight: var(--rb-tag-weight) !important; padding: var(--rb-tag-pad) !important; margin: var(--rb-tag-margin); }
.p-chip { background: var(--rb-chip-bg, #ffffff) !important; color: var(--rb-chip-color, #1e293b) !important; border: 1px solid var(--rb-chip-border, #e2e8f0) !important; font-size: var(--rb-chip-font-size, 10px) !important; border-radius: var(--rb-chip-radius, 16px) !important; padding: var(--rb-chip-pad) !important; margin: var(--rb-chip-margin); }
.p-badge { font-size: var(--rb-badge-font-size, 8px) !important; font-weight: var(--rb-badge-weight, 600) !important; padding: var(--rb-badge-pad) !important; margin: var(--rb-badge-margin); transform: translateY(var(--rb-badge-valign-shift, 0)); }

/* Buttons */
.p-button { font-size: var(--rb-btn-font-size, 12px) !important; font-weight: var(--rb-btn-weight, 500) !important; border-radius: var(--rb-btn-radius, 8px) !important; padding: var(--rb-btn-pad) !important; justify-content: var(--rb-btn-align, center) !important; margin: var(--rb-btn-margin); }
/* SplitButton: the global .p-button radius rounds BOTH segments into pills, so
   re-flatten the corners that face the seam; outer corners keep the theme
   radius (or go full-round when the `rounded` prop is set). */
.p-splitbutton .p-splitbutton-button { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; }
.p-splitbutton .p-splitbutton-dropdown { border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; }
.p-splitbutton-rounded .p-splitbutton-button { border-start-start-radius: 8px !important; border-end-start-radius: 8px !important; }
.p-splitbutton-rounded .p-splitbutton-dropdown { border-start-end-radius: 8px !important; border-end-end-radius: 8px !important; }
/* Outlined secondary buttons default to a solid white face instead of
   transparent, so they read like the inputs beside them on the grey page.
   Three plain classes (no !important): PrimeVue's injected :hover rule has
   the same specificity but loads later, so hover states still win. */
.p-button.p-button-outlined.p-button-secondary { background: var(--rb-c-white, #ffffff); }
.p-button.p-button-icon-only { padding: var(--rb-btn-pad-t) !important; }

/* Cards */
.p-card { background: var(--rb-card-bg, #ffffff) !important; border-radius: var(--rb-card-radius, 14px) !important; margin: var(--rb-card-margin); margin-left: var(--rb-card-pos-ml, 0); margin-right: var(--rb-card-pos-mr, 0); }
.p-card-body { padding: var(--rb-card-pad) !important; font-weight: var(--rb-font-weight, 400); text-align: var(--rb-card-align, left); }
/* A list table runs to its card's border: the card keeps its padding for the
   toolbar above, the table's head band and row rules span the full width. The
   pull reads the same tokens as the padding, so any card that retunes them
   (see the narrow-screen block) stays flush. Direct children only — a table
   nested in a preview or a panel keeps its own frame. */
.p-card-content > .p-datatable,
.p-card-content > .ppr-scroll {
    margin-left: calc(-1 * var(--rb-card-pad-l));
    margin-right: calc(-1 * var(--rb-card-pad-r));
}
/* The invoice is a document, not a list: its items table keeps the sheet's margin. */
.inv-sheet .p-card-content > .p-datatable { margin-left: 0; margin-right: 0; }
.p-card-title { font-size: var(--rb-card-title-size, 12px) !important; font-weight: var(--rb-card-title-weight, 600) !important; }

/* Inputs — scoped to page content so the dark header search keeps its styling */
.shell-content .p-inputtext,
.shell-content .p-textarea,
.shell-content .p-select,
.shell-content .p-multiselect,
.shell-content .p-datepicker,
.shell-content .p-inputnumber-input {
    background: var(--rb-input-bg, #ffffff) !important;
    color: var(--rb-input-color, #1e293b) !important;
    border-color: var(--rb-input-border, #cbd5e1) !important;
    border-radius: var(--rb-input-radius, 8px) !important;
    font-size: var(--rb-input-font-size, 12px) !important;
    font-weight: var(--rb-font-weight, 400);
    text-align: var(--rb-input-align, left);
    margin: var(--rb-input-margin);
}
/* Select and MultiSelect paint their value in a label child that carries its
   own colour token, so the input text colour has to reach that element too —
   the wrapper's colour never cascades in. Placeholders keep Aura's muted tone. */
.shell-content .p-select-label:not(.p-placeholder),
.shell-content .p-multiselect-label:not(.p-placeholder) { color: var(--rb-input-color, #5a6178) !important; }
.shell-content .p-inputtext:hover,
.shell-content .p-textarea:hover,
.shell-content .p-select:hover,
.shell-content .p-multiselect:hover,
.shell-content .p-datepicker:hover,
.shell-content .p-inputnumber-input:hover { border-color: var(--rb-input-hover-border, #94a3b8) !important; }
.shell-content .p-inputtext,
.shell-content .p-inputnumber-input { padding: var(--rb-input-pad) !important; }

/* A control nobody can use has to look like one. The rules above paint every
   input's background, colour and border with !important and said nothing
   about the disabled state, so the theme's own greying never survived: a
   disabled field was drawn exactly like a live one, chevron, white fill and
   all. The Destination on a purchase order is fixed once the order exists and
   still invited a click (2026-09-23). Written in the theme's surface tokens,
   so it follows whatever palette Appearance is set to. Checkboxes, switches
   and buttons already dim themselves and are left alone. */
.shell-content .p-inputtext:disabled,
.shell-content .p-textarea:disabled,
.shell-content .p-select.p-disabled,
.shell-content .p-multiselect.p-disabled {
    background: var(--p-surface-100, #f1f5f9) !important;
    border-color: var(--p-surface-200, #e2e8f0) !important;
    color: var(--p-surface-400, #94a3b8) !important;
    cursor: not-allowed;
}
/* Select and MultiSelect keep their value in a label child with its own
   colour token, the same reason the enabled rule above needs its own line. */
.shell-content .p-select.p-disabled .p-select-label,
.shell-content .p-multiselect.p-disabled .p-multiselect-label,
.shell-content .p-select.p-disabled .p-select-dropdown,
.shell-content .p-multiselect.p-disabled .p-multiselect-dropdown,
.shell-content .p-inputtext:disabled + .p-inputicon,
.shell-content .p-inputtext:disabled ~ .p-inputicon {
    color: var(--p-surface-400, #94a3b8) !important;
}
/* And nothing lights up under the pointer that cannot be opened. */
.shell-content .p-inputtext:disabled:hover,
.shell-content .p-textarea:disabled:hover,
.shell-content .p-select.p-disabled:hover,
.shell-content .p-multiselect.p-disabled:hover {
    border-color: var(--p-surface-200, #e2e8f0) !important;
}
/* The cursor alone is unscoped: a dialog, a drawer and a popover are moved to
   the body, outside .shell-content, where the theme greys them by itself but
   a disabled Select still offers a pointer. No colour here, so the dark
   header's own controls keep theirs. */
.p-inputtext:disabled,
.p-textarea:disabled,
.p-select.p-disabled,
.p-multiselect.p-disabled,
.p-datepicker.p-disabled,
.p-inputnumber.p-disabled,
.p-toggleswitch.p-disabled,
.p-toggleswitch.p-disabled .p-toggleswitch-slider,
.p-checkbox.p-disabled,
.p-radiobutton.p-disabled { cursor: not-allowed; }

/* Table — v1 pattern: grey header strip with small muted labels, compact
   single-line rows (nowrap) in the system font, neutral-grey hover. */
.p-datatable {
    font-size: var(--rb-table-font-size) !important;
    font-family: var(--rb-table-font-family, 'Inter'), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    margin: var(--rb-table-margin); margin-left: var(--rb-table-pos-ml, 0); margin-right: var(--rb-table-pos-mr, 0);
}
.p-datatable .p-datatable-thead > tr > th {
    font-size: var(--rb-table-head-font-size, 12px) !important;
    font-weight: var(--rb-table-head-weight) !important;
    line-height: var(--rb-table-head-line-height, 16.7px);
    letter-spacing: normal; /* headers sit untracked; the v1 tracking is body-only */
    padding: var(--rb-table-head-pad, 8px 7px) !important;
    background: var(--rb-table-head-bg, #f9f9fb) !important;
    color: var(--rb-table-head-color, #616161) !important;
    border-color: var(--rb-table-border, #e2e8f0) !important;
    text-align: var(--rb-table-align, left) !important;
    white-space: var(--rb-table-wrap, nowrap);
}
.p-datatable .p-datatable-tbody > tr > td {
    padding: var(--rb-table-pad) !important;
    line-height: var(--rb-table-line-height, 0.95rem);
    letter-spacing: -0.00833em; /* v1 tracking */
    color: var(--rb-table-color, #565a62bd);
    border-color: var(--rb-table-border, #e2e8f0) !important;
    font-weight: var(--rb-table-weight, 400);
    text-align: var(--rb-table-align, left) !important;
    white-space: var(--rb-table-wrap, nowrap);
}
/* The row's LEADING cell gets a wider inset than the 7px between columns:
   at the table's edge that gap reads as text pressed against the card. A
   selection column is left alone — its checkbox is already optically inset,
   and moving it would break its alignment with the header's select-all. */
.p-datatable .p-datatable-thead > tr > th:first-child:not(:has(.p-checkbox)),
.p-datatable .p-datatable-tbody > tr > td:first-child:not(:has(.p-checkbox)) {
    padding-left: var(--rb-table-lead-pad-l, 14px) !important;
}
.p-datatable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover { background: var(--rb-table-hover-bg, #f6f6f7); }
/* Once rows are ticked, the bulk bar takes the head's place: it sits directly
   above the table and carries its own select-all and count, so the column
   headings underneath read as a second, competing header. The bar only exists
   while something is selected, which is why a sibling selector is enough —
   no class to toggle and no state to keep in sync. */
.bulk-bar ~ .p-datatable .p-datatable-thead { display: none; }

/* Aura bolds the header title span directly (600), sidestepping the th
   weight token — inherit so "Header weight" actually governs it. */
.p-datatable .p-datatable-column-title { font-weight: inherit; }
/* v1 pattern: sort arrows only on the actively sorted column; the rest of
   the header stays clean, arrows appearing on hover as the affordance. */
.p-datatable .p-sortable-column:not(.p-datatable-column-sorted):not(:hover) .p-datatable-sort-icon { opacity: 0; }
.p-datatable .p-datatable-sort-icon { transition: opacity 0.15s; }
/* Cells must stay in the table's grey family — .row-link and .text-muted
   default to PrimeVue's bluish slate tokens, which reads as a colour cast
   against the neutral v1 greys. */
.p-datatable .row-link { color: var(--rb-table-muted, #626161) ; font-weight: var(--rb-table-link-weight, 650); }
.p-datatable .text-muted { color: var(--rb-table-muted, #595c5f); }
.p-datatable .p-sortable-column .p-datatable-sort-icon { color: var(--rb-table-head-color, #616161); }

/* Dialogs & confirm dialogs */
.p-dialog { background: var(--rb-dialog-bg, #ffffff) !important; border-radius: var(--rb-dialog-radius, 12px) !important; }
.p-dialog-mask { justify-content: var(--rb-dialog-pos, center) !important; }
.p-dialog .p-dialog-title { font-size: var(--rb-dialog-title-size, 13px) !important; font-weight: var(--rb-dialog-title-weight, 600) !important; }
.p-dialog .p-dialog-header, .p-dialog .p-dialog-content, .p-dialog .p-dialog-footer { padding: var(--rb-dialog-pad) !important; }
.p-dialog .p-dialog-header, .p-dialog .p-dialog-content { text-align: var(--rb-dialog-align, left); }
.p-dialog .p-dialog-content { padding-top: 0 !important; }

/* Messages & toasts */
.p-message { font-size: var(--rb-msg-font-size, 11px) !important; border-radius: var(--rb-msg-radius, 8px) !important; font-weight: var(--rb-font-weight, 400); text-align: var(--rb-msg-align, left); margin: var(--rb-msg-margin); margin-left: var(--rb-msg-pos-ml, 0); margin-right: var(--rb-msg-pos-mr, 0); }
.p-message .p-message-content { padding: var(--rb-msg-pad) !important; }
.p-toast .p-toast-message { font-size: var(--rb-msg-font-size, 11px) !important; border-radius: var(--rb-msg-radius, 8px) !important; }

/* Tabs — v1 pattern: white bar, the active tab is a soft outlined rectangle
   carrying the "edge" shadow step, inactive tabs are flat text. Everything
   here is a token: colours from the palette, sizes from the scales. */
.p-tablist, .p-tablist-tab-list { background: var(--rb-tab-bar-bg, #ffffff) !important; }
.p-tab {
    font-size: var(--rb-tab-font-size, 12px) !important; font-weight: var(--rb-tab-weight, 500) !important;
    color: var(--rb-tab-color, #7a8194) !important;
    padding: var(--rb-tab-pad) !important; margin: var(--rb-tab-margin) !important;
    border-radius: var(--rb-tab-radius, 12px) !important;
    /* transparent border keeps the layout identical when the active outline appears */
    border: 1px solid transparent !important;
}
.p-tab.p-tab-active {
    background: var(--rb-tab-active-bg, #ffffff) !important;
    color: var(--rb-tab-active-color, #202e78) !important;
    font-weight: var(--rb-tab-active-weight, 700) !important;
    border-color: var(--rb-tab-active-border, #d7dae0) !important;
    /* box-shadow: the --rb-tab-shadow rule in the shadows section below */
}
.p-tab:not(.p-tab-active):hover {
    background: var(--rb-tab-hover-bg, #f1f5f9) !important;
    color: var(--rb-tab-hover-color, #303030) !important;
}
.p-tablist-tab-list { justify-content: var(--rb-tab-align, left);    margin-bottom: 2px; }
/* The moving tab pill. It wears the SAME tokens the active tab did, so the
   appearance editor still drives its colour, radius and shadow — it just does
   the wearing in one place that slides, instead of one place per tab.
   .rb-tabs-glide is added by the script that creates it: without the script the
   tabs keep painting their own pill, so this can never leave a tab unmarked. */
.p-tablist-tab-list { position: relative; }
.rb-tab-glider {
    position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
    background: var(--rb-tab-active-bg, #ffffff);
    border: 1px solid var(--rb-tab-active-border, #d7dae0);
    border-radius: var(--rb-tab-radius, 12px);
    box-shadow: var(--rb-tab-shadow);
    /* design 5i: the chip slides to the opened tab in 220ms */
    transition: transform .22s cubic-bezier(.16, 1, .3, 1),
                width .22s cubic-bezier(.16, 1, .3, 1);
}
.rb-tabs-glide .p-tab { position: relative; z-index: 1; }
.rb-tabs-glide .p-tab.p-tab-active {
    /* background: transparent !important; */
    /* border-color: transparent !important;
    box-shadow: none !important; */
}
@media (prefers-reduced-motion: reduce) { .rb-tab-glider { transition: none; } }

/* --- The tab row's box (design 5i) ----------------------------------------
   Spec: orders-tabs-spec.md. A tab is 30px high with a 12px radius and sits
   2px from its neighbour; the selected one is read through the chip that
   slides between them, which is white on a 1px #d7dae0 hairline. Scoped to
   .tabs-row: tabs in settings and dialogs keep the theme's own metrics. */
.tabs-row .p-tablist-tab-list { gap: 2px; }
.tabs-row .p-tab {
    display: inline-flex; align-items: center;
    height: 30px; padding: 0 10px !important; margin: 0 !important;
    /* border-radius: 12px !important; */
}
/* The prev/next arrows on a scrollable strip come with a drop shadow, which
   makes them read as buttons floating over a flat tab row. Set on the element
   rather than on --p-tabs-nav-button-shadow: PrimeVue injects its own token
   values after this sheet, so a :root override here would lose to them. */
.p-tablist-nav-button { box-shadow: none !important; }

/* Collections shows three chips and a "+N more"; the rest are still rendered
   by PrimeVue as empty wrappers, which would otherwise hold their place in the
   row and leave a trail of gaps after the counter. */
#pd-collections .p-multiselect-chip-item:not(:has(.p-chip)),
#pc-collections .p-multiselect-chip-item:not(:has(.p-chip)),
#pb-collections .p-multiselect-chip-item:not(:has(.p-chip)) { display: none; }

/* a tracked tab keeps its dot's room on the left whether one is showing or not */
.tabs-row .p-tab.rb-att-tab { padding-left: 16px !important; }
.tabs-row .rb-tab-glider {
    height: 30px;
    border-radius: 12px;
    border: 1px solid #d7dae0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

/* Pinned filters (Orders, after the old order list). The pin sits at the
   right of a filter's drawer header: tilted it is loose, upright and inked it
   is pinned. A pinned filter also lives in the page toolbar as a compact
   control of its own, with an Unpin footer inside its dropdown. */
.w-acc-title { flex: 1 1 auto; }
.w-pin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-right: 0.35rem; border-radius: 6px;
    color: var(--p-text-muted-color); cursor: pointer;
    transform: rotate(40deg);
    transition: transform .15s ease, color .15s ease, background .15s ease;
}
.w-pin:hover { background: var(--p-surface-100); color: var(--p-text-color); }
/* Pinned reads as ON: solid black and upright, against the muted, tilted rest
   state. --p-primary-color left it the same weight as its neighbours, so a
   pinned row did not look any more active than an unpinned one. */
/* Pinned reads as ON: a filled dark-grey chip in the box .w-pin already
   reserves, upright against the muted, tilted rest state. The ink flips to
   white with it — the near-black pin this replaced would disappear on the
   fill. The hover rule repeats the pair so .w-pin:hover (grey fill, dark ink)
   cannot take a pinned chip back to looking unpinned. */
.w-pin.is-pinned { background: var(--p-text-color); color: #fff; transform: none; }
.w-pin.is-pinned:hover { background: var(--p-text-color); color: #fff; }
/* The cap is full and this one is not pinned: show it as unavailable rather
   than letting the click do nothing without explanation. */
.w-pin.is-locked { opacity: 0.35; cursor: not-allowed; }
.w-pin.is-locked:hover { background: none; color: var(--p-text-muted-color); }
.w-pin-ctl { min-width: 9.5rem; max-width: 15rem;min-width: min-content; }
.w-pin-foot { display: flex; justify-content: flex-end; padding: 4px 6px 2px; border-top: 1px solid var(--p-content-border-color); }
.w-pin-foot .p-button .p-button-icon { transform: rotate(40deg); }

/* The Columns panel. One row per column: its name on the left, an eye on the
   right saying whether it is showing. Edits are staged, so the panel carries a
   footer that answers them — the table only changes on Save. */
.w-colpop.p-popover { min-width: 21rem; }
.w-colpop.p-popover .p-popover-content { padding: 0 !important; }
.w-colpanel-list { max-height: min(60vh, 26rem); overflow-y: auto; padding: 6px 0; }
.w-colopt-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    width: 100%; padding: 9px 14px; border: 0; background: transparent;
    font: inherit; font-size: 13px; color: var(--rb-table-color, #3d4358);
    text-align: left; cursor: pointer;
}
.w-colopt-row:hover { background: var(--p-surface-100); }
.w-colopt-row.is-on { font-weight: 600; }
.w-colopt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-colopt-eye { flex: none; font-size: 0.95rem; color: var(--p-text-muted-color); }
.w-colopt-row.is-on .w-colopt-eye { color: var(--p-primary-color); }
/* the footer stays put while the list scrolls under it */
.w-colpanel-foot {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 8px 10px; border-top: 1px solid var(--p-content-border-color);
    background: var(--p-content-background);
    border-radius: 0 0 var(--rb-menu-radius, 8px) var(--rb-menu-radius, 8px);
}
.w-colpanel-count { flex: 1; font-size: 0.78rem; }

/* A tab's count, on every list page (design 5i). The pages render PrimeVue's
   badge; this gives it the spec's pill box — 20px high, 0 7px, 16px radius,
   sitting on the tab's centre line rather than lifted like a superscript.
   Scoped to .tabs-row, so badges elsewhere keep their own treatment. */
.tabs-row .p-tab .p-badge {
    display: inline-flex; align-items: center; justify-content: center;
    height: 20px; min-width: 20px;
    padding: 0 7px !important;
    border-radius: 16px !important;
    transform: none;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums;
}

/* --- Orders tab attention layer (design 5i) -------------------------------
   Ported from design/orders-tabs; the rules are in orders-tabs-spec.md and the
   model that drives every class below is public/js/admin/attention-tabs.js,
   unchanged from the handover. Only opacity and transform animate here. */
@keyframes rbTint { 0% { opacity: 0; } 22% { opacity: 1; } 62% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rbPing { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes rbDot { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rbFloat { 0% { opacity: 0; transform: translateY(6px); } 25% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes rbNumIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* The float rises 9px above its tab, and the tab strip's viewport is the
   horizontal scroller — overflow-x: auto forces overflow-y: hidden, so it would
   cut the float off. The headroom therefore lives INSIDE the scroller, exactly
   as the design's own rail does: pad it, then pull the box back up. */
.tabs-row .p-tablist-content { padding: 12px 0 2px; margin: -12px 0 -2px; }
.tabs-row .p-tablist, .tabs-row .p-tabs { overflow: visible; }
/* a tracked tab keeps room on its left for the dot, dot or no dot, so nothing
   shifts when one arrives */
.p-tab.rb-att-tab { padding-left: 16px !important; }
.rb-att-dot { position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; pointer-events: none; }
.rb-att-dot > span { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.rb-att-dot .rb-att-ping { animation: rbPing 1s cubic-bezier(.16,1,.3,1) .3s both; }
.rb-att-dot .rb-att-core { animation: rbDot .8s cubic-bezier(.16,1,.3,1) .3s both; }
/* the count pill: grey at rest, the state tint while its own tab is open */
.rb-att-pill {
    display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
    border-radius: 16px; font-size: 12px; font-weight: 500;
    font-variant-numeric: tabular-nums; position: relative; isolation: isolate;
    overflow: hidden; transition: background .3s, color .3s;
}
/* The placeholder is the count pill with its value still unknown: the same
   height, radius and place in the row, so the number does not hop when it
   lands. Its width is a one-digit pill's, the narrowest a count can be, so the
   number only ever grows into the placeholder rather than shrinking out of it. */
.tabs-row .p-tab .p-skeleton,
.rb-att-skel.p-skeleton {
    height: 20px !important;
    width: 21px !important;
    min-width: 21px;
    border-radius: 16px !important;
    margin: 0 !important;
    /* the pages set the badge's superscript lift inline; the pill sits on the
       tab's centre line instead, so it has to be overridden outright */
    transform: none !important;
    flex: none;
}
.rb-att-tint { position: absolute; inset: 0; opacity: 0; pointer-events: none;
               animation: rbTint 1.4s cubic-bezier(.4,0,.2,1) both; }
.rb-att-num { position: relative; display: inline-block;
              animation: rbNumIn .35s cubic-bezier(.16,1,.3,1) both; }
.rb-att-tint-num { position: absolute; inset: 0; display: inline-flex; align-items: center;
                   justify-content: center; opacity: 0; pointer-events: none;
                   animation: rbTint 1.4s cubic-bezier(.4,0,.2,1) both; }
.rb-att-float { position: absolute; right: 6px; top: -9px; font-size: 11px; font-weight: 600;
                font-variant-numeric: tabular-nums; pointer-events: none;
                animation: rbFloat 1.4s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
    .tabs-row * { animation-duration: 0s !important; transition-duration: 0s !important; }
}
/* Secondary tags are the neutral order tags (and the neutral statuses):
   their own grey lozenge, lighter than the coloured severities. */
.p-tag.p-tag-secondary {
    background: var(--rb-tag-secondary-bg, #f1f5f9) !important;
    color: var(--rb-tag-secondary-color, #565a62) !important;
    font-weight: var(--rb-tag-secondary-weight, 400) !important;
}
.p-tag-label, .p-chip-label { width: max-content; }

/* Count badge inside a tab (and secondary badges generally): the grey
   rounded counter from the v1 order tabs — its own token group. */
.p-badge-secondary, .p-tab .p-badge {
    background: var(--rb-tab-count-bg, #f1f1f1) !important;
    color: var(--rb-tab-count-color, #616161) !important;
    font-size: var(--rb-tab-count-font-size, 12px) !important;
    font-weight: var(--rb-tab-count-weight, 500) !important;
    border-radius: var(--rb-tab-count-radius, 16px) !important;
    font-family: 'Inter';
}
/* .p-tab .p-badge { margin-left: 0.4rem; } */

/* Menus, dropdown panels, overlays */
.p-menu, .p-select-overlay, .p-multiselect-overlay, .p-menubar-submenu, .p-datepicker-panel {
    background: var(--rb-menu-bg, #ffffff) !important;
    border-radius: var(--rb-menu-radius, 10px) !important;
}
.p-menu .p-menu-item-label, .p-select-option:not([data-p-selected="true"]), .p-multiselect-option:not([data-p-selected="true"]), .p-menubar-submenu .p-menubar-item-label {
    color: var(--rb-menu-color, #334155) !important;
    font-size: var(--rb-menu-font-size, 12px) !important;
    font-weight: var(--rb-font-weight, 400);
}
.p-menu .p-menu-item-content, .p-select-option, .p-multiselect-option, .p-menubar-submenu .p-menubar-item-content { padding: var(--rb-menu-pad) !important; }
.p-menu .p-menu-item-content:hover,
.p-select-option:not(.p-select-option-selected):hover,
.p-multiselect-option:hover,
.p-menubar-submenu .p-menubar-item-content:hover { background: var(--rb-menu-hover-bg, #f1f5f9) !important; }
/* searchable dropdowns: search box inset 6px on all sides (ref: orders "All locations") */
.p-select-overlay .p-select-header,
.p-multiselect-overlay .p-multiselect-header { padding: 6px !important; }
.p-select-option[data-p-selected="true"], .p-multiselect-option[data-p-selected="true"] {
    background: var(--rb-menu-active-bg, #020617) !important;
    color: var(--rb-menu-active-color, #ffffff) !important;
    font-size: var(--rb-menu-font-size, 12px) !important;
}

/* Shadows — each component points at one step of the shared shadow scale
   (--rb-sh-none/sm/md/lg/xl above), so the geometry and colour are defined
   once and every component using that step follows a change to it. */
#shell-header .header-toolbar { box-shadow: var(--rb-header-shadow) !important; }
#shell-header .header-nav-wrap .p-menubar { box-shadow: var(--rb-nav-shadow) !important; }
.p-button { box-shadow: var(--rb-btn-shadow) !important; }
/* PrimeVue scopes its tag tokens to .p-tag; republish the success pair at :root so
   page CSS (progress bars, done ticks, counters) can paint in the same green as the
   Verified tag. Inside a real tag the component's own values still win. */
:root {
    --p-tag-success-background: var(--p-teal-100); /* = app.js preset: tag.colorScheme.light.success */
    --p-tag-success-color: var(--p-teal-700);
}
.p-inputtext, .p-textarea, .p-select, .p-multiselect { box-shadow: var(--rb-input-shadow) !important; }
/* Focus glow (Appearance → Inputs → Focus glow): a soft halo + blur in the
   chosen colour while an input has focus. Every size is multiplied by the
   on/off flag, so "off" leaves just the focus border. The scanner fields
   (.vd-field / .dsc-field / .vpk-field) consume the same two tokens. */
:root {
    --rb-input-focus-shadow:
        0 0 0 calc(var(--rb-input-focus-size, 1px) * var(--rb-input-focus-mult, 1)) color-mix(in srgb, var(--rb-input-focus-color, var(--rb-primary)) calc(var(--rb-input-focus-alpha, 12) * 1%), transparent),
        0 2px calc(var(--rb-input-focus-blur, 1px) * var(--rb-input-focus-mult, 1)) color-mix(in srgb, var(--rb-input-focus-color, var(--rb-primary)) calc(var(--rb-input-focus-alpha, 12) * 0.6%), transparent);
}
/* Everywhere, not just .shell-content: dialog and popover inputs mount on
   <body>. The dark header search is the one exception. */
.p-inputtext:enabled:focus,
.p-textarea:enabled:focus,
.p-select:not(.p-disabled):focus-within,
.p-multiselect:not(.p-disabled):focus-within,
.p-datepicker:focus-within,
.p-inputnumber-input:enabled:focus {
    border-color: var(--rb-input-focus-border, var(--rb-primary)) !important;
    box-shadow: var(--rb-input-focus-shadow), var(--rb-input-shadow) !important;
    outline: none !important;
}
#shell-header .p-inputtext:enabled:focus { box-shadow: none !important; }
.p-tag { box-shadow: var(--rb-tag-shadow) !important; height: 18px;}
.p-chip { box-shadow: var(--rb-chip-shadow) !important; }
.p-badge { box-shadow: var(--rb-badge-shadow) !important;font-weight: var(--rb-badge-weight, 600) !important; }
.p-card { box-shadow: var(--rb-card-shadow) !important; border: 1px solid #d9d5d5 !important;}
.p-datatable { box-shadow: var(--rb-table-shadow) !important; }
.p-dialog { box-shadow: var(--rb-dialog-shadow) !important; }
.p-message, .p-toast .p-toast-message { box-shadow: var(--rb-msg-shadow) !important; }
/* Active tab only — inactive tabs are flat in the v1 pattern. */
.p-tab.p-tab-active { box-shadow: var(--rb-tab-shadow) !important; }
.p-menu, .p-select-overlay, .p-multiselect-overlay, .p-menubar-submenu, .p-datepicker-panel { box-shadow: var(--rb-menu-shadow) !important; }
.p-paginator { box-shadow: var(--rb-pg-shadow) !important; }
.p-avatar { box-shadow: var(--rb-avatar-shadow) !important; }
.p-checkbox-box { box-shadow: var(--rb-checkbox-shadow) !important; }
.p-selectbutton { box-shadow: var(--rb-selbtn-shadow) !important; }
.p-drawer { box-shadow: var(--rb-drawer-shadow) !important; }
.p-tooltip .p-tooltip-text { box-shadow: var(--rb-tooltip-shadow) !important; }

/* Paginator */
.p-paginator { font-size: var(--rb-pg-font-size, 11px) !important; font-weight: var(--rb-font-weight, 400); justify-content: var(--rb-pg-align, center) !important; padding: var(--rb-pg-pad) !important; margin: var(--rb-pg-margin); }
.p-paginator .p-paginator-page, .p-paginator button { border-radius: var(--rb-pg-radius, 8px) !important; }

/* Checkboxes */
.p-checkbox { width: var(--rb-checkbox-size, 18px) !important; height: var(--rb-checkbox-size, 18px) !important; margin: var(--rb-checkbox-margin); }
.p-checkbox .p-checkbox-box { border-radius: var(--rb-checkbox-radius, 4px) !important; }
.p-checkbox:not(.p-checkbox-checked) .p-checkbox-box { border-color: var(--rb-checkbox-border, #cbd5e1) !important; }

/* Dividers */
.p-divider:before { border-color: var(--rb-divider-color, #e2e8f0) !important; }
.shell-content .p-divider-horizontal { margin: var(--rb-divider-margin) !important; }

/* Skeletons */
.p-skeleton { background: var(--rb-skeleton-color, #e2e8f0) !important; margin: var(--rb-skeleton-margin); }

/* Select buttons */
.p-selectbutton { border-radius: var(--rb-selbtn-radius, 8px) !important; margin: var(--rb-selbtn-margin); }
.p-selectbutton .p-togglebutton { font-size: var(--rb-selbtn-font-size, 13px) !important; padding: var(--rb-selbtn-pad) !important; }

/* Sliders */
.p-slider.p-slider-horizontal { height: var(--rb-slider-height, 4px) !important; }
.p-slider { background: var(--rb-slider-track, #e2e8f0) !important; margin: var(--rb-slider-margin); }

/* Drawers */
.p-drawer { background: var(--rb-drawer-bg, #ffffff) !important; }
.p-drawer .p-drawer-content { padding: var(--rb-drawer-pad) !important; }

/* Avatars */
.p-avatar { margin: var(--rb-avatar-margin); }

/* Tooltips */
.p-tooltip .p-tooltip-text {
    background: var(--rb-tooltip-bg, #0f172a) !important;
    color: var(--rb-tooltip-color, #ffffff) !important;
    font-size: var(--rb-tooltip-font-size, 12px) !important;
    padding: var(--rb-tooltip-pad) !important;
}

/* Navigation (floating menubar) */
#shell-header .header-nav-wrap .p-menubar { background: var(--rb-nav-bg, #ffffff) !important; font-size: var(--rb-nav-font-size, 12px) !important; padding: var(--rb-nav-pad) !important; border: 1px solid #cbd5e1a8 !important; border-top: none !important;}
#shell-header .p-menubar-root-list > .p-menubar-item:not(.nav-active) > .p-menubar-item-content .p-menubar-item-label,
#shell-header .p-menubar-root-list > .p-menubar-item:not(.nav-active) > .p-menubar-item-content .p-menubar-item-icon { color: var(--rb-nav-color, #475569); }
#shell-header .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content:hover { background: var(--rb-nav-hover-bg, #f1f5f9) !important; }
/* Item type: the label inherits the menubar's size, but its weight and line
   box come from the page defaults, so both get their own nav tokens. */
#shell-header .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-item-label {
    font-weight: var(--rb-nav-weight, 400);
    line-height: var(--rb-nav-line-height, 13px);
}

:root {
    --shell-sidebar-w: 232px;
    --shell-border: #e2e8f0;
    --shell-bg: #f8fafc;
    --shell-brand: #10b981;
}

* { box-sizing: border-box; }

/* Form controls don't inherit the page font — the UA stylesheet gives every
   <button> the system font. PrimeVue declares `font-family: inherit` on Button,
   InputText, Textarea and ToggleButton, but NOT on Tab, AccordionHeader or the
   paginator pages, so those rendered in Segoe UI instead of Inter. */
button, input, select, textarea { font-family: inherit; }

html { font-size: var(--rb-font-size, 13px); } /* rem root — scales all PrimeVue sizing */

body {
    margin: 0;
    font-family: var(--rb-font-family, system-ui), 'Segoe UI', Roboto, sans-serif;
    background: var(--rb-page-bg, #f1f1f1);
    color: var(--rb-text-color, #1e293b);
    font-weight: var(--rb-font-weight, 400);
}

.shell { display: flex; min-height: 100vh; }

/* Sidebar */
.shell-sidebar {
    width: var(--shell-sidebar-w);
    flex-shrink: 0;
    background: #0f172a;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
}

.shell-brand {
    padding: 1.1rem 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

.shell-brand span { color: var(--shell-brand); }

.shell-nav { flex: 1; padding: 0.5rem 0; }

.shell-nav a,
.shell-nav .nav-disabled {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1.25rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.92rem;
}

.shell-nav a:hover { background: #1e293b; color: #fff; }
.shell-nav a.active { background: #1e293b; color: #fff; border-left: 3px solid var(--shell-brand); padding-left: calc(1.25rem - 3px); }
.shell-nav .nav-disabled { opacity: 0.35; cursor: not-allowed; }
.shell-nav .pi { font-size: 1rem; }

/* Header */
.shell-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--shell-border);
}

.shell-header .org-switcher select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--shell-border);
    border-radius: 6px;
    background: #fff;
    font-size: 0.9rem;
}

.shell-user { display: flex; align-items: center; gap: 0.9rem; font-size: 0.92rem; }
.shell-user .logout { color: #6B7280; cursor: pointer; }
.shell-user .logout:hover { color: #dc2626; }

/* Current-page nav item: the label and chevron carry the active colour. */
#shell-header .nav-active > .p-menubar-item-content .p-menubar-item-label,
#shell-header .nav-active > .p-menubar-item-content .p-menubar-item-icon,
#shell-header .nav-active > .p-menubar-item-content .p-menubar-submenu-icon,
#shell-header .nav-active > .p-menu-item-content .p-menu-item-label,
#shell-header .nav-active > .p-menu-item-content .p-menu-item-icon {
    color: var(--rb-nav-active, var(--p-indigo-500));
    font-weight: var(--rb-nav-active-weight, 600);
}
/* Idle nav icons keep their own muted tone; the active item's icon rides its
   label colour (the rule above). */
#shell-header .p-menubar-root-list > .p-menubar-item:not(.nav-active) > .p-menubar-item-content .p-menubar-item-icon {
    color: var(--rb-nav-icon, #b5b5b5) !important;
}

/* Top header bar (ref: charcoal, themeable) — all header styling lives here,
   zero inline styles in the layout. */
#shell-header { position: sticky; top: 0; z-index: 100; }

#shell-header .header-toolbar {
    position: relative;
    border: none; border-radius: 0;
    padding: var(--rb-header-pad);
    background: var(--rb-header-bg, #3a3a3a);
}

#shell-header .header-logo {
    background: var(--p-surface-0); color: var(--p-zinc-900);
    font-weight: 800; font-size: 1.1rem;
    width: 2.25rem; height: 2.25rem;
    /* The mark is an opaque square PNG, so the box's radius shows only if the
       image is clipped to it — without overflow:hidden the corners stay sharp. */
    border-radius: 20%; overflow: hidden;   /* the layout's inline rule sets the same, with !important */
}
#shell-header .header-logo img { border-radius: inherit; }
/* The header's side padding is narrower than the page's, which left the mark
   hanging out to the left of everything under it. Push the start group in by
   the difference so the mark's left edge sits on the page content's left edge —
   computed from both tokens, so it holds when either is changed in Appearance. */
#shell-header .header-toolbar .p-toolbar-start {
    margin-left: max(0px, calc(var(--rb-page-pad-l, 0px) - var(--rb-header-pad-l, 0px)));
}

#shell-header .header-search { width: min(40rem, 55vw); }
/* Search position: the toolbar carries search-left|center|right from the setting */
#shell-header .search-center .p-toolbar-center {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
#shell-header .search-left .p-toolbar-center { margin-right: auto; margin-left: 0.75rem; }
#shell-header .search-right .p-toolbar-center { margin-left: auto; margin-right: 0.75rem; }
#shell-header .p-inputtext {
    background: var(--rb-header-search-bg, #4b4b4b); border-color: transparent;
    color: var(--rb-header-search-color, #e5e5e5); border-radius: 10px;
}
/* The "back to" chip beside it: the field's height and corners, so the pair match. */
#shell-header .p-toolbar-center > .p-button { align-self: stretch; border-radius: 10px !important; }
#shell-header .header-kbd {
    width: auto; font-style: normal;
    color: var(--p-text-muted-color); font-size: 0.8rem;
}

/* Breathing room between the header actions. */
#shell-header .header-toolbar .p-toolbar-end { gap: 0.25rem; }
#shell-header .header-org-label { white-space: nowrap; font-weight: 600; color: #f5f5f5; }
#shell-header .header-avatar {
    cursor: pointer;
    background: var(--rb-avatar-bg, var(--p-teal-400)); color: var(--p-surface-0);
    font-weight: 700; border-radius: var(--rb-avatar-radius, var(--p-border-radius-md));
}
/* The account button (avatar + org name): the two sit close, and the button
   hugs the avatar so it is no taller than the icon buttons beside it. */
#shell-header .p-toolbar-end > .p-button:has(> .header-avatar) {
    gap: 0.5rem;
    padding: 0.1875rem 0.75rem 0.1875rem 0.1875rem !important;
    border-radius: calc(var(--rb-avatar-radius, var(--p-border-radius-md)) + 0.1875rem) !important;
}

/* The wrap mirrors .ohm-layout.ohm-wide — the ORDER DETAIL grid — track for
   track, gap for gap, on the same page padding, and the menubar takes the
   middle track. So the bar's box IS the centre column the order card sits in.
   (.od2 is the old design-mock width and is NOT what that page uses; sizing the
   bar to its 76rem made the bar far wider than the card and left the dead space
   either side.) Then: width:100% fills that box even for a short menu, so a
   four-item role gets a full bar rather than a stub; min-width:max-content lets
   a menu too long for the box size to its items instead of folding onto a
   second line or padding itself out; justify-self:center spends any overflow
   evenly, so the bar stays centred on the column either way. Net effect — the
   bar is exactly max(centre column, its own items), never wider. */
#shell-header .header-nav-wrap {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(800px, 1000px) minmax(220px, 1fr);
    gap: 0 10px;
    padding-left: var(--rb-page-pad-l, 0px); padding-right: var(--rb-page-pad-r, 0px);
    pointer-events: none;
}
#shell-header .header-nav-wrap .p-menubar {
    grid-column: 2;
    width: 100%;
    min-width: max-content;
    justify-self: center;
    pointer-events: auto;
    border-radius: 0 0 var(--p-border-radius-lg) var(--p-border-radius-lg);
    box-shadow: var(--p-overlay-navigation-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    justify-content: center;
}
/* One row, always (above the stacked tier): the bar takes the width its
   items need, centered — overflowing its grid track evenly on both sides
   when the track runs narrower than the items — rather than breaking
   "Platform" onto a second line. */
@media (min-width: 960px) {
    #shell-header .header-nav-wrap .p-menubar .p-menubar-root-list { flex-wrap: nowrap; }
}

#shell-header .p-iconfield .p-inputicon { color: #b0b0b0; }
#shell-header .p-inputtext::placeholder { color: #a8a8a8; }
#shell-header .p-button.p-button-secondary.p-button-text { color: #c9c9c9; }
#shell-header .p-divider-vertical { border-color: #5a5a5a; height: 1.4rem; margin: 0 0.15rem; }

/* Content */
.shell-content { padding: var(--rb-page-pad); }
.page-title { margin: 0 0 1.25rem; font-size: 1.35rem; font-weight: 650; }

/* Dashboard cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.stat-value { font-size: 1.8rem; font-weight: 700; }
.stat-label { color: #6B7280; font-size: 0.88rem; }

/* Shared page chrome + utilities (pages are markup + classes only) */
.page-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.page-title-text { font-size: 1.2rem; font-weight: 600; }
.filters-row { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.tabs-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.inline-row { display: inline-flex; align-items: center; gap: 0.4rem; }
.inline-row-md { display: inline-flex; align-items: center; gap: 0.5rem; }
.inline-row-lg { display: inline-flex; align-items: center; gap: 0.6rem; }
.tag-list { display: inline-flex; align-items: center; gap: 0.25rem; }
.table-wide { min-width: 92rem; }
.table-empty { padding: 2rem; text-align: center; color: var(--p-text-muted-color); }
.row-link { font-weight: 600; color: var(--p-text-color); text-decoration: none; }
.row-link:hover{    color: #1E45B8 !important;    text-decoration: underline;}
.more-link { color: var(--p-sky-500); text-decoration: none; font-weight: 500; }
/* Two classes so this outranks primeicons' 1rem `.pi` default wherever the
   load order puts it: the chevron stays a small affordance next to "more". */
.more-link .pi { font-size: 0.6rem; font-weight: 400; }
.icon-ok { color: #33b233; }
/* Order-status progress icons: tag left, fixed icon trio right-aligned so
   the icons form straight columns across rows (v1 pattern). */
.status-cell { display: flex; align-items: center; gap: 0.6rem; width: 100%; }
.status-icons { margin-left: auto; display: inline-flex; align-items: center; gap: 0.45rem; }
.status-icons .pi { font-size: 1.1rem; width: 1em; text-align: center; }
.icon-dim { color: #cdd0d4; }
.icon-plain { color: var(--p-text-color); }
.icon-xs { font-size: 0.7rem; }
.text-muted { color: var(--p-text-muted-color); }
/* The clock part of a date-time (<rb-when>, and the hand-built date, time
   cells): its own colour, so date and time read apart. */
.rb-time { color: var(--rb-time-color); }
.mono { font-family: monospace; }
.strong { font-weight: 600; }
/* min-width: 0 — a flex child defaults to min-width:auto, so the scrollable tab
   strip refuses to shrink below the width of all its tabs and pushes the whole
   card wider than the viewport instead of scrolling inside itself. */
.flex-1 { flex: 1; min-width: 0; }
.mb-3 { margin-bottom: 0.75rem; }
.mt-3 { margin-top: 0.75rem; }
.w-select { min-width: 10rem; }
.w-loc-tick { display: inline-block; width: 1.1em; margin-right: 0.3rem; font-size: 0.85em; }
/* hovered / keyboard-focused option previews the tick (muted); the selected row keeps the solid one */
.p-select-option:hover .w-loc-tick:not(.pi-check)::before,
.p-select-option.p-focus .w-loc-tick:not(.pi-check)::before { content: "\e909"; opacity: 0.45; }

/* Sort-by popover: layout only — components carry the Aura styling. The
   direction rows read as menu items (ref: legacy admin): normal text color,
   left-aligned, and the active one marked by the content-hover token. */
.sort-pop { display: flex; flex-direction: column; gap: 0.85rem; min-width: 15rem; }
.sort-pop-title { font-size: 0.8rem; font-weight: 600; color: var(--p-text-muted-color); }
.sort-pop-option { display: flex; align-items: center; gap: 0.7rem; }
.sort-pop-option label { cursor: pointer; }
.sort-pop .p-divider { margin: 0.45rem 0; }
.sort-pop-dir { justify-content: flex-start !important; color: var(--p-text-color) !important; }
.sort-pop-dir-active { background: var(--p-content-hover-background) !important; }

/* Full tag list popover (Tags column "more" link) */
.tags-pop { display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: 18rem; }

/* Discount hover popover: breakdown rows, total set off by a rule. */
.discount-pop { display: flex; flex-direction: column; gap: 0.3rem; min-width: 13rem; }
.discount-pop-title { font-size: 0.8rem; font-weight: 600; color: var(--p-text-muted-color); margin-bottom: 0.15rem; }
.discount-pop-row { display: flex; justify-content: space-between; gap: 1.2rem; }
.discount-pop-val { font-weight: 600; white-space: nowrap; }
.discount-pop-total { border-top: 1px solid var(--p-content-border-color); padding-top: 0.35rem; margin-top: 0.2rem; }
.discount-pop-code { color: var(--p-text-muted-color); }
.discount-pop-sub { color: var(--p-text-muted-color); font-size: 0.78rem; }

/* Selection action bar (orders list): layout gaps only — Aura styles the rest. */
.bulk-bar .p-toolbar-start { gap: 0.75rem; }
.bulk-bar .p-toolbar-end { gap: 0.5rem; }

/* Add Orders Tag dialog: stack + suggestion grid (Aura styles the controls). */
.tagdlg { display: flex; flex-direction: column; gap: 0.75rem; }
.tagdlg-label { font-weight: 600; }
.tagdlg-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* a very long tag stays inside the dialog: the chip clips its label with an
   ellipsis rather than pushing the dialog into a sideways scroll */
.tagdlg-chips .p-chip { max-width: 100%; min-width: 0; }
.tagdlg-chips .p-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagdlg .p-divider { margin: 0; }
/* Frequently used tags flow as compact pills sized to their text — no
   three-column grid breaking "duplicate-of:1026" across two lines. The
   list scrolls inside itself past a few rows. */
.tagdlg-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 11.5rem; overflow-y: auto; padding: 1px; }
.tagdlg .tagdlg-suggestion.p-button {
    padding: 3px 11px 3px 9px; font-size: 12.5px; font-weight: 500; gap: 5px;
    white-space: nowrap; max-width: 100%;
    border-color: var(--p-content-border-color); color: var(--p-text-color); background: var(--p-surface-0);
}
.tagdlg .tagdlg-suggestion.p-button .p-button-label { overflow: hidden; text-overflow: ellipsis; }
.tagdlg .tagdlg-suggestion.p-button .p-button-icon { font-size: 10px; color: var(--p-text-muted-color); }
.tagdlg .tagdlg-suggestion.p-button:hover {
    background: var(--p-surface-100); border-color: var(--p-text-muted-color); color: var(--p-text-color);
}
.tagdlg .tagdlg-suggestion.p-button:hover .p-button-icon { color: var(--p-primary-color); }

/* Bulk "Order Actions" dialog: field stack only. */
.bulk-form { display: flex; flex-direction: column; gap: 0.9rem; }
.bulk-row { display: flex; flex-direction: column; gap: 0.3rem; }
.bulk-row > label { color: var(--p-text-muted-color); font-size: 0.85rem; }
.bulk-row-inline { flex-direction: row; align-items: center; gap: 0.5rem; }
.bulk-row-inline > label { cursor: pointer; }
.w-select-wide { min-width: 11rem; }
/* The tab strip starts where the table's first column does. The table runs to
   the card's border, so its first cell sits one cell-padding in, while the tab
   row still carries the card's padding — that mismatch is what made the tabs
   look indented against the select-all box. All three terms are tokens, so the
   two stay locked together if any of them is retuned. */
.tabs-row .p-tabs {
    margin-left: calc(var(--rb-table-pad-l) - var(--rb-card-pad-l));
}
.w-icon-btn { width: 3rem; }
/* Table toolbar trio (Export / Columns / Sort): one fixed square box for all
   three, so the icon-only buttons and the icon-only multiselect can never
   drift apart in size, padding or radius. */
.tabs-row .p-button.p-button-icon-only,
.w-icon-btn.p-multiselect {
    width: 2.35rem !important;
    height: 2.2rem !important;
    padding: 0 !important;
    border-radius: var(--rb-btn-radius, 8px) !important;
}
/* Same fix the InputGroup block below needs: the theme forces a radius on
   every button and input with !important, which defeats ButtonGroup's own
   corner-joining. Restore it for grouped children — including the Columns
   MultiSelect, which ButtonGroup's Button-only rules never reach. */
.tabs-row .p-buttongroup {
    display: inline-flex; align-items: center;
    /* The theme drops a shadow on every button AND every input. Inside a joined
       control each segment casts its own, so the seams darken and the three read
       as separate raised chips. One shadow on the group, none on the parts. */
    border-radius: var(--rb-btn-radius, 6px);
    /* box-shadow: var(--rb-btn-shadow); */
}
/* Every selector below repeats the segment's own two classes: the sizing rule
   above is `.tabs-row .p-button.p-button-icon-only`, so a plain `> *` loses the
   !important tie on border-radius and the end segments keep all four corners
   rounded. Same class count is not enough — these carry one more. */
.tabs-row .p-buttongroup > .p-button.p-button-icon-only,
.tabs-row .p-buttongroup > .p-multiselect.w-icon-btn {
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    /* One border colour across the group: the outlined buttons and the
       MultiSelect otherwise sit on different tokens, so the seams between
       segments read darker than the outer edges. */
    border-color: var(--rb-input-border, #cbd5e1) !important;
}
.tabs-row .p-buttongroup > .p-button.p-button-icon-only:first-child,
.tabs-row .p-buttongroup > .p-multiselect.w-icon-btn:first-child {
    border-start-start-radius: var(--rb-btn-radius, 8px) !important;
    border-end-start-radius: var(--rb-btn-radius, 8px) !important;
}
.tabs-row .p-buttongroup > .p-button.p-button-icon-only:last-child,
.tabs-row .p-buttongroup > .p-multiselect.w-icon-btn:last-child {
    border-start-end-radius: var(--rb-btn-radius, 8px) !important;
    border-end-end-radius: var(--rb-btn-radius, 8px) !important;
}
/* No seams: each segment drops the borders that face its neighbours, so only
   the group's outer edge is drawn. */
.tabs-row .p-buttongroup > .p-button.p-button-icon-only:not(:last-child),
.tabs-row .p-buttongroup > .p-multiselect.w-icon-btn:not(:last-child) {
    border-inline-end: 0 none !important;
}
.tabs-row .p-buttongroup > .p-button.p-button-icon-only:not(:first-child),
.tabs-row .p-buttongroup > .p-multiselect.w-icon-btn:not(:first-child) {
    border-inline-start: 0 none !important;
}

.w-icon-btn.p-multiselect { align-items: center; }
.w-icon-btn.p-multiselect .p-multiselect-label-container { display: none; }
.w-icon-btn.p-multiselect .p-multiselect-dropdown { width: 100%; height: 100%; justify-content: center; }

/* FOUC guard: until Vue mounts, the raw template renders — dialog bodies
   inline, literal {{ }} text. Vue stamps `data-v-app` on the root when it
   takes over, so hiding roots WITHOUT it needs no markup changes and covers
   every page this stylesheet reaches (v-cloak kept as belt-and-braces).
   The :has rule paints a shimmer in the content area while bundles load. */
[v-cloak] { display: none !important; }
#page:not([data-v-app]), #app:not([data-v-app]) { display: none !important; }
#shell-header:not([data-v-app]) .appearance-drawer,
#shell-header:not([data-v-app]) .rb-pings,
#shell-header:not([data-v-app]) .rb-ping-dot,
#shell-header:not([data-v-app]) .header-org-label { display: none !important; }

/* Slim neutral scrollbars everywhere (v1 pattern): thin rounded grey thumb
   on a transparent track — table scrollers, drawers, dropdown panels, page.
   Standard properties cover Firefox + Chrome 121+; the ::-webkit rules keep
   older Chromium on the same look. */
* { scrollbar-width: thin; scrollbar-color: #c9cdd2 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c9cdd2; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #aeb3b9; }
::-webkit-scrollbar-corner { background: transparent; }

/* Shared page chrome */
/* Page heading row (Order Manager + its actions). Scoped to .page-toolbar, not
   .p-toolbar — the shell header is a Toolbar too and must stay flush. */
.page-toolbar { border: none !important; background: transparent !important; padding: 0.25rem 0 0.75rem !important; margin: 0 13px 0 19px !important; }

/* Appearance page — full width, compact */
.appearance-page { width: 100%; }
.appearance-heading { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.appearance-title { font-size: 1.15rem; font-weight: 600; }
.appearance-subtitle { color: var(--p-text-muted-color); font-size: 0.86rem; }
.appearance-actions { display: flex; gap: 0.5rem; }
.appearance-error { margin-bottom: 0.75rem; }

.theme-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.theme-card-head .section-reset { width: 1.8rem; height: 1.8rem; }
.theme-card-title { font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.45rem; }
.theme-card-title .pi { color: var(--p-text-muted-color); font-size: 0.9rem; }

.theme-preview { margin-bottom: 0.85rem; }
.section-preview {
    display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
    padding: 0.55rem 0.6rem; margin-bottom: 0.7rem;
    background: var(--rb-page-bg, #f1f1f1);
    border: 1px dashed var(--shell-border); border-radius: 10px;
}
.section-preview-table { display: block; padding: 0.35rem; }
.preview-text-sample { font-weight: 600; }
.preview-nav-plain { color: var(--rb-nav-color, #475569); }
.preview-badge-host { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; }
.preview-mini-card-title { font-size: var(--rb-card-title-size, 12px); font-weight: var(--rb-card-title-weight, 600); margin-bottom: 0.25rem; }
.preview-dialog-mock { position: static; width: 100%; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.preview-msg { width: 100%; }
.preview-tabs { width: 100%; }
.preview-menu { width: 100%; }
.preview-menu-active {
    background: var(--rb-menu-active-bg, #020617); color: var(--rb-menu-active-color, #ffffff);
    font-size: var(--rb-menu-font-size, 12px); padding: var(--rb-menu-pad);
    border-radius: 4px; width: 100%;
}
.preview-pg-mock { display: inline-flex; gap: 0.3rem; padding: 0.3rem; }
.preview-avatar-mock {
    background: var(--rb-avatar-bg, #2dd4bf); color: #fff; font-weight: 700;
    width: 2rem; height: 2rem; display: inline-flex; align-items: center;
    justify-content: center; border-radius: var(--rb-avatar-radius, 8px);
}
.preview-divider-mock { border-top: 1px solid var(--rb-divider-color, #e2e8f0); width: 100%; }
.preview-slider { width: 9rem; }
.preview-drawer-mock {
    background: var(--rb-drawer-bg, #ffffff); border: 1px solid var(--shell-border);
    border-radius: 10px; padding: 0.55rem 0.8rem; width: 100%;
    box-shadow: var(--rb-drawer-shadow);
}
.preview-tooltip-mock {
    background: var(--rb-tooltip-bg, #0f172a); color: var(--rb-tooltip-color, #ffffff);
    font-size: var(--rb-tooltip-font-size, 12px); padding: var(--rb-tooltip-pad); border-radius: 6px;
    box-shadow: var(--rb-tooltip-shadow);
}
.preview-mini-card {
    background: var(--rb-card-bg, #ffffff); border-radius: var(--rb-card-radius, 14px);
    box-shadow: var(--rb-card-shadow);
    padding: 0.6rem 0.9rem; width: 100%;
}
/* Masonry via multi-column: at most 3 boxes across, and cards keep their
   natural height instead of stretching to the tallest card in the row. */
.theme-grid { columns: 3; column-gap: 0.85rem; max-width: 1440px; }
.theme-grid > * {
    /* p-card is a flex box; multicol fragments flex boxes unless told not to. */
    display: block; width: 100%; margin: 0 0 0.85rem;
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
}
@media (max-width: 1180px) { .theme-grid { columns: 2; } }
@media (max-width: 760px) { .theme-grid { columns: 1; } }

.theme-fields { display: flex; flex-direction: column; gap: 0.45rem; }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; font-size: 0.88rem; }
.theme-color-wrap { display: inline-flex; align-items: center; gap: 0.4rem; }
.theme-hex-input { width: 5.6rem; font-family: monospace; }

/* Named colour palette — the only place a hex is chosen. */
.palette-card { margin-bottom: 0.85rem; }
.palette-hint { color: var(--p-text-muted-color); font-size: 0.82rem; margin: 0 0 0.7rem; }
.palette-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.palette-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    border: 1px solid var(--shell-border); border-radius: 999px;
    padding: 0.2rem 0.25rem 0.2rem 0.3rem; background: var(--rb-card-bg, #fff);
}
.palette-chip .p-colorpicker-preview { width: 1.35rem; height: 1.35rem; border-radius: 50%; }
.palette-name {
    width: 7.5rem; border: none !important; background: transparent !important;
    box-shadow: none !important; padding: 0 0.1rem !important; font-size: 0.82rem;
}
/* The hex field is the one place a literal colour is typed — keep it legible. */
.palette-chip .theme-hex-input {
    width: 5.2rem; font-size: 0.78rem; text-transform: lowercase;
    padding: 0.1rem 0.3rem !important;
}
.palette-usage {
    font-size: 0.68rem; min-width: 1.1rem; text-align: center; border-radius: 999px;
    padding: 0.05rem 0.3rem; background: var(--p-surface-200, #e2e8f0); color: var(--p-text-muted-color);
}
.palette-chip .palette-remove { width: 1.4rem; height: 1.4rem; }
.palette-dialog { width: 21rem; }
.palette-dialog-body { display: flex; flex-direction: column; gap: 0.7rem; }
.palette-dialog-body label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.88rem; }
.palette-dialog-color { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Token panels: the palette and the four size scales. */
.token-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0.85rem; margin-bottom: 0.85rem; align-items: start; }
.token-card-wide { grid-column: 1 / -1; }
.step-list { display: flex; flex-direction: column; gap: 0.35rem; }
.step-row { display: flex; align-items: center; gap: 0.4rem; }
/* Three classes deep so the page-wide .p-inputnumber-input width below,
   which is declared later with equal specificity, does not win here. */
.token-panels .step-row .p-inputnumber-input { width: 3.6rem; text-align: center; }
.shadow-head, .shadow-row { display: grid; grid-template-columns: 1.6rem 8rem repeat(4, 4.4rem) 10rem 5rem 1.8rem; gap: 0.4rem; align-items: center; }
.shadow-head { font-size: 0.72rem; color: var(--p-text-muted-color); padding-bottom: 0.15rem; }
.token-panels .shadow-row .p-inputnumber-input { width: 100%; text-align: center; }
.shadow-dot {
    width: 0.9rem; height: 0.9rem; border-radius: 4px; flex: none;
    background: var(--rb-card-bg, #fff); border: 1px solid var(--shell-border);
}
.shadow-dot-lg { width: 1.2rem; height: 1.2rem; }

/* Size fields: a step reads "SM · 12 px" so the name never hides the value. */
.theme-step-select { min-width: 9.5rem; max-width: 12rem; }
.theme-row-box { align-items: flex-end; }
.theme-box { display: inline-flex; gap: 0.3rem; }
.theme-box-side { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.theme-box-side small { font-size: 0.62rem; color: var(--p-text-muted-color); line-height: 1; }
.theme-box-select { width: 4.6rem; }
.theme-box-select .p-select-label { padding-left: 0.4rem; padding-right: 0; font-size: 0.78rem; }

/* Colour fields: swatch + name, palette entries only. */
.theme-color-select { min-width: 9.5rem; max-width: 12rem; }
.swatch-row { display: inline-flex; align-items: center; gap: 0.45rem; overflow: hidden; white-space: nowrap; }
.swatch {
    width: 0.85rem; height: 0.85rem; border-radius: 4px; flex: none;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18);
}
.palette-add { width: 100%; justify-content: flex-start; }

/* compact controls on this page only */
.appearance-page .p-card-body { padding: 0.9rem 1rem; gap: 0.5rem; }
.appearance-page .p-inputnumber-input { width: 3.4rem; text-align: center; }
.appearance-page .p-colorpicker-preview { width: 1.6rem; height: 1.6rem; }

/* Preview samples wired straight to the theme variables (live). */
.preview-header-sample {
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--rb-header-bg); border-radius: 8px;
    padding: 0.4rem 0.8rem; margin-bottom: 0.55rem;
}
.preview-logo {
    background: #fff; color: #111; font-weight: 800;
    width: 1.6rem; height: 1.6rem; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 8px;
}
.preview-search { background: var(--rb-header-search-bg, #4b4b4b); color: var(--rb-header-search-color, #e5e5e5); padding: 0.2rem 1rem; border-radius: 8px; }
.preview-header-label { margin-left: auto; color: #f5f5f5; font-weight: 600; }
.preview-nav-sample {
    display: flex; gap: 1.3rem; padding: 0.35rem 0.8rem; margin-bottom: 0.75rem;
    border: 1px solid var(--shell-border); border-radius: 10px;
    font-size: var(--rb-nav-font-size);
}
.preview-nav-active { color: var(--rb-nav-active); font-weight: 600; }
.preview-nav-item { color: var(--p-text-muted-color); }
.preview-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.preview-input { width: 9rem; }
.preview-select { min-width: 8.5rem; }
.preview-table { max-width: 34rem; }
.rb-preview-primary-btn {
    background: var(--rb-primary) !important; border: 1px solid var(--rb-primary) !important;
    color: #fff !important; cursor: pointer; padding: 0.35rem 0.85rem;
}
.rb-preview-primary-btn:hover { background: var(--rb-primary-hover, #334155) !important; border-color: var(--rb-primary-hover, #334155) !important; }

/* Appearance drawer (header palette button) */
.appearance-drawer { width: var(--rb-drawer-width, 416px) !important; max-width: 92vw; }
.appearance-drawer .drawer-editor { display: flex; flex-direction: column; gap: 0.85rem; }
.appearance-drawer .drawer-actions { display: flex; gap: 0.5rem; margin-bottom: 0.85rem; }

/* Order detail shared bits (canvas + product thumb, used by the v2 pages) */
body:has(.od-page) { background: var(--rb-page-bg, #f1f1f1); }
.od-thumb {
    width: 3.1rem; height: 3.1rem; object-fit: contain; padding: 0.15rem;
    border: 1px solid var(--p-surface-200); border-radius: var(--p-border-radius-sm); background: #fff;
}

/* Order detail v2 (design mock, own design) */
.od2 { max-width: 76rem; margin: 0 auto; }
.od2-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.od2-crumbs.p-breadcrumb { background: transparent !important; padding: 0 0 0.25rem 0 !important; border: none; }
.od2-title-row { display: flex; align-items: center; gap: 0.6rem; }
.od2-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.od2-sub { margin-top: 0.3rem; font-size: 0.9rem; }
.od2-head-actions { display: flex; gap: 0.5rem; padding-bottom: 0.25rem; align-items: center; }
.od2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.1rem; align-items: start; }
.od2-main, .od2-side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
/* Product detail only: the two columns finish level. The side column stops at
   its content by default, which left a band of white beside the bottom of the
   Details card; stretching the column and letting its LAST card take up the
   slack closes that. Scoped to .pd because the order page shares .od2-grid and
   deliberately keeps its columns top-aligned. */
.pd .od2-grid { align-items: stretch; }
.pd .od2-side > *:last-child { flex: 1 1 auto; }

.od2-card-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.9rem; }
.od2-spacer { margin-left: auto; }
.od2-items .p-datatable-thead > tr > th { font-size: 0.85rem; }
/* Product detail (and its Add-product twin): table headers sit on the card,
   no grey band. Outranks the global head rule above, which is !important. */
.od2.pd .p-datatable .p-datatable-thead > tr > th { background: transparent !important; }
.od2-right, .od2-items td.od2-right { text-align: right; }
.od2-prod { display: flex; gap: 0.8rem; align-items: center; }
.od2-prod-name { font-weight: 500; }
.od2-prod-meta { display: flex; align-items: center; gap: 0.5rem; color: var(--p-text-muted-color); font-size: 0.85rem; margin-top: 0.25rem; }
.od2-strike { text-decoration: line-through; margin-right: 0.3rem; }
.od2-totals { width: 22rem; max-width: 100%; margin-left: auto; margin-top: 1rem; }
.od2-trow { display: flex; justify-content: space-between; align-items: center; padding: 0.22rem 0; }
.od2-green { color: var(--p-tag-success-color); }
.od2-amber { color: var(--p-amber-600); }
.od2-row-actions { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.od2-ship + .od2-ship { border-top: 1px solid var(--p-surface-200); margin-top: 1.1rem; padding-top: 1.1rem; }
.od2-carrier { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; }
.od2-carrier-mt { margin-top: 0.9rem; }
.od2-track { font-family: ui-monospace, Consolas, monospace; color: var(--p-primary-color); }
.od2-label { font-size: 0.76rem; font-weight: 600;  letter-spacing: 0.05em; color: var(--p-text-muted-color); margin-bottom: 0.4rem; }
.od2-cust { display: flex; align-items: center; gap: 0.8rem; }
.od2-link { color: var(--p-primary-color); text-decoration: none; font-size: 0.9rem; }
.od2-info-row { display: flex; justify-content: space-between; align-items: center; padding: 0.34rem 0; }
.od2-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.od2-mini-chip { margin-top: 0.7rem; font-size: 0.8rem; }
.od2-note { font-style: italic; color: var(--p-text-muted-color); }
.od2-right-sm { text-align: right; font-size: 0.9rem; line-height: 1.5; }
.od2 .p-timeline-event-opposite { display: none; }
.od2-tl .p-timeline-event { min-height: 4.1rem; }
.od2-tl-sub { font-size: 0.85rem; }
.od2-tl-marker {
    width: 2rem; height: 2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--p-surface-100); color: var(--p-text-muted-color); font-size: 0.85rem;
}
.od2-tl-marker.current { background: var(--p-primary-color); color: var(--p-primary-contrast-color); }
.od2-tl-marker.done { background: var(--p-tag-success-background); color: var(--p-tag-success-color); }
.od2-act .p-timeline-event { min-height: 3.3rem; }
.od2-composer { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; }
.od2-composer-input { flex: 1; }
.od2-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--p-surface-300); display: inline-block; }
.od2-cmt-marker {
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--p-surface-100); color: var(--p-primary-color); font-size: 0.78rem;
}
.od2-comment {
    background: var(--p-surface-50); border: 1px solid var(--p-surface-200);
    border-radius: var(--p-border-radius-md); padding: 0.6rem 0.8rem; margin-bottom: 0.5rem;
}
.od2-comment-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.2rem; }
.od2-cmt-tag { margin-left: auto; font-size: 0.72rem; }
.od2-avail-ok { color: var(--p-tag-success-color); font-weight: 600; }
.od2-avail-bad { color: var(--p-red-500); font-weight: 600; }
.od2-pp { display: inline-flex; gap: 0.3rem; align-items: center; }
.od2-pp-step {
    width: 1.55rem; height: 1.55rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-surface-100); color: var(--p-text-muted-color); font-size: 0.68rem;
}
.od2-pp-step.done { background: var(--p-tag-success-background); color: var(--p-tag-success-color); }
.od2-dlg-head { margin-bottom: 0; }
.od2-dlg-track { display: inline-flex; align-items: center; gap: 0.2rem; }
.od2-dlg-prod { margin-bottom: 0.8rem; }
.od2-mt { margin-top: 0.6rem; }
.od2-status-ctl { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.od2-status-chev { font-size: 0.7rem; color: var(--p-text-muted-color); }
.od2-removed-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.2rem; border-top: 1px solid var(--p-surface-100); }
.od2-removed-row:first-of-type { border-top: none; }
.od2-removed-thumb { opacity: 0.45; }
.od2-removed-name { color: var(--p-text-muted-color); text-decoration: line-through; }
.od2-w-full { width: 100%; }
/* Status switcher: professional light button (soft fill, crisp label) */
.od2-action-select.p-select {
    min-width: 11.5rem;
    background: var(--p-surface-100) !important;
    border-color: var(--p-surface-300) !important;
}
.od2-action-select.p-select:not(.p-disabled):hover {
    background: var(--p-surface-200) !important;
    border-color: var(--p-surface-400) !important;
}
.od2-action-select .p-select-label { color: var(--p-text-color) !important; font-weight: 600; }
.od2-action-select .p-select-dropdown { color: var(--p-text-color) !important; }
.od2-w-12 { width: 12rem; }
/* Discount dialog: Value, Code and Reason are one column of equal controls,
   so the select no longer sits narrower than the inputs beside it. */
.rb-disc-dlg .od2-info-row > *:last-child { flex: 0 0 14rem; max-width: 14rem; }
/* Remove / Cancel / Apply share one line — labels never break mid-word */
.rb-disc-dlg .p-dialog-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-disc-dlg .p-dialog-footer .p-button { white-space: nowrap; flex: none; }
.rb-disc-dlg .od2-info-row > *:last-child .p-inputtext,
.rb-disc-dlg .od2-info-row > *:last-child.p-inputtext { width: 100%; }

/* Pick & pack station (design mock) */
.pps { max-width: 62rem; margin: 0 auto; }
.pps-grid { display: block; }
.pps-main, .pps-side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.pps-steps { display: flex; gap: 1rem; }
.pps-step { display: flex; align-items: center; gap: 0.7rem; flex: 1; }
.pps-step-dot {
    width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--p-surface-100); color: var(--p-text-muted-color); font-size: 1rem;
}
.pps-step.active .pps-step-dot { background: var(--p-primary-color); color: var(--p-primary-contrast-color); }
.pps-step.done .pps-step-dot { background: var(--p-tag-success-background); color: var(--p-tag-success-color); }
.pps-step-line { flex: 1; height: 2px; background: var(--p-surface-200); margin-inline: 0.4rem; }
.pps-step.done .pps-step-line { background: var(--p-green-300); }
.pps-scan { margin-bottom: 0.9rem; }
.pps-scan-input { width: 100%; font-size: 1.05rem; }
.pps-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.4rem; border-top: 1px solid var(--p-surface-100); }
.pps-row.done { background: var(--p-green-50); border-radius: var(--p-border-radius-md); }
.pps-row-info { flex: 1; min-width: 0; }
.pps-qty { font-size: 1.05rem; white-space: nowrap; }
.pps-ok { color: var(--p-tag-success-color); font-size: 1.35rem; }
.pps-disabled { opacity: 0.55; pointer-events: none; }
.pps-pack-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: end; }
.pps-track-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; }
.pps-gen { padding-bottom: 0.1rem; }
.pps-w-full { width: 100%; }
/* courier + Ship on one line: the select flexes, the button keeps its size */
/* courier on the left at a readable width, Ship flush against the card's
   right edge — the same edge the figures above align to */
.pps-ship-row { display: flex; align-items: center; gap: 10px; }
.pps-ship-row .pps-w-full { flex: 0 1 26rem; min-width: 0; }
.pps-ship-btn { flex: none; white-space: nowrap; margin-left: auto; }
.pps-mt { margin-top: 1rem; }
.pps-verify-label { margin-top: 1rem; }
.pps-check { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; }
.pps-note { margin-top: 0.8rem; }
.pps-toggle { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.pps-loc-select { min-width: 11rem; }
.pps-opt { font-size: 0.75rem; font-weight: 400; color: var(--p-text-muted-color); }
.pps-done-cell { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--p-tag-success-color); font-weight: 600; white-space: nowrap; }
.pps-table { margin-top: 0.3rem; }
.pps-ship-info { max-width: 26rem; }
.pps-ship-cols { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
.pps-ship-cols > div:last-child { line-height: 1.7; }
/* Station density: medium/small scale — tighter title, dots, thumbs, rows; messages keep the card rhythm */
.pps .od2-head { margin-bottom: 0.85rem; }
.pps .od2-title { font-size: 1.2rem; }
.pps .od2-sub { font-size: 0.85rem; margin-top: 0.15rem; }
.pps > .p-message { margin-bottom: 0.85rem; }
.pps-main { gap: 0.85rem; }
.pps .od2-card-head { margin-bottom: 0.7rem; }
.pps-steps { gap: 0.6rem; }
.pps-step { gap: 0.55rem; }
.pps-step-dot { width: 2rem; height: 2rem; font-size: 0.85rem; }
.pps-step-line { min-width: 1.5rem; }
.pps .od-thumb { width: 2.5rem; height: 2.5rem; }
.pps-qty { font-size: 1rem; }
.pps-ok { font-size: 1.15rem; }
.pps-prod-link { color: #2c6ecb; text-decoration: none; display: inline-block; }
/* Bundle contents on the bench, drawn like every other bundle in the app:
   trunk from under the bundle's image, rounded elbow to each component.
   .od-thumb is 3.1rem, so its centre line sits at ~1.55rem. */
.pps-part { position: relative; display: flex; gap: 0.6rem; align-items: center; margin-top: 6px; padding: 3px 0 3px 3rem; }
.pps-part .pps-part-thumb { width: 2rem; height: 2rem; }
.pps-part-name { font-size: 12.5px; font-weight: 450; }
.pps-part-qty { color: #8c9196; font-weight: 600; margin-left: 4px; }
.pps-part::before {
    content: ""; position: absolute; left: 1.55rem; top: 0; bottom: 0; width: 1px;
    background: #DCE0E7;
}
.pps-part:not(:has(+ .pps-part))::before { content: none; }
.pps-part::after {
    content: ""; position: absolute; left: 1.55rem; top: 0; width: 1rem; height: 50%;
    border-left: 1px solid #DCE0E7; border-bottom: 1px solid #DCE0E7;
    border-bottom-left-radius: 8px;
}
/* The components stretch the row, and the table middle-aligns its cells — so
   Qty / Pick / Pack were sliding down beside the CONTENTS. On rows that carry
   components, pin the other cells to the top and pad them onto the bundle's
   own line. Rows without components keep the table's normal alignment. */
.pps-table tr:has(.pps-part) > td { vertical-align: top; }
.pps-table tr:has(.pps-part) > td:not(:first-child) { padding-top: 1.05rem; }
.pps-table .od2-prod:has(+ .pps-part) { position: relative; }
.pps-table .od2-prod:has(+ .pps-part)::before {
    content: ""; position: absolute; left: 1.55rem; top: calc(50% + 1.85rem); bottom: -6px;
    width: 1px; background: #DCE0E7;
}
.pps-prod-link:hover { text-decoration: underline; }
.pps .od2-prod-meta { margin-top: 0.15rem; font-size: 0.8rem; }
.pps-ship-cols { gap: 3.5rem; }
.pps .od2-info-row { padding: 0.25rem 0; }

/* Invoice (design mock) — layout only; all visuals come from Aura tokens */
.inv { max-width: 56rem; margin: 0 auto; }
.inv-toolbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.inv-title { font-size: 1.15rem; }
.inv-sheet .p-card-body { padding: 2.2rem 2.4rem !important; }
.inv-head { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.inv-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.inv-brand-name { font-size: 1.3rem; font-weight: 700; }
.inv-lines { line-height: 1.7; font-size: 0.9rem; }
.inv-meta { min-width: 17rem; }
.inv-doc-title { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.12em; color: var(--p-text-muted-color); margin-bottom: 0.6rem; text-align: right; }
.inv-parties { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: 2rem; margin-bottom: 1.4rem; }
.inv-items .p-datatable-thead > tr > th { font-size: 0.82rem; }
.inv-sku { font-size: 0.8rem; }
.inv-totals { width: 20rem; max-width: 100%; margin-left: auto; margin-top: 1rem; }
.inv-parties .od2-info-row { align-items: flex-start; gap: 1rem; }
.inv-parties .od2-info-row span:last-child { text-align: right; overflow-wrap: anywhere; }
.inv-foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; }
.inv-thanks { margin-top: 1.2rem; text-align: center; font-size: 0.88rem; }
.slip-checkbox { display: inline-block; width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--p-surface-400); border-radius: 3px; }
.slip-sign-line { border-bottom: 1px solid var(--p-surface-400); height: 2rem; }

/* --- user profile (pf-*) --- */
.pf-page { max-width: 64rem; margin: 0 auto; }
.pf-grid { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-stack { display: flex; flex-direction: column; gap: 1.1rem; }
.pf-id { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; }
.pf-avatar-wrap { position: relative; margin-bottom: 0.55rem; }
.pf-avatar { width: 4.6rem !important; height: 4.6rem !important; font-size: 1.5rem !important; }
.pf-avatar-edit { position: absolute; right: -0.4rem; bottom: -0.2rem; box-shadow: 0 1px 4px rgb(0 0 0 / 20%); }
.pf-name { font-size: 1.05rem; font-weight: 700; }
.pf-email { font-size: 0.86rem; overflow-wrap: anywhere; }
.pf-role { margin-top: 0.45rem; }
.pf-facts { width: 100%; }
.pf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
@media (max-width: 640px) { .pf-form { grid-template-columns: 1fr; } }
.pf-field { display: flex; flex-direction: column; gap: 0.35rem; }
.pf-field label { font-size: 0.8rem; font-weight: 600; color: var(--p-text-muted-color); }
.pf-field-wide { grid-column: 1 / -1; }
.pf-card-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.1rem; }
.pf-rules { display: flex; flex-direction: column; gap: 0.32rem; margin-top: 0.9rem; font-size: 0.83rem; }
.pf-rule { display: flex; align-items: center; gap: 0.45rem; color: var(--p-text-muted-color); }
.pf-rule.ok { color: var(--p-tag-success-color); }
.pf-sec-row { display: flex; align-items: center; gap: 1rem; }
.pf-sec-text { flex: 1; min-width: 0; }
.pf-sec-text .text-muted { font-size: 0.85rem; margin-top: 0.15rem; }
.pf-sess-head { margin-bottom: 0.2rem; }
.pf-sess { display: flex; align-items: center; gap: 0.9rem; padding: 0.65rem 0; }
.pf-sess + .pf-sess { border-top: 1px solid var(--p-content-border-color); }
.pf-sess-icon { font-size: 1.15rem; color: var(--p-text-muted-color); }
.pf-sess-meta { flex: 1; min-width: 0; }
.pf-sess-meta .text-muted { font-size: 0.84rem; }
.pf-sess-tag { margin-left: 0.4rem; }

/* orders toolbar search group: PrimeVue InputGroup, constrained to toolbar width.
   The search button rests on the secondary HOVER shade (one step darker),
   and hovers on the ACTIVE shade — same Aura token scale. */
.w-search-group { width: 16rem !important; flex: none; }
/* Three classes so this outranks `.p-button.p-button-icon-only`, whose
   !important padding shorthand otherwise wins the same-specificity tie. */
.p-inputgroup.w-search-group > .p-button { padding-left: 15px !important; padding-right: 20px !important; }
.shell-content .w-search-group .p-button {
    background: var(--rb-c-white) !important;
    border-color: var(--rb-input-border, #cbd5e1);
    color: var(--p-button-secondary-hover-color);
}
.shell-content .w-search-group .p-button:hover {
    background: var(--p-button-secondary-active-background);
    border-color: var(--p-button-secondary-active-border-color);
}

/* The theme overrides above force a radius on every input/button with
   !important, which defeats PrimeVue's own InputGroup corner-joining.
   Restore the stock InputGroup behavior for grouped children only. */
.shell-content .p-inputgroup > .p-component,
.shell-content .p-inputgroup > .p-inputtext,
.shell-content .p-inputgroup > .p-button,
.shell-content .p-inputgroup > .p-inputgroupaddon {
    border-radius: 0 !important;
}
.shell-content .p-inputgroup > :first-child {
    border-start-start-radius: var(--rb-input-radius, 8px) !important;
    border-end-start-radius: var(--rb-input-radius, 8px) !important;
}
.shell-content .p-inputgroup > :last-child {
    border-start-end-radius: var(--rb-input-radius, 8px) !important;
    border-end-end-radius: var(--rb-input-radius, 8px) !important;
}

/* --- product detail (pd-*) --- */
.pd-media { display: flex; gap: 0.9rem; align-items: flex-start; }
.pd-media-main { width: 16rem; height: 16rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--p-content-border-color); }
.pd-media-thumbs { display: grid; grid-template-columns: repeat(4, 4.4rem); gap: 0.55rem; }
.pd-media-thumb { width: 4.4rem; height: 4.4rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--p-content-border-color); cursor: pointer; }
.pd-media-thumb.active { outline: 2px solid var(--p-primary-color); outline-offset: 1px; }
.pd-media-add { width: 4.4rem; height: 4.4rem; border-radius: 6px; border: 1.5px dashed var(--p-surface-300); background: transparent; color: var(--p-text-muted-color); cursor: pointer; }
.pd-media-add:hover { border-color: var(--p-primary-color); color: var(--p-primary-color); }
.pd-variant-cell { display: flex; align-items: center; gap: 0.6rem; }
.pd-swatch { width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 1px solid var(--p-surface-300); flex: none; }
.pd-dim { font-size: 0.8rem; }
.pd-low { color: var(--p-red-500); font-weight: 600; }
.pd-note { font-size: 0.82rem; margin-top: 0.6rem; }
.pd-strike { text-decoration: line-through; }
.pd-channel { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0; }
.pd-channel + .pd-channel { border-top: 1px solid var(--p-content-border-color); }
.pd-channel-icon { font-size: 1.15rem; color: var(--p-text-muted-color); }
.pd-channel-meta { flex: 1; min-width: 0; }
.pd-channel-tag { margin-left: 0.4rem; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.pd-expander { width: 2.4rem; }
.pd-full { margin-top: 1.1rem; }
/* Product detail: the summary rail on the left (the order page's Order
   Summary, reused), the existing grid and full-width stack to its right.
   The rail's title sits level with the first card's heading. */
.od2.pd { max-width: none; --pd-cols: minmax(220px, 1fr) minmax(800px, 1000px) minmax(220px, 1fr); }   /* the order page's columns, exactly */
.pd-layout { display: grid; grid-template-columns: var(--pd-cols); gap: 0 5px; align-items: start; }
.pd-layout > .pd-rail { padding-top: 62px; }   /* level with the first card's heading, under the title row */
.pd-body { min-width: 0; }
/* The sticky save bar rides the same columns, so it is exactly as wide as the
   content under it. The ROW is the sticky thing: it is a direct child of the
   page, so it can stick for the whole scroll; the bar inside just fills the
   centre column. */
.pd-savebar-row { position: sticky; top: 0.75rem; z-index: 50; margin-bottom: 1.1rem;   /* under the header (100) and its menus */ display: grid; grid-template-columns: var(--pd-cols); gap: 0 5px; }
.pd-savebar-row > .pd-savebar { grid-column: 2; position: static; margin: 0; }
/* Below the columns' own floor (240 + 800 + 240 + two 20px gaps = 1320px, plus
   the shell's padding) the grid does not reflow — it overflows to the right, so
   the content stops being centred and the right gutter shrinks. The centre's
   800px is a minimum, not a requirement: relaxing it keeps three columns, equal
   gutters and no overflow all the way down. The gutters keep their own floor, so
   the centre never grows as the screen shrinks. */
@media (max-width: 1369px) {
    .od2.pd { --pd-cols: minmax(200px, 1fr) minmax(0, 1000px) minmax(191px, 1fr); }
}
/* Narrower than this, a readable centre and two gutters no longer fit side by
   side, so the page stacks. */
@media (max-width: 1099px) {
    .pd-layout, .pd-savebar-row { grid-template-columns: minmax(0, 1fr); gap: 1.1rem 0; }
    .pd-layout > .pd-rail { padding-top: 0; }
    .pd-savebar-row > .pd-savebar { grid-column: 1; }
}
/* Description: PrimeVue's Editor (Quill) as one bordered field — toolbar on
   top, the writing area under it, the same radius as the inputs around it. */
.pd-desc-editor .p-editor-toolbar { border-radius: var(--p-border-radius-md, 6px) var(--p-border-radius-md, 6px) 0 0; }
.pd-desc-editor .p-editor-content { border-radius: 0 0 var(--p-border-radius-md, 6px) var(--p-border-radius-md, 6px); }
.pd-desc-editor .ql-editor { font-size: 13px; line-height: 1.55; }
.pd-desc-editor .ql-editor ul, .pd-desc-editor .ql-editor ol { padding-left: 1.25rem; }
/* Quill 2 draws list markers itself (li > .ql-ui::before, from quill.core.css);
   PrimeVue's theme still numbers every item the Quill 1 way on li::before,
   which put "1•" on bullet items. Only Quill's marker stays. */
.pd-desc-editor .ql-editor li::before { content: none !important; display: none !important; }
/* Create order: the buyer's history in the side card. The order page's panel
   is twice as wide, so the legend runs in one column here. */
.oc-cust-history { margin-top: 0.9rem; }
.oc-cust-history .rb-summary { margin-bottom: 12px; }
.oc-cust-history .rb-meters { margin-bottom: 12px; }
.oc-cust-history .rb-legend { grid-template-columns: 1fr; gap: 10px; }
/* Sell on (product detail): one row per store — icon, name, listing state,
   and a switch (disabled for now). */
.pd-sellon { display: flex; flex-direction: column; gap: 0.55rem; }
.pd-sellon-row { display: flex; align-items: center; gap: 0.55rem; }
.pd-sellon-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* Collections: every chosen chip shows, wrapping onto more rows, rather than
   the first two with the rest clipped. */
#pd-collections .p-multiselect-label { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
.pd-variant-thumb { width: 2.3rem; height: 2.3rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--p-content-border-color); flex: none; display: block; }
.pd-thumb-wrap { position: relative; flex: none; }
.pd-thumb-edit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 45%); color: #fff; border: none; border-radius: 6px; opacity: 0; cursor: pointer; padding: 0; transition: opacity 0.15s; }
.od2-items .p-datatable-tbody > tr:hover .pd-thumb-edit { opacity: 1; }
.pd-imgpick-grid { display: grid; grid-template-columns: repeat(4, 5.2rem); gap: 0.6rem; }
.pd-imgpick-item { position: relative; cursor: pointer; }
.pd-imgpick-item img { width: 5.2rem; height: 5.2rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--p-content-border-color); display: block; }
.pd-imgpick-item:hover img { border-color: var(--p-primary-color); }
.pd-imgpick-item.active img { outline: 2px solid var(--p-primary-color); outline-offset: 1px; }
.pd-imgpick-check { position: absolute; top: 0.3rem; right: 0.3rem; color: var(--p-primary-color); background: #fff; border-radius: 50%; }
.pd-imgpick-add { width: 5.2rem; height: 5.2rem; }
.pd-delta-pos { color: var(--p-tag-success-color); }
.pd-delta-neg { color: var(--p-red-500); }
.pd-order-link { color: var(--p-primary-color); cursor: pointer; }
/* Inventory Logs reference: order number first, its note to the right */
.inv-logs-ref { display: inline-flex; align-items: baseline; gap: 0.45rem; white-space: nowrap; }
.pd-order-link:hover { text-decoration: underline; }
.pd-savebar { position: sticky; top: 0.75rem; z-index: 100; margin-bottom: 1.1rem; }
.pd-savebar.p-dark { background: var(--p-surface-900); border-color: var(--p-surface-700); color: var(--p-surface-100);    z-index: 0;    border-radius: 9px !important; padding: 6px; }
.pd-savebar.p-dark .pi-info-circle { color: var(--p-surface-400); }
.pd-savebar-text { margin-left: 0.5rem; }
.pd-expand { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.4rem; padding: 0.9rem 0.6rem; background: var(--p-surface-50); border-radius: 8px; }
.pd-expand-form { grid-template-columns: 1fr 1fr; }
.pd-expand-status { padding-top: 0.35rem; }
.pd-expand-metrics { border-left: 1px solid var(--p-content-border-color); padding-left: 1.2rem; align-self: start; }
.pd-expand-foot { margin-top: 0.8rem; }
@media (max-width: 800px) { .pd-expand { grid-template-columns: 1fr; } .pd-expand-metrics { border-left: none; padding-left: 0; } }
.pd-side-form .pf-field label { font-size: 0.78rem; }
@media (max-width: 700px) { .pd-media { flex-direction: column; } .pd-media-main { width: 100%; height: auto; } }

/* --- order detail design mock (ohm-*) — pixel-matched to the reference --- */
.ohm-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr) 300px; gap: 0 40px; max-width: 1720px; margin: 0 auto; align-items: start; }
.ohm-rail { padding-top: 74px; }
/* ACTIVITY ARROW ----------------------------------------------------------
   The Shipment Activity rail keeps its sections and opens them in place. Each
   box that owns one also carries an arrow on its right edge — a second handle
   on the same section — and opening from either end draws a dotted line from
   the arrow across to the section, so the box and its activity read as one
   thing. Only one section is open at a time.

   The host is a wrapper, not the card: .ohm-items-card is overflow:hidden for
   its rounded corners, so the arrow cannot hang off the card itself. */
.rb-peek-host { position: relative; margin-top: 12px; }
.rb-peek-host > .ohm-items-card { margin-top: 0; }
.rb-peek__btn {
    position: absolute; top: 52px; right: -13px; z-index: 4;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; cursor: pointer;
    background: #fff; border: 1px solid #e3e3e3; border-radius: 50%;
    color: #3D4358; box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
    transition: background-color .2s ease, border-color .2s ease;
}
.rb-peek__btn:hover { background: #f4f5f7; border-color: #cfd4dd; }
.rb-peek__btn .pi { font-size: 11px; }
.rb-peek__btn.is-open { background: #eef1f6; border-color: #cfd4dd; }

/* The marker the line points at. It is always in the markup and only lit when
   the section is open, so reserving its space keeps the titles from jumping
   sideways as sections open and close. */
.rb-rail-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rb-rail-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: #1F9D6B; opacity: 0; transform: scale(.4);
    transition: opacity .2s ease, transform .25s cubic-bezier(.2, .7, .2, 1);
}
.rb-rail-dot.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rb-rail-dot { transition: none; } }

/* the section's contents, arriving from the direction of their card */
.rb-rail-body { animation: rb-rail-in .3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rb-rail-in {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: none; }
}
/* The line from the arrow to the section it opened. It stays for as long as
   that section is open, so it is placed in PAGE coordinates and scrolls with
   the two things it joins. The outer span carries the placement and rotation;
   the inner one draws the dashes, leaving its own transform free for the
   draw-in. */
.rb-trail {
    position: absolute; z-index: 3; overflow: visible; pointer-events: none;
    animation: rb-trail-draw .32s ease both;
}
.rb-trail path {
    fill: none; stroke: #97a0af; stroke-width: 1;
    stroke-dasharray: 4 3; stroke-linecap: round;
}
/* revealed left to right, so it reads as drawn from the arrow towards the dot.
   A dashed stroke cannot be drawn with stroke-dashoffset — the dashes would
   travel instead of the line growing — so the whole figure is clipped open. */
@keyframes rb-trail-draw {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 -4px 0 0); }
}
@media (prefers-reduced-motion: reduce) { .rb-trail { animation: none; } }
@media (prefers-reduced-motion: reduce) {
    .rb-rail-body { animation: none; }
}
.ohm-rail-title { font-size: 13px; font-weight: 500; color: #3D4358; }
.ohm-rail-rule {  background: #d9d9d9; margin: 10px 0 2px; }
.ohm-sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.ohm-sum-label { color: #6d7175; font-size: 13px; }
.ohm-sum-value { color: var(--rb-heading-color); font-size: 13px; font-weight: 600; }
/* Back on the left, the order Actions menu hard right on the same line */
.rb-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
/* a soft grey pill: reads as a control without competing with the page
   (the browser-chrome "More actions" shape). Three classes: the theme's
   `.p-button.p-button-secondary { background: #fff !important }` further down
   ties on specificity and would otherwise win on order. */
.rb-topline .rb-topline__actions.p-button {
    margin-left: auto; background: #e7e7e7 !important; color: #3c4043 !important; font-size: 13px !important;
    font-weight: 500 !important; padding: 6px 14px !important; box-shadow: none !important;
}
.rb-topline .rb-topline__actions.p-button:hover { background: #cdcdcd !important; border-color: #c9ced4 !important; color: #202124 !important; }
.rb-topline .rb-topline__actions.p-button:active { box-shadow: none !important; }
.rb-topline .rb-topline__actions.p-button:focus-visible { outline: 2px solid #1570EF; outline-offset: 2px; }
.rb-topline .rb-topline__actions.p-button .p-button-icon { font-size: 11px; }
/* Prev/next order, wearing the Actions pill so the three read as one group.
   The wrapper carries the auto margin now, so the pill inside it does not. */
.rb-topline__right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.rb-topline__right .rb-topline__actions.p-button { margin-left: 0; }
.rb-topline .rb-topline__nav.p-button {
    padding: 6px 9px !important;
    min-width: 0;
}
.rb-topline .rb-topline__nav.p-button:disabled,
.rb-topline .rb-topline__nav.p-button.p-disabled { opacity: 0.45; cursor: not-allowed; }
/* topbar (.rb-* aliases feed the global <rb-back> component) */
.ohm-topbar, .rb-topbar { display: flex; align-items: center; gap: 12px; padding: 4px 8px 8px 8px; }
.ohm-back, .rb-back { display: inline-flex; align-items: center; gap: 6px; color: #1a1a1a; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.ohm-back .pi, .rb-back .pi { font-size: 11px; font-weight: 700; }
.ohm-sep, .rb-sep { width: 1px; height: 17px; background: #d4d4d4; }
.ohm-link, .rb-link { color: #1a1a1a; font-size: 13.5px; font-weight: 650; cursor: pointer; }
/* back bar text: 13px regular #5a6178, -0.1px tracking (inspected) */
.rb-back, .rb-link { color: #5a6178; font-size: 13px; font-weight: 400; line-height: 16px; letter-spacing: -0.1px; }
/* Back answers the pointer like the header's "back to" chip: a soft rounded
   wash from its own ink, and the ink darkens. The padding is paid back in
   margin, so the wash has room without moving the link or the row. One pixel
   more below than on top: with even padding the icon (nudged down 1px in
   rb-components.css) and the lowercase letters make "Back" read as sitting
   on the bottom of the wash. */
.rb-back {
    padding: 3px 8px 5px; margin: -3px -8px -5px; border-radius: 8px;
    transition: background-color 0.15s, color 0.15s;
}
.rb-back:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: #1a1f36; }
.ohm-card { background: #fff; border-radius: 12px; display: flex; align-items: center; padding: 9px 18px; border: 1px solid #e3e3e3; box-shadow: 0 1px 3px rgb(0 0 0 / 6%); }
.ohm-order-no { font-size: 17px; font-weight: 700; color: #1a1a1a; letter-spacing: 0.2px; }
.ohm-status { display: flex; align-items: center; gap: 12px; margin: 0 auto; transform: translateX(-9%); }
.ohm-status-label { color: #5c5f62; font-size: 13.5px; }
.ohm-status-btn .p-splitbutton-button {
    background: #0e8345 !important; border: none !important; color: #fff !important;
    font-size: 13px !important; font-weight: 650 !important;
    border-radius: 8px 0 0 8px !important; padding: 6px 4px 6px 14px !important;
    box-shadow: none !important;
}
.ohm-status-btn .p-splitbutton-dropdown {
    background: #0e8345 !important; border: none !important; color: #fff !important;
    border-radius: 0 8px 8px 0 !important; width: 28px !important; padding: 6px 11px 6px 6px !important;
    box-shadow: none !important;
}
.ohm-status-btn .p-splitbutton-dropdown::before {
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgb(255 255 255 / 40%);
}
.ohm-status-btn .p-splitbutton-dropdown { position: relative; }
.ohm-status-btn .p-splitbutton-dropdown .p-button-icon { font-size: 11px; }
.ohm-alert { width: 18px; height: 18px; border-radius: 50%; background: #0e8345; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; cursor: default; }
.ohm-box { width: 22px; height: 22px; color: #0e8345; display: inline-flex; cursor: default; }
.ohm-box svg { width: 100%; height: 100%; }
/* payment pill tones — the Rasbree status triads (bg / border / ink) */
.ohm-pay-positive { background: #E6F6EF !important; border-color: #BFE6D5 !important; color: #0E7A50 !important; font-weight: 600; }
.ohm-pay-warning { background: #FFF3DF !important; border-color: #F0DCB4 !important; color: #8A5300 !important; font-weight: 600; }
.ohm-pay-info { background: #E8F1FE !important; border-color: #C6DCFB !important; color: #0E5BC4 !important; font-weight: 600; }
.ohm-pay-critical { background: #FDECEA !important; border-color: #F5C2BD !important; color: #B42318 !important; font-weight: 600; }
.ohm-payment { border: 1px solid #d9d9d9; border-radius: 8px; padding: 5px 14px;
    color: #575959; font-size: 13px; font-weight: 500; background: #fff; white-space: nowrap; }

/* customer / shipping card */
.ohm-cs-card { background: #fff; border-radius: 12px; margin-top: 12px; padding: 12px 18px 14px; display: flex; border: 1px solid #e3e3e3; box-shadow: 0 1px 3px rgb(0 0 0 / 6%);gap: 20px; }
.ohm-cs-col { flex: 1; min-width: 0; }
/* .ohm-cs-col:last-child { padding-left: 22px; } */
.ohm-cs-divider { width: 1px; background: #e3e3e3; margin: 4px 0; }
.ohm-cs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;  }
.ohm-cs-title { font-size: 13.5px; font-weight: 650; color: var(--rb-heading-color); }
.ohm-blue { color: #2c6ecb; cursor: pointer; font-size: 13px; font-weight: 400; text-decoration: none; }
.ohm-blue:hover { text-decoration: underline; }
.ohm-blue-text { color: #2c6ecb; }
.ohm-red { color: #d72c0d; }
.ohm-dots { color: #5c5f62; cursor: pointer; padding-right: 0; }
.ohm-cs-row { display: flex; justify-content: space-between; padding: 4px 0;  color: #303030; font-size: 13px; }
.ohm-cs-num { color: #303030; }
.ohm-ship-line { padding: 2.5px 0; color: #303030; font-size: 13px; }
.ohm-ship-line strong { font-weight: 650; }

/* items card */
.ohm-items-card { background: #fff; border-radius: 12px; margin-top: 12px; overflow: hidden; border: 1px solid #e3e3e3; box-shadow: 0 1px 3px rgb(0 0 0 / 6%); }
/* A line edit is not finished when the toast appears — the order still has to
   be re-read before the card can show the new lines. Until then the card wears
   a moving bar and its contents go quiet, so "added" and "shown" are not
   mistaken for each other. */
.ohm-items-card { position: relative; }
.rb-card-busy {
    position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 6;
    background: #E8EEF9; overflow: hidden;
}
.rb-card-busy::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 40%;
    background: #2c6ecb; border-radius: 3px;
    animation: rb-card-busy-run 1.05s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes rb-card-busy-run {
    from { transform: translateX(-105%); }
    to { transform: translateX(255%); }
}
.ohm-items-card.is-busy > *:not(.rb-card-busy) {
    opacity: 0.5; pointer-events: none; transition: opacity .15s ease;
}
@media (prefers-reduced-motion: reduce) { .rb-card-busy::after { animation: none; width: 100%; opacity: .5; } }
.ohm-loc-row { padding: 10px 16px 9px; }
.ohm-loc-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d9d9d9; border-radius: 8px;
    padding: 3px 11px; font-size: 12.5px; font-weight: 400;color: #504f4f; background: #f5f5f5; }
.ohm-loc-chip .pi { font-size: 12px; }
.ohm-table { width: 100%; border-collapse: collapse; }
.ohm-table th { background: #f7f7f7; text-align: left; font-size: 12.5px; font-weight: 600; color: #444;
    padding: 7px 11px; white-space: nowrap; }
.ohm-th-product { padding-left: 16px !important; }
.ohm-th-dim { color: #8c9196; font-size: 11px; font-weight: 500; }
.ohm-table td { padding: 9px 11px; font-size: 13px; color: #303030; vertical-align: middle; border-top: 1px solid #f0f0f0; }
.ohm-table td:first-child { padding-left: 16px; }
.ohm-prod { display: flex; gap: 11px; align-items: center; min-width: 0; }
/* without this the nowrap title's min-content would widen the whole column */
.ohm-prod > * { min-width: 0; }
.ohm-thumb { width: 36px; height: 36px; border: 1px solid #e5e5e5; border-radius: 4px; object-fit: cover; flex: none; }
.ohm-prod-title { color: #6d7175; font-weight: 650; font-size: 12.5px; text-transform: uppercase; max-width: 280px; }
.ohm-prod-variant { color: #6d7175; font-size: 12px; padding: 1px 0; }
/* "SKU"/"BAR" are quiet labels; the codes themselves stay readable */
.ohm-prod-sku { color: #8c9196; font-weight: 500; font-size: 10px; letter-spacing: 0.04em;
    text-transform: uppercase; margin-right: 2px; }
/* no margin here: the gap rides in the markup so it vanishes at a line break,
   which keeps a wrapped BAR flush with the SKU above it */
.ohm-qty-box { display: inline-block; border: 1px solid #c9cccf; border-radius: 4px; padding: 4px 0; width: 50px; text-align: left;
    padding-left: 10px; background: #fff; }
.ohm-strike { text-decoration: line-through; color: #8c9196; margin-right: 6px; }
.ohm-vendor { max-width: 84px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ohm-tag-fulfilled { background: #cdfee1; color: #0e8345; border-radius: 8px; padding: 3px 10px; font-size: 12px; }
.ohm-action-btn { border: 1px solid #d9d9d9; border-radius: 6px; background: #fff; padding: 5px 11px; cursor: pointer; color: #5c5f62; }
.ohm-meta-strip { display: flex; background: #fafafa; border-top: 1px solid #f0f0f0; }
.ohm-meta-cell { flex: 1; display: flex; align-items: center; gap: 5px; padding: 10px 14px; }
.ohm-meta-cell + .ohm-meta-cell { border-left: 1px solid #ececec; }
.ohm-meta-label { color: #6d7175; font-size: 12.5px; }
.ohm-meta-strong { color: #5c5f62; font-size: 13px; font-weight: 600; }
.ohm-weight-box { border: 1px solid #d9d9d9; border-radius: 7px; background: #f1f1f1; color: #8c9196;
    padding: 4px 18px; font-size: 12.5px;    height: 29px; }
.ohm-foot-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 9px 14px; border-top: 1px solid #f0f0f0; }
.ohm-actions-btn { border: 1px solid #d9d9d9; border-radius: 7px; background: #fff; color: var(--rb-heading-color);
    font-size: 12.5px; font-weight: 600; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ohm-actions-btn .pi { font-size: 11px; }
.ohm-fulfill-btn { border: 1px solid #d9d9d9; border-radius: 7px; background: #f1f1f1; color: #8c9196;
    font-size: 12.5px; font-weight: 600; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ohm-fulfill-btn .pi { font-size: 13px; }

/* right rail: shipment activity */
.ohm-act-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ohm-act-head .pi { font-size: 13px; }
.ohm-act-list { display: flex; flex-direction: column; gap: 12px; }
.ohm-act-item { display: flex; gap: 12px; align-items: flex-start; }
.ohm-act-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; }
.ohm-act-title { font-size: 13.5px; font-weight: 650; color: #303030; }
.ohm-act-sub { font-size: 12px; color: #6d7175; margin-top: 2px; }
.ohm-ship-note { display: inline-block; margin-top: 14px; font-weight: 600; }

/* ohm extensions — the live order detail page on the same design language */
/* the center column caps and centers on the viewport; the side rails float in
   the leftover gutters, each centered in its own gutter (not glued to center) */
.ohm-layout.ohm-wide { grid-template-columns: minmax(220px, 1fr) minmax(800px, 1000px) minmax(220px, 1fr); gap: 0 10px; max-width: none; }
.ohm-wide .ohm-rail { width: 100%; max-width: 180px; margin: 0 auto; }
/* text colour / size parity with the reference app */
.ohm-wide .ohm-sum-label { color: #8c9196; font-size: 12px; }
/* shipment activity titles: 13px regular #3d4358 (inspected) */
.ohm-wide .ohm-act-title { font-size: 13px; font-weight: 400; color: #3d4358; line-height: 17.7px; }
.ohm-wide .ohm-sum-value { font-weight: 400; }
.ohm-wide .ohm-prod-title { text-transform: none; color: #5c5f62; font-size: 13px;font-weight: 400;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto; max-width: 100%; }
.ohm-wide .ohm-prod-title a { color: #5c5f62; font-weight: 500; text-decoration: none; }
.ohm-wide .ohm-prod-title a:hover { text-decoration: underline; }
/* items table headers: 12px/18px regular #616161 on white (inspected) */
.ohm-wide .ohm-table th {
    background: #fff; font-size: 12px; font-weight: 400;
    line-height: 18px; letter-spacing: 0; color: #616161;
}
/* transactions: label #212b36, value #7a8194, 13px/21.8px regular (inspected) */
.ohm-wide .ohm-txn-row { padding: 8px 0; font-size: 13px; line-height: 21.8px; font-weight: 450; color: #212b36; }
.ohm-wide .ohm-txn-row > span:last-child { color: #7a8194;    font-weight: 600; }
.ohm-wide .ohm-txn-total, .ohm-wide .ohm-txn-total > span:last-child { color: #212b36; font-weight: 700; }
/* header card: order number #5a6178 / regular weight (inspected), icons grey */
.ohm-wide .ohm-order-no { color: #5a6178; font-weight: 700; }
.ohm-wide .ohm-box { color: #8c9196; }
.ohm-wide .ohm-alert { width: 20px; height: 20px; }
/* status pill: two buttons joined as one split control — pill ends, flat seam
   with a thin light divider, compact padding (the global .p-button rules force
   radius/padding, hence the !important) */
.ohm-status-group { display: inline-flex; }
.ohm-status-group .p-button { padding: 5px 14px !important; font-size: 13px !important; font-weight: 600 !important; border: none !important; }
.ohm-status-group .p-button:first-child { border-radius: 8px 0 0 8px !important; }
.ohm-status-group .p-button:last-child {
    border-radius: 0 8px 8px 0 !important;
    padding: 5px 10px 5px 8px !important;
    border-inline-start: 1px solid rgb(255 255 255 / 45%) !important;
}
.ohm-status-group .p-button:last-child .p-button-icon { font-size: 11px; }
/* status panel: radio list + footer actions */
.ohm-status-pop { display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: 2px; }
.ohm-status-opt { display: flex; align-items: center; gap: 10px; padding: 7px 6px; font-size: 13px; color: var(--rb-heading-color); }
.ohm-status-opt label { cursor: pointer; }
.ohm-status-opt label.ohm-muted { cursor: default; }
.ohm-status-pop-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
/* customer 4/10, shipping 6/10 of the card width */
.ohm-wide .ohm-cs-card .ohm-cs-col:first-child { flex: 4 1 0; }
.ohm-wide .ohm-cs-card .ohm-cs-col:last-child { flex: 6 1 0; }
/* customer / shipping card: #212b36 body text (inspected), bordered dots button */
.ohm-wide .ohm-cs-row, .ohm-wide .ohm-cs-num, .ohm-wide .ohm-ship-line { color: #212b36;font-weight: 400; }
/* address lines: spacing comes from the inspected 23.1px line-height, not padding */
.ohm-wide .ohm-ship-line { padding: 0; line-height: 23.1px; }
.ohm-wide .ohm-dots { border: 1px solid #d9d9d9; border-radius: 6px; padding: 3px 10px; line-height: 1; background: #fff; }
.ohm-wide .ohm-dots .pi { font-size: 12px; }
.ohm-tags-link { color: #303030; cursor: pointer; }
.ohm-center { min-width: 0; }
.ohm-loc-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ohm-muted { color: #8c9196; }
/* left rail rows: label above value */
.ohm-sum-item { padding: 6px 0; }
.ohm-sum-item .ohm-sum-label { display: block; margin-bottom: 2px; }
/* one duplicate link per line — an order can have several copies. Ink, not
   link-blue: it reads as a value like the rows above it, and underlines on
   hover to show it still goes somewhere. */
.ohm-sum-link { display: block; color: inherit; text-decoration: none; }
/* ink, like the order number it follows */
.ohm-sum-repl { font-size: 0.7rem; color: inherit; margin-left: 2px; vertical-align: baseline; }
/* The duplicate mark: two Venus symbols side by side. PrimeIcons ships
   pi-venus but no doubled form, so it is drawn here and applied as a MASK
   rather than a background image — that way the shape takes currentColor and
   stays in step with whatever it sits in, including the white-on-dark contrast
   button. It is a plain class (no `pi`), which is what PrimeVue's icon=""
   props and menu-model icons take, so one definition serves the order-number
   column, the summary rail, the Actions menu and the dialog button. */
.rb-ico-dup {
    display: inline-block; box-sizing: border-box; flex: none;
    width: 15px; height: 15px; vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7.8' cy='8.2' r='4.6'/%3E%3Ccircle cx='16.2' cy='8.2' r='4.6'/%3E%3Cpath d='M7.8 12.8v7.7M5.3 17.6h5M16.2 12.8v7.7M13.7 17.6h5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7.8' cy='8.2' r='4.6'/%3E%3Ccircle cx='16.2' cy='8.2' r='4.6'/%3E%3Cpath d='M7.8 12.8v7.7M5.3 17.6h5M16.2 12.8v7.7M13.7 17.6h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Column visibility: the framed three-column mark, drawn here because
   PrimeIcons has no equivalent (pi-objects-column is four loose blocks, which
   reads as a grid view, not as columns). Same masked-SVG shape as .rb-ico-dup
   above: a plain class, so it drops straight into PrimeVue's icon props, and it
   inherits colour and disabled state from whatever it sits in. */
.rb-ico-columns {
    display: inline-block; box-sizing: border-box; flex: none;
    width: 18px; height: 18px; vertical-align: -0.18em;
    background-color: currentColor;
    color: var(--p-button-outlined-secondary-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M10 3v18M14 3v18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M10 3v18M14 3v18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ohm-sum-link:hover { text-decoration: underline; }
.ohm-sum-link + .ohm-sum-link { margin-top: 2px; }
/* struck original price sits above the effective price */
.ohm-table .ohm-strike { display: block; margin-right: 0; }
/* courier / weight / timers / actions in one strip row */
.ohm-meta-row { display: flex; align-items: center; gap: 18px; background: #fafafa; border-top: 1px solid #f0f0f0; padding: 8px 14px; }
.ohm-meta-row .ohm-meta-cell { flex: none; padding: 0; border-left: none; display: flex; align-items: center; gap: 6px; }
.ohm-meta-row .ohm-weight-box { min-width: 96px; }
.ohm-box .pi { font-size: 18px; margin: auto; }
.ohm-hold { display: flex; align-items: center; gap: 12px; margin: 0 auto; }
.ohm-hold > .pi { color: #d72c0d; font-size: 16px; }
.ohm-hold-text { font-size: 13.5px; color: var(--rb-heading-color); }
.ohm-hold-text strong { font-weight: 700; }
.ohm-tag-plain { display: inline-block; border: 1px solid #d9d9d9; background: #fff; color: #303030; border-radius: 8px; padding: 3px 10px; font-size: 12px; }
.ohm-tag-removed { display: inline-block; background: #fde8e8; color: #d72c0d; border-radius: 8px; padding: 3px 10px; font-size: 12px; }
.ohm-row-removed .ohm-prod-title, .ohm-row-removed .ohm-prod-variant, .ohm-row-removed .ohm-prod-sku { text-decoration: line-through; opacity: 0.6; }
.ohm-meta-select.p-select { min-width: 138px;    align-items: center;     height: 29px;}
.ohm-meta-select .p-select-label { font-size: 12.5px; }
/* generic white card for the notes / transactions / risks / tags blocks */
.ohm-panel { background: #fff; border-radius: 12px; border: 1px solid #e3e3e3; box-shadow: 0 1px 3px rgb(0 0 0 / 6%); padding: 13px 18px 15px; }
/* section headings sit back like Shopify's — subdued, not full ink */
.ohm-panel-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #6d7175; margin-bottom: 8px; }
.ohm-panel-title .pi { font-size: 13px; color: #5c5f62; }
/* top row: customer/shipping card + risks/tags column side by side */
.ohm-top-row { display: grid; 
    /* grid-template-columns: minmax(0, 1fr) 260px;  */
    gap: 14px; margin-top: 12px; align-items: stretch; }
.ohm-top-row .ohm-cs-card { margin-top: 0; }
.ohm-side-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* both cards share the column height equally, bottom flush with the customer card */
.ohm-side-col .ohm-panel { flex: 1 1 0; }
.ohm-two-col { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; margin-top: 12px; align-items: start; }
.ohm-note-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; font-size: 13px; color: #303030; }
.ohm-note-row > .pi { color: #2c6ecb; cursor: pointer; font-size: 14px; }
.ohm-note-val { margin-left: auto; color: #6d7175; }
.ohm-txn-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13px; color: #303030; border-bottom: 1px solid #f0f0f0; }
.ohm-txn-row:last-child { border-bottom: none; }
/* edit affordance: same icon and blue as the Notes rows */
.ohm-txn-edit { color: #2c6ecb; cursor: pointer; font-size: 14px; margin-left: 4px; }
.ohm-txn-total { font-weight: 700; }
/* timeline conversation */
.ohm-tlc { max-width: 700px; margin: 26px auto 0; }
.ohm-tlc-title { font-size: 15px; font-weight: 700; color: var(--rb-heading-color); margin-bottom: 10px; }
.ohm-comp-card { background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; box-shadow: 0 1px 3px rgb(0 0 0 / 6%); padding: 10px 12px; }
.ohm-comp-top { display: flex; align-items: center; gap: 10px; }
.ohm-comp-avatar.p-avatar { background: #e91e8c; color: #fff; flex: none; }
.ohm-comp-note { text-align: right; color: #6d7175; font-size: 12px; margin: 8px 2px 14px; }
.ohm-tlc-item { display: flex; align-items: flex-start; gap: 9px; position: relative; padding: 9px 0 9px 4px; }
.ohm-tlc-item::before { content: ''; position: absolute; left: 8px; top: 30px; bottom: -9px; width: 2px; background: #e6e6e6; }
.ohm-tlc-item:last-child::before { display: none; }
.ohm-tlc-dot { width: 9px; height: 9px; border-radius: 2px; background: #3a3a3a; flex: none; margin-top: 5px; position: relative; z-index: 1; }
.ohm-tlc-ico { color: #8c9196; font-size: 13px; margin-top: 2px; }
.ohm-tlc-text { font-size: 13px; color: #303030; min-width: 0; }
.ohm-tlc-text strong { font-weight: 700;    margin-right: 10px; }
.ohm-tlc-time { margin-left: auto; color: #6d7175; font-size: 12.5px; white-space: nowrap; padding-left: 12px; }
.ohm-act-head .pi { cursor: pointer; }
.ohm-act-click { cursor: pointer; }
.ohm-risk-low { color: #b98900; font-size: 13px; font-weight: 600; }
.ohm-tags-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding-top: 2px; }
.ohm-count { background: #e3e3e3; color: #303030; border-radius: 8px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.ohm-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* --- users & branches (usr-*) --- */
.usr-page { max-width: 74rem; margin: 0 auto; }
.usr-toolbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.usr-search { width: 16rem; }
.usr-filter { min-width: 11rem; }
.usr-count { font-size: 0.85rem; }
.usr-empty { text-align: center; padding: 2rem 0; }
.usr-cell { display: flex; align-items: center; gap: 0.7rem; }
.usr-cell-meta { min-width: 0; }
.usr-cell-meta .text-muted { font-size: 0.84rem; overflow-wrap: anywhere; }
.usr-dialog { width: 32rem; max-width: 95vw; }
.usr-opt { font-weight: 400; text-transform: none; }
.usr-pw-row { display: flex; gap: 0.5rem; }
.usr-pw { flex: 1; }

/* Bulk slips: one order per printed page. */
.slip-sheet + .slip-sheet { margin-top: 1.25rem; }

/* Manage Filters drawer: full-width rows, label left / icons right. */
.mf-list { display: flex; flex-direction: column; }
.mf-list .p-divider { margin: 0; }
.mf-row { width: 100%; justify-content: space-between !important; padding: 0.85rem 0.25rem !important; }
.mf-row-label { font-weight: 600; color: var(--p-text-color); }
.mf-row-icons { display: inline-flex; align-items: center; gap: 0.9rem; color: var(--p-text-muted-color); }
.mf-pin { transform: rotate(45deg); opacity: 0.45; }
.mf-pin-on { opacity: 1; color: var(--p-primary-color); transform: none; }
.mf-chevron { font-size: 0.8rem; }
.mf-footer { display: flex; gap: 0.6rem; justify-content: space-between; width: 100%; }

/* Order number cell: the edit button appears when the whole row is hovered
   (or the button itself is keyboard-focused), not just its own cell. */
.w-orderno { display: inline-flex; align-items: center; gap: 0.15rem; }
.w-orderno-discount { color: #8a8a8a; font-size: 0.75rem; margin-left: 0.1rem; }
/* Cancelled orders: their particulars are struck through in the list. The rule
   is drawn in a muted grey rather than the text colour, so it reads as a line
   over the value instead of thickening it. */
.w-cut {
    text-decoration: line-through;
    text-decoration-color: #9aa0ab;
    text-decoration-thickness: 1px;
}
a.row-link.w-cut { text-decoration: line-through; }
.w-orderno-hold { color: #4a4949; font-size: 0.75rem; margin-left: 0.1rem; }
/* replacement marker — same size as the other order-number flags, in the
   info blue so it reads as a link back to the order it replaces */
.w-orderno-repl { color: #0E5BC4; font-size: 0.75rem; margin-left: 0.1rem;
    display: inline-flex; align-items: center; text-decoration: none; }
.w-orderno-repl:hover { color: #0b4799; }
/* duplicate marker — same size AND the same grey as the discount flag beside
   it, so the neutral markers read as one family rather than a hierarchy */
.w-orderno-dup { color: #8a8a8a; font-size: 0.75rem; margin-left: 0.1rem;
    display: inline-flex; align-items: center; text-decoration: none; }
.w-orderno-dup:hover { color: #1A1F36; }
/* The order's flags, in the design system's own colours: a bad phone is its
   red (the Hold dot, #D92D20), an unknown city its warning amber (#C77700) —
   the same pair the tab row uses, so a flag reads as the state it points at. */
.w-orderno-phone { color: #D92D20; font-size: 0.75rem; margin-left: 0.1rem; }
.w-orderno-city { color: #C77700; font-size: 0.75rem; margin-left: 0.1rem; }
/* Courier logos inside a Select option — shared, because the orders list and
   the order detail both render them (the rule used to live in one page only,
   so the other page drew the logos at their natural size). */
.rb-courier-logo { width: 18px; height: 18px; object-fit: contain; margin-right: 0.4rem;
    vertical-align: -3px; border-radius: 3px; flex: none; }
/* Numeric columns: digits line up on the right, header included. Add
   class="w-num" to any p-column holding a number. Must out-specify the
   themeable --rb-table-align rule above, which is itself !important. */
.p-datatable .p-datatable-tbody > tr > td.w-num,
.p-datatable .p-datatable-thead > tr > th.w-num { text-align: right !important; }
td.w-num, th.w-num { font-variant-numeric: tabular-nums; }
.p-datatable .p-datatable-thead > tr > th.w-num .p-datatable-column-header-content { justify-content: flex-end !important; }
.w-orderno-edit { opacity: 0; transition: opacity 0.12s; }
.p-datatable-tbody > tr:hover .w-orderno-edit,
.w-orderno-edit:focus-visible { opacity: 1; }

/* Active filter chips: layout only — the chip's own look comes from the
   --rb-chip-* tokens. */
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 0.15rem 0.85rem; }

/* Order Actions dialog: two-column field grid. */
.oa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.25rem; }
.oa-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.oa-field > label { font-weight: 600; font-size: 0.9rem; }
.oa-span { grid-column: 1 / -1; }
@media (max-width: 700px) { .oa-grid { grid-template-columns: minmax(0, 1fr); } }

/* Print preview dialog (orders list): the slip page inside an iframe. */
.print-frame-wrap { position: relative; min-height: 60vh; }
.print-frame { width: 100%; height: 60vh; border: 0; display: block; background: #fff; }
.print-frame-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.6rem;
}
.print-frame-spinner { font-size: 1.6rem; color: var(--p-text-muted-color); }
.print-dialog .p-dialog-content { padding: 0; }

/* Embedded slip page: no app chrome, the dialog frames it instead. */
.slip-embedded #shell-header { display: none; }
.slip-embedded .shell-content { padding: 0.75rem; }
.slip-embedded body { background: #fff; }
.slip-embedded .inv-toolbar { display: none; }
.slip-embedded .lbl-toolbar { display: none; }

/* Picking ticket: one continuous run, order header rows carry the barcode. */
.pick-order-head { display: flex; align-items: center; gap: 2rem; padding: 0.35rem 0; }
.pick-order-no { font-size: 1.6rem; font-weight: 700; }
.pick-barcode svg { display: block; height: 3.2rem; width: auto; }
.pick-meta { margin-left: 0.75rem; }
.pick-qty { font-size: 1.15rem; }
.pick-table .p-datatable-tbody > tr > td { vertical-align: middle; }

/* Mobile nav drawer list. The drawer's PanelMenu is the only one in the app, so
   these ride PrimeVue's own classes rather than a wrapper class: row icon left,
   label centred, chevron right, one hairline per row. Flex `order` does the
   arranging, since PanelMenu emits the chevron before the label. */
.p-panelmenu .p-panelmenu-panel {
    border: 0; border-bottom: 1px solid var(--rb-table-border, #e2e8f0);
    border-radius: 0; padding: 0;
}
.p-panelmenu .p-panelmenu-header-link,
.p-panelmenu .p-panelmenu-item-link { padding: 0.85rem 1rem; gap: 0.75rem; }
.p-panelmenu .p-panelmenu-header-icon,
.p-panelmenu .p-panelmenu-item-icon { order: 1; color: var(--rb-nav-icon, #b5b5b5); }
.p-panelmenu .p-panelmenu-header-label,
.p-panelmenu .p-panelmenu-item-label {
    order: 2; flex: 1 1 auto; text-align: center;
    font-weight: var(--rb-nav-weight, 400); font-size: var(--rb-nav-font-size, 13px);
}
.p-panelmenu .p-panelmenu-submenu-icon { order: 3; color: var(--rb-nav-icon, #b5b5b5); }
.p-panelmenu .p-panelmenu-submenu .p-panelmenu-item-label { font-weight: 400; }
.p-panelmenu .nav-active .p-panelmenu-header-label,
.p-panelmenu .nav-active .p-panelmenu-header-icon,
.p-panelmenu .nav-active .p-panelmenu-item-label,
.p-panelmenu .nav-active .p-panelmenu-item-icon {
    color: var(--rb-nav-active, #303030); font-weight: var(--rb-nav-active-weight, 600);
}

/* ---------------------------------------------------------------------------
   Narrow desktops and tablets: the header search is absolutely positioned at
   left:50%, so it takes no space in the flex row and starts sliding UNDER the
   action icons as the bar narrows. Below this width it rides the row instead.
   --------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    #shell-header .search-center .p-toolbar-center,
    #shell-header .search-left .p-toolbar-center,
    #shell-header .search-right .p-toolbar-center {
        position: static; transform: none; margin: 0 0.5rem;
        /* basis 0, not auto: the field's intrinsic width would otherwise refuse
           to shrink and wrap the avatar onto its own line on a small phone. */
        order: 2; flex: 1 1 0; width: auto; min-width: 0;
    }
    /* The end group defaults to order 0, so without these the actions would sit
       between the logo and the search and everything would bunch up on the left. */
    #shell-header .header-toolbar .p-toolbar-start { order: 1; }
    #shell-header .header-toolbar .p-toolbar-end { order: 3; }
    #shell-header .header-search { width: 100%; max-width: 32rem; }
}

/* ---------------------------------------------------------------------------
   Phones. Only existing selectors are re-stated here — no mobile-only classes.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Menu, search and avatar stay on one row; the search absorbs what's left. */
    #shell-header .header-toolbar { flex-wrap: nowrap; }
    #shell-header .p-toolbar-center { margin: 0 0.4rem; }
    #shell-header .header-search,
    #shell-header .header-search .p-inputtext { min-width: 0; }
    #shell-header .header-kbd { display: none; }          /* no Ctrl+K on touch */
    #shell-header .header-logo { display: none; }         /* the menu button leads instead */
    #shell-header .p-toolbar-start .p-button .p-button-icon { font-size: 1.25rem; }
    #shell-header .p-toolbar-start .p-button { color: #f5f5f5; }
    /* Conversations / channels / appearance / settings live in the drawer and
       the account menu — the bar keeps only the avatar. */
    #shell-header .header-toolbar .p-toolbar-end { gap: 0.25rem; }
    #shell-header .header-toolbar .p-toolbar-end > .p-button:not(:has(> .header-avatar)),
    #shell-header .header-toolbar .p-toolbar-end .p-divider-vertical { display: none; }
    #shell-header .p-toolbar-end > .p-button:has(> .header-avatar) { padding: 0.1875rem !important; }
    #shell-header .header-org-label { display: none; }    /* the avatar identifies the org */

    /* Page frame: reclaim the desktop gutters. */
    .shell-content { padding: 12px; }
    .page-toolbar { margin: 0 !important; }
    .page-title-text { font-size: 1.05rem; }

    /* Search and location filter go full width instead of a fixed 16rem. */
    .w-search-group { width: 100% !important; }
    .w-select { flex: 1 1 auto; min-width: 0; }

    /* Tab strip scrolls; its toolbar trio drops to its own line when needed. */
    .tabs-row { flex-wrap: wrap; }

    /* A wrapped bar is no longer one strip standing in for the header row, so
       it takes its padding back. */
    .bulk-bar.p-toolbar { padding-top: 4px !important; padding-bottom: 4px !important; }

    /* Card chrome eats width the table needs for its own scroller. Set through
       the tokens so an edge-to-edge table pulls by exactly this much. */
    .p-card-body {
        --rb-card-pad-t: 0.6rem;
        --rb-card-pad-r: 0.6rem;
        --rb-card-pad-b: 0.6rem;
        --rb-card-pad-l: 0.6rem;
    }

    /* Sort popover and filter chips shouldn't force horizontal page scroll. */
    .sort-pop { min-width: min(15rem, 70vw); }
    .filter-chips .p-chip { max-width: 100%; }
    .filter-chips .p-chip-label { overflow: hidden; text-overflow: ellipsis; }
}

@media print {
    .slip-sheet { break-after: page; page-break-after: always; }
    .slip-sheet:last-child { break-after: auto; page-break-after: auto; }
    #shell-header, .inv-toolbar { display: none !important; }
    body, body:has(.od-page) { background: #fff !important; }
    .shell-content { padding: 0 !important; }
    .inv { max-width: none; }
    .inv-sheet { box-shadow: none !important; border: none !important; }
}

/* Login page */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
}

.login-card { width: 380px; }
.login-brand { text-align: center; font-size: 1.4rem; font-weight: 700; margin-bottom: 0.25rem; }
.login-brand span { color: var(--shell-brand); }
.login-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.login-field label { font-size: 0.88rem; color: #475569; }
.rb-bg-tranparent{background: transparent !important}
/* --- Customer history + shipping card (rb-cust) — from the design handover.
       Tokens live on the container so nothing leaks into the rest of the app. --- */
.rb-cust {
    --rb-primary: #0d93ed; --rb-primary-hover: #1E45B8;
    --ink-900: #1A1F36; --ink-800: #272D45; --ink-700: #3D4358; --ink-600: #5A6178;
    --ink-500: #7A8194; --ink-400: #A2A8B8; --ink-300: #cbd0d8; --ink-200: #dfe3ea;
    --line-300: #cbcbcb; --line-200: #EBEEF3;
    --bg-100: #F5F6F8; --bg-50: #F8F9FB; --surface: #FFFFFF;
    --positive: #1F9D6B; --positive-bg: #E6F6EF; --positive-ink: #0E7A50;
    --warning: #C77700; --warning-bg: #FFF3DF; --warning-ink: #8A5300;
    --attention: #E8590C; --attention-bg: #FFF0E6; --attention-ink: #C2410C;
    --critical: #D92D20; --critical-bg: #FDECEA; --critical-ink: #B42318;
    --info: #1570EF; --info-bg: #E8F1FE; --info-ink: #0E5BC4;
    --mix-delivered: color-mix(in oklch, var(--positive) 55%, #fff);
    --mix-returned: color-mix(in oklch, var(--attention) 55%, #fff);
    --mix-cancelled: color-mix(in oklch, var(--critical) 55%, #fff);
    --mix-process: color-mix(in oklch, var(--info) 55%, #fff);
    /* token holder only — the two boxes below carry the card chrome */
    font-size: 13px; line-height: 1.5; color: var(--ink-800);
}
.rb-num { font-variant-numeric: tabular-nums; }
/* customer and shipping are two separate cards, customer the wider one */
/* flex, not grid: the two boxes stay on one row whatever the parent does */
.rb-cust { display: block; width: 100%; }
.rb-card-split { display: flex !important; flex-wrap: nowrap; align-items: stretch; gap: 14px; width: 100%; }
.rb-card-split > .rb-col-left { flex: 1.35 1 0; }
.rb-card-split > .rb-col-right { flex: 1 1 0; }
.rb-col-left, .rb-col-right {
    background: var(--surface);
    border: 1px solid #e3e3e3;
    /* border: 1px solid var(--line-200); */
    border-radius: 14px;
    box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
    padding: 13px 18px 15px;
    min-width: 0;
}
.rb-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.rb-head h3 { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ink-900); margin: 0; }
.rb-head-between { justify-content: space-between; }
.rb-cust .rb-link { color: var(--rb-primary); text-decoration: none; font-size: 13px; font-weight: 500; cursor: pointer; }
.rb-cust .rb-link:hover { color: var(--rb-primary-hover); text-decoration: underline; }
.rb-summary { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.rb-summary .rb-count { font-size: 13px; font-weight: 700; line-height: 1; color: var(--ink-900); }
.rb-summary .rb-unit { font-size: 13px; line-height: 1; color: var(--ink-500); }
.rb-summary .rb-sep { color: var(--ink-400); }
/* outcome mix bar: 8px continuous track, hairline splits, own labels off */
.rb-meters { margin-bottom: 18px; }
.rb-cust .rb-meters .p-metergroup-label-list { display: none; }
.rb-cust .rb-meters .p-metergroup-meters { height: 4px; border-radius: 999px; background: var(--bg-100); overflow: hidden; }
.rb-cust .rb-meters .p-metergroup-meter { border: 0; border-right: 2px solid var(--surface); }
.rb-cust .rb-meters .p-metergroup-meter:last-child { border-right: 0; }
.rb-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 44px; }
.rb-legend-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: -8px -10px; border-radius: 6px; color: inherit; text-decoration: none; }
.rb-legend-row .rb-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.rb-legend-row .rb-label { font-size: 12.5px; line-height: 1; color: var(--ink-700); }
.rb-legend-row .rb-spacer { flex: 1; }
.rb-legend-row .rb-value { font-size: 12.5px; line-height: 1; font-weight: 600; }
.rb-legend-row .rb-share { font-size: 12px; line-height: 1; color: var(--ink-400); width: 34px; text-align: right; }
.rb-empty { display: flex; gap: 12px; align-items: flex-start; border: 1px dashed var(--line-300); border-radius: 10px; padding: 14px 16px; background: var(--bg-50); }
.rb-empty > .pi { color: var(--ink-400); font-size: 14px; margin-top: 2px; }
.rb-empty strong { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink-900); }
.rb-empty p { font-size: 12.5px; line-height: 1.55; color: var(--ink-500); margin: 4px 0 0; }
.rb-eyebrow { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 9px; }
.rb-address { font-size: 13px; line-height: 1.65; color: var(--ink-700); }
.rb-address .rb-city { font-weight: 600; color: var(--ink-900); }
/* the space between city and postcode is template whitespace Vue can drop, so
   the gap is set here instead: "Bahawalpur 63000, Pakistan" */
.rb-address .rb-postal { margin-left: 4px; }
.rb-dim { color: var(--ink-500); }
.rb-contact { margin-top: 10px; }
.rb-ship-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
/* tag pills — the global .p-tag height/shadow theming is flattened back here */
.rb-cust .p-tag { height: auto; border-radius: 999px; padding: 4px 9px !important; white-space: nowrap; font-size: 12px !important; font-weight: 500; line-height: 1; background: var(--bg-100); color: var(--ink-700); box-shadow: none !important; }
.rb-cust .p-tag .p-tag-label { font-weight: inherit; font-size: inherit; }
.rb-cust .p-tag.rb-tone-positive { background: var(--positive-bg); color: var(--positive-ink); }
.rb-cust .p-tag.rb-tone-attention { background: var(--attention-bg); color: var(--attention-ink); }
.rb-cust .p-tag.rb-tone-critical { background: var(--critical-bg); color: var(--critical-ink); font-weight: 600; }
.rb-cust .p-tag.rb-tone-info { background: var(--info-bg); color: var(--info-ink); }
/* rb-btn — hairline button with the 1px pressed shadow (globals forced off) */
.rb-cust .p-button.rb-btn { background: var(--surface) !important; border: 1px solid var(--line-300) !important; border-radius: 7px !important; box-shadow: 0 1px 0 0 #b5b5b5 !important; color: var(--ink-500) !important; font-size: 12px !important; font-weight: 500 !important; padding: 5px 10px !important; gap: 6px; transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease; }
.rb-cust .p-button.rb-btn:hover { background: var(--bg-100) !important; color: var(--ink-900) !important; }
.rb-cust .p-button.rb-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgb(0 0 0 / 15%) !important; }
.rb-cust .p-button.rb-btn .p-button-icon { font-size: 11px; }
/* note line — for the verification / risk guidance rows when data lands */
.rb-cust .rb-note { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-200); font-size: 12px; font-weight: 500; }
.rb-cust .rb-note.rb-warn { color: var(--warning-ink); }
.rb-cust .rb-note.rb-ok { color: var(--positive-ink); }
.rb-cust .rb-note.rb-danger { color: var(--critical-ink); }

/* Legend hover: the hovered outcome keeps full colour, the rest fade back
   (the fade is applied to each segment's colour in JS, so it always tracks the
   right one; this just animates the change). */
.rb-cust .rb-meters .p-metergroup-meter { transition: background 0.12s ease; }
.rb-cust .rb-legend-row:hover { background: #F8F9FB; }
/* The popover portals to <body>, so its rules live on its own class, not .rb-cust. */
.rb-pop-panel.p-popover { border-radius: 8px; border: 1px solid #EBEEF3; box-shadow: 0 8px 24px rgb(16 24 40 / 14%); }
.rb-pop-panel.p-popover:after, .rb-pop-panel.p-popover:before { display: none; }
.rb-pop-panel .p-popover-content { padding: 6px; }
.rb-pop { width: 250px; }
.rb-pop .p-datatable-table { font-size: 12px; }
.rb-pop .p-datatable, .rb-pop .p-datatable-table-container { overflow: visible; max-height: none; box-shadow: none !important; }
.rb-pop .p-datatable-thead > tr > th {
    background: transparent; border: 0; padding: 4px 8px !important;
    font-size: 10.5px !important; font-weight: 600; line-height: 1;
    letter-spacing: 0.07em; text-transform: uppercase; color: #A2A8B8;
}
.rb-pop .p-datatable-tbody > tr { background: transparent; }
.rb-pop .p-datatable-tbody > tr > td {
    border-bottom: 1px solid #EBEEF3; border-top: 0;
    padding: 6px 8px !important; color: #3D4358;
    font-size: 12px !important; line-height: 1.5;
}
.rb-pop .p-datatable-tbody > tr:last-child > td { border-bottom: 0; }
.rb-pop .p-datatable-tbody > tr:hover > td { background: transparent; }

/* --- rb-btn is the DEFAULT button chrome — no class needed anywhere --------
   Hairline border, 7px corners, the 1px hard bottom shadow and the press-in
   on :active. Colour still comes from PrimeVue's `severity`, so primary /
   danger / success buttons keep their fill; only the neutral ones (secondary,
   outlined, plain) take the white face and grey ink. `class="rb-btn"` still
   works but is now redundant. */
.p-button {
    border-radius: 7px !important;
    /* box-shadow: 0 1px 0 0 #b5b5b5 !important; */
    /* named, not `all`: a padding or width change must not animate */
    transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease, opacity 0.1s ease;
}
.p-button:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgb(0 0 0 / 15%) !important; }
.p-button.p-button-secondary,
.p-button.p-button-outlined {
    background: #fff !important;
    /* border: 1px solid #cbcbcb !important;
    color: #7a8194 !important; */
}
.p-button.p-button-secondary:hover,
.p-button.p-button-outlined:hover { background: #f5f6f8 !important; color: #1a1f36 !important; }
/* Text and link buttons stay flat — no face, no border, no lift. */
.p-button.p-button-text, .p-button.p-button-link {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}
.p-button.p-button-text:active, .p-button.p-button-link:active { transform: none; box-shadow: none !important; }
/* Pills (order status control, rounded icon buttons) keep their shape. */
.p-button.p-button-rounded { border-radius: 9999px !important; }
/* The dark app header keeps its own flat chrome. */
#shell-header .p-button { box-shadow: none !important; }
#shell-header .p-button:active { transform: none; }
#shell-header .p-button.p-button-secondary.p-button-text {
    background: transparent !important; border-color: transparent !important; color: #c9c9c9 !important;
}
/* ...but they still answer the pointer: the ink brightens over a soft wash
   mixed from it (a pill on the rounded ones, like the "back to" chip). The
   account button takes a hairline outline and a fainter wash instead. */
#shell-header .p-button.p-button-secondary.p-button-text:hover {
    background: color-mix(in srgb, currentColor 14%, transparent) !important;
    color: #f5f5f5 !important;
}
/* The bell and the cog (the header's two round icon-only buttons): a larger
   glyph in a fixed round target, so the hover wash is a true circle and the
   pair sits level with the account button. On hover the ink goes to white over
   a stronger wash and the glyph answers — the cog turns, the bell tips — so
   the control feels alive rather than merely tinted. Keyboard focus gets a ring. */
#shell-header .p-toolbar-end .p-button.p-button-icon-only.p-button-rounded {
    width: 2.4rem; height: 2.4rem; padding: 0 !important;
    transition: background-color 0.18s ease, color 0.18s ease;
}
#shell-header .p-toolbar-end .p-button.p-button-icon-only.p-button-rounded .p-button-icon {
    font-size: 1.3rem; transition: transform 0.25s ease;
}
#shell-header .p-toolbar-end .p-button.p-button-icon-only.p-button-rounded:hover {
    background: color-mix(in srgb, currentColor 20%, transparent) !important;
    color: #ffffff !important;
}
#shell-header .p-toolbar-end .p-button.p-button-icon-only.p-button-rounded:hover .pi-cog { transform: rotate(60deg) scale(1.08); }
#shell-header .p-toolbar-end .p-button.p-button-icon-only.p-button-rounded:hover .pi-bell { transform: rotate(-14deg) scale(1.08); }
#shell-header .p-toolbar-end .p-button.p-button-icon-only.p-button-rounded:active {
    background: color-mix(in srgb, currentColor 30%, transparent) !important;
}
#shell-header .p-toolbar-end .p-button.p-button-icon-only.p-button-rounded:focus-visible {
    outline: 2px solid color-mix(in srgb, #ffffff 70%, transparent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    #shell-header .p-toolbar-end .p-button.p-button-icon-only.p-button-rounded .p-button-icon { transition: none; transform: none !important; }
}
#shell-header .p-toolbar-end > .p-button:has(> .header-avatar):hover {
    background: color-mix(in srgb, currentColor 8%, transparent) !important;
    border-color: color-mix(in srgb, currentColor 45%, transparent) !important;
}

/* --- Order status split button: brand palette from the design ------------- */
.ohm-stbtn.p-splitbutton { gap: 0; height: 25px; }
/* "Order Status" caption: grey, with the design's spacing around the pill */
.ohm-wide .ohm-status { gap: 13px; }
.ohm-wide .ohm-status-label { color: #5c5f62; font-size: 13px; font-weight: 400; }
.ohm-stbtn .p-splitbutton-button,
.ohm-stbtn .p-splitbutton-dropdown {
    background: var(--st-bg) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    height: 30px;
    transform: none !important;
}
/* SINGLE source of truth for the status pill's size — change it here only.
   (A competing padding on .p-splitbutton-rounded was removed; equal specificity
   later in the file silently won and made that edit look like a no-op.) */
.ohm-stbtn .p-splitbutton-button,
.ohm-status .p-splitbutton .p-splitbutton-button,
.ohm-hold .p-splitbutton .p-splitbutton-button { padding: 6px 18px !important;    height: 25px; }
/* same, position-based so it holds even if the class binding is missing */
.ohm-status .p-splitbutton .p-splitbutton-dropdown,
.ohm-hold .p-splitbutton .p-splitbutton-dropdown { width: 24px; min-width: 24px; padding: 6px 0 !important;height: 25px; }
.ohm-stbtn .p-splitbutton-button:hover,
.ohm-stbtn .p-splitbutton-dropdown:hover { filter: brightness(0.94); }
/* hairline divider between the label and the chevron */
.ohm-stbtn .p-splitbutton-dropdown {
    width: 24px; min-width: 24px; padding: 6px 0 !important;
    border-inline-start: 1px solid rgb(255 255 255 / 45%) !important;
}
.ohm-stbtn .p-splitbutton-dropdown .p-button-icon,
.ohm-status .p-splitbutton .p-splitbutton-dropdown .p-button-icon,
.ohm-hold .p-splitbutton .p-splitbutton-dropdown .p-button-icon { font-size: 7.5px !important; margin: 0; font-weight: 700;    zoom: 0.8; }
.ohm-st-pending { --st-bg: #D92D20; }
.ohm-st-ready { --st-bg: #636468; }
.ohm-st-partial { --st-bg: #1e88e5; }
.ohm-st-fulfilled, .ohm-st-delivered { --st-bg: #1F9D6B; }
.ohm-st-returned { --st-bg: #D92D20; }
.ohm-st-cancelled { --st-bg: #6d7175; }
.ohm-st-draft { --st-bg: #8c9196; }
.ohm-st-hold { --st-bg: #3f3f3f; }
/* progress icons: grey until their stage is reached */
.ohm-wide .ohm-ico-packed, .ohm-wide .ohm-ico-shipped { color: #1F9D6B; }
.ohm-wide .ohm-ico-partial { color: #1e88e5; }
/* on-hold header: amber banner behind the whole card */
.ohm-card-hold { background: #fdf5e6 !important; border-color: #f0dcae !important; }
.ohm-card-hold .ohm-hold-text strong { color: #8a5300; }

/* ===========================================================================
   Order status bar (rb-osb) — from the OrderStatusBar.vue design handover.
   Tokens are scoped to the bar and its dialogs/toast so nothing leaks.
   =========================================================================== */
.rb-osb, .rb-dialog, .rb-osb__pay {
    --rb-primary: #0d93ed;
    --ink-900: #1A1F36; --ink-800: #272D45; --ink-700: #3D4358; --ink-600: #5A6178;
    --ink-500: #7A8194; --ink-400: #A2A8B8; --ink-300: #cbd0d8; --ink-200: #dfe3ea;
    --line-300: #cbcbcb; --line-200: #EBEEF3; --bg-100: #F5F6F8; --bg-50: #F8F9FB; --surface: #FFFFFF;
    --positive: #1F9D6B; --positive-bg: #E6F6EF; --positive-ink: #0E7A50;
    --warning: #C77700; --warning-bg: #FFF3DF; --warning-ink: #8A5300;
    --critical: #D92D20; --critical-bg: #FDECEA; --critical-ink: #B42318;
    --info: #1570EF; --info-bg: #E8F1FE; --info-ink: #0E5BC4;
    --overstock: #7048E8; --overstock-bg: #F0EBFE; --overstock-ink: #5A36C9;
}

/* ---- the bar ---- */
.rb-osb {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); padding: 11px 18px;
    position: relative;border: 1px solid #e3e3e3;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
}
.rb-osb__num { font-size: 17px; font-weight: 600; line-height: 1; color: var(--rb-heading-color); font-variant-numeric: tabular-nums; }
.rb-osb__rule { width: 1px; height: 20px; background: var(--line-200); flex: none; }
.rb-osb__meta { font-size: 13px; line-height: 1; color: var(--ink-500); white-space: nowrap; }
.rb-osb__pay { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.rb-osb__pay .dot { width: 8px; height: 8px; border-radius: 99px; background: currentColor; }
.rb-osb__pay.is-unpaid { color: var(--warning-ink); }
.rb-osb__pay.is-unpaid .dot { background: var(--warning); }
.rb-osb__pay.is-paid { color: var(--positive-ink); }
.rb-osb__pay.is-paid .dot { background: var(--positive); }
.rb-osb__spacer { flex: 1; }
.rb-osb__control { position: relative; }
/* the open menu must outrank later cards on the page */
.rb-osb.is-open, .rb-osb__control.is-open { z-index: 60; }

/* ---- split status control ---- */
.rb-status {
    display: inline-flex; align-items: stretch; border: 0; padding: 0; cursor: pointer;
    border-radius: 7px; overflow: hidden; font-family: inherit;
    box-shadow: 0 1px 0 0 rgb(0 0 0 / 18%); transition: filter 0.12s ease;
}
.rb-status:hover { filter: brightness(0.94); }
.rb-status:active { transform: translateY(1px); box-shadow: none; }
.rb-status:focus-visible { outline: 2px solid var(--rb-primary); outline-offset: 2px; }
.rb-status__label { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 16px; }
.rb-status__div { width: 1px; background: currentColor; opacity: 0.45; }
.rb-status__cap { display: inline-flex; align-items: center; justify-content: center; width: 38px; background: rgb(0 0 0 / 6%); }
.rb-status__caret {
    width:7px; height:7px;    margin-top: 4px;
    border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.rb-status.is-open .rb-status__caret { transform: translateY(2px) rotate(-135deg); }
/* locked: the system owns the status */
.rb-status--locked { cursor: not-allowed; box-shadow: none; }
.rb-status--locked:hover { filter: none; }
.rb-status--locked:active { transform: none; }
.rb-status--locked .rb-status__div { opacity: 0.3; }
.rb-status--locked .rb-status__cap { width: 34px; font-size: 12px; opacity: 0.75; background: transparent; }

/* ---- menu ---- */
.rb-menu {
    position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; width: 236px;
    background: var(--surface); border: 1px solid var(--line-200); border-radius: 10px;
    box-shadow: 0 12px 32px rgb(16 24 40 / 16%); padding: 6px;
    transform-origin: top right; animation: rbPop 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.rb-menu__item {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: 6px; cursor: pointer; border: 0; background: none; width: 100%;
    font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--ink-800); text-align: left;
}
.rb-menu__item:hover, .rb-menu__item:focus-visible { background: var(--bg-50); outline: none; }
.rb-menu__item.is-danger { color: var(--critical-ink); }
.rb-menu__item.is-danger:hover, .rb-menu__item.is-danger:focus-visible { background: var(--critical-bg); }
.rb-menu__dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.rb-dot-warning { background: var(--warning); }
.rb-dot-critical { background: var(--critical-ink); }
.rb-menu__label { flex: 1; }
.rb-menu__check { font-size: 12px; font-weight: 600; line-height: 1; color: var(--rb-primary); }
.rb-menu__sep { border-top: 1px solid var(--line-200); margin: 5px 0 0; padding-top: 5px; }

/* ---- lock tooltip ---- */
.rb-locktip {
    position: absolute; z-index: 60; bottom: calc(100% + 8px); right: 0; width: 290px;
    background: var(--ink-900); color: #fff; border-radius: 8px; padding: 10px 12px;
    box-shadow: 0 12px 32px rgb(16 24 40 / 24%); font-size: 12px; line-height: 1.45;
    transform-origin: bottom right; animation: rbPop 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- entrance (class is dropped once played): the bar fades in once and
   its contents are there from the first frame. It used to stagger each child
   in after the bar (animation rules, section 7: no second entrance per child
   in an operational panel). ---- */
.rb-osb.is-entering { animation: rbFade 0.16s ease both; }
@keyframes rbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rbPop { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes rbToast { from { opacity: 0; transform: translateY(8px) scale(0.95); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .rb-osb.is-entering, .rb-menu, .rb-locktip { animation: none !important; }
    .rb-status__caret { transition: none; }
}

/* ---- dialogs (PrimeVue Dialog, Rasbree skin) ---- */
.rb-dialog.p-dialog { border-radius: 14px; box-shadow: 0 24px 60px rgb(16 24 40 / 28%); border: 0; }
.rb-dialog .p-dialog-header { padding: 18px 22px 16px; border-bottom: 1px solid var(--line-200); }
.rb-dialog .p-dialog-content { padding: 0; }
.rb-dialog .p-dialog-footer { padding: 0; border: 0; }
.rb-dialog .p-dialog-title { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ink-900); }
.rb-dialog .p-dialog-close-button { width: 24px; height: 24px; border: 0; background: transparent; color: var(--ink-500); box-shadow: none !important; }
.rb-dialog .p-dialog-close-button:hover { background: var(--bg-100); color: var(--ink-800); }
.rb-dlg__head { display: flex; align-items: center; gap: 10px; width: 100%; }
.rb-dlg__id { font-size: 13px; line-height: 1.2; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.rb-dlg__warn { padding: 12px 22px; background: var(--critical-bg); font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--critical-ink); }
.rb-dlg__body { padding: 16px 22px 4px; }
.rb-dlg__eyebrow { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 10px; }
.rb-dlg__eyebrow-mt { margin: 16px 0 7px; }
.rb-dlg__foot { display: flex; align-items: center; gap: 10px; padding: 16px 22px 18px; }
.rb-dlg__hint { font-size: 12.5px; line-height: 1.3; color: var(--ink-500); }
.rb-dlg__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rb-dlg__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rb-opt {
    display: flex; align-items: center; gap: 9px; padding: 10px 12px; text-align: left;
    border: 1px solid var(--line-200); border-radius: 8px; cursor: pointer;
    background: var(--surface); font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--ink-800);
}
.rb-opt:hover { border-color: var(--ink-300); }
.rb-opt.is-on { background: var(--warning-bg); }
.rb-opt__dot { width: 8px; height: 8px; border-radius: 99px; background: var(--warning); flex: none; }
.rb-opt__label { flex: 1; }
.rb-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
    border: 1px solid var(--line-200); border-radius: 99px; cursor: pointer;
    background: var(--surface); font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--ink-700);
}
.rb-chip:hover { border-color: var(--ink-300); }
.rb-chip.is-on { border-color: var(--ink-300); background: var(--bg-50); }
.rb-chip__check { font-size: 11px; font-weight: 600; line-height: 1; color: var(--rb-primary); }
.rb-input {
    width: 100%; border: 1px solid var(--line-300); border-radius: 4px; padding: 9px 10px;
    font-size: 13px; line-height: 1.4; color: var(--ink-800); outline: none;
}
.rb-input:focus { border-color: var(--ink-900); }
.rb-input-mt { margin-top: 12px; }
/* dialog buttons are plain <button>, so the global .p-button chrome misses them */
.rb-dialog .rb-btn {
    border: 1px solid var(--line-300); background: var(--surface); border-radius: 7px;
    box-shadow: 0 1px 0 0 #b5b5b5; color: var(--ink-700);
    font-size: 12.5px; font-weight: 500; line-height: 1; padding: 8px 14px; cursor: pointer;
}
.rb-dialog .rb-btn:active { transform: translateY(1px); box-shadow: none; }
.rb-dialog .rb-btn--primary { border: 0; background: #111827; color: #fff; padding: 9px 16px; box-shadow: none; }
.rb-dialog .rb-btn--danger { border: 0; background: var(--critical); color: #fff; padding: 9px 16px; box-shadow: none; }
.rb-dialog .rb-btn:disabled { background: var(--bg-100); color: var(--ink-400); cursor: not-allowed; transform: none; }

/* --- Fulfillment & Shipping dashboard (sd-*) ------------------------------
   Layout only: colour, radius and shadow come from the --rb-* theme tokens,
   and the containers are <p-card>, so the Appearance editor drives this page
   like every other one. Lives here rather than in a page <style> block —
   Vue strips <script>/<style> out of client component templates, so anything
   inside the mounted #page element never reaches the DOM. */
.sd-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
@media (max-width: 1200px) { .sd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .sd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sd-grid .p-card-body { padding: 0.85rem 0.95rem !important; }

.sd-lab { font-size: var(--rb-fs-xs, 10px); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--rb-c-tab-text, #7a8194); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.sd-val { font-size: 1.55rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
    color: var(--rb-text-color, #020617); font-variant-numeric: tabular-nums; }
.sd-val-sm { font-size: 1.15rem; }
.sd-unit { font-size: 0.9rem; font-weight: 600; }
.sd-sub { font-size: 0.72rem; color: var(--rb-c-muted-grey, #595c5f); margin-top: 0.4rem; }
.sd-val-good { color: #16a34a; }
.sd-val-bad { color: #dc2626; }
.sd-val-none { color: var(--rb-c-slate-400, #94a3b8); }

.sd-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 900px) { .sd-cols { grid-template-columns: minmax(0, 1fr); } }

.sd-title { font-size: var(--rb-card-title-size, 13px); font-weight: 600; margin: 0 0 0.15rem; color: var(--rb-text-color, #020617); }
.sd-hint { font-size: 0.75rem; color: var(--rb-c-muted-grey, #595c5f); margin: 0 0 0.9rem; }

.sd-bars { display: flex; flex-direction: column; gap: 0.55rem; }
.sd-bar { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 2rem; align-items: center; gap: 0.6rem; }
.sd-bar-l { font-size: 0.78rem; color: var(--rb-c-table-text, #565a62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-bar-t { height: 8px; border-radius: 4px; background: var(--rb-c-slate-100, #f1f5f9); overflow: hidden; }
.sd-bar-f { display: block; height: 100%; border-radius: 4px; background: var(--rb-primary, #5a6178); transition: width 0.35s ease; }
.sd-bar-c { text-align: right; font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rb-text-color, #020617); }
.sd-bar-zero .sd-bar-l, .sd-bar-zero .sd-bar-c { color: var(--rb-c-slate-400, #94a3b8); }

.sd-trend { display: flex; align-items: flex-end; gap: 1px; height: 116px; }
.sd-trend-b { flex: 1 1 0; min-width: 0; border-radius: 2px 2px 0 0; background: var(--rb-primary, #5a6178); }
.sd-trend-b.is-zero { background: var(--rb-c-slate-200, #e2e8f0); }
.sd-axis { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--rb-c-slate-400, #94a3b8); margin-top: 0.4rem; }

.sd-share { display: inline-block; vertical-align: middle; width: 4.5rem; height: 5px; border-radius: 3px;
    background: var(--rb-c-slate-100, #f1f5f9); overflow: hidden; margin-right: 0.5rem; }
.sd-share > span { display: block; height: 100%; background: var(--rb-primary, #5a6178); border-radius: 3px; }
.sd-rto { color: #dc2626; font-weight: 600; }
.sd-empty { font-size: 0.8rem; color: var(--rb-c-slate-400, #94a3b8); padding: 0.75rem 0; }
.sd-num { font-variant-numeric: tabular-nums; }


/* ===========================================================================
   OVERLAP FIXES — PART A: layout guards
   Appended as one block. Additive only; no rule above is edited, so deleting
   this block reverts everything here.

   Every rule in Part A is a GUARD: it changes nothing at rest and only takes
   effect where elements would otherwise collide. Safe to apply as-is.
   =========================================================================== */

/* A1. Header: the centred search sliding under the header actions ----------
   .p-toolbar-center is absolutely positioned at left:50%, so it occupies NO
   space in the toolbar's flex row: the logo group and the actions group lay out
   as if it were not there, and the 40rem field runs underneath them long before
   the 1180px breakpoint that moves it into the row. The org label and the
   action icons end up drawn on top of the input.

   (The stylesheet's own comment above that media query describes this same
   failure — this fix removes the cause instead of deferring it to 1180px.)

   Fix: lay the toolbar out as a three-track grid with equal flexible side
   tracks. The centre track is then genuinely centred, needs no transform, and
   grid tracks cannot overlap by construction. */
#shell-header .header-toolbar {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    column-gap: 1rem;
}
#shell-header .header-toolbar .p-toolbar-start { grid-column: 1; justify-self: start; }
#shell-header .header-toolbar .p-toolbar-end { grid-column: 3; justify-self: end; flex-wrap: nowrap; }
/* header_search_pos still drives the position — via justify-content now, since
   the absolute offsets it used before are gone. All three values still work. */
#shell-header .search-center .p-toolbar-center,
#shell-header .search-left .p-toolbar-center,
#shell-header .search-right .p-toolbar-center {
    grid-column: 2;
    position: static;
    transform: none;
    margin: 0;
    min-width: 0;
    display: flex;
}
#shell-header .search-center .p-toolbar-center { justify-content: center; }
#shell-header .search-left .p-toolbar-center { justify-content: flex-start; }
#shell-header .search-right .p-toolbar-center { justify-content: flex-end; }
/* The field may now shrink with its track instead of forcing the row wider. */
#shell-header .header-search { width: min(40rem, 100%); min-width: 0; }
#shell-header .header-search .p-inputtext { min-width: 0; }
#shell-header .header-org-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* A2. Table toolbar trio riding over the tab strip -------------------------
   .tabs-row is a nowrap flex row holding a scrollable tab strip and the
   Export / Columns / Sort group. The group has no flex basis of its own, so at
   narrow widths it is compressed under the tabs rather than holding its size. */
.tabs-row { flex-wrap: wrap; row-gap: 0.5rem; }
.tabs-row .p-buttongroup,
.tabs-row .p-button.p-button-icon-only,
.tabs-row .w-icon-btn.p-multiselect { flex: 0 0 auto; }

/* A3. Page toolbar and bulk bar colliding at narrow widths -----------------
   Both are PrimeVue Toolbars whose start group holds a title, a 16rem search
   group, a select and a filter button. Without wrapping, the end group's
   buttons are pushed onto the start group. */
.page-toolbar,
.bulk-bar { flex-wrap: wrap; row-gap: 0.5rem; }
.page-toolbar .p-toolbar-start,
.bulk-bar .p-toolbar-start { flex-wrap: wrap; row-gap: 0.5rem; min-width: 0; }
.page-toolbar .p-toolbar-end,
.bulk-bar .p-toolbar-end { flex-wrap: wrap; row-gap: 0.5rem;gap:var(--p-button-gap) }
/* Pinned filters can make the page toolbar's start group two or three lines
   deep. The ROW must not wrap for that — it would drop the Create button onto a
   line of its own — so the row stays single, the start group shrinks and wraps
   within itself, and the end group holds the top right against the first line.
   Two classes on purpose: PrimeVue injects its own .p-toolbar rule into <head>
   at runtime, after this sheet, so a single class of equal weight loses to it. */
.p-toolbar.page-toolbar { flex-wrap: nowrap; align-items: flex-start; }
.p-toolbar.page-toolbar .p-toolbar-start { flex: 1 1 auto; min-width: 0; }
.p-toolbar.page-toolbar .p-toolbar-end { flex: none; }
/* "Select All 1,204+ orders in your store" is a link button with no intrinsic
   limit — it would push the print buttons off the row. Let it truncate instead. */
.bulk-bar .p-toolbar-start { min-width: 0; }
.bulk-bar__reach { min-width: 0; margin-left: 0.5rem; }
.bulk-bar .p-toolbar-start .p-button.bulk-bar__reach { max-width: 100%; }
.bulk-bar__reach .p-button-label,
span.bulk-bar__reach {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "Select All …" must read as a LINK. PrimeVue's `link` button paints itself
   with the primary colour, and this theme's primary is noir (see
   applyNoirSlate in app.js), so it comes out black and looks like plain text. */
.bulk-bar .p-button.p-button-link.bulk-bar__reach { color: #2c6ecb !important; }
.bulk-bar .p-button.p-button-link.bulk-bar__reach .p-button-label { text-decoration: underline; }
.bulk-bar .p-button.p-button-link.bulk-bar__reach:hover { color: #1d4f96 !important; }
/* The bar REPLACES the header row, so it lines up with the rows underneath it:
   pulled out to the card's border like the table, then padded by one cell so
   its checkbox lands in the select-all column — and on the tab strip above. */
.p-card-content > .bulk-bar {
    margin-left: calc(-1 * var(--rb-card-pad-l));
    margin-right: calc(-1 * var(--rb-card-pad-r));
    padding-left: var(--rb-table-pad-l) !important;
}
/* Orders: the count and its store-wide link hold the left, so the actions take
   the rest of the bar and sit centred in it rather than jammed to the edge.
   The column gap goes with them: the toolbar's own gap (and the empty centre
   slot's) would push the free space half a gap right of true centre. The row
   gap stays, so a wrapped bar still breathes. */
.bulk-bar--actions-center { column-gap: 0; }
.bulk-bar--actions-center .p-toolbar-center { display: none; }
.bulk-bar--actions-center .p-toolbar-end { flex: 1 1 auto; justify-content: center; }
/* the count sits beside the checkbox as quiet context, not a headline */
/* The strip is one header row high, so its actions are sized to sit INSIDE it
   with air above and below — at their natural height they fill it edge to edge
   and touch the rule underneath. Same tokens as the strip, less the padding it
   keeps on both sides. */
.bulk-bar .p-button {
    height: calc(var(--rb-table-head-pad-t) + var(--rb-table-head-pad-b)
                 + var(--rb-checkbox-size, 18px) - 6px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.bulk-bar__count { font-size: 13px; font-weight: 500; color: var(--rb-table-color, #3d4358); }
/* the settled state: no longer an action, so it reads as quiet confirmation */
.bulk-bar__all { font-size: 13px; font-weight: 500; color: #7a8194; }
/* While rows are selected the bar REPLACES the column header: the header row
   is hidden and the bar sits flush on the rows, so it drops its own card
   chrome (border, radius, gap) and keeps only the rule that separates it. */
.w-head-hidden .p-datatable-thead { display: none !important; }
/* ...and the rows start immediately under its rule. The table's own top margin
   (--rb-table-margin-t) would leave a band between the two, which reads as a
   second line under the bar — the doubled rule you see when rows are ticked. */
.bulk-bar + .p-datatable { margin-top: 0 !important; }
.bulk-bar.p-toolbar {
    margin-bottom: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rb-table-border, #e2e8f0) !important;
    border-radius: 0 !important;
    padding: 5px 7px !important;
    background: #fff !important;
    /* Exactly as tall as the header row it stands in for, built from the same
       tokens: the header's own padding around a checkbox, plus its rule. Ticking
       a row then swaps one strip for another without the table stepping down.
       The bar can never be shorter than its own buttons, so a checkbox tuned
       very small in the appearance editor leaves the buttons in charge. */
    min-height: calc(var(--rb-table-head-pad-t) + var(--rb-table-head-pad-b)
                     + var(--rb-checkbox-size, 18px) + 1px);
    align-items: center;
}

/* A4. Order detail: the status pill pulled into the order number -----------
   .ohm-status centres itself with margin:0 auto and then shifts left with
   transform: translateX(-9%). A transform does not affect layout, so on a
   narrow centre column the pill is painted over the order number beside it. */
.ohm-wide .ohm-status { transform: none; }
.ohm-status,
.ohm-hold { min-width: 0; flex-wrap: wrap; row-gap: 6px; }

/* A5. Order status bar: the split control landing on the payment state -----
   .rb-osb is a nowrap flex row of six items plus the control; below roughly
   1100px the control overlaps the "Unpaid · Rs …" line. */
.rb-osb { flex-wrap: wrap; row-gap: 8px; }
.rb-osb__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rb-osb__spacer { flex: 1 1 0; min-width: 0; }
.rb-osb__rule { flex: none; }

/* A6. Hand-rolled overlays opening behind the sticky header ----------------
   #shell-header sits at z-index 100; .rb-menu and .rb-locktip sit at 60, so a
   status menu opened near the top of the page is drawn behind the header.
   PrimeVue's own overlays already stack above it; these two do not. */
.rb-menu,
.rb-locktip { z-index: 1000; }

/* A7. Order detail overflowing horizontally below ~1240px -----------------
   .ohm-layout.ohm-wide is
       minmax(180px, 1fr) minmax(860px, 1100px) minmax(180px, 1fr)
   with a 20px gap — a hard floor of 180 + 860 + 180 + 40 = 1260px, and there is
   no media query for it. Below that the grid does not reflow: it overflows the
   viewport, pushing the right rail and the right edge of the centre column
   (including the split status control and the "Ship / fulfill order" button)
   off-screen behind a horizontal scrollbar. Measured at a 924px viewport the
   document scrolls to 1270px.

   The plain .ohm-layout (236px / 1fr / 300px) has the same floor, 776px.

   Fix, in two tiers. The centre column's 860px minimum is what makes the floor
   1260px, and it is a minimum, not a requirement — so first RELAX it and keep
   the three-column layout down to ~960px. Only stack below that, where 180px
   rails plus a readable centre genuinely no longer fit side by side.

   The rails hold short label/value pairs ("Placed", "Channel:", "Payment Type:")
   and the activity list, so they read fine at 160px. Nothing changes above
   1259px. */
@media (max-width: 1259px) {
    .ohm-layout.ohm-wide {
        grid-template-columns: minmax(160px, 0.9fr) minmax(0, 1100px) minmax(160px, 0.9fr);
    }
}
@media (max-width: 959px) {
    .ohm-layout.ohm-wide {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px 0;
    }
    .ohm-wide .ohm-rail { max-width: none; padding-top: 0; }
    .ohm-wide .ohm-center { order: 0; }
}
@media (max-width: 1259px) {
    /* Follow .ohm-layout.ohm-wide into its own 1259 tier, or the bar stops
       agreeing with the column it is supposed to sit over. */
    #shell-header .header-nav-wrap {
        grid-template-columns: minmax(160px, 0.9fr) minmax(0, 1100px) minmax(160px, 0.9fr);
    }
}
@media (max-width: 959px) {
    /* Still one row: the bar overflows the box evenly and the header scrolls it,
       rather than folding items onto a second line. Below 640px the nav is a
       drawer instead, so this tier only covers small tablets. */
    #shell-header .header-nav-wrap { grid-template-columns: minmax(0, 1fr); overflow-x: auto; scrollbar-width: none; }
    #shell-header .header-nav-wrap .p-menubar { grid-column: 1; }
    #shell-header .header-nav-wrap::-webkit-scrollbar { display: none; }
    #shell-header .header-nav-wrap .p-menubar-root-list {
        flex-wrap: nowrap;
        justify-content: center;
    }
}
@media (max-width: 800px) {
    .ohm-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px 0;
    }
    .ohm-layout > .ohm-rail { padding-top: 0; }
}

/* A8. Items table forcing the same overflow at any width ------------------
   .ohm-table is a nine-column table inside .ohm-items-card with no horizontal
   scroll container, so on a narrow centre column it widens its own card and
   drags the meta row's buttons out with it.

   Scroll the CARD, not the table. The obvious-looking alternative —
       .ohm-table { display: block; overflow-x: auto }
       .ohm-table > thead, .ohm-table > tbody { display: table }
   — must NOT be used: it makes thead and tbody two independent layout tables,
   so their columns size themselves separately and every header lands over the
   wrong column. .ohm-items-card already has overflow: hidden for its 12px
   corners, so widening that to auto costs nothing and keeps the table a table. */
/* SUPERSEDED 2026-08-28 — no scroller at any width. The card clips again and
   the table is table-layout:fixed on PERCENTAGE columns, so the nine columns
   always divide the width they are given instead of demanding 720px. The
   thead/tbody warning above still stands: do not split them into two tables. */
.ohm-items-card { min-width: 0; overflow: hidden; }
.ohm-table { table-layout: fixed; width: 100%; min-width: 0; }
/* break-word, NOT anywhere: a long SKU still breaks rather than overflowing,
   but ordinary words keep wrapping at spaces instead of one letter per line */
.ohm-table th, .ohm-table td { overflow-wrap: break-word; }
/* col 1 is the flexible one (auto = whatever the fixed/percentage columns
   leave), so the percentages below can never add up past the table width */
.ohm-table th:nth-child(1), .ohm-table td:nth-child(1) { width: auto; }
.ohm-table th:nth-child(2), .ohm-table td:nth-child(2) { width: 8%; }
.ohm-table th:nth-child(3), .ohm-table td:nth-child(3) { width: 6.5%; }
.ohm-table th:nth-child(4), .ohm-table td:nth-child(4) { width: 6.5%; }
.ohm-table th:nth-child(5), .ohm-table td:nth-child(5) { width: 7.5%; }
.ohm-table th:nth-child(6), .ohm-table td:nth-child(6) { width: 9.5%; }
.ohm-table th:nth-child(7), .ohm-table td:nth-child(7) { width: 10%; }
.ohm-table th:nth-child(8), .ohm-table td:nth-child(8) { width: 10%; }
/* last column carries the card's ⋮ in the header and the row pencil beneath it,
   both right-aligned and icon-sized; col 1 is auto so it takes the space back */
.ohm-table th:nth-child(9), .ohm-table td:nth-child(9) { width: 56px; text-align: right;
    /* 18px, not 8px: the same inset .ohm-parcel__pane gives the shipment card's
       menu and .ohm-panel gives the Shipping card's, so every card's actions
       button on this page lines up on one vertical */
    padding-left: 3px; padding-right: 18px; }
/* the header button sits flush right and does not stretch the header's height */
.ohm-table th:nth-child(9) .ohm-hover-actions { vertical-align: middle; }
/* the status pill is one word — let it size itself, never break mid-word */
.ohm-table td:nth-child(8) .p-tag { white-space: nowrap; }
.ohm-table td:nth-child(2), .ohm-table td:nth-child(3), .ohm-table td:nth-child(4),
.ohm-table td:nth-child(5), .ohm-table td:nth-child(6) { white-space: nowrap; }
/* tighter gutters buy the columns their room back */
.ohm-table th, .ohm-table td { padding-left: 8px; padding-right: 8px; }
.ohm-table td:first-child { padding-left: 12px; }
/* No scroller now, so the meta strip no longer has a scroll width to match. */
.ohm-meta-row { min-width: 0; flex-wrap: wrap; row-gap: 8px; }

/* A9. Chips and footer buttons wrapping inside their own boxes ------------
   .ohm-loc-chip, .ohm-actions-btn and .ohm-fulfill-btn are inline-flex boxes
   with fixed padding and, on the fulfil button, a fixed 29px height. None sets
   white-space, so "Karachi warehouse" and "Ship / fulfill order" break onto a
   second line — which overflows the fixed height and pushes the label over the
   row beneath. */
.ohm-loc-chip,
.ohm-actions-btn,
.ohm-fulfill-btn { white-space: nowrap; }

/* ===========================================================================
   OVERLAP FIXES — PART B: candidates, DISABLED by default
   These two DO change resting appearance, and neither was reproduced against a
   real screen. Uncomment only if the collision they describe is the one you are
   seeing.
   ===========================================================================

.p-tag { height: auto; min-height: 18px; }
    B1. .p-tag is pinned to height:18px while still carrying vertical padding,
    so a long or larger-font label overflows its lozenge into the row below.
    min-height keeps the compact look without clipping — but it also lets tall
    tags grow, which changes row heights wherever that happens.

.p-button:has(> .p-badge) { overflow: visible; }
.p-button > .p-badge { position: relative; z-index: 1; flex: none; }
    B2. --rb-badge-valign is "super", i.e. transform: translateY(-0.4em), which
    lifts a filter count out of its button and over the row above. This keeps
    the lift but stops the badge being clipped. Uses :has(), so verify against
    your browser support floor.
*/

/* --- Hold / flag banners + menu context (OrderStatusBar H3 handover) ------- */
.rb-holdbar {
    display: flex; align-items: center; gap: 12px; margin-top: 8px;
    background: var(--warning-bg, #FFF3DF); border: 1px solid #F0DCB4; border-radius: 10px;
    padding: 8px 16px;
    animation: rbDrop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    --rb-primary: #0d93ed;
    --ink-900: #1A1F36; --ink-800: #272D45; --ink-700: #3D4358; --ink-600: #5A6178;
    --ink-500: #7A8194; --ink-400: #A2A8B8; --ink-300: #cbd0d8;
    --line-300: #cbcbcb; --line-200: #EBEEF3; --bg-100: #F5F6F8; --bg-50: #F8F9FB; --surface: #fff;
    --positive: #1F9D6B; --warning: #C77700; --warning-bg: #FFF3DF; --warning-ink: #8A5300;
    --critical: #D92D20; --critical-bg: #FDECEA; --critical-ink: #B42318;
}
.rb-holdbar__glyph { font-size: 13px; color: var(--warning-ink); }
.rb-holdbar__body { flex: 1; min-width: 0; }
.rb-holdbar__title { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--warning-ink); }
.rb-holdbar__meta { font-size: 12px; line-height: 1.4; color: var(--ink-600); margin-top: 3px; }
/* flag banner — same family, critical tone */
.rb-flagbar { background: var(--critical-bg); border-color: #F5C2BD; }
.rb-flagbar .rb-holdbar__glyph, .rb-flagbar .rb-holdbar__title { color: var(--critical-ink); }
/* banner actions are real PrimeVue buttons, so they inherit the app chrome */
.rb-holdbar .p-button { white-space: nowrap; flex: none; }
@keyframes rbDrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rb-holdbar { animation: none !important; } }

/* menu: hold context block + grouped sections */
.rb-menu__ctx { padding: 8px 10px 10px; }
.rb-menu__eyebrow { font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 6px; }
.rb-menu__for { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink-900); }
.rb-menu__note { font-size: 11.5px; line-height: 1.4; color: var(--ink-500); margin-top: 2px; }
.rb-menu__group { border-top: 1px solid var(--line-200); padding-top: 5px; }
.rb-menu { width: 250px; }
.rb-dot-positive { background: var(--positive); }
.rb-status__glyph { font-size: 12px; margin-right: 8px; }

/* dialog extras used by release / flag */
.rb-dlg__hold { padding: 12px 22px; background: var(--warning-bg); font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--warning-ink); }
.rb-dlg__stack { display: flex; flex-direction: column; gap: 8px; }
.rb-opt--plain { padding: 11px 12px; }
.rb-opt--plain.is-on { background: var(--bg-50); border-color: var(--ink-300); }
/* PrimeVue's footer is a flex row justified to the end; block restores our layout */
.rb-dialog .p-dialog-footer { display: block; }

/* --- Toast: compact dark pill, bottom-centre (replaces the tinted panels) --- */
.p-toast { width: auto !important; max-width: min(520px, 92vw); }
/* Entrance: PrimeVue's own keyframe grows a toast from scale(0.6). A reveal
   starts near full size (animation rules, section 3), so it rises 8px from
   0.95 on the page's ease-out instead: rbToast, kept with the status-bar
   keyframes. Reduced motion gets a plain fade. */
.p-toast .p-toast-message-enter-active { animation: rbToast 240ms cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { .p-toast .p-toast-message-enter-active { animation: rbFade 100ms linear; } }
/* The phone nav drawer inherits PrimeVue's 0.5s slide; a control used this
   often opens in 320ms and leaves quicker (exits shorter, section 3). */
.p-drawer-mask.p-drawer-left .p-drawer-enter-active, .p-drawer-mask.p-drawer-right .p-drawer-enter-active { animation-duration: 320ms; }
.p-drawer-mask.p-drawer-left .p-drawer-leave-active, .p-drawer-mask.p-drawer-right .p-drawer-leave-active { animation-duration: 260ms; }
.p-toast .p-toast-message {
    background: #1A1F36 !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgb(16 24 40 / 28%) !important;
    color: #fff !important;
    margin: 0 0 12px !important;
    backdrop-filter: none;
}
.p-toast .p-toast-message-content {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px 12px 16px !important; border: 0 !important;
}
.p-toast .p-toast-message-icon { font-size: 15px !important; width: auto !important; height: auto !important; color: rgb(255 255 255 / 85%) !important; flex: none; }
.p-toast .p-toast-message-text { margin: 0 !important; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-toast .p-toast-summary { font-size: 13px !important; font-weight: 500 !important; color: #fff !important; }
.p-toast .p-toast-detail { font-size: 12px !important; line-height: 1.4; margin: 0 !important; color: rgb(255 255 255 / 65%) !important; }
.p-toast .p-toast-close-button {
    width: 20px !important; height: 20px !important; flex: none;
    color: rgb(255 255 255 / 60%) !important; background: transparent !important;
    border: 0 !important; box-shadow: none !important;
}
.p-toast .p-toast-close-button:hover { background: rgb(255 255 255 / 12%) !important; color: #fff !important; }
/* severity reads from the icon colour only — the pill stays dark */
.p-toast .p-toast-message-success .p-toast-message-icon { color: #6EE7B7 !important; }
.p-toast .p-toast-message-info .p-toast-message-icon { color: #93C5FD !important; }
.p-toast .p-toast-message-warn .p-toast-message-icon { color: #FCD34D !important; }
.p-toast .p-toast-message-error .p-toast-message-icon { color: #FCA5A5 !important; }

/* --- Shipping note dialog rows --- */
.rb-note-body { padding-bottom: 12px; }
.rb-note-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 13px; color: #C77700; }
.rb-note-row > span:first-child { color: #C77700; white-space: nowrap; }
.rb-note-val { color: #212B36; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.rb-note-live { color: #0E7A50; }
.rb-note-body .p-divider { margin: 6px 0; }
/* rail action buttons stack full width under the activity list */
.ohm-rail-actions { display: grid; align-items: flex-start; gap: 5px;  }

/* Courier modal: current status banner above the detail rows */
.rb-courier-now {
    display: flex; align-items: center; gap: 10px;
    background: #FFF3DF; border: 1px solid #F0DCB4; border-radius: 10px;
    padding: 10px 14px; margin-bottom: 14px;
}
.rb-courier-now.is-delivered { background: #E6F6EF; border-color: #BFE6D5; }
.rb-courier-now__dot { width: 9px; height: 9px; border-radius: 99px; background: #C77700; flex: none; }
.rb-courier-now.is-delivered .rb-courier-now__dot { background: #1F9D6B; }
.rb-courier-now__title { font-size: 13px; font-weight: 600; color: #8A5300; }
.rb-courier-now.is-delivered .rb-courier-now__title { color: #0E7A50; }
.rb-courier-now__sub { font-size: 12px; color: #5A6178; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Shipment Activity: one boxed group per fulfilment */
.ohm-rail-group { margin-bottom: 10px; }
.ohm-rail-group-head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid #F1F3F7; }
.ohm-rail-group-head .pi { font-size: 12px; color: #7A8194; }
.ohm-rail-group-title { font-size: 12.5px; font-weight: 650; color: #212B36; }
.ohm-rail-group-carrier { margin-left: auto; font-size: 11.5px; color: #7A8194; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ohm-rail-group .ohm-rail-actions { margin-top: 10px; padding-top: 9px; border-top: 1px solid #F1F3F7; }
/* The closing facts of a shipment section: courier and its clocks, label over
   value rather than side by side — "Delivery Pending Since" has no room to sit
   beside its figure in a 180px rail. */
.rb-rail-facts {
    margin: 12px 0 0; padding: 10px 0 0 20px; border-top: 1px solid #F1F3F7;
    display: grid; gap: 7px 0;
}
.rb-rail-facts dt { font-size: 11.5px; color: #7A8194; line-height: 1.3; }
.rb-rail-facts dd {
    margin: 1px 0 0; font-size: 12.5px; font-weight: 600; color: #212B36;
    line-height: 1.35; overflow-wrap: anywhere;
}

/* per-fulfilment item cards: header chip row + carrier strip */
.ohm-items-card + .ohm-items-card { margin-top: 12px; }
.ohm-grp-title { margin-left: 10px;font-size: 12.5px;font-weight: 500;color: #504f4f;}
.ohm-grp-tag { margin-left: 8px; }
.ohm-carrier-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ohm-meta-row .p-avatar { flex: none; background: #EBEEF3; color: #5A6178; font-weight: 600; }
/* each shipment gets its own collapsible activity section in the rail */
/* The open section walks down the rail to sit level with its box: an inline
   margin-top, so the sections below are pushed rather than covered. (Driving
   it through a custom property looks tidier but does not transition back — the
   margin sticks at the walked value.) */
.ohm-rail-section { transition: margin-top .4s cubic-bezier(.2, .7, .2, 1); }
.ohm-rail-section + .ohm-rail-section { margin-top: 16px; padding-top: 14px; }
@media (prefers-reduced-motion: reduce) { .ohm-rail-section { transition: none; } }
.ohm-rail-section .ohm-act-head { cursor: pointer; }

/* Customer notifications dialog */
.rb-dlg__head-stack { flex-direction: column; align-items: flex-start; gap: 3px; }
.rb-notify-tabs { margin-bottom: 4px; }
.rb-notify-tabs .p-togglebutton { font-size: 12.5px; padding: 6px 16px; }
.rb-field { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.rb-field > label { font-size: 12.5px; font-weight: 600; color: #212B36; }
.rb-field .p-textarea { resize: vertical; }
.rb-skel-mt { margin-top: 10px; }

/* loading skeletons: item rows and card padding */
.rb-skel-card { padding: 14px 16px; }
.rb-skel-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.rb-skel-line + .rb-skel-line { border-top: 1px solid #F1F3F7; }
.rb-skel-line__text { flex: 1; min-width: 0; }

/* Customer notifications: channel tabs, counters, warnings */
.rb-notify-tabs .p-togglebutton { gap: 7px; }
.rb-notify-tabs .p-togglebutton .pi { font-size: 12px; }
.rb-notify-tab-label { font-size: 12.5px; }
.rb-notify-count { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 11.5px; color: #7A8194; font-variant-numeric: tabular-nums; }
.rb-notify-warn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; color: #8A5300; }
.rb-notify-warn .pi { font-size: 12px; }
.rb-field .rb-dlg__eyebrow { margin-bottom: 0; }

/* Courier tracking history: heading row, empty state, provenance note */
.rb-track-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.rb-track-count { font-size: 11.5px; color: #7A8194; }
.rb-track-empty { display: flex; align-items: center; gap: 10px; padding: 16px; border: 1px dashed #cbcbcb; border-radius: 10px; background: #F8F9FB; font-size: 12.5px; color: #7A8194; }
.rb-track-empty .pi { font-size: 15px; }
.rb-track-note { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #EBEEF3; font-size: 11.5px; line-height: 1.45; color: #A2A8B8; }
.rb-track-note .pi { font-size: 12px; margin-top: 1px; flex: none; }

/* Shipment card actions. These used to fade in on hover; they now stand at
   full strength always, on every device — a menu you cannot see is a menu you
   do not know is there, and the card carries the only way into Print label,
   the packing slip and Replacement or refund. */
.ohm-hover-actions { display: inline-flex; align-items: center; gap: 8px; }
/* row ⋮ keeps its own overrides: it has no hidden state to undo, and these
   keep it up while its menu is open (hover has moved to the menu by then) */
@media (hover: hover) and (pointer: fine) {
    .ohm-items-card:hover .ohm-row-action,
    .ohm-table tbody tr.is-menu-open .ohm-row-action,
    .ohm-table tbody tr .ohm-row-action:focus-visible { opacity: 1; }
}
/* a refund raised but not yet paid out — owed, not sent */
.ohm-wide .ohm-txn-owed, .ohm-wide .ohm-txn-owed > span:last-child { color: #8A5300; font-weight: 600; }
/* the refund button sits under the totals, full width like the panel */
.rb-txn-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-200, #EBEEF3); }
/* outstanding balance stands out from the settled rows */
.ohm-wide .ohm-txn-due, .ohm-wide .ohm-txn-due > span:last-child { color: #B42318; font-weight: 700; }

/* Order Summary tags block — the manage trigger reads as one more chip */
.ohm-sum-tags { padding-top: 10px; }
.ohm-sum-tags .ohm-tag-chips { margin-top: 4px; align-items: center; gap: 5px; }
.ohm-sum-tags .p-chip { font-size: 11.5px; padding: 2px 9px; }
/* A long tag stays inside the rail: the chip never grows past the column
   and clips its label with an ellipsis (the full text is the hover title). */
.ohm-sum-tags .ohm-tag-chips { min-width: 0; }
.ohm-sum-tags .p-chip { max-width: 100%; min-width: 0; }
.ohm-sum-tags .p-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ohm-tag-manage.p-button {
    padding: 3px 10px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    border-radius: 999px !important;
    border: 1px dashed #cbd0d8 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #5A6178 !important;
    gap: 5px;
}
.ohm-tag-manage.p-button:hover {
    background: #fff !important;
    border-color: #7A8194 !important;
    border-style: solid !important;
    color: #1A1F36 !important;
}
.ohm-tag-manage .p-button-icon { font-size: 10px; }
.rb-city-hint { color: #7A8194; }

/* Change Shipment City: the from -> to preview */
.rb-city-swap {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
    background: #F8F9FB; border: 1px solid #EBEEF3; border-radius: 10px;
    padding: 12px 16px; margin-bottom: 18px;
}
.rb-city-swap__side { min-width: 0; }
.rb-city-swap__val { font-size: 14px; font-weight: 650; color: #1A1F36; overflow-wrap: anywhere; }
.rb-city-swap__val.is-empty { color: #A2A8B8; font-weight: 400; }
.rb-city-swap__via { font-size: 11.5px; color: #7A8194; margin-top: 2px; }
.rb-city-swap__arrow { color: #A2A8B8; font-size: 13px; }
.rb-city-hint { display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 11.5px; line-height: 1.4; color: #7A8194; }
.rb-city-hint .pi { font-size: 12px; margin-top: 1px; }
/* the city trigger sits inside an input group — keep it snug, not full-width padded */
.oa-city-btn.p-button { padding: 6px 12px !important; font-size: 12px !important; gap: 6px; white-space: nowrap; }
.oa-city-btn .p-button-icon { font-size: 11px; }

/* Change Shipment City: tighter gutters and snug footer buttons */
.rb-city-dialog .p-dialog-header { padding: 16px 18px 12px; }
.rb-city-dialog .rb-dlg__body { padding: 14px 18px 2px; }
.rb-city-dialog .rb-dlg__foot { padding: 12px 18px 16px; gap: 8px; }
.rb-city-dialog .rb-dlg__foot .p-button { padding: 6px 14px !important; font-size: 12px !important; }
.rb-city-dialog .rb-city-swap { padding: 10px 14px; margin-bottom: 14px; }
.rb-city-dialog .rb-field { margin-top: 12px; }

/* rb-dialog owns its own gutters: the global --rb-dialog-pad rule is !important
   and was stacking on top of .rb-dlg__body, doubling the side padding. */
.rb-dialog .p-dialog-content { padding: 0 !important; }
.rb-dialog .p-dialog-header { padding: 16px 18px 12px !important; }
.rb-dialog .p-dialog-footer { padding: 0 !important; }
/* Change Shipment City: tightest of the lot */
.rb-city-dialog .p-dialog-header { padding: 15px 14px 11px !important; }
.rb-city-dialog .rb-dlg__body { padding: 12px 14px 2px; }
.rb-city-dialog .rb-dlg__foot { padding: 10px 14px 14px; gap: 8px; }
.rb-city-dialog .rb-dlg__foot .p-button { padding: 6px 12px !important; font-size: 12px !important; }
.rb-city-dialog .rb-city-swap { padding: 10px 12px; }

/* Courier tracking history — the layout rules for these went missing from the
   stylesheet, so the rows were rendering as stacked plain text. */
.rb-track { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.rb-track__row { display: grid; grid-template-columns: 92px 24px minmax(0, 1fr); align-items: start; gap: 10px; }
.rb-track__date { font-size: 11.5px; color: #7A8194; padding-top: 3px; white-space: nowrap; }
.rb-track__rail { position: relative; display: flex; justify-content: center; padding-top: 2px; }
.rb-track__rail::before {
    content: ''; position: absolute; top: 0; bottom: -12px; left: 50%;
    width: 2px; margin-left: -1px; background: #EBEEF3;
}
.rb-track__row:last-child .rb-track__rail::before { display: none; }
.rb-track__seq {
    position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%;
    background: #EBEEF3; color: #5A6178; font-size: 10.5px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.rb-track__row.is-latest .rb-track__seq { background: #1F9D6B; color: #fff; }
.rb-track__body { padding-bottom: 12px; min-width: 0; }
.rb-track__title { font-size: 13px; font-weight: 500; color: #272D45; }
.rb-track__row.is-latest .rb-track__title { font-weight: 650; color: #0E7A50; }
.rb-track__clock { font-size: 11.5px; color: #7A8194; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* Post: the theme green reads too bright here — use the Rasbree positive ink */
.rb-post-on.p-button { background: #0E7A50 !important; border-color: #0E7A50 !important; color: #fff !important; }
.rb-post-on.p-button:hover { background: #0B6341 !important; border-color: #0B6341 !important; }

/* ===========================================================================
   RESPONSIVE — PART C: the blocks added after the A7/A8 layout fixes.
   A7 reflows .ohm-layout and the nav; A8 scrolls the items table. Everything
   below was built later and still had fixed multi-column grids, so it stayed
   side-by-side at every width.
   =========================================================================== */

/* --- C1. Customer + Shipping ------------------------------------------------
   .rb-card-split is flex with flex-wrap: nowrap and 1.4/1 children, so the two
   cards keep splitting a narrow centre column between them: at 700px that is
   ~400px and ~285px, and the Shipping card's own two-column Ship-to/Bill-to
   grid then gets ~120px per side. Stack them instead. */
@media (max-width: 900px) {
    .rb-card-split { flex-wrap: wrap !important; }
    .rb-card-split > .rb-col-left,
    .rb-card-split > .rb-col-right { flex: 1 1 100% !important; }
}

/* --- C2. Notes + Transactions ---------------------------------------------- */
@media (max-width: 900px) {
    .ohm-two-col { grid-template-columns: minmax(0, 1fr); }
}

/* --- C3. Ship to / Bill to and the customer legend -------------------------
   Both are hard 1fr 1fr grids. The address lines and legend rows carry long
   values (emails, "Govt Employees Housing Scheme"), so they need the full
   width before the cards themselves stack. */
@media (max-width: 620px) {
    .rb-ship-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .rb-legend { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* --- C4. Order status bar --------------------------------------------------
   .rb-osb is a single flex row (number · rule · items · rule · payment ·
   spacer · status control) with no wrap, so on a phone the status control —
   the one interactive thing in the bar — is what gets pushed out. */
@media (max-width: 700px) {
    .rb-osb { flex-wrap: wrap; row-gap: 10px; padding: 12px 14px; }
    .rb-osb__spacer { flex-basis: 100%; height: 0; }
    .rb-osb__control { width: 100%; }
    .rb-osb .rb-status { width: 100%; }
    .rb-osb .rb-status__label { flex: 1; }
    /* the menu is anchored right of a full-width control; keep it on screen */
    .rb-osb .rb-menu { right: 0; left: auto; width: min(250px, calc(100vw - 40px)); }
}

/* --- C5. Hold / flag banners ----------------------------------------------- */
@media (max-width: 700px) {
    .rb-holdbar { flex-wrap: wrap; row-gap: 10px; }
    .rb-holdbar__body { flex: 1 1 100%; }
}

/* --- C6. Shipment activity rail on a stacked layout ------------------------
   Below 959px A7 drops the rails under the centre column at full width, so the
   activity boxes stretch edge to edge. Cap them so they stay readable. */
@media (max-width: 959px) {
    .ohm-wide .ohm-rail-group,
    .ohm-wide .ohm-rail-section { max-width: 520px; }
    .ohm-rail-actions { flex-direction: row; flex-wrap: wrap; }
}

/* --- C7. Dialogs -----------------------------------------------------------
   PrimeVue's own breakpoints already narrow the dialog box; these fix the
   grids inside it, which do not reflow on their own. */
@media (max-width: 620px) {
    .rb-dlg__grid { grid-template-columns: minmax(0, 1fr); }   /* hold types */
    .oa-grid { grid-template-columns: minmax(0, 1fr); }        /* order actions */
    .rb-city-swap { grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: left; }
    .rb-city-swap__arrow { transform: rotate(90deg); justify-self: start; }
    /* footers hold up to four buttons — let them wrap instead of overflowing */
    .rb-dlg__foot { flex-wrap: wrap; row-gap: 8px; }
    .rb-dlg__hint { flex: 1 1 100%; }
    .p-dialog .p-dialog-footer { flex-wrap: wrap; row-gap: 8px; }
}

/* --- C8. Courier tracking history ------------------------------------------
   92px for the date column is a third of a 320px dialog. Narrow it and let the
   text column take what it needs. */
@media (max-width: 620px) {
    .rb-track__row { grid-template-columns: 74px 20px minmax(0, 1fr); gap: 8px; }
    .rb-track__date { font-size: 11px; white-space: normal; }
    .rb-track { max-height: 40vh; }
}

/* --- C9. Timeline conversation --------------------------------------------- */
@media (max-width: 700px) {
    .ohm-tlc { margin-top: 20px; }
    .ohm-tlc-item { flex-wrap: wrap; }
    .ohm-tlc-time { margin-left: 0; padding-left: 22px; flex-basis: 100%; }
}

/* --- C10. Touch targets ----------------------------------------------------
   The hover-reveal rule already keeps row and card actions visible on touch;
   this gives the small icon buttons the 44px floor there (animation rules,
   section 6); each sits alone in its cell, so the width can grow too. */
@media (hover: none) {
    .ohm-row-action.p-button,
    .ohm-hover-actions .p-button { min-height: 44px; min-width: 44px; }
}

/* --- Address problems: unserviced city / unusable phone --------------------
   Marks the offending line in the address block and blinks the phone icon, so
   the problem is visible without reading the banner. */
.rb-addr-bad { color: #D92D20 !important; }
.rb-addr-bad .rb-city { color: #D92D20 !important; }
.rb-addr-icon { font-size: 11px; margin-right: 5px; color: #D92D20; animation: rbBlink 1.1s ease-in-out infinite; }
.rb-phone-line { display: flex; align-items: center; gap: 7px; }
.rb-phone-icon { font-size: 12px; color: #1F9D6B; flex: none; }
.rb-phone-icon.is-bad { color: #D92D20; animation: rbBlink 1.1s ease-in-out infinite; }
@keyframes rbBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
    .rb-phone-icon.is-bad, .rb-addr-icon { animation: none; }
}

/* Unfulfilled / Removed group headings read as status pills, like the tags
   beside the shipped groups */
.ohm-grp-pill, .ohm-grp-pill-removed {
    display: inline-block; border-radius: 6px; padding: 5px 15px;
    font-size: 13px; font-weight: 500; line-height: 1.2;
}
.ohm-grp-pill { background: #FCF0A0; color: #303030; }
.ohm-grp-pill-removed { background: #FDECEA; color: #B42318; }

/* --- Removed items: a plain list, not the fulfilment table -----------------
   Stock, shipped and activity columns say nothing about a line that was taken
   off the order, so the card drops them and shows what does matter: what it
   was, why it went, and what it was worth. */
.ohm-rm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 10px; }
.ohm-rm-count { font-size: 11.5px; color: #7A8194; }
.ohm-rm-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid #F1F3F7; }
.ohm-rm-thumb { opacity: 0.5; filter: grayscale(1); flex: none; }
.ohm-rm-body { flex: 1; min-width: 0; }
.ohm-rm-title { font-size: 13px; font-weight: 500; color: #5A6178; }
.ohm-rm-meta { font-size: 11.5px; color: #A2A8B8; margin-top: 2px; display: flex; flex-wrap: wrap; gap: 5px; }
.ohm-rm-reason { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11.5px; color: #B42318; }
.ohm-rm-reason .pi { font-size: 11px; }
.ohm-rm-when { color: #A2A8B8; }
.ohm-rm-right { text-align: right; flex: none; }
.ohm-rm-qty { font-size: 11.5px; color: #A2A8B8; }
.ohm-rm-total { font-size: 13px; font-weight: 600; color: #7A8194; text-decoration: line-through; margin-top: 2px; }
@media (max-width: 620px) {
    .ohm-rm-row { flex-wrap: wrap; }
    .ohm-rm-right { text-align: left; padding-left: 48px; }
}

/* Partial shipped uses the overstock purple triad — same as the order detail
   status pill, so one status reads the same colour everywhere. */
.rb-tag-overstock.p-tag { background: #F0EBFE !important; color: #5A36C9 !important; }

/* ===========================================================================
   NOTES CARD — design handoff §1 (Notes, Timeline, Pings & Tasks)
   Fixed slots, quiet 22px row actions, amber reserved for unresolved
   attention. Notes text 13px ink-800, meta 11px ink-500 (§1 visual reqs).
   =========================================================================== */
.rb-notes { --ink-900: #1A1F36; --ink-800: #272D45; --ink-600: #5A6178; --ink-500: #7A8194; --ink-400: #A2A8B8;
    --line-200: #EBEEF3; --line-300: #cbcbcb; --bg-50: #F8F9FB; --bg-100: #F5F6F8; --surface: #fff;
    --attention-bg: #FFF3DF; --attention-ink: #8A5300; --positive: #1F9D6B; --positive-bg: #E6F6EF; --positive-ink: #0E7A50;
    --rb-primary: #0d93ed; padding: 0 !important; overflow: hidden; }
.rb-notes__head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; }
.rb-notes__title { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.rb-notes__pill { font-size: 11px; font-weight: 600; color: var(--attention-ink); background: var(--attention-bg);
    border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.rb-note-row { display: flex; align-items: flex-start; gap: 10px; row-gap: 6px; flex-wrap: wrap;
    padding: 10px 16px; border-top: 1px solid var(--line-200); transition: background 0.5s, opacity 0.2s; }
.rb-note-row.is-dim { opacity: 0.55; }
.rb-note-slot { width: 132px; flex: none; display: flex; align-items: flex-start; gap: 8px; padding-top: 1px; }
.rb-note-slot .pi { font-size: 13px; color: var(--rb-primary); flex: none; line-height: 19.5px; }
.rb-note-slot span { font-size: 13px; color: var(--ink-800); line-height: 1.5; }
.rb-note-val { min-width: 150px; flex: 1; }
.rb-note-body { font-size: 13px; color: var(--ink-800); line-height: 1.5; white-space: pre-line; }
.rb-note-empty { font-size: 13px; color: var(--ink-400); line-height: 1.5; }
.rb-note-meta { font-size: 11px; color: var(--ink-500); margin-top: 3px; }
/* §1.4 routing chips */
.rb-note-route { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.rb-note-route__label { font-size: 11.5px; color: var(--ink-500); white-space: nowrap; }
.rb-note-chip { font-size: 12px; font-weight: 500; color: var(--ink-800); border: 1px solid var(--line-300);
    border-radius: 999px; padding: 3px 11px; background: var(--surface); cursor: pointer; white-space: nowrap;
    font-family: inherit; }
.rb-note-chip:hover { background: var(--bg-50); }
/* badges + acknowledge control (§1.15) */
.rb-note-badges { margin-top: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px; }
.rb-note-badge { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.rb-note-badge.is-attention { color: var(--attention-ink); background: var(--attention-bg); }
.rb-note-ack, .rb-note-noaction { display: inline-flex; align-items: center; gap: 6px; height: 24px;
    font-size: 11.5px; font-weight: 600; border: 1px solid var(--line-300); border-radius: 999px;
    padding: 0 9px; background: var(--surface); cursor: pointer; white-space: nowrap; font-family: inherit;
    box-shadow: 0 1px 0 var(--line-300); }
.rb-note-ack { color: var(--positive-ink); }
.rb-note-ack:hover { background: var(--positive-bg); border-color: var(--positive); }
.rb-note-ack__dot { width: 11px; height: 11px; border: 1.5px solid var(--positive-ink); border-radius: 999px;
    flex: none; box-sizing: border-box; }
.rb-note-noaction { color: var(--ink-600); }
.rb-note-noaction:hover { background: var(--bg-100); }
/* the label unfurls on hover/focus; always open on touch (§1.15) */
.xpand .xp-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
    transition: max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s, margin-left 0.22s; margin-left: 0; }
.xpand:hover .xp-label, .xpand:focus-visible .xp-label { max-width: 11rem; opacity: 1; margin-left: 2px; }
@media (hover: none) { .xpand .xp-label { max-width: 11rem; opacity: 1; margin-left: 2px; } }
/* quiet 22px row actions */
.rb-note-btn { background: none; border: none; width: 22px; height: 22px; display: grid; place-items: center;
    border-radius: 6px; padding: 0; font-family: inherit; font-size: 13px; color: var(--rb-primary);
    cursor: pointer; flex: none; margin-top: 1px; }
.rb-note-btn:hover { background: var(--bg-100); }
.rb-note-lock { font-size: 12px; color: var(--ink-400); flex: none; cursor: default; margin-top: 2px; }
/* §1.12: flash the offending note when a blocked action is attempted */
.rb-notes.is-flash { animation: rbNoteFlash 1.6s ease; }
@keyframes rbNoteFlash {
    0%, 100% { box-shadow: 0 1px 3px rgb(0 0 0 / 6%); }
    15%, 65% { box-shadow: 0 0 0 3px rgb(199 119 0 / 45%); }
}
@media (prefers-reduced-motion: reduce) { .rb-notes.is-flash { animation: none; outline: 3px solid #C77700; } }
.rb-note-ackrow { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 12.5px; color: #272D45; }
.rb-note-ackrow label { cursor: pointer; }
@media (max-width: 620px) { .rb-note-slot { width: 100%; } }

/* ===========================================================================
   TIMELINE — design handoff §2
   A centred focus column (max 880px) sitting directly on the page background:
   NO white card wrapper. The composer is its own white card; human entries are
   white cards spanning the column; system rows sit inline on the background.
   =========================================================================== */
.rb-tl { max-width: 880px; margin: 22px auto 0;
    --ink-900: #1A1F36; --ink-800: #272D45; --ink-700: #3D4358; --ink-600: #5A6178;
    --ink-500: #7A8194; --ink-400: #A2A8B8;
    --line-300: #cbcbcb; --line-200: #EBEEF3; --bg-50: #F8F9FB; --bg-100: #F5F6F8; --surface: #fff;
    /* avatar swatches — assigned by order of appearance, never per user */
    --av-1: var(--p-amber-500); --av-2: var(--info); --av-3: var(--positive); --av-4: var(--p-violet-500);
    --rb-primary: #0d93ed;
    --positive: #1F9D6B; --positive-bg: #E6F6EF; --positive-ink: #0E7A50;
    --warning: #C77700; --warning-bg: #FFF3DF; --warning-ink: #8A5300;
    --attention: #E8590C; --attention-bg: #FFF0E6; --attention-ink: #C2410C;
    --critical: #D92D20; --critical-bg: #FDECEA; --critical-ink: #B42318;
    --info: #1570EF; --info-bg: #E8F1FE; --info-ink: #0E5BC4; }
/* The Select overlay is portaled to <body>, outside .rb-tl, so the header inside
   it would lose every token. Give the overlay the same block. */
.rb-tl__sel-panel.p-select-overlay,
.rb-tl__menu.p-menu {
    --ink-900: #1A1F36; --ink-800: #272D45; --ink-700: #3D4358; --ink-600: #5A6178;
    --ink-500: #7A8194; --ink-400: #A2A8B8;
    --line-300: #cbcbcb; --line-200: #EBEEF3; --bg-50: #F8F9FB; --bg-100: #F5F6F8; --surface: #fff;
    /* avatar swatches — assigned by order of appearance, never per user */
    --av-1: var(--p-amber-500); --av-2: var(--info); --av-3: var(--positive); --av-4: var(--p-violet-500);
    --rb-primary: #0d93ed;
    --positive: #1F9D6B; --positive-bg: #E6F6EF; --positive-ink: #0E7A50;
    --warning: #C77700; --warning-bg: #FFF3DF; --warning-ink: #8A5300;
    --attention: #E8590C; --attention-bg: #FFF0E6; --attention-ink: #C2410C;
    --critical: #D92D20; --critical-bg: #FDECEA; --critical-ink: #B42318;
    --info: #1570EF; --info-bg: #E8F1FE; --info-ink: #0E5BC4; }
.rb-tl__head { display: flex; align-items: center; gap: 8px; row-gap: 6px; flex-wrap: wrap; padding: 2px 2px 10px; }
.rb-tl__title { font-size: 15px; font-weight: 600; color: var(--ink-900); }
/* §2.23: selection changes colour only — never weight, which shifts the row */
.rb-tl__tabs { display: flex; align-items: center; gap: 2px; background: var(--surface);
    border: 1px solid var(--line-200); border-radius: 8px; padding: 2px; max-width: 100%; overflow-x: auto;
    scrollbar-width: none; }
.rb-tl__tabs::-webkit-scrollbar { display: none; }
.rb-tl__tab { font-size: 12px; font-weight: 500; color: var(--ink-600); background: transparent;
    border: none; border-radius: 6px; padding: 4px 10px; cursor: pointer; white-space: nowrap;
    font-family: inherit; transition: background 0.15s, color 0.15s; }
.rb-tl__tab:hover { background: rgb(2 6 23 / 5%); }
.rb-tl__tab.is-on { background: var(--bg-100); color: var(--ink-900); }
/* composer: its own white card, collapsed to one quiet line by default */
.rb-tl__composer { background: var(--surface); border: 1px solid var(--line-200); border-radius: 12px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 6%); padding: 12px 14px; }
.rb-tl__collapsed { display: flex; align-items: center; gap: 10px; cursor: text; }
.rb-tl__collapsed-text { font-size: 13px; color: var(--ink-400); }
.rb-tl__caption { text-align: right; font-size: 11.5px; color: var(--ink-500); margin: 8px 2px 16px; }
/* composer modes (§2.28-§2.29): the mode select is fixed-width so its label
   never jumps; the shared field takes the rest; the per-mode second row has no
   divider because it is part of the same control, not a footer. */
.rb-tl__mode.p-select { flex: none; min-width: 8.5rem; }
.rb-tl__mode-opt { display: flex; flex-direction: column; line-height: 1.25; }
.rb-tl__mode-name { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.rb-tl__mode-desc { font-size: 11px; color: var(--ink-500); }
.rb-tl__mode-icon { font-size: 12px; color: var(--ink-500); margin-right: 8px; }
.rb-tl__mode-tick { width: 14px; margin-left: auto; font-size: 12px; color: var(--ink-500); }
.rb-tl__field-wrap { position: relative; display: flex; flex: 1; min-width: 0; }
.rb-tl__field { flex: 1; min-width: 0; }
/* §2.32 @mention list — anchored under the field it completes */
.rb-tl__mention-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
    min-width: 240px; max-width: 340px; padding: 4px; background: var(--surface);
    border: 1px solid var(--line-200); border-radius: 10px;
    box-shadow: 0 8px 24px rgb(15 23 42 / 12%); }
.rb-tl__mention-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px;
    border: none; background: transparent; border-radius: 7px; cursor: pointer;
    font-family: inherit; text-align: left; }
.rb-tl__mention-row.is-active { background: var(--bg-100); }
.rb-tl__mention-name { font-size: 13px; font-weight: 600; color: var(--rb-primary); }
.rb-tl__mention-role { font-size: 11.5px; color: var(--ink-500); }
/* composer emoji picker — a grid, unlike the reaction strip's single row */
.rb-tl__emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.rb-tl__post { flex: none; }
/* One row, one height — the reference puts the mode select, the field, its two
   icon cells and the Post pair all on 36px. */
.rb-tl__mode.p-select,
.rb-tl__field .p-inputtext,
.rb-tl__field .p-button,
.rb-tl__post .p-button { height: 36px !important; box-sizing: border-box; }
.rb-tl__field .p-button { width: 36px !important; padding: 0 !important; }
/* The Post pair must read as ONE solid control: same dark surface across both
   halves, split only by a hairline. */
.rb-tl__post .p-button { border-radius: 0; }
.rb-tl__post .p-button:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; }
.rb-tl__post .p-button:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px;
    width: 34px !important; padding: 0 !important;
    border-left: 1px solid rgb(255 255 255 / 18%) !important; }
.rb-tl__file-input { display: none; }
/* §5: the ＋ menu's items are two-line — label plus its one-line description */
.rb-tl__menu-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 12px;
    cursor: pointer; text-decoration: none; }
.rb-tl__menu-item .rb-tl__mode-icon { margin-right: 0; line-height: 1.4; }
.rb-tl__comp-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rb-tl__ig.p-inputgroup { flex: none; width: auto; }
.rb-tl__ig-sel.p-select { min-width: 7.5rem; }
.rb-tl__comp-hint { font-size: 11px; color: var(--ink-500); margin-top: 6px; }
.rb-tl__sel-head { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-400); padding: 10px 12px 4px; }
.rb-tl__who { display: inline-flex; align-items: center; gap: 6px; }
.rb-tl__who-av.p-avatar { width: 18px; height: 18px; font-size: 8.5px; color: #fff; flex: none; }
/* day dividers */
.rb-tl__day { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-400); margin: 16px 0 8px; }
/* human entries: white cards spanning the column */
.rb-tl__card { display: flex; gap: 10px; align-items: flex-start; background: var(--surface);
    border: 1px solid var(--line-200); border-radius: 12px; box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
    padding: 10px 14px; margin-bottom: 8px; transition: box-shadow 0.16s ease; }
.rb-tl__card:hover { box-shadow: 0 3px 12px rgb(15 23 42 / 9%); }
.rb-tl__avatar.p-avatar { width: 26px; height: 26px; color: #fff; flex: none; font-size: 11px; }
.rb-tl__body { min-width: 0; flex: 1; }
/* entry header row: name, role chip, inline time, then badges (§2.61) */
.rb-tl__head-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; row-gap: 4px; }
.rb-tl__author { font-size: 13px; font-weight: 600; color: var(--ink-800); }
.rb-tl__role { font-size: 11px; font-weight: 500; color: var(--ink-600); background: var(--bg-100);
    border-radius: 999px; padding: 1px 8px; white-space: nowrap; flex: none; }
.rb-tl__badge { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px;
    white-space: nowrap; flex: none; }
.rb-tl__badge.is-positive { color: var(--positive-ink); background: var(--positive-bg); }
.rb-tl__badge.is-attention { color: var(--attention-ink); background: var(--attention-bg); }
.rb-tl__badge.is-critical { color: var(--critical-ink); background: var(--critical-bg); }
.rb-tl__badge.is-info { color: var(--info-ink); background: var(--info-bg); }
/* §2: outcomes get ONLY a 3px tone left-edge — the amber full border stays
   reserved for unresolved attention, or nothing reads as urgent. */
.rb-tl__card--positive { border-left: 3px solid var(--positive); }
.rb-tl__card--attention { border-left: 3px solid var(--attention); }
.rb-tl__card--critical { border-left: 3px solid var(--critical); }
/* §2.32: @mentions are pills inside the body text */
.rb-tl__mention { font-size: 12.5px; font-weight: 600; color: var(--info-ink); background: var(--info-bg);
    border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
/* §2.61: the assignment block is FLAT — one row, no box-in-box */
.rb-tl__asg { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 6px; margin-top: 6px; }
.rb-tl__asg-subject { font-size: 13px; font-weight: 600; color: var(--ink-900); min-width: 0; }
.rb-tl__asg-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    color: var(--info-ink); background: var(--info-bg); border-radius: 999px; padding: 2px 9px;
    white-space: nowrap; flex: none; }
.rb-tl__asg-who { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
    color: var(--ink-700); white-space: nowrap; flex: none; }
.rb-tl__asg-who .rb-tl__role { margin-left: 1px; }
.rb-tl__pill { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 10px;
    white-space: nowrap; flex: none; }
.rb-tl__pill.is-open { color: var(--info-ink); background: var(--info-bg); }
.rb-tl__pill.is-done { color: var(--positive-ink); background: var(--positive-bg); }
/* §2.62: the done stamp lives on the card, never as a system line */
.rb-tl__done-line { font-size: 12px; font-weight: 500; color: var(--positive-ink); margin-top: 6px; }
/* §2.45 pin banner: sits above the feed, amber-edged, and carries the only
   guaranteed way back out of a pin. */
.rb-tl__pinbar { display: flex; align-items: center; gap: 8px; margin: 10px 0 0;
    padding: 6px 6px 6px 12px; border: 1px solid var(--p-amber-300); border-radius: 8px;
    background: var(--surface); }
.rb-tl__pinbar-tag { font-size: 12px; color: var(--p-amber-700); flex: none; }
.rb-tl__pinbar-text { font-size: 12.5px; color: var(--ink-800); min-width: 0; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.rb-tl__pinbar-text:hover { color: var(--rb-primary); }
.rb-tl__pintag { font-size: 11px; font-weight: 600; color: var(--p-amber-700);
    background: var(--p-amber-50); border-radius: 999px; padding: 2px 8px; white-space: nowrap; flex: none; }
/* §2.47: hidden until the card is hovered — but always there on touch, and it
   must not vanish while its own menu is open. */
.rb-tl__actions { display: inline-flex; align-items: center; gap: 2px; flex: none;
    opacity: 0; transition: opacity 0.12s ease; }
.rb-tl__card:hover .rb-tl__actions,
.rb-tl__card:focus-within .rb-tl__actions,
.rb-tl__actions.is-open { opacity: 1; }
@media (hover: none) { .rb-tl__actions { opacity: 1; } }
.rb-tl__actions .p-button { width: 22px !important; height: 22px !important; padding: 0 !important;
    color: var(--ink-400) !important; }
.rb-tl__actions .p-button:hover { background: var(--bg-100) !important; color: var(--ink-800) !important; }
.rb-tl__actions .p-button .p-button-icon { font-size: 12px !important; }
/* §2.43 reaction pills: count pills, own reaction highlighted */
.rb-tl__reacts { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.rb-tl__react { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
    font-variant-numeric: tabular-nums; font-family: inherit; color: var(--ink-700);
    background: var(--surface); border: 1px solid var(--line-300); border-radius: 999px;
    padding: 2px 9px; cursor: pointer; white-space: nowrap; }
.rb-tl__react:hover { background: var(--bg-50); }
.rb-tl__react.is-mine { color: var(--rb-primary); background: var(--info-bg); border-color: var(--rb-primary); }
.rb-tl__emoji { display: flex; gap: 2px; }
.rb-tl__emoji-btn { width: 26px; height: 26px; display: grid; place-items: center; font-size: 15px;
    border: none; background: transparent; border-radius: 999px; cursor: pointer; font-family: inherit; }
.rb-tl__emoji-btn:hover { background: var(--bg-100); }
/* jump-to-pin needs to say where it landed (§2.69 highlight-on-arrival) */
.rb-tl__card.is-flash { background: var(--p-amber-50); }
/* §2.61 row actions: a neutral border with the tone carried by the TEXT only —
   a red-bordered Remove would shout louder than the status it sits beside. */
.rb-tl__asg-act.p-button { font-size: 11.5px !important; font-weight: 600 !important;
    padding: 4px 10px !important; border-radius: 8px !important; border-color: var(--line-300) !important;
    background: var(--surface) !important; color: var(--ink-800) !important;
    box-shadow: 0 1px 0 var(--line-300) !important; }
.rb-tl__asg-act.p-button:hover { background: var(--bg-100) !important; }
.rb-tl__asg-act.p-button .p-button-icon { font-size: 11px !important; }
.rb-tl__asg-act--danger.p-button { font-weight: 500 !important; color: var(--critical-ink) !important; }
.rb-tl__asg-act--danger.p-button:hover { background: var(--critical-bg) !important; }
.rb-tl__text { font-size: 13px; color: var(--ink-800); line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; }
/* §2: one clock convention — the time renders inline after the content */
.rb-tl__time { font-size: 12px; color: var(--ink-400); white-space: nowrap; }
/* §2.66: system rows are the quietest thing here — no card chrome */
.rb-tl__sys { display: flex; align-items: baseline; gap: 8px; padding: 5px 14px; font-size: 12px;
    color: var(--ink-500); line-height: 1.5; }
.rb-tl__sys-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-400); flex: none;
    transform: translateY(-2px); }
.rb-tl__sys-time { color: var(--ink-400); white-space: nowrap; }
.rb-tl__empty { font-size: 12.5px; color: var(--ink-400); padding: 18px 2px; }
/* §2 mobile: full-width column, zero horizontal overflow at 390px */
@media (max-width: 720px) {
    .rb-tl { max-width: none; }
    .rb-tl__head { flex-wrap: nowrap; }
    .rb-tl__caption { text-align: left; }
    /* §2 mobile: the composer wraps input-first */
    .ohm-comp-top { flex-wrap: wrap; }
    .rb-tl__field-wrap { flex: 1 1 100%; order: -1; }
    .rb-tl__ig.p-inputgroup { flex: 1 1 100%; }
}

/* A button inside an input group is part of the field, not a free-standing
   control — the rb-btn lift (1px hard bottom shadow + press) makes it float
   off the input it is attached to. Sit it flush instead. */
.p-inputgroup > .p-button,
.p-inputgroup > .p-button:hover { box-shadow: none !important; }
.p-inputgroup > .p-button:active { transform: none; box-shadow: none !important; }

/* Duplicate order: settings + amounts, with a live total */
.rb-dup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.rb-dup-grid .rb-field { margin-top: 0; }
.rb-dup-lbl { font-size: 12.5px; font-weight: 500; color: #272D45; }
.rb-dup-scroll { max-height: 62vh; overflow-y: auto; }
.rb-dup-sum { margin-top: 18px; background: #F8F9FB; border: 1px solid #EBEEF3; border-radius: 10px; padding: 6px 14px; }
.rb-dup-sum__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; color: #5A6178; border-bottom: 1px solid #EBEEF3; }
.rb-dup-sum__row:last-child { border-bottom: none; }
.rb-dup-sum__row.is-total { font-weight: 700; color: #1A1F36; }
.rb-dup-dialog .p-inputgroup .p-inputnumber { flex: 1; }
@media (max-width: 620px) { .rb-dup-grid { grid-template-columns: minmax(0, 1fr); } }

/* Per-line discount marker under the SKU/barcode line */
.ohm-prod-disc { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
    font-size: 11.5px; font-weight: 600; color: #0E7A50; background: #E6F6EF;
    border-radius: 999px; padding: 2px 9px; }
.ohm-prod-disc .pi { font-size: 10px; }
.ohm-prod-disc__pct { font-weight: 500; opacity: 0.75; }

/* Shipping charge presets */
.rb-ship-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rb-ship-presets .rb-chip.is-on { background: #E8F1FE; border-color: #C6DCFB; color: #0E5BC4; }

/* ── Shipment card · design 1b ─────────────────────────────────────────────
   Read it as a parcel: everything about the shipment lives in a left rail,
   everything about the goods on the right. The rail holds one height whatever
   the line count, so it stays the shipment's summary and the goods pane is
   free to grow. Dispatched/delivered cards only — the open remainder and the
   removed list keep .ohm-table and .ohm-rm-row.
 */
.ohm-parcel {
    /* The design-system tokens live on component scopes (.rb-cust, .rb-osb,
       .rb-holdbar), never on :root — so the parcel has to declare the ones it
       uses or every var() below resolves to nothing and the rail loses its
       tint, the divider its colour and the rows their borders. */
    --ink-900: #1A1F36; --ink-800: #272D45; --ink-500: #7A8194; --ink-400: #A2A8B8;
    --line-200: #EBEEF3; --bg-100: #F5F6F8; --bg-50: #F8F9FB;
    --warning-bg: #FFF3DF; --warning-ink: #8A5300;
    /* The mock is drawn at 1180px; this page's centre column is ~810px. Both the
       rail and the figure columns are held below their mock widths so the item
       name gets the slack — at the mock's 268px rail and 132/88/120 figures the
       name was down to ~70px and wrapped to seven lines. No min-width: a
       horizontal scrollbar under every shipment is worse than a wrapped title. */
    /* 264, not 248: the label column grew 16px so "Shipped From" fits on one
       line, and without this the tracking number lost the room it needed and
       wrapped instead. The rail's MIN is untouched, so narrow layouts are
       unaffected and the goods pane only gives up the 16px when it has them. */
    display: grid; grid-template-columns: minmax(200px, 264px) 1px minmax(0, 1fr);
}
.ohm-parcel__rail { padding: 18px 20px; background: var(--bg-50); }
.ohm-parcel__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.ohm-parcel__no { font: 700 15px/1.2 Inter, sans-serif; color: var(--ink-900); }
.ohm-parcel__of { font: 400 12.5px/1.2 Inter, sans-serif; color: var(--ink-500); }
/* the status is the last fact row now — the grid supplies its spacing */
.ohm-parcel__status { margin: 0; }

/* The shipment card names itself in the goods-pane header: "Fulfilled" as
   plain green text, then the shipping manager's state as a chip of its own,
   toned the way that manager tones it (dot + tint), so a returning parcel
   reads red where a delivered one reads green. Literal colours: the tone
   tokens are scoped to containers this card is not inside. */
.ohm-parcel__mgr {
    /* wraps rather than running into the SHIPPED column: both children are
       nowrap, so without this the group's min-content floor is the whole
       "FULFILLED + state chip" width and it overflows a narrow first track */
    display: inline-flex; align-items: center; gap: 4px 8px; min-width: 0;
    flex-wrap: wrap; justify-self: start; letter-spacing: 0.06em;
}
.ohm-parcel__mgr-lbl { color: #0E7A50; font-weight: 700; white-space: nowrap; }
.ohm-parcel__mgr-val {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 4px 10px; border-radius: 999px; font-weight: 600;
    background: var(--ohm-tone-bg); color: var(--ohm-tone-ink);
}
.ohm-parcel__mgr-val > i { width: 6px; height: 6px; border-radius: 50%; background: var(--ohm-tone); }
.ohm-parcel__mgr-val.is-secondary { --ohm-tone: #7A8194; --ohm-tone-bg: #EEF0F4; --ohm-tone-ink: #4B5265; }
.ohm-parcel__mgr-val.is-info      { --ohm-tone: #1570EF; --ohm-tone-bg: #E8F1FE; --ohm-tone-ink: #0E5BC4; }
.ohm-parcel__mgr-val.is-warn      { --ohm-tone: #C77700; --ohm-tone-bg: #FFF3DF; --ohm-tone-ink: #8A5300; }
.ohm-parcel__mgr-val.is-success   { --ohm-tone: #1F9D6B; --ohm-tone-bg: #E6F6EF; --ohm-tone-ink: #0E7A50; }
.ohm-parcel__mgr-val.is-danger    { --ohm-tone: #D92D20; --ohm-tone-bg: #FDECEA; --ohm-tone-ink: #B42318; }
/* 86px, not 70: "Shipped From" measures 83px at this size and was wrapping to
   two lines, which pushed its value out of line with the rows above it. Fixed
   rather than max-content so every parcel card keeps the same label column —
   the Shipped From row only appears on the ones we shipped. */
.ohm-parcel__facts { display: grid; grid-template-columns: 86px 1fr; gap: 8px 10px;
    margin: 0; font: 400 12.5px/1.35 Inter, sans-serif; color: var(--ink-800); }
/* a label that outgrows the track should show itself, not silently re-wrap */
.ohm-parcel__facts dt { color: var(--ink-500); white-space: nowrap; }
.ohm-parcel__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* ink, not link-blue: it reads as a fact like From/Carrier; hover shows it opens the courier panel */
.ohm-parcel__track { font-variant-numeric: tabular-nums; font-weight: 600; cursor: pointer; color: inherit; text-decoration: none; }
.ohm-parcel__track:hover { text-decoration: underline; }
/* the ETA slot has no field behind it yet — say so rather than print a guess */
.ohm-parcel__todo { font-size: 11px; font-style: italic; }
.ohm-parcel__rule { background: var(--line-200); }
.ohm-parcel__pane { padding: 14px 18px 16px; min-width: 0; }
.ohm-parcel__cols,
.ohm-parcel__row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px 92px 36px;
    gap: 0 10px; align-items: center; }
.ohm-parcel__cols { padding-bottom: 9px; border-bottom: 1px solid var(--line-200);
    font: 500 11px/1 Inter, sans-serif; letter-spacing: 0.07em; text-transform: uppercase;
    color: #616161; }
.ohm-parcel__row { padding: 12px 0; border-bottom: 1px solid var(--line-200); }
.ohm-parcel__row:last-child { border-bottom: 0; }
.ohm-parcel__r { text-align: right; }
.ohm-parcel__item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ohm-parcel__thumb { width: 40px; height: 40px; flex: none; border: 1px solid var(--line-200);
    border-radius: 6px; background: var(--bg-100); object-fit: cover; }
.ohm-parcel__id { min-width: 0; }
/* the mock lets a long name wrap inside min-width:0 rather than clip it */
.ohm-parcel__title { display: block; font: 500 13px/1.35 Inter, sans-serif; overflow-wrap: anywhere;
    color: #5c5f62; text-decoration: none; }
.ohm-parcel__title:hover { text-decoration: underline; }
.ohm-parcel__sub { font: 400 12px/1.4 Inter, sans-serif; color: var(--ink-500); overflow-wrap: anywhere; }
/* this parcel's share of the ordered quantity, e.g. "1 of 2" */
.ohm-parcel__qty { font: 450 13px/1 Inter, sans-serif; color: var(--ink-800, #272D45);
    font-variant-numeric: tabular-nums; }
/* short of what was ordered — count and pill sit together, in amber */
.ohm-parcel__qty.is-short { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 7px;
    color: var(--warning-ink, #8A5300); }
.ohm-parcel__short { font: 500 11px/1 Inter, sans-serif; background: var(--warning-bg);
    padding: 3px 7px; border-radius: 99px; white-space: nowrap; }
/* A discounted line stacks — struck old price above the one actually charged.
   Column flex makes the bare price text an anonymous item, so no extra markup. */
.ohm-parcel__num { display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    text-align: right; font: 450 13px/1.2 Inter, sans-serif; color: var(--ink-800);
    font-variant-numeric: tabular-nums; }
.ohm-parcel__num .ohm-strike { margin-right: 0; font-size: 11.5px; line-height: 1.2; }
.ohm-parcel__total { text-align: right; font: 600 13px/1 Inter, sans-serif; color: var(--ink-900);
    font-variant-numeric: tabular-nums; }
/* a shipped bundle's parts: same grid, indented and quieter than their bundle */
.ohm-parcel__row--part { border-top: 0; padding: 4px 0; background: #FBFBFC; position: relative; }
.ohm-parcel__row--part .ohm-parcel__item { padding-left: 42px; }
.ohm-parcel__row--part .ohm-parcel__thumb { width: 30px; height: 30px; }
/* a size below the bundle line above them, so the parts read as its contents */
.ohm-parcel__row--part .ohm-parcel__title { font-weight: 450; font-size: 12px; }
.ohm-parcel__row--part .ohm-parcel__sub { font-size: 11px; }
.ohm-parcel__row--part .ohm-parcel__qty { font-size: 12px; }
/* Tree guides: a trunk down the left of the components, an elbow to each
   thumbnail, and the trunk stops at the LAST component's elbow. :has() looks
   at the next sibling — the same trick body:has(.od-page) already relies on. */
.ohm-parcel__row--part::before {
    content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 1px;
    background: #DCE0E7;
}
/* the last component carries no trunk of its own — its elbow's curve is the
   line's ending */
.ohm-parcel__row--part:not(:has(+ .ohm-parcel__row--part))::before { content: none; }
/* the elbow is an L drawn with borders, so the turn can be ROUND: down the
   trunk, a curve, out to the item */
.ohm-parcel__row--part::after {
    content: ""; position: absolute; left: 20px; top: 0; width: 16px; height: 50%;
    border-left: 1px solid #DCE0E7; border-bottom: 1px solid #DCE0E7;
    border-bottom-left-radius: 8px;
}
/* the trunk BEGINS under the bundle's own image: the row holding a bundle
   drops a starter from just below its 40px thumbnail to its own bottom edge,
   which the components' trunks then continue. Desktop only — stacked mobile
   rows put the thumb elsewhere and 50% no longer means "under the image". */
@media (min-width: 701px) {
    .ohm-parcel__row:not(.ohm-parcel__row--part):has(+ .ohm-parcel__row--part) { position: relative; }
    .ohm-parcel__row:not(.ohm-parcel__row--part):has(+ .ohm-parcel__row--part)::before {
        content: ""; position: absolute; left: 20px; top: calc(50% + 24px); bottom: 0;
        width: 1px; background: #DCE0E7;
    }
}
.ohm-parcel__menu { justify-self: end; }
/* the shipment menu now sits in the pane header, flush right above the row menus */
.ohm-parcel__cols > .ohm-hover-actions { justify-self: end; }
/* rows carry no menu of their own; the pane header's ⋮ opens the card menu
   and .ohm-hover-actions handles revealing it on hover. */

/* Product type select: "Add \"…\"" footer action for custom types */
.w-type-add { border-top: 1px solid var(--p-content-border-color); padding: 0.25rem 0.5rem; }
.w-type-add .p-button { width: 100%; justify-content: flex-start; }
/* Add item picker — a wider dialog whose list shows ten products by default
   and narrows as you type. Rows are PrimeVue DataTable selections, so the
   keyboard and click behaviour come from the component, not from CSS. */
.rb-add-list { border: 1px solid var(--line-200, #e3e3e3); border-radius: 8px; overflow: hidden; }
.rb-add-list .p-datatable-tbody > tr { cursor: pointer; }
/* The theme paints a selected row near-black (the menu-active token), which
   swallows this row's ink text and thumbnail. The picked product has to stay
   READABLE, so it gets the light info tint and an accent edge instead. */
.rb-add-list .p-datatable-tbody > tr.p-datatable-row-selected,
.rb-add-list .p-datatable-tbody > tr[data-p-selected="true"] {
    background: #E8F1FE !important;
    color: var(--ink-900, #1A1F36) !important;
    box-shadow: inset 3px 0 0 #0E5BC4;
}
.rb-add-list .p-datatable-tbody > tr.p-datatable-row-selected .rb-add-name,
.rb-add-list .p-datatable-tbody > tr[data-p-selected="true"] .rb-add-name {
    color: var(--ink-900, #1A1F36); font-weight: 600;
}
.rb-add-list .p-datatable-tbody > tr.p-datatable-row-selected .rb-add-sub,
.rb-add-list .p-datatable-tbody > tr[data-p-selected="true"] .rb-add-sub {
    color: #0E5BC4;
}
.rb-add-list .p-datatable-tbody > tr.p-datatable-row-selected td,
.rb-add-list .p-datatable-tbody > tr[data-p-selected="true"] td { background: transparent !important; }
.rb-add-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rb-add-thumb { width: 34px; height: 34px; flex: none; border-radius: 5px;
    border: 1px solid var(--line-200, #e3e3e3); background: #fff; object-fit: cover; }
.rb-add-id { min-width: 0; }
.rb-add-name { font: 500 12.5px/1.3 Inter, sans-serif; color: var(--ink-900, #202223);
    overflow-wrap: break-word; }
.rb-add-sub { font: 400 11.5px/1.35 Inter, sans-serif; color: var(--ink-500, #6b7177);
    overflow-wrap: break-word; }
.rb-add-price, .rb-add-price .p-datatable-column-header-content { text-align: right;
    font-variant-numeric: tabular-nums; justify-content: flex-end; }

/* Replacement card (design A) — goods on the left under their receiving
   location, the exchange in money on the right. Header and cell type are the
   items table's own (12px/18px 400 #616161 over 13px #303030) so the two read
   as one family; the yellow is a light tint of the Unfulfilled pill. */
/* Two boxes side by side. The wrapper also carries .ohm-two-col, so the split is
   the SAME grid as Notes / Transactions below (1.55fr / 1fr, 14px gap): the summary
   lines up with the Transactions panel at any zoom and collapses with it. */
.rb-rp__goods, .rb-rp__side { background: #fff; border: 1px solid #e3e3e3; border-radius: 12px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 6%); overflow: hidden; min-width: 0; }
/* two tracks now: the goods, then qty x amount and the status together */
.rb-rp__cols, .rb-rp__row { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 11px; align-items: center; }
.rb-rp__meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.rb-rp__cols { padding: 7px 11px 7px 16px; background: #FDF9E3;
    font: 400 12px/18px Inter, sans-serif; color: #616161; }
.rb-rp__row { padding: 9px 11px 9px 16px; border-top: 1px solid #f0f0f0;
    font-size: 13px; color: #303030; }
/* the chip is a grid item, so it stretches unless told to hug its text */
.rb-rp__cols > .ohm-loc-chip { justify-self: start; }
/* "10 x 10.00" is the working; the line total is the figure that matters */
.rb-rp__each { color: #616161; font-variant-numeric: tabular-nums; }
.rb-rp__amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.rb-rp__name { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--ink-900, #1A1F36); }
/* the reason the wizard was given, as a quiet chip under the identity. Kept to
   one line — a long reason ellipsises rather than wrapping the row taller. */
.rb-rp__reason { display: inline-block; max-width: 100%; margin-top: 4px; padding: 3px 9px;
    border-radius: 99px; background: #f5f5f5; color: #504f4f; font-size: 12px; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* divided from the facts by a single bottom rule; left aligned so it lines up
   with the fact labels beneath it and the goods header beside it */
.rb-rp__side-head { padding: 7px 16px; background: #FDF9E3; text-align: left;
    border-bottom: 1px solid #F1F1F1; font: 400 12px/18px Inter, sans-serif; color: #616161; }
.rb-rp__facts { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 9px 10px;
    margin: 0; padding: 12px 16px 14px; font-size: 13px; color: #303030; }
.rb-rp__facts dt { color: #616161; }
.rb-rp__facts dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.rb-rp__num { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* a returned bundle's components: the same quiet sub-rows and tree guides the
   parcel card and the items table draw for bundle contents */
.rb-rp__row--part { position: relative; background: #FBFBFC; padding: 4px 11px 4px 42px; }
.rb-rp__row--part .ohm-thumb { width: 30px; height: 30px; }
.rb-rp__row--part .rb-rp__name { font-weight: 450; font-size: 12px; }
.rb-rp__row--part .ohm-prod-variant { font-size: 11px; }
.rb-rp__row--part .rb-rp__each { font-size: 12px; }
.rb-rp__row--part::before {
    content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 1px;
    background: #DCE0E7;
}
.rb-rp__row--part:not(:has(+ .rb-rp__row--part))::before { content: none; }
.rb-rp__row--part::after {
    content: ""; position: absolute; left: 20px; top: 0; width: 16px; height: 50%;
    border-left: 1px solid #DCE0E7; border-bottom: 1px solid #DCE0E7;
    border-bottom-left-radius: 8px;
}
@media (min-width: 701px) {
    .rb-rp__row:not(.rb-rp__row--part):has(+ .rb-rp__row--part) { position: relative; }
    .rb-rp__row:not(.rb-rp__row--part):has(+ .rb-rp__row--part)::before {
        content: ""; position: absolute; left: 20px; top: calc(50% + 22px); bottom: 0;
        width: 1px; background: #DCE0E7;
    }
}
.rb-rp__link { color: #303030; font-weight: 600; text-decoration: none; }
.rb-rp__link:hover { text-decoration: underline; }
/* a cheaper replacement is money back to the shop, a dearer one is owed */
.rb-rp__diff { font-weight: 600; color: var(--attention-ink, #C2410C); }
.rb-rp__diff.is-cheaper { color: var(--positive-ink, #0E7A50); }

/* Global request indicator — app.js shows this while any GraphQL call is in
   flight, so an action never looks like nothing happened. A bar, not an
   overlay: the page stays readable and clickable underneath. */
.rb-busybar {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20000;
    pointer-events: none; opacity: 0; transition: opacity 0.15s ease;
    background: linear-gradient(90deg, rgb(21 112 239 / 0%) 0%, #1570EF 45%, #0E5BC4 55%, rgb(21 112 239 / 0%) 100%);
    background-size: 40% 100%; background-repeat: no-repeat; background-position: -40% 0;
}
.rb-busybar.is-on { opacity: 1; animation: rb-busybar-sweep 1.1s linear infinite; }
@keyframes rb-busybar-sweep {
    from { background-position: -40% 0; }
    to   { background-position: 140% 0; }
}
/* someone who prefers less motion still gets a visible bar, just still */
@media (prefers-reduced-motion: reduce) {
    .rb-busybar.is-on { animation: none; background: #1570EF; }
}

/* A bundle's components are ordinary rows in the items table, indented under
   their bundle and quieter than it, so the columns still line up. */
.ohm-table tbody tr.ohm-bundle-tr > td { border-top: 0; padding-top: 4px; padding-bottom: 4px;
    background: #FBFBFC; }
.ohm-bundle-tr > td:first-child { padding-left: 48px; position: relative; }
/* the same tree guides as the parcel card's component rows */
.ohm-bundle-tr > td:first-child::before {
    content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 1px;
    background: #DCE0E7;
}
.ohm-bundle-tr:not(:has(+ .ohm-bundle-tr)) > td:first-child::before { content: none; }
.ohm-bundle-tr > td:first-child::after {
    content: ""; position: absolute; left: 26px; top: 0; width: 16px; height: 50%;
    border-left: 1px solid #DCE0E7; border-bottom: 1px solid #DCE0E7;
    border-bottom-left-radius: 8px;
}
/* the starter under the bundle's image, as on the parcel card (36px thumb) */
@media (min-width: 701px) {
    .ohm-table tbody tr:not(.ohm-bundle-tr):has(+ .ohm-bundle-tr) > td:first-child { position: relative; }
    .ohm-table tbody tr:not(.ohm-bundle-tr):has(+ .ohm-bundle-tr) > td:first-child::before {
        content: ""; position: absolute; left: 26px; top: calc(50% + 22px); bottom: 0;
        width: 1px; background: #DCE0E7;
    }
}
.ohm-bundle-tr .ohm-prod-title a, .ohm-bundle-tr .ohm-prod-title span {
    color: var(--ink-900, #1A1F36); font-weight: 450; text-decoration: none; font-size: 12.5px; }
.ohm-bundle-tr .ohm-prod-variant { font-size: 11px; }
.ohm-bundle-tr td { font-size: 12px; }
.ohm-bundle-tr .ohm-prod-title a:hover { text-decoration: underline; }
.ohm-bundle-tr .ohm-bundle-thumb { width: 30px; height: 30px; }
/* the last component closes the group against the next line */
.ohm-bundle-tr:last-of-type > td { padding-bottom: 9px; }



/* --- C11. PHONE WIDTHS -----------------------------------------------------
   Measured at 350 / 380 / 404px against the real stylesheet. Four things broke
   there, all of them things that only ever had room on a desktop column. --- */

/* 1. The rail arrow hangs 13px off the card's right edge. On a full-width card
      that is 3px off the SCREEN — the whole page then scrolls sideways. Below
      960px the rail is stacked under the centre column anyway, so the arrow has
      nothing to point across at (showTrail already draws no line when stacked)
      and the section still opens from its own chevron. */
@media (max-width: 959px) {
    .rb-peek__btn { display: none; }
}

/* 2-4. The shipment card. Its fact rail is a fixed 248px, so at 350px the goods
        pane was left 79px — the column captions could not fit, and the
        "Fulfilled : Pending" chip and the money columns spilled past the
        viewport. Stack it: facts on top, goods beneath at full width. */
@media (max-width: 700px) {
    .ohm-parcel { grid-template-columns: minmax(0, 1fr); }
    .ohm-parcel__rule { display: none; }
    .ohm-parcel__rail { border-bottom: 1px solid var(--line-200, #ececec); }

    /* the captions describe columns that no longer exist here; the chip and the
       actions menu are the only things in that row worth keeping */
    .ohm-parcel__cols { grid-template-columns: minmax(0, 1fr) auto; }
    .ohm-parcel__cols > span:nth-child(2),
    .ohm-parcel__cols > span:nth-child(3),
    .ohm-parcel__cols > span:nth-child(4) { display: none; }

    /* item across the top, its figures two-up underneath */
    .ohm-parcel__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
    .ohm-parcel__item { grid-column: 1 / -1; }
    .ohm-parcel__qty, .ohm-parcel__num, .ohm-parcel__total { text-align: left; }
    /* the column headings are gone, so each figure says what it is — except on
       a bundle's component rows, where price and total are deliberately empty */
    .ohm-parcel__qty::before { content: "Shipped "; color: #8c9196; }
    .ohm-parcel__num::before { content: "Price "; color: #8c9196; }
    .ohm-parcel__total::before { content: "Total "; color: #8c9196; }
    .ohm-parcel__num:empty::before, .ohm-parcel__total:empty::before { content: none; }
}

/* 5. The nine-column items table. table-layout:fixed keeps it inside the card,
      but at 350px the product cell is ~116px: "GlassSku" breaks across lines and
      the header chips collide with the captions beside them. Hiding columns did
      not go far enough — nine columns is simply not a phone layout. Stack each
      row instead: identity on top, then its figures one per line, each naming
      itself now that the captions are gone. */
@media (max-width: 700px) {
    .ohm-table,
    .ohm-table > thead, .ohm-table > tbody,
    .ohm-table > thead > tr, .ohm-table > tbody > tr { display: block; width: auto; }
    .ohm-table th, .ohm-table td { display: block; width: auto !important; }

    /* the header keeps only the group's identity — location and Unfulfilled */
    .ohm-table > thead > tr > th:not(:first-child) { display: none; }
    .ohm-table > thead > tr > th:first-child { padding-bottom: 4px; }

    .ohm-table > tbody > tr { padding: 12px 0; border-bottom: 1px solid var(--line-200, #f0f0f0); }
    .ohm-table > tbody > tr:last-child { border-bottom: 0; }
    .ohm-table > tbody > tr > td { padding: 0; border: 0; }
    .ohm-table > tbody > tr > td:not(:first-child) {
        position: relative; padding: 3px 0 0 92px; min-height: 0;
        font-size: 12.5px; text-align: left;
    }
    .ohm-table > tbody > tr > td:not(:first-child)::before {
        position: absolute; left: 0; top: 3px; width: 84px;
        color: #8c9196; font-size: 11.5px; white-space: nowrap;
    }
    .ohm-table > tbody > tr > td:nth-child(2)::before { content: "Available"; }
    .ohm-table > tbody > tr > td:nth-child(3)::before { content: "Ordered"; }
    .ohm-table > tbody > tr > td:nth-child(4)::before { content: "Shipped"; }
    .ohm-table > tbody > tr > td:nth-child(5)::before { content: "Price"; }
    .ohm-table > tbody > tr > td:nth-child(6)::before { content: "Total"; }
    .ohm-table > tbody > tr > td:nth-child(7)::before { content: "Vendor"; }
    .ohm-table > tbody > tr > td:nth-child(8)::before { content: "Activity"; }
    /* a bundle's components carry no money of their own — no label for a blank */
    .ohm-table > tbody > tr > td:empty { display: none; }
    /* the row's own pencil sits with the identity, not on a line of its own */
    .ohm-table > tbody > tr > td:last-child {
        position: absolute; top: 10px; right: 0; padding: 0; width: auto !important;
    }
    .ohm-table > tbody > tr { position: relative; }
    .ohm-table > tbody > tr > td:last-child::before { content: none; }
    /* room for the product text once the figures are out of its way */
    .ohm-prod { padding-right: 40px; }
    /* the 84px cap belongs to the desktop column, not to a full-width line */
    .ohm-table .ohm-vendor { max-width: none; }
}

/* Downloads - the "what should the file contain?" dialog and its progress
   readout. Shared by every page that streams a CSV. */
.w-exp-opt { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.7rem;
             border: 1px solid var(--p-content-border-color); border-radius: 8px;
             margin-bottom: 0.5rem; cursor: pointer; }
.w-exp-opt.is-on { border-color: var(--p-primary-color); background: var(--p-surface-50); }
.w-exp-opt-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.w-exp-hint { font-size: 0.78rem; }
.w-exp-prog__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; }
.w-exp-pct { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.w-exp-bar { height: 8px; border-radius: 999px; background: var(--p-surface-200); overflow: hidden; }
.w-exp-bar__fill { height: 100%; background: var(--p-primary-color); border-radius: 999px;
                   transition: width .25s ease; }
/* No trustworthy row count to divide by: the bar keeps moving rather than
   showing a percentage that would be wrong. */
.w-exp-bar.is-waiting .w-exp-bar__fill { width: 35%; transition: none;
                                         animation: w-exp-slide 1.15s ease-in-out infinite; }
@keyframes w-exp-slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
/* Reduced motion: still a visible "working" bar, just still (as .rb-card-busy). */
@media (prefers-reduced-motion: reduce) {
    .w-exp-bar.is-waiting .w-exp-bar__fill { animation: none; width: 100%; opacity: .5; }
}
.ql-toolbar.ql-snow .ql-formats{margin-inline-end: 5px !important;}

/* === Dark theme =============================================================
   Toggled from the header's user menu (Dark theme / Light theme); the choice is
   kept per browser in localStorage 'rasbree.theme' and applied by a script in
   the layout <head>, before first paint, as the class rb-dark on <html>.

   HOW: the whole page has its LIGHTNESS inverted with hues kept (invert +
   hue-rotate 180deg cancel each other's colour shift, so a green tag stays
   green and the orange ping stays orange), then eased with a little less
   contrast so white becomes a soft near-black rather than #000. This is
   deliberate, not a shortcut: the app carries ~750 hard-coded colours here and
   as many again inside the page files, and only a rule that needs to know none
   of them can promise that EVERY page — including ones written tomorrow — is
   dark with no white patches left behind.

   Then the things that must look natural are put back by inverting them a
   second time (two inversions = the original): photos and logos, colour
   swatches, the header bar (already dark by design), and printed documents —
   a label, invoice or slip is paper, and paper stays white on screen too.
   Anything nested inside a put-back region must NOT be inverted again.

   Screen only: printing is never touched. Embedded previews (?embed=1) never
   get the class at all — the parent page's iframe rule keeps them as paper.
   filter on the ROOT element does not re-anchor position:fixed (CSS Filter
   Effects spec), so dialogs, toasts and the sticky header are unaffected. */
/* Tuning (2026-09-18, from the first live screenshots). An inversion maps the
   light theme's WHITE cards to the darkest tone and its GREY page to a lighter
   one — raised surfaces came out darker than the page, backwards for a dark UI.
   No filter can fix that (it would have to be non-monotonic), so in dark mode
   the theme's own surface tokens are re-pointed, in LIGHT-theme terms, before
   the inversion: the page becomes white (-> the darkest tone, #121212) and the
   token-driven surfaces — cards, the nav bar, PrimeVue tables, menus, dialogs —
   a faint grey (-> #1e1e20, one step up). Form fields keep literal white, so
   they read as slightly inset, as they should. Literal-white custom cards (the
   order page) land on the page tone and keep their borders: never worse than
   before. The header bar is put back (not inverted), so its two tokens are
   plain dark values: it was a pale #444 band over a near-black page.
   Photos and logos are dimmed a touch first — a logo on a white square
   otherwise glares out of a dark row. brightness() must come BEFORE the
   inversion pair: after it, it would lift the blacks instead of easing whites. */
@media screen {
    html.rb-dark {
        /* brightness(1.3) — added after the first look at the orders table in dark.
           The app's text is mostly MID greys (#626161, #595c5f, slate-600), and an
           inverted mid grey is still a mid grey: cell text came out ~#9ba7b8 and
           muted text under 5:1 — legible on paper, dim and tiring on a dark page.
           Multiplying AFTER the inversion lifts text and mid-tones (cell text 8:1 ->
           12:1, muted 4.9 -> 7.4) while black stays black, so surfaces barely move.
           Everything put back below is pre-dimmed by 1/1.3 = 0.77 to cancel it. */
        filter: invert(1) hue-rotate(180deg) brightness(1.3) contrast(0.86);
        background: #ffffff;
        /* level 0 — the page: white here = the darkest tone once inverted */
        --rb-page-bg: #ffffff;
        /* level 1 — surfaces resting on the page (-> #1e1e20) */
        --rb-card-bg: #f1f1f4;
        --rb-nav-bg: #f1f1f4;
        --rb-tab-bar-bg: #f1f1f4;
        --p-surface-0: #f1f1f4;
        --p-content-background: #f1f1f4;
        /* level 2 — things floating above it: dialogs, menus, drawers (-> #262629).
           Inputs, chips and the active tab keep literal white on purpose: inset. */
        --rb-dialog-bg: #e8e8ed;
        --rb-menu-bg: #e8e8ed;
        --rb-drawer-bg: #e8e8ed;
        /* The backdrop behind a dialog is a translucent BLACK veil in the light
           theme; inverted it became a pale WHITE one that washed the page out.
           A white veil here inverts back into the dark one it is meant to be. */
        --p-mask-background: rgba(255, 255, 255, 0.62);
        --rb-header-bg: #0a0a0c;
        --rb-header-search-bg: #26262a;
    }
    /* 0.69 = the 0.9 dimming x the 0.77 that cancels the root's brightness(1.3) */
    html.rb-dark :is(img, video) {
        filter: brightness(0.69) invert(1) hue-rotate(180deg);
    }
    html.rb-dark :is(iframe, embed, object),
    html.rb-dark :is(.swatch, .pd-swatch, .p-colorpicker-preview, .p-colorpicker-panel),
    /* Dark BY DESIGN, so put back rather than flipped to light: anything carrying
       PrimeVue's .p-dark (the header bar, the "unsaved changes" save bar on the
       product / order / vendor / purchasing pages) and the global search panel. */
    html.rb-dark :is(.p-dark, .gs__stage),
    html.rb-dark :is(.lbl-sheet, .inv-sheet, .pk-doc) {
        filter: brightness(0.77) invert(1) hue-rotate(180deg);
    }
    html.rb-dark :is(.p-dark, .gs__stage, .lbl-sheet, .inv-sheet, .pk-doc, .p-colorpicker-panel)
        :is(img, video, iframe, embed, object, .swatch, .pd-swatch, .p-colorpicker-preview) {
        filter: none;
    }
    /* Transparent images (found on the shipping list, 2026-09-18). Courier logos are
       transparent PNGs drawn for a LIGHT page: PostEx is pure black ink on nothing,
       TCS / Daewoo / Rider / Trax are transparent too. Images are put back to their
       natural colours, so that black ink sat straight on a near-black row and vanished.
       Every image therefore gets the light backing it was designed for. An opaque
       photo covers it completely, so nothing else changes; a transparent one shows
       it. (The plate is part of the image's box, so it is dimmed with the image and
       comes out a soft light grey, not a glaring white.) Logos also get 2px of
       breathing room — box-shadow, because padding would change their layout size —
       matched by name: every logo class in the app contains "logo", plus the
       bundled courier files by path, so logos added later are covered too. */
    html.rb-dark img { background-color: #ffffff; }
    html.rb-dark img:is([class*="logo"], [src*="/img/couriers/"]) {
        box-shadow: 0 0 0 2px #ffffff; border-radius: 3px;
    }
    /* Global search veil: a translucent navy (2,6,23) in the light theme, which the
       inversion turned into a pale lavender wash with unreadable text over it. It is
       recoloured instead of put back, because a filter here would cut its
       backdrop-filter blur off from the page behind. This value is that navy run
       backwards through invert + hue-rotate, so it comes out navy again. */
    html.rb-dark .gs__veil { background: rgba(244, 248, 255, 0.86); }
    /* Behind a modal or drawer: on a dark page a dark veil alone barely separates the
       dialog from a page that is already dark, so the page is blurred as well. (Safe
       here, unlike on the search veil's parent: the mask carries no filter itself.) */
    html.rb-dark :is(.p-dialog-mask, .p-drawer-mask).p-overlay-mask {
        -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    }
    /* Report tables (2026-09-18, from the Sales Summary page in dark). Every report
       page is a .ppr root around the same wide DataTable. Its cells are regular-weight
       12px text in the table's mid greys, which the inversion lands on #c6cbd4: fine as
       a number (9.9:1), but thin light strokes on a dark row read far dimmer than that,
       and beside the bold amounts (ink -> #ededed, the brightest this filter can give)
       the rest of the row looked washed out. The clock half of each date sat at
       #828487, 4.3:1. So the table's three text tokens are re-pointed here, in LIGHT-
       theme terms like everything else in this block: cell text -> #ededed, muted lines
       and the Order# link -> #d0d6df, the clock -> #bcc1ca. Scoped to .ppr, so no other
       table moves; the header row keeps its quieter grey on purpose. */
    html.rb-dark .ppr {
        --rb-table-color: #2b2f36;
        --rb-table-muted: #4b5058;
        --rb-time-color: #5f636b;
    }
}