/* ===================================================================
   OPERATE — ELUMO SKIN  ·  SECTION MAP (Ctrl-F a "§N." to jump)
   -------------------------------------------------------------------
   §0  Overview & token contract ......... the header notes below
   §1  Font import
   §2  Tokens (:root) .................... TIER 1-3 + icon-mask vars
   §3  Global components ................. typography · links · buttons ·
                                           forms · tables · modals · badges ·
                                           pagination · loading bar · icons
   §4  Global colour sweeps .............. brand-primary remap · cyan audit ·
                                           status → green
   §5  Chrome ............................ top nav · page header
   §6  Per-screen ........................ login · dashboard · list · view/edit ·
                                           POS · calendar · settings · integrations
   §7  Editorial signatures .............. serif · eyebrows · card edge · pill lift ·
                                           gradient · link/placeholder
   §8  NON-RESKIN (layout/functional) .... every non-visual rule, collected here

   ORDERING NOTE: §7 (editorial) MUST stay after §3/§6 — its border-left card
   edge, global serif and eyebrow rules deliberately override earlier same-
   selector rules by source order. Buttons, the cyan block and login each move
   as intact units for the same reason.
   =================================================================== */

/* ============================================================
   Operate — elumo skin  (shallow CSS re-skin)
   ------------------------------------------------------------
   Loaded LAST in OperateMasterPage.Master (after operateui.min.css)
   so it wins the cascade. VISUAL-ONLY overrides — colour, background,
   border, radius, shadow, font. No layout, no markup, no JS.
   TOGGLE OFF = remove the single <link> in the master page (full revert).

   ------------------------------------------------------------
   3-TIER, ROLE-BASED TOKENS (group by JOB, not by appearance):
     TIER 1  --p-*      Palette   — raw colours; swap for a new brand sheet
     TIER 2  --elumo-*  Roles     — what a colour MEANS (action-primary,
                                    status-success, surface, border, text…)
     TIER 3  --btn-* / --table-* / --input-*  Components — specific parts.
   Distinct ROLES get distinct tokens even when the value coincides today
   (e.g. New=--btn-success vs Update=--btn-secondary are both grey now but
   re-pointable independently). New colour sheet days before demo?
     · whole new palette → repoint TIER 1
     · "success is teal now" → repoint TIER 2 role
     · "New should pop"   → repoint TIER 3 component (one line)

   RESKIN TRACKING — every override block carries a greppable tag so Phase 2
   (bake into LESS) is fire-able. Convention:
     /* RESKIN area:<where> comp:<token> was:<legacy value/var> less:<source> *​/
   The component token name is itself the primary key (grep --btn-create-bg →
   every place that role applies). Audit: moga/reskin/audit-skin.* harvests
   the tags + remaining literals into a migration manifest.
   ============================================================ */

/* ===================================================================
   §1. FONT IMPORT
   =================================================================== */

/* essensys brand font (Concept F / v9): Geist for EVERYTHING — display, headings, body, labels.
   No serif (Instrument Serif retired). Open Sans kept only as a body-font fallback per the type spec.
   NB @import works at runtime but PRODUCTION needs self-hosted @font-face (offline / CSP). FLAGGED. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap');

/* ===================================================================
   §2. TOKENS (:root)
   TIER 1 palette → TIER 2 roles → TIER 3 components, then icon-mask vars
   =================================================================== */
:root {
  /* ===== TIER 1 — PALETTE (essensys Concept F / v9; Operate brand = CYAN #3FBDD6) =====
     Legacy --p-blue-* / --p-grey-* names are KEPT (every TIER-2 alias resolves through them);
     only the VALUES move to the v9 system. Cyan is a LIGHT accent → split into decorative (600/700,
     bright, for tints/underlines/soft chips) + interactive (800/900, darkened, readable for links/
     button fills/solid badges with white text). See DESIGN-PLAN-editorial-v9.md. */
  --p-blue-600:  #3FBDD6;   --p-blue-700:  #2E9DB4;   /* brand cyan (decorative accent) + one step down */
  --p-blue-800:  #15809A;   --p-blue-900:  #0F6B82;   /* interactive cyan (links / CTA fill / solid badge) + press — WCAG-readable */
  --p-accent-tint:        rgba(63,189,214,0.10);  /* soft cyan wash — soft chips, focus ring, selected row */
  --p-accent-tint-strong: rgba(63,189,214,0.16);  /* stronger wash — gradient bleed, active states */
  /* elumo green doubles as the universal positive / live / success signal */
  --p-green-500: #15924C;   --p-green-700: #0F6B38;   --p-green-50: #E4F1E9;
  --p-red-600:   #b4392b;   --p-red-700:   #8A2E22;
  /* STATUS palette — green editorialised to elumo green; red/amber/blue kept FUNCTIONAL
     (the brand system defines no error/warn/info colours — FLAGGED). */
  --p-status-green-bg: #E4F1E9; --p-status-green-fg: #0F6B38; --p-status-green-bd: #15924C;
  --p-status-red-bg:   #fbe9e7; --p-status-red-fg:   #8a2e22; --p-status-red-bd:   #d8a39b;
  --p-status-amber-bg: #fef3c7; --p-status-amber-fg: #92400e; --p-status-amber-bd: #fbbf24;
  --p-status-blue-bg:  #dbeafe; --p-status-blue-fg:  #1e40af; --p-status-blue-bd:  #60a5fa;
  --p-grey-900:  #211C16;   /* ink — v9 warm near-black, never #000 */  --p-grey-500: #555555;  /* muted text */
  --p-grey-400:  #888888;   /* faint / placeholder ink */
  --p-grey-200:  #E6E4E0;   /* hairline border (neutral, on white) */  --p-grey-100: #F2F2F1;  /* neutral chrome / hover */
  --p-grey-075:  #F2F2F1;   /* table header band (quiet neutral) */  --p-grey-050: #F7F7F6;  /* near-white page canvas (cream RETIRED; not pure white so white cards read as tiles) */
  --p-cream-card:#FFFFFF;   /* card fill — white (cream retired; name kept for the alias) */
  --p-white:     #FFFFFF;   /* pure white — raised surfaces */  --p-navfg: #555555;  /* nav label muted ink */
  /* legacy refs (for the future legacy theme): navy #202e53, cyan #6fc6d8, terracotta #A53A2C, elumo-blue #006bea */

  /* ===== TIER 2 — ROLES (what a colour MEANS; point at palette).
           Historical --elumo-* names kept so existing rules keep working. ===== */
  --elumo-primary:        var(--p-blue-600);   /* DECORATIVE accent — Operate cyan (tints/underline/soft chips/selected) */
  --elumo-primary-hover:  var(--p-blue-700);
  --elumo-primary-50:     var(--p-accent-tint);  /* soft cyan wash — focus ring / selected-row / soft chips */
  --elumo-link:           var(--p-blue-800);   /* INTERACTIVE cyan — readable link/CTA text on white (brand cyan is too light) */
  --elumo-link-hover:     var(--p-blue-900);
  --elumo-accent:         var(--p-grey-100);   /* neutral hover surface */
  --elumo-danger:         var(--p-status-red-fg);
  --elumo-danger-hover:   var(--p-status-red-fg);

  /* Action roles — the TWO button looks every --btn-* aliases. Change a button colour HERE
     (one place), not by re-pointing each --btn-* token. Neutral bg is its OWN value (NOT the
     card --elumo-surface role) so buttons and cards stay independently themeable.
     Primary uses the INTERACTIVE cyan (not the bright decorative accent) so white text is readable. */
  --elumo-action-primary-bg:  var(--elumo-link);  --elumo-action-primary-fg:    var(--p-white);
  --elumo-action-primary-bd:  var(--elumo-link);  --elumo-action-primary-hover: var(--elumo-link-hover);
  --elumo-action-neutral-bg:  var(--p-white);        --elumo-action-neutral-fg:    var(--elumo-text);   /* WHITE neutral controls (was cream #FBFAF5 — blended into the cream canvas); hover stays warm grey */
  --elumo-action-neutral-bd:  var(--elumo-border);   --elumo-action-neutral-hover: var(--elumo-accent);
  --elumo-text:           var(--p-grey-900);
  --elumo-text-muted:     var(--p-grey-500);
  --elumo-text-faint:     var(--p-grey-400);
  --elumo-bg:             var(--p-grey-050);   /* near-white page canvas */
  --elumo-surface:        var(--p-cream-card); /* card fill — white */
  --elumo-surface-raised: var(--p-white);      /* pure-white raised surface */
  --elumo-border:         var(--p-grey-200);
  --elumo-success:        var(--p-green-500);  /* STATUS only (never a button) */
  --elumo-success-bg:     var(--p-green-50);
  --elumo-success-fg:     var(--p-green-700);
  --elumo-info-soft-bg:   var(--p-accent-tint); --elumo-info-soft-fg: var(--elumo-link);  /* soft accent chip — role for --value-pill; text uses readable cyan on the tint */
  --elumo-thead-bg:       var(--p-white);   /* white header band — border-bottom keeps the head/body seam */
  --elumo-nav-bg:         var(--p-white);      /* drives #navbar inline bg */
  --elumo-nav-fg:         var(--p-navfg);
  --elumo-nav-active:     var(--p-blue-600);
  --elumo-nav-border:     var(--p-grey-200);
  /* non-colour roles */
  --elumo-radius:    8px;   --elumo-radius-sm: 4px;   --elumo-radius-pill: 100px;   /* editorial radii: 8px cards, 4px inputs, pill buttons */
  --elumo-shadow:    0 1px 0 rgba(0,0,0,.03), 0 4px 10px rgba(0,0,0,.04);   /* editorial multi-layer ambient (shadow-sm) */
  --elumo-shadow-btn: 0 1px 0 rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.08);  /* filled-button elevation — flat fill, quiet static shadow (no inset gloss, no hover motion) */
  --elumo-font:         'Geist', 'Open Sans', -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --elumo-font-display: 'Geist', system-ui, -apple-system, "Segoe UI", sans-serif;   /* no serif — Geist for display too (weight 400 + tight tracking) */

  /* ===== TIER 3 — COMPONENTS (the sweepable knobs).
     CONTRACT: a rule body references ONLY --component-* tokens — NEVER --elumo-* (TIER 2)
     or --p-* (TIER 1) directly. TIER-3 tokens alias TIER-2 roles (1:1 where they don't diverge
     yet — that's the seam for free). Layout (margin/padding/width) stays literal/operate-specific,
     NOT tokenised. GUARD: audit-skin.sh flags any --elumo-* or --p-* used outside :root.
     EXCEPTION: --elumo-nav-* are consumed by inline markup/JS, so they stay role-named.
     CATALOGUE (what each group sweeps):
       buttons   --btn-*                      every button, by action role
       cards     --card-*                     white tiles (sections, dashboard, settings, integrations, modal)
       page      --canvas-bg / --filter-panel-bg   grey page behind cards / filter toolbars
       text      --text-body/-muted/-on-accent · font --font-base
       links     --link-color/-hover          all hyperlinks + blue accent text
       borders   --border-color/--input-border/--table-border · radii --btn/--input/--card/--modal-radius
       inputs    --input-focus-bd/-ring
       tables    --table-header-bg · --table-border · --row-hover-bg
       accent    --accent/-hover/-soft         brand-blue fills, active/selected states, decorative
       badges    --badge-solid-bg/-soft-bg/-soft-fg · chips --icon-chip-bg/-fg · pills --value-pill-bg/-fg
       status    --status-success-solid/-bg/-fg
       loading   --loading-bar ===== */
  /* Buttons — each aliases ONE action role (primary = terracotta CTA, neutral = grey). The
     class-name mapping is kept as the hook label. To make a button DIVERGE (e.g. destructive →
     red), re-point just its 4 tokens to a new/danger role — that's the deliberate split seam. */
  --btn-primary-bg: var(--elumo-action-primary-bg); --btn-primary-fg: var(--elumo-action-primary-fg); --btn-primary-bd: var(--elumo-action-primary-bd); --btn-primary-hover: var(--elumo-action-primary-hover);  /* Save / Login / main CTA */
  --btn-create-bg:  var(--elumo-action-primary-bg); --btn-create-fg:  var(--elumo-action-primary-fg); --btn-create-bd:  var(--elumo-action-primary-bd); --btn-create-hover:  var(--elumo-action-primary-hover); /* New (list toolbar) — create */
  --btn-success-bg: var(--elumo-action-neutral-bg); --btn-success-fg: var(--elumo-action-neutral-fg); --btn-success-bd: var(--elumo-action-neutral-bd); --btn-success-hover: var(--elumo-action-neutral-hover);  /* affirmative / modal confirm (btn-success) */
  --btn-secondary-bg: var(--elumo-action-neutral-bg); --btn-secondary-fg: var(--elumo-action-neutral-fg); --btn-secondary-bd: var(--elumo-action-neutral-bd); --btn-secondary-hover: var(--elumo-action-neutral-hover); /* Update / neutral (btn-default) */
  --btn-toolbar-bg: var(--elumo-action-neutral-bg); --btn-toolbar-fg: var(--elumo-action-neutral-fg); --btn-toolbar-bd: var(--elumo-action-neutral-bd); --btn-toolbar-hover: var(--elumo-action-neutral-hover);  /* Export / Merge (.actions .btn-primary) */
  --btn-destructive-bg: var(--elumo-action-neutral-bg); --btn-destructive-fg: var(--elumo-action-neutral-fg); --btn-destructive-bd: var(--elumo-action-neutral-bd); --btn-destructive-hover: var(--elumo-action-neutral-hover); /* Delete — neutral for now; re-point to a danger role to go red */
  --btn-radius: var(--elumo-radius);   /* 8px rounded rectangle (brand design-system button shape) */
  --btn-shadow: var(--elumo-shadow-btn);    /* filled-button lift */
  /* Surfaces */
  --canvas-bg:       var(--elumo-bg);          /* grey page behind cards */
  --filter-panel-bg: var(--elumo-bg);          /* filter toolbars (calendar etc.) — 1:1 with canvas today */
  --card-bg:     var(--elumo-surface-raised); --card-border: var(--elumo-border); --card-radius: var(--elumo-radius); --card-shadow: var(--elumo-shadow);  /* WHITE cards so they pop from the cream canvas (was warm --elumo-surface #FBFAF5) */
  --modal-radius: var(--elumo-radius); --modal-shadow: var(--elumo-shadow);   /* 1:1 with card today — diverge here if modals differ */
  /* Text / font */
  --text-body: var(--elumo-text); --text-muted: var(--elumo-text-muted); --text-faint: var(--elumo-text-faint); --text-on-accent: var(--p-white);
  --font-base: var(--elumo-font); --font-display: var(--elumo-font-display);
  /* Links (own tokens so links re-theme independently of decorative accent) */
  --link-color: var(--elumo-link); --link-hover: var(--elumo-link-hover);
  /* Borders + control radii */
  --border-color: var(--elumo-border); --input-border: var(--elumo-border); --table-border: var(--elumo-border);
  --input-radius: var(--elumo-radius-sm);
  /* Accent — solid fills + active/selected states carry white text, so they use the readable
     interactive cyan; --accent-soft stays the bright-cyan tint. (Bright brand cyan #3FBDD6 also shows
     in the nav underline --elumo-nav-active and the input focus border below.) */
  --accent: var(--elumo-link); --accent-hover: var(--elumo-link-hover); --accent-soft: var(--elumo-primary-50);
  --accent-tint-strong: var(--p-accent-tint-strong);   /* 12% wash — gradient bleed / active */
  /* Inputs / tables */
  --input-focus-bd:  var(--elumo-primary);  --input-focus-ring: var(--elumo-primary-50);
  --table-header-bg: var(--elumo-thead-bg); --table-header-fg: var(--elumo-text);
  --row-hover-bg:    var(--elumo-primary-50);
  /* Badges / icon chips / value pills */
  --badge-solid-bg: var(--elumo-link); --badge-soft-bg: var(--elumo-primary-50); --badge-soft-fg: var(--elumo-link);
  --icon-chip-bg:   var(--elumo-primary-50); --icon-chip-fg:  var(--elumo-link);
  /* value pills (currency / important numbers) — status-blue chip, re-theme the whole set here (incl. going semantic green/red). */
  --value-pill-bg: var(--elumo-info-soft-bg);  --value-pill-fg: var(--elumo-info-soft-fg);  /* status-blue #dbeafe/#1e40af */
  /* Status */
  --status-success-solid: var(--elumo-success); --status-success-bg: var(--elumo-success-bg); --status-success-fg: var(--elumo-success-fg);
  --status-danger-bg: var(--p-status-red-bg); --status-danger-fg: var(--p-status-red-fg); --status-danger-bd: var(--p-status-red-bd);
  --status-warning-bg: var(--p-status-amber-bg); --status-warning-fg: var(--p-status-amber-fg); --status-warning-bd: var(--p-status-amber-bd);
  --status-info-bg: var(--p-status-blue-bg); --status-info-fg: var(--p-status-blue-fg); --status-info-bd: var(--p-status-blue-bd);
  /* Loading bar */
  --loading-bar: var(--elumo-link);   /* main accent — matches links/CTAs/Stripe band, not the decorative cyan */
  --settings-strip-mt: 0px;   /* Meeting Rooms actions strip — consumed inline by MeetingRooms.js template (legacy fallback 45px) */
}

:root {
  --m-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E");
  --m-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  --m-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
  --m-laptop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16'/%3E%3C/svg%3E");
  --m-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  --m-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E");
  --m-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
  --m-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --m-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3Cline x1='10' x2='10' y1='11' y2='17'/%3E%3Cline x1='14' x2='14' y1='11' y2='17'/%3E%3C/svg%3E");
  --m-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --m-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --m-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
  --m-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --m-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
  --m-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --m-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --m-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --m-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  --m-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --m-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --m-printer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E");
  --m-calendars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M15.726 21.01A2 2 0 0 1 14 22H4a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2'/%3E%3Cpath d='M18 2v2'/%3E%3Cpath d='M2 13h2'/%3E%3Cpath d='M8 8h14'/%3E%3Crect x='8' y='3' width='14' height='14' rx='2'/%3E%3C/svg%3E");
  --m-calendar-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 18 4 4 4-4'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M18 14v8'/%3E%3Cpath d='M21 11.354V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7.343'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 2v4'/%3E%3C/svg%3E");
  --m-calendar-sync: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 10v4h4'/%3E%3Cpath d='m11 14 1.535-1.605a5 5 0 0 1 8 1.5'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='m21 18-1.535 1.605a5 5 0 0 1-8-1.5'/%3E%3Cpath d='M21 22v-4h-4'/%3E%3Cpath d='M21 8.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4.3'/%3E%3Cpath d='M3 10h4'/%3E%3Cpath d='M8 2v4'/%3E%3C/svg%3E");
}

/* ===================================================================
   §3. GLOBAL COMPONENTS
   app-wide primitives (visual reskin)
   =================================================================== */
/* --- Typography & base --- */
body, .modern-ui, .form-control, .btn, .table, .modal-content {
  font-family: var(--font-base);
}
body { color: var(--text-body); background-color: var(--canvas-bg); }
/* Some toolbars use ONE element as both .btn AND .fa (e.g. report designer Undo/Redo/Settings:
   `<i class="btn fa fa-undo">`). The `.btn { font-family: var(--font-base) }` rule above (skin loads last)
   overrides FontAwesome's font on those, so the icon glyph (::before) renders as tofu □. Restore the icon
   font on the pseudo only — the button's text label stays in the body font. */
.btn.fa::before { font-family: 'FontAwesome' !important; }
/* Those same <i class="btn fa"> buttons (report designer + report view/run toolbars) misalign their
   CONTENT: the FA glyph (::before) and the label <span> are two fonts sharing one text baseline, and
   each font puts its baseline at a different height in the line box — so the label sits a px or two
   off the glyph's centre, varying per button. Flex the button itself: glyph and label become flex
   items, each vertically CENTRED instead of baseline-aligned, immune to font metrics. gap replaces
   the glyph/label whitespace (does nothing on icon-only Undo/Redo). */
.btn.fa {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
}
/* …and the toolbar ROWS holding them (designer edit.htm / view.htm, both ng-included inside
   .reportwriter): a floated Bootstrap col lays the buttons out as inline text on a baseline, so
   icon-only and labelled buttons (different internal heights) never share a centreline. Flex the
   row so every button box centres on one axis. Scoped to .reportwriter — other list-view title
   bars use .edit-topnavbar and keep their float layout. */
.reportwriter .title-sections-angular .text-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap;
}

/* --- Links --- NB Operate's theme sets `a[href] { color: #6fc6d8 !important }`,
   so the skin MUST use !important on brand colours to win. (Pattern for the rest.) */
a[href] { color: var(--link-color) !important; }
a[href]:hover, a[href]:focus { color: var(--link-hover) !important; }
/* RESKIN area:"uc-lookup value links (Location/Account etc.) → elumo blue" comp:--elumo-primary was:#6fc6d8 less:operateui — `.gwrapper uc-lookup a:not([href=""]) {#6fc6d8 !important}` (0,2,2)
   That rule (TWO element tags) out-specifies a plain `.edit-wrapper a[href]` (0,2,1). Match it and
   add an attr (0,3,2) so blue wins regardless of order. Fixes draft invoice/credit-note + any uc-lookup link. */
.gwrapper uc-lookup a[href]:not([href=""]) { color: var(--link-color) !important; }
.gwrapper uc-lookup a[href]:not([href=""]):hover,
.gwrapper uc-lookup a[href]:not([href=""]):focus { color: var(--link-hover) !important; }
/* plain detail-page links (non-lookup) — beat the bare global a[href]{#6fc6d8}.
   :not(.btn) so button-links (e.g. Preview Credit Note = a.btn.btn-success) keep their button text colour. */
.edit-wrapper a[href]:not(.btn) { color: var(--link-color) !important; }
.edit-wrapper a[href]:not(.btn):hover, .edit-wrapper a[href]:not(.btn):focus { color: var(--link-hover) !important; }
/* RESKIN area:"class-based pseudo-links (.link / .link-more / a.link) → elumo link colour" comp:--link-color was:#6fc6d8 less:modern-ui.css 25598/25790/25909
   Operate uses <span class="link" ng-click> (NOT <a href>) for clickable text — bill-run location list,
   list-view "more", etc. — coloured cyan by `.gwrapper .link` (0,2,0), the list-table `a.link`, and
   `.link-more`. The a[href] overrides above never match a hrefless span, so these stayed cyan. Match the
   exact operate selectors (skin loads later → wins the tie) and bring them onto the link colour. */
.gwrapper .link,
.listview-wrapper .link-more,
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.link {
  color: var(--link-color) !important;
}
.gwrapper .link:hover, .gwrapper .link:focus,
.listview-wrapper .link-more:hover,
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.link:hover {
  color: var(--link-hover) !important;
}
/* RESKIN area:"hrefless actionable anchors → elumo link colour (blanket, button-excluded)" comp:--link-color was:#202e53 (bare `a{}` navy, modern-ui.css ~288) less:65 module templates use <a ng-click> with no href
   The a[href] overrides can't match hrefless anchors, so `<a ng-click>` text links (.edit / .cpointer /
   .faction / .copyKey / bare) rendered navy. Blanket-tint them — EXCEPT the many hrefless <a> that are really
   BUTTONS (.btn*, .btn--link, .btn-launch tiles, dynamic {{buttonclass}}→.btn) or toggles: excluding those
   keeps button/tab text on its own colour. ALSO excluded: `.gpaginator a` (list-view paginator —
   link-teal there = the ACTIVE page fill, so the selected number vanished) and `thead a` (sortable
   column headers — link-teal made them differ from non-sortable headers; the thead rules in §3/§5
   own header colours) and `.dropdown-menu a` (dropdown MENU ITEMS — hrefless ng-click items in
   Update-fields / record-type / related-view menus read as menu rows, #333 via modern-ui ~3042,
   not links; only the .dropdown-toggle trigger was excluded before) and `.searchtree a` (the
   folder/nav trees own their states: inactive grey #888 from operate, hover/active teal from the
   skin's searchtree rules in §A — blanket teal on every item erased the selected-vs-unselected
   distinction) and `.location-grid a` (report type-chooser image cards — the anchor wraps a whole
   descriptive caption, which read as a teal link paragraph). Skin only loads for migrated/embedded
   orgs (chrome stripped), so an unscoped rule is safe here. */
a:not([href]):not(.btn):not(.btn--link):not(.btn-launch):not(.thumbnail):not(.dropdown-toggle):not([data-toggle]):not(.close):not(.grouped-link):not(.gpaginator a):not(thead a):not(.dropdown-menu a):not(.searchtree a):not(.location-grid a)[ng-click],
a:not([href]):not(.btn):not(.btn--link):not(.btn-launch):not(.thumbnail):not(.dropdown-toggle):not([data-toggle]):not(.close):not(.grouped-link):not(.gpaginator a):not(thead a):not(.dropdown-menu a):not(.searchtree a):not(.location-grid a)[data-ng-click] {
  color: var(--link-color) !important;
}
a:not([href]):not(.btn):not(.btn--link):not(.btn-launch):not(.thumbnail):not(.dropdown-toggle):not([data-toggle]):not(.close):not(.grouped-link):not(.gpaginator a):not(thead a):not(.dropdown-menu a):not(.searchtree a):not(.location-grid a)[ng-click]:hover,
a:not([href]):not(.btn):not(.btn--link):not(.btn-launch):not(.thumbnail):not(.dropdown-toggle):not([data-toggle]):not(.close):not(.grouped-link):not(.gpaginator a):not(thead a):not(.dropdown-menu a):not(.searchtree a):not(.location-grid a)[data-ng-click]:hover {
  color: var(--link-hover) !important;
}

/* ============================================================
   BUTTONS — separated by ACTION ROLE, not appearance.
   NB Operate's `.btn.btn-success`/`.btn.btn-default` (specificity 0,2,0) set
   `color:#fff !important` + `border:none !important`, so overrides MUST use the
   compound `.btn.btn-X` selector and set `border` (not just border-color) —
   else outline buttons render white-on-white, no border.
   ============================================================ */
/* RESKIN area:"button label — standardise alignment" less:various (a.btn in list rows / toolbars / templates)
   Operate mixes <button> and <a class="btn"> across templates; some carry left-aligned
   text from container or template rules, so labels sit off-centre when a button is
   wider than its text. Base rule: the label is always centred, never wraps. */
.btn {
  border-radius: var(--btn-radius);
  text-align: center !important;
  white-space: nowrap;
}
/* list-toolbar Update dropdown: operate pins it square (`.listview-wrapper .ufields .btn
   { border-radius:4px !important }`, 0,3,0) so it ignored the .btn pill above. It's a lone
   dropdown trigger, not a split-button segment — pill it like its toolbar neighbours. */
.listview-wrapper .ufields .btn { border-radius: var(--btn-radius) !important; }

/* RESKIN area:"generic .btn-primary → GREY (Operate over-uses it: tabs/panels/Cancel/secondary)" comp:--btn-secondary was:#202e53(@brand-primary→elumo blue) less:bootstrap/variables.less,buttons.less
   Blue is RESERVED for explicit CTA hooks ONLY: .btn-save / .btn-validate (Save),
   .btn-success.dropdown-toggle (Actions), #btnLogin (login). Everything else carrying
   .btn-primary goes grey — quick-jump tabs (.context-bar), quick-action panel (.btn--link),
   Cancel, See Events, Upload Image, etc. */
.btn.btn-primary {
  background: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
  box-shadow: none !important;
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary.active {
  background: var(--btn-secondary-hover) !important;
  border-color: var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
}

/* RESKIN area:"New / affirmative action" comp:--btn-success was:#6fc6d8(@brand-success) less:buttons.less
   Own token (≠ Update) so New can later diverge to a coloured CTA in one line. */
.btn.btn-success {
  background: var(--btn-success-bg) !important;
  border: 1px solid var(--btn-success-bd) !important;
  color: var(--btn-success-fg) !important;
  box-shadow: none !important;
}
.btn.btn-success:hover, .btn.btn-success:focus, .btn.btn-success:active, .btn.btn-success.active {
  background: var(--btn-success-hover) !important;
  border-color: var(--btn-success-bd) !important;
  color: var(--btn-success-fg) !important;
}

/* RESKIN area:"anchor buttons stuck white-on-grey — moduleevents 'See Events'" comp:--btn-secondary
   operate re-declares .btn.btn-primary with color:#fff !important (operateui ~19205); on this <a> trigger it
   wins the (0,2,0) !important colour tie. Out-specify it → dark text (bg/border already grey). */
.btn.btn-primary.main-btn-modal,                              /* moduleevents "See Events" trigger (all modules) */
.btn.btn-primary.main-btn-modal span,
.btn.btn-primary.main-btn-modal i {
  color: var(--btn-secondary-fg) !important;
}
/* RESKIN area:"list-view cell anchor buttons stuck white-on-grey — e.g. Recycle Bin Restore" comp:--btn-secondary
   operateui ~25786: `.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.btn { color:#fff !important }`
   (~0,5,4) whites-out EVERY anchor button in a list-view cell — harmless on cyan, invisible once greyed. Match the chain
   and win the dark text for the neutral variants. btn-danger is included too: destructive is currently a NEUTRAL role
   (--btn-destructive → neutral), so e.g. Integrations "Uninstall" (a.btn.btn-danger) needs dark text like the rest;
   without this it renders white-on-light (invisible). Re-point --btn-destructive to a red role and this line should move. */
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-success,
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-default,
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-danger,
/* the remaining variant siblings — no shipped template emits them in a list cell today, but a
   custom module could, and each would be invisible white-on-grey exactly like Uninstall was */
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-primary,
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-warning,
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-info {
  color: var(--btn-secondary-fg) !important;
}
/* RESKIN area:"Recycle Bin 'Restore' → CTA blue" comp:--btn-primary was:grey(.btn.btn-success base)
   The restore action is the primary CTA on the row. Full list-cell chain + ng-translation attr (~0,7,4) beats
   both the grey base rule and operate's white-text list-cell rule (~0,5,4) → solid blue, white text. */
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-success[ng-translation="modal_restore_bin_title"] {
  background: var(--btn-primary-bg) !important;
  background-color: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bd) !important;
  color: var(--text-on-accent) !important;
}
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-success[ng-translation="modal_restore_bin_title"]:hover,
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-success[ng-translation="modal_restore_bin_title"]:focus,
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-success[ng-translation="modal_restore_bin_title"]:active {
  background: var(--btn-primary-hover) !important;
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--text-on-accent) !important;
}
/* RESKIN area:"Integrations 'Open' → row CTA" comp:--btn-primary was:grey(list-cell dark-text rule) less:Integrations/integration-list/integrationlistview.htm
   Same pattern as Restore above: Open is the primary action on an installed integration's row
   (Install/Uninstall stay grey/red). Scoped to .integrations-screen; the extra class + attr
   (~0,7,4) beats the grey list-cell rules. */
.integrations-screen .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-success[ng-translation="btn_open"] {
  background: var(--btn-primary-bg) !important;
  background-color: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bd) !important;
  color: var(--text-on-accent) !important;
}
.integrations-screen .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-success[ng-translation="btn_open"]:hover,
.integrations-screen .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-success[ng-translation="btn_open"]:focus,
.integrations-screen .displayitems .table-responsive.table--list-view tbody tr td a.btn.btn-success[ng-translation="btn_open"]:active {
  background: var(--btn-primary-hover) !important;
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--text-on-accent) !important;
}

/* RESKIN area:"Update / neutral action" comp:--btn-secondary was:#202e53(.btn.btn-default) less:buttons.less */
.btn.btn-default {
  background: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
  box-shadow: none !important;
}
.btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default:active, .btn.btn-default.active {
  background: var(--btn-secondary-hover) !important;
  border-color: var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
}

/* RESKIN area:"Delete / destructive" comp:--btn-destructive was:#ff4040(@brand-danger) less:buttons.less */
.btn.btn-danger {
  background: var(--btn-destructive-bg) !important;
  border: 1px solid var(--btn-destructive-bd) !important;
  color: var(--btn-destructive-fg) !important;
  box-shadow: none !important;
}
.btn.btn-danger:hover, .btn.btn-danger:focus, .btn.btn-danger:active, .btn.btn-danger.active {
  background: var(--btn-destructive-hover) !important;
  border-color: var(--btn-destructive-bd) !important;
  color: var(--btn-destructive-fg) !important;
}

/* RESKIN area:"list toolbar — Export/Merge/Manage Folders" comp:--btn-toolbar was:#202e53(.actions .btn-primary) less:listview.htm,buttons.less
   Operate tags these as .btn-primary; in elumo they're discreet. Scoped to .actions
   (0,3,0 beats .btn.btn-primary) so genuine CTAs elsewhere stay primary. */
.actions .btn.btn-primary {
  background: var(--btn-toolbar-bg) !important;
  border: 1px solid var(--btn-toolbar-bd) !important;
  color: var(--btn-toolbar-fg) !important;
  box-shadow: none !important;
}
.actions .btn.btn-primary:hover, .actions .btn.btn-primary:focus,
.actions .btn.btn-primary:active, .actions .btn.btn-primary.active {
  background: var(--btn-toolbar-hover) !important;
  border-color: var(--btn-toolbar-bd) !important;
  color: var(--btn-toolbar-fg) !important;
}

/* RESKIN area:"list-view New (create action)" comp:--btn-create was:grey(.actions .btn-success via --btn-success) less:listview.htm
   New is the CREATE role — promoted to elumo blue. Own token (≠ generic affirmative
   --btn-success, which stays grey for modal OK/Yes). Scoped to .actions (0,3,0). */
.actions .btn.btn-success {
  background: var(--btn-create-bg) !important;
  border: 1px solid var(--btn-create-bd) !important;
  color: var(--btn-create-fg) !important;
}
.actions .btn.btn-success:hover, .actions .btn.btn-success:focus,
.actions .btn.btn-success:active, .actions .btn.btn-success.active {
  background: var(--btn-create-hover) !important;
  border-color: var(--btn-create-hover) !important;
  color: var(--btn-create-fg) !important;
}

/* RESKIN area:"related-list 'New' buttons (accordion inner lists on view pages) → blue create action" comp:--btn-create was:grey(.btn-success[create-dependency]) less:RELATEDLIST btnHypNew
   Inner-list New (id …btnHypNew) carry the STATIC `create-dependency` attr; Copy uses
   `create-dependency-dynamic` (different attr) so stays grey. Create → blue like the main list New. */
.btn.btn-success[create-dependency] {
  background: var(--btn-create-bg) !important;
  border: 1px solid var(--btn-create-bd) !important;
  color: var(--btn-create-fg) !important;
}
.btn.btn-success[create-dependency]:hover, .btn.btn-success[create-dependency]:focus, .btn.btn-success[create-dependency]:active {
  background: var(--btn-create-hover) !important;
  border-color: var(--btn-create-hover) !important;
  color: var(--btn-create-fg) !important;
}

/* RESKIN area:"modal confirm OK/Yes" comp:--btn-success was:#5cb85c(.navbar--page * .modal-dialog .btn-success !important 0,3,1) less:bootstrap
   Shares the affirmative (--btn-success) role; flag if dialogs want a coloured CTA. */
.navbar--page * .modal-dialog .btn-success,
.navbar--page span a .modal-dialog .btn-success {
  background: var(--btn-success-bg) !important;
  border: 1px solid var(--btn-success-bd) !important;
  color: var(--btn-success-fg) !important;
}

/* RESKIN area:"login Sign in (THE primary CTA)" comp:--btn-primary was:#6fc6d8(.btn-success+.btnsignin in login) less:Admin/Login.ascx
   By class it's .btn-success (→ grey), but by ROLE login is the primary action.
   Context override (#btnLogin 1,2,0 beats .btn.btn-success 0,2,0) → primary blue. */
#btnLogin.btn.btn-success,
.btnsignin.btn-success {
  background: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bd) !important;
  color: var(--btn-primary-fg) !important;
}
#btnLogin.btn.btn-success:hover, #btnLogin.btn.btn-success:focus, #btnLogin.btn.btn-success:active,
.btnsignin.btn-success:hover, .btnsignin.btn-success:focus, .btnsignin.btn-success:active {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-fg) !important;
}

/* RESKIN area:"login card → blend into page (elumo has no card)" comp:(surface) was:.panel-default white+border+shadow less:bootstrap/panels,login.less
   elumo login floats on the page bg with no card. Kill the Bootstrap panel chrome
   (scoped to .login so other panels are untouched). */
.login .panel,
.login .panel-default,
.login .panel-body,
.login .login-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* RESKIN area:"detail-page Save (.btn-validate, Angular custom-submit) → CTA — gated by label" comp:--btn-primary was:grey less:edit-view/editview.htm,Billing/*,data-type-controls.js ~5475
   custom-submit stamps .btn-validate on EVERY button it renders (Check List, Copy, Revert to
   Draft, Transfer/Renew/Terminate…, licence detail.htm alone has ~10), NOT just Save — so a bare
   .btn.btn-validate hook made whole sidebars read as CTAs. Gate the promotion on the i18n label
   inside the button (:has, Chrome 105+ like the other skin :has rules): the Save family
   (btn_save*), Save & Copy, Confirm (booking), and modal OK. Everything else custom-submit
   renders falls back to the grey .btn-success/.btn-default/.btn-primary base rules. */
.btn.btn-validate:has([ng-translation^="btn_save"]),
.btn.btn-validate:has([ng-translation="btn_copy_save"]),
.btn.btn-validate:has([ng-translation="btn_confirm"]),
.btn.btn-validate:has([ng-translation="modal_ok"]) {
  background: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bd) !important;
  color: var(--btn-primary-fg) !important;
}
.btn.btn-validate:has([ng-translation^="btn_save"]):hover, .btn.btn-validate:has([ng-translation^="btn_save"]):focus, .btn.btn-validate:has([ng-translation^="btn_save"]):active,
.btn.btn-validate:has([ng-translation="btn_copy_save"]):hover, .btn.btn-validate:has([ng-translation="btn_copy_save"]):focus,
.btn.btn-validate:has([ng-translation="btn_confirm"]):hover, .btn.btn-validate:has([ng-translation="btn_confirm"]):focus,
.btn.btn-validate:has([ng-translation="modal_ok"]):hover, .btn.btn-validate:has([ng-translation="modal_ok"]):focus {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-fg) !important;
}
/* Cancel / Close are .btn-danger but NOT destructive → grey. Delete (btn_delete) keeps the
   global .btn.btn-danger RED. Hook by i18n label so it works in every template (ng-click or href).
   (0,3,0 beats the global .btn.btn-danger 0,2,0.) */
.btn.btn-danger[ng-translation="btn_cancel"],
.btn.btn-danger[ng-translation="btn_close"] {
  background: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
  box-shadow: none !important;
}
.btn.btn-danger[ng-translation="btn_cancel"]:hover, .btn.btn-danger[ng-translation="btn_cancel"]:focus,
.btn.btn-danger[ng-translation="btn_close"]:hover, .btn.btn-danger[ng-translation="btn_close"]:focus {
  background: var(--btn-secondary-hover) !important;
  border-color: var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
}

/* RESKIN area:"WebForms 'App' module pages — Save (Account/Contact/most standard modules)" comp:--btn-primary was:grey(.btn-success.btn-save) less:v2/Apps (each)/Launch.ascx
   Standard modules render via server-side App controls (__doPostBack), NOT the Angular
   edit-view template. Save = .btn-save (always THE primary action) → blue CTA.
   .btn.btn-save (0,2,0) is placed AFTER the base .btn.btn-success rule so it wins the tie. */
.btn.btn-save,
.btn.btn-success.btn-save,
.btn.btn-default.btn-save,
.btn.btn-warning.btn-save {   /* compound (0,3,0) beats the grey .btn.btn-success/.btn-default (0,2,0) regardless of source order */
  background: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bd) !important;
  color: var(--btn-primary-fg) !important;
}
.btn.btn-save:hover, .btn.btn-save:focus, .btn.btn-save:active,
.btn.btn-success.btn-save:hover, .btn.btn-success.btn-save:focus, .btn.btn-success.btn-save:active,
.btn.btn-default.btn-save:hover, .btn.btn-default.btn-save:focus, .btn.btn-default.btn-save:active {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-fg) !important;
}

/* RESKIN area:"view-mode Actions dropdown → blue CTA" comp:--btn-primary was:grey(.btn-success.dropdown-toggle) less:SystemApps/system.objects.../launch.ascx
   On VIEW pages the primary action is the Actions menu (btn-success dropdown-toggle).
   Other dropdowns (Update, Change Record Type) are .btn-default so stay grey. (0,3,0 beats the grey .btn-success.) */
.btn.btn-success.dropdown-toggle {
  background: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bd) !important;
  color: var(--btn-primary-fg) !important;
}
.btn.btn-success.dropdown-toggle:hover, .btn.btn-success.dropdown-toggle:focus,
.btn.btn-success.dropdown-toggle:active, .btn.btn-success.dropdown-toggle.open,
.open > .btn.btn-success.dropdown-toggle,
.open .dropdown-toggle.btn-success {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-fg) !important;
}

/* RESKIN area:"view-mode Edit button → blue CTA (pages with no Actions menu)" comp:--btn-primary was:grey(.btn-success Edit) less:view-view/viewview.htm,Billing/*,edit-view
   Angular view pages have no Actions dropdown — Edit IS the primary action there, so blue.
   Universal hook: ng-translation="btn_edit" (both ng-click="edit()" toggle-mode templates AND
   href-based viewview Edit carry it). Copy=btn_copy / Save=btn_save stay grey. WebForms pages
   keep Actions as the CTA (their Edit is a separate .btnViewEdit pencil link). */
.btn.btn-success[ng-translation="btn_edit"],
.btn.btn-success[update-dependency-dynamic] {
  background: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bd) !important;
  color: var(--btn-primary-fg) !important;
}
.btn.btn-success[ng-translation="btn_edit"]:hover, .btn.btn-success[ng-translation="btn_edit"]:focus, .btn.btn-success[ng-translation="btn_edit"]:active,
.btn.btn-success[update-dependency-dynamic]:hover, .btn.btn-success[update-dependency-dynamic]:focus, .btn.btn-success[update-dependency-dynamic]:active {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-fg) !important;
}

/* RESKIN area:"Back-to-list / warning buttons → grey (for now)" comp:--btn-secondary was:#f0ad4e(.btn-warning) less:edit-view,view-view,Apps
   btn-warning (Back to list etc.) reads amber; user wants 'rest grey'. NB Task #7 may give
   genuine warnings amber later — Back-to-list is really a misuse of .btn-warning. */
.btn.btn-warning,
.btn.btn-info {   /* btn-info had NO generic role rule — a bare one rendered Bootstrap stock cyan; compounded uses (.main-btn-modal, calendar .baction) keep their own rules below/elsewhere */
  background: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
  box-shadow: none !important;
}
.btn.btn-warning:hover, .btn.btn-warning:focus, .btn.btn-warning:active,
.btn.btn-info:hover, .btn.btn-info:focus, .btn.btn-info:active {
  background: var(--btn-secondary-hover) !important;
  border-color: var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
}

/* RESKIN area:"sidebar modal-trigger buttons (.main-btn-modal — Journal/Bounced Check/etc.) → grey" comp:--btn-secondary was:#5bc0de(btn-info)/red(btn-danger) less:uc-modal/main-btn-modal
   These are secondary actions in the AR/detail sidebars; neutralise their btn-info/btn-danger colours
   to match the other grey actions. Compound (0,3,0) beats global .btn.btn-danger (0,2,0). */
.btn.main-btn-modal,
.btn.btn-info.main-btn-modal,
.btn.btn-danger.main-btn-modal {
  background: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
  box-shadow: none !important;
}
.btn.main-btn-modal:hover, .btn.btn-info.main-btn-modal:hover, .btn.btn-danger.main-btn-modal:hover,
.btn.main-btn-modal:focus, .btn.btn-info.main-btn-modal:focus, .btn.btn-danger.main-btn-modal:focus {
  background: var(--btn-secondary-hover) !important;
  border-color: var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
}

/* --- Form controls --- */
.form-control {
  border-radius: var(--input-radius);
  border-color: var(--input-border);
  color: var(--text-body);
}
.form-control:focus {
  border-color: var(--input-focus-bd);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

/* --- Tables / list view --- */
.table > thead > tr > th { border-bottom-color: var(--table-border); color: var(--text-muted); }
.table > tbody > tr > td { border-top-color: var(--table-border); }
.table.highlight > tbody > tr:hover,
.table--list-view tbody tr:hover,
/* module grids (.table-compact inside E1 edit pages — AR transactions, licence terms, invoice
   preview sidebar…) live OUTSIDE .listview-wrapper, so the list-view row treatment never reached
   them; hook them into the same hover (header band + sort-link rules are already generic). */
.edit-wrapper .table.table-compact tbody tr:hover,
/* remaining hover-less grid contexts (audit): dashboard data widgets, custom-report selection
   grids + franchisee-sync grids (both are table.modern-ui--datatable), Customise fields lists */
.widget-panel .table tbody tr:hover,
.table.modern-ui--datatable tbody tr:hover,
.modern-ui-wrap-with-panel .table tbody tr:hover { background-color: var(--row-hover-bg); }

/* --- Modals --- */
.modal-content { border-radius: var(--modal-radius); border-color: var(--border-color); box-shadow: var(--modal-shadow); }
.modal-header, .modal-footer { border-color: var(--border-color); }

.modern-ui--notification-badge { background-color: var(--badge-solid-bg) !important; }
/* count badges (accordion section headers, tabs, etc.) → soft blue tint like the quick-jump tabs.
   (Value pills .badge.badge-warning + list .bade-warning override this at higher specificity.) */
.badge {
  background-color: var(--badge-soft-bg) !important;
  color: var(--badge-soft-fg) !important;
}
/* RESKIN area:"quick-jump tab count badges → soft blue tint (solid blue too strong on grey tabs)" comp:--elumo-primary-50 was:--elumo-primary less:system.objects launch.ascx,view-view
   On the grey section tabs the solid-blue badge reads too loud — light tint bg + blue number. */
.context-bar .badge,
.context-bar-link .badge {
  background-color: var(--badge-soft-bg) !important;
  color: var(--badge-soft-fg) !important;
}
/* RESKIN area:"value-highlight pills (currency / important numbers) → soft chip" comp:--value-pill was:solid blue(.badge.badge-warning) less:ucCurrency.html (list/display mode)
   Currency datatype renders <label class="badge badge-warning"> (Balance, Deposit, Credit Limit,
   Meter Unit Price…). Isolated under --value-pill-* so the whole set re-themes in one place
   (incl. going semantic green/red later). Soft tint + bold text, not solid, so it ≠ a CTA. */
.badge.badge-warning,
.badge.bade-warning {   /* NB `bade-warning` (typo'd, no 'g') is what the LIST-VIEW currency cell uses (table-list-view.htm datatype 9) */
  background-color: var(--value-pill-bg) !important;
  color: var(--value-pill-fg) !important;
  font-weight: 700 !important;
}
/* RESKIN area:"danger status badge → soft red chip" comp:--status-danger was:--badge-soft-bg blue (fell to the .badge base — danger semantic lost) less:Member/licence/licence.js ~5552
   Licence status renders <span class="badge badge-danger">Declined</span> beside the badge-warning
   "Awaiting Signature" pill; only warning/success/info had rules, so danger read as a neutral blue
   pill. Soft red tint + dark red text + bold, mirroring the value-pill weight so the two licence
   status chips match. (0,2,0 beats the 0,1,0 .badge base for both bg and colour.) */
.badge.badge-danger,
.label.label-danger, .label-danger {  /* label sibling: reception "Checked out" chip — pairs with the soft-green "Checked in" */
  background-color: var(--status-danger-bg) !important;
  color: var(--status-danger-fg) !important;
  font-weight: 700 !important;
}
/* list-view currency pill: Operate forces white text at full specificity
   (`.listview-wrapper … td a.badge.bade-warning { color:#fff !important }`, ~0,6,3) — match it
   so the value-pill fg actually applies (else white-on-light status-blue = unreadable). */
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.badge.bade-warning {
  background-color: var(--value-pill-bg) !important;
  color: var(--value-pill-fg) !important;
}
/* RESKIN area:"pagination — ONE elumo style for both list-view Bootstrap + accordion custom-paginator" comp:--elumo-border/--elumo-primary was:#6fc6d8 outline + #d4f7fe hover (.gpaginator .custom-paginator) less:operateui
   grey outline + muted text · soft-tint hover · blue active — aligned across both paginators. */
.gpaginator .custom-paginator ul li > a,
.pagination > li > a, .pagination > li > span {
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}
.gpaginator .custom-paginator ul li:hover > a,
.pagination > li > a:hover, .pagination > li > span:hover,
.pagination > li > a:focus, .pagination > li > span:focus {
  background-color: var(--accent-soft) !important;
  border-color: var(--border-color) !important;
  color: var(--link-color) !important;
}
.gpaginator .custom-paginator ul li.active > a,
.gpaginator .custom-paginator ul li.active:hover > a,
/* Bootstrap list-view pagination active page: without these, the base `.pagination > li > a
   { color: --text-muted !important }` above beats bootstrap's white active text → the selected
   number vanishes into the highlight. (0,2,2) out-specifies the (0,1,2) base + hover rules. */
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span:hover, .pagination > .active > span:focus {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
}
/* RESKIN area:"related-list grid pager (.custompager) → align to list-view elumo pagination" comp:--elumo-primary/--elumo-primary-50 was:#6fc6d8 current-page + #D4F7FE hover (operateui ~14664) less:operateui
   Page LINKS were already elumo blue; only the current-page indicator (span) was still cyan. Match operate's
   exact selectors (0,1,5) → blue active + soft-tint hover, like the list view. */
.custompager table tbody tr td > span {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
}
.custompager table tbody tr td > a {
  border-color: var(--border-color) !important;   /* was 1px solid #6fc6d8 (operateui ~14689) — grey outline like list-view */
  color: var(--text-muted) !important;
}
.custompager table tbody tr td > a:hover {
  background-color: var(--accent-soft) !important;
  border-color: var(--border-color) !important;
  color: var(--link-color) !important;
}

/* RESKIN area:"top loading bar (NProgress) → elumo blue" comp:--elumo-primary was:#6fc6d8(bar)/#29d(peg,spinner) less:operate.min.css #nprogress, nprogress-master/nprogress.css
   The real bar is NProgress (#nprogress, role="bar", translate3d) — NOT #loading-bar. operate.min.css
   themes #nprogress .bar cyan (no !important), so our !important wins. (#loading-bar kept as fallback.) */
#nprogress .bar, #loading-bar .bar { background: var(--loading-bar) !important; }
#nprogress .peg { box-shadow: 0 0 10px var(--loading-bar), 0 0 5px var(--loading-bar) !important; }
#loading-bar .peg { box-shadow: var(--loading-bar) 1px 0 6px 1px !important; }
#nprogress .spinner-icon, #loading-bar-spinner .spinner-icon {
  border-top-color: var(--loading-bar) !important;
  border-left-color: var(--loading-bar) !important;
}

/* ============================================================
   RESKIN area:"ICON SWAP — SAMPLE" — Font Awesome glyph → Lucide line icon via CSS mask (currentColor)
   was:FontAwesome 4.3 glyphs  less:fonts/font-awesome-4.3.0/css/font-awesome.min.css
   VALIDATION SAMPLE ONLY: dashboard tiles (briefcase/calendar/file/laptop/users/grid) + top-bar (mail/help/trash)
   + common (x/check/pencil/cog/plus/eye/search/user/phone/chevrons). Approach A: replace each .fa-X::before glyph
   with a Lucide SVG painted as a currentColor mask — CSS-only, reversible, themeable, also catches JS-injected
   <i class="fa fa-X">. If the look is approved, the remaining ~130 icons get generated the same way
   (lucide-static + a moga/reskin generator). Delete this whole block to revert to Font Awesome.
   ============================================================ */
.fa-briefcase::before, .fa-calendar-o::before, .fa-calendar::before, .fa-file-o::before, .fa-laptop::before,
.fa-group::before, .fa-th::before, .fa-envelope-o::before, .fa-envelope::before, .fa-question::before,
.fa-question-circle::before, .fa-trash-o::before, .fa-times::before, .fa-check::before, .fa-pencil::before,
.fa-cog::before, .fa-plus::before, .fa-eye::before, .fa-search::before, .fa-user::before, .fa-phone::before,
.fa-chevron-left::before, .fa-chevron-right::before,
.fa-print::before, .fa-download::before, .fa-refresh::before {
  content: "" !important;
  display: inline-block !important;
  width: 1em !important; height: 1em !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  vertical-align: -0.125em;
}
.fa-briefcase::before      { -webkit-mask-image: var(--m-briefcase); mask-image: var(--m-briefcase); }
.fa-calendar-o::before,
.fa-calendar::before       { -webkit-mask-image: var(--m-calendar); mask-image: var(--m-calendar); }
.fa-file-o::before         { -webkit-mask-image: var(--m-file); mask-image: var(--m-file); }
.fa-laptop::before         { -webkit-mask-image: var(--m-laptop); mask-image: var(--m-laptop); }
.fa-group::before          { -webkit-mask-image: var(--m-users); mask-image: var(--m-users); }
.fa-th::before             { -webkit-mask-image: var(--m-grid); mask-image: var(--m-grid); }
.fa-envelope-o::before,
.fa-envelope::before       { -webkit-mask-image: var(--m-mail); mask-image: var(--m-mail); }
.fa-question::before,
.fa-question-circle::before{ -webkit-mask-image: var(--m-help); mask-image: var(--m-help); }
.fa-trash-o::before        { -webkit-mask-image: var(--m-trash); mask-image: var(--m-trash); }
.fa-times::before          { -webkit-mask-image: var(--m-x); mask-image: var(--m-x); }
.fa-check::before          { -webkit-mask-image: var(--m-check); mask-image: var(--m-check); }
.fa-pencil::before         { -webkit-mask-image: var(--m-pencil); mask-image: var(--m-pencil); }
.fa-cog::before            { -webkit-mask-image: var(--m-settings); mask-image: var(--m-settings); }
.fa-plus::before           { -webkit-mask-image: var(--m-plus); mask-image: var(--m-plus); }
.fa-eye::before            { -webkit-mask-image: var(--m-eye); mask-image: var(--m-eye); }
.fa-search::before         { -webkit-mask-image: var(--m-search); mask-image: var(--m-search); }
.fa-user::before           { -webkit-mask-image: var(--m-user); mask-image: var(--m-user); }
.fa-phone::before          { -webkit-mask-image: var(--m-phone); mask-image: var(--m-phone); }
.fa-chevron-left::before   { -webkit-mask-image: var(--m-chevron-left); mask-image: var(--m-chevron-left); }
.fa-chevron-right::before  { -webkit-mask-image: var(--m-chevron-right); mask-image: var(--m-chevron-right); }
.fa-print::before          { -webkit-mask-image: var(--m-printer); mask-image: var(--m-printer); }
.fa-download::before       { -webkit-mask-image: var(--m-calendar-arrow-down); mask-image: var(--m-calendar-arrow-down); }
.fa-refresh::before        { -webkit-mask-image: var(--m-calendar-sync); mask-image: var(--m-calendar-sync); }

/* ===================================================================
   §4. GLOBAL COLOUR SWEEPS
   remap Operate brand-navy / cyan → elumo, and status → green
   =================================================================== */
/* --- Brand primary remap: Operate navy #202e53 → elumo blue (!important to beat the theme) --- */
.bg-primary { background-color: var(--accent) !important; }
.label-primary { background-color: var(--accent) !important; }
.text-primary, .btn-link, .primary-font { color: var(--link-color) !important; }
.panel-primary > .panel-heading { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.progress-bar { background-color: var(--accent) !important; }
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.pagination > .active > a,
.pagination > .active > span { background-color: var(--accent) !important; border-color: var(--accent) !important; }

/* ============================================================
   CYAN AUDIT (#6fc6d8 = Operate @bg-success) — slice 1
   The cyan does TWO jobs. Split it:
     (A) list accent  → light header + elumo-blue links
     (B) semantic success → elumo green
   These match Operate's own high-specificity selectors.
   Source: less/modules/tables.less, listview-wrapper.less.
   ============================================================ */

/* --- (A) List-view header band: cyan → near-white, grey text, light border ---
   Beats `.table > thead:first-child > tr:first-child > th { background:#6FC6D8 }`
   and the legacy MS gradient filter. */
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td,
.report-header,
.restablewrap .restable .restablerow th.restableheader {
  background: var(--table-header-bg) !important;
  background-image: none !important;   /* kill DXImageTransform gradient */
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-color) !important;
  font-weight: 600 !important;
}
/* header labels are usually sort-link <a>s inside the th — bold them directly rather than relying
   on inheritance. (Colour: sort anchors are excluded from the §3 hrefless-link blanket rule via
   :not(thead a), so the full-selector header rules in §5 own it — headers read uniform whether
   sortable or not.) */
.table > thead > tr > th a { font-weight: 600 !important; }
/* RESKIN area:"report OUTPUT group-header row links → link colour (were white on the old cyan band)" comp:--link-color was:#fff less:modern-ui.css 18946
   The band above is now light, but operate colours the group-header row links white (`tr.report-header
   td.reportrowcell a{#fff}`) — invisible on light. Data-row (.reportrow) links are handled elsewhere; this is
   the header-row twin. Match operate's selector (0,3,4) + the .reports--output-table-scoped form. */
.table tbody > tr.report-header td.reportrowcell a,
.reports--output-table .table tbody > tr.report-header td.reportrowcell a {
  color: var(--link-color) !important;
}
.table tbody > tr.report-header td.reportrowcell a:hover,
.reports--output-table .table tbody > tr.report-header td.reportrowcell a:hover {
  color: var(--link-hover) !important;
}
/* report OUTPUT row separators → theme hairline (were #ccc, modern-ui.css 18930) */
.table tbody > tr.report-header td,
.table tbody > tr.reportrow td,
.reports--output-table .table tbody > tr.report-header td,
.reports--output-table .table tbody > tr.reportrow td {
  border-top-color: var(--table-border) !important;
}
/* RESKIN area:"report DESIGNER column chips → generic neutral button; + add-column → primary CTA" comp:--btn-secondary-* + --btn-primary-* was:.bg-primary terracotta over cyan base (#d4f7fe/#6fc6d8) chips / .bg-success green + button less:custom-report/edit.htm 181/184 + customreport.htm 68-79
   Column chips are `.report-column-selector.bg-primary` (terracotta via skin .bg-primary, cyan border from the
   template base) → make them the neutral outline button. The + is `.report-column-selector.bg-success.reportadd`
   (green) → make it the terracotta primary CTA. 0,2,0/0,3,0 beat the 0,1,0 .bg-* skin rules. */
.report-column-selector.bg-primary {
  background: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
}
.report-column-selector.bg-primary i,
.report-column-selector.bg-primary span {
  color: var(--btn-secondary-fg) !important;
}
.report-column-selector.reportadd,
.report-column-selector.bg-success.reportadd {
  background: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bd) !important;
  color: var(--btn-primary-fg) !important;
}
.report-column-selector.reportadd:hover,
.report-column-selector.bg-success.reportadd:hover {
  background: var(--btn-primary-hover) !important;
}
/* RESKIN area:"custom-report OUTPUT header row (tabular/summary run view + designer preview) → accent band, white labels" comp:--accent + --text-on-accent was:navy #202E53 via the template's Angular-injected <style> `.operatecustomreport .report-header{background:#202E53!important}` (0,2,0); the light table-header band read wrong for report output (user call)
   This report table (.operatecustomreport) ships its own <style>, so the header row needs 0,2,1 !important
   to win. Header cells are th/span here (not the td.reportrowcell/a structure the fixed-report rules
   assume). Report-writer output ONLY: the generated <table class='operatecustomreport'> carries no other
   class, and exports build standalone HTML that never loads this sheet. */
.operatecustomreport tr.report-header {
  background: var(--accent) !important;
}
.operatecustomreport tr.report-header th,
.operatecustomreport tr.report-header span {
  color: var(--text-on-accent) !important;
}
/* matrix header/totals cells carry their colours as inline style= attributes written by the report
   generator (navy #202E53 col/row-group headers, cyan rgb(111, 198, 216) Totals cells) — a stylesheet
   !important outranks non-important inline styles, and [style*=] keys on the literal colour text.
   Totals → --accent-hover (one step darker) keeps the header/totals distinction the cyan provided.
   Inline white cell borders kept: they read as gridlines on the accent fill. */
.operatecustomreport th[style*='202E53'],
.operatecustomreport td[style*='202E53'] {
  background-color: var(--accent) !important;
}
.operatecustomreport th[style*='111, 198, 216'],
.operatecustomreport td[style*='111, 198, 216'] {
  background-color: var(--accent-hover) !important;
}
/* RESKIN area:"report writer datasource picker → theme header band + accent selected module" comp:--table-header-bg/--table-header-fg + --accent was:#202E53 navy band (customreport.htm inline <style> 48-52) / .bg-success status-green selected chip less:custom-report/datasource.htm 30,64-75
   The module-picker header row (`Module 1..4`) is navy via customreport.htm's own <style> (loads after the
   skin, same 0,1,0) and the selected module rides the generic .bg-success — status green, but selection is
   not a status. Header → light table-header band with dark labels (h3 needs its own rule: the theme's
   heading colour out-specifies inheritance); selected module → accent solid + readable text, matching the
   pagination-active selected pattern. 0,2,0 !important beats both. */
.reportwriter .report-datasource-header {
  background-color: var(--table-header-bg) !important;
  color: var(--table-header-fg) !important;
}
.reportwriter .report-datasource-header h3 {
  color: var(--table-header-fg) !important;
}
.report-datasource.bg-success {
  background-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
}
/* header sort-links were white (on cyan) → elumo foreground on the light band.
   elumo TableHead = text-foreground (#404040) + font-medium. MUST match Operate's
   full compiled selector (`.listview-wrapper .displayitems .table-responsive
   .table--list-view thead th a`, specificity 0,4,3 !important) or it loses. */
.listview-wrapper .displayitems .table-responsive.table--list-view thead th,
.listview-wrapper .displayitems .table-responsive.table--list-view thead th a,
.listview-wrapper .displayitems .table-responsive.table--list-view thead th a span,
table thead tr th a:not([title='-- Not Specified --']),
.restablewrap .restable .restablerow th.restableheader,
.restablewrap .restable .restablerow th.restableheader a {
  color: var(--text-body) !important;
  font-weight: 600 !important;   /* bold headers — this full selector out-specifies the generic §3 thead rules, so the weight must be set HERE */
}

/* --- (A) List-view body links (account names etc.): cyan → elumo blue ---
   Full compiled selector (specificity 0,5,4 !important) — short forms lose. */
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a[href],
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.link,
.listview-wrapper .link-more {
  color: var(--link-color) !important;
}
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a[href]:hover,
.listview-wrapper .displayitems .table-responsive.table--list-view tbody tr td a.link:hover,
.listview-wrapper .link-more:hover {
  color: var(--link-hover) !important;
}

/* --- (B) Semantic success → elumo green: STATUS ONLY (never buttons).
   .btn-success is styled as elumo "outline" grey in the Buttons section above —
   in elumo green is a status colour (--status-green), not an action colour. --- */
.progress-bar-success,
.progress .progress-bar.progress-bar-success {
  background-color: var(--status-success-solid) !important;
}
/* RESKIN area:"success status chips (badge + label) → soft green chip" comp:--status-success-bg/-fg was:solid --status-success-solid fill + the .badge base's soft-teal text (green-on-green, unreadable — eSign History "Signed") less:licence eSign history modal, ucObjects.ascx "Customise", reception "Checked in"
   .badge-success previously sat in the solid group above, but only the BACKGROUND — its text colour
   fell to the .badge base (soft teal) → unreadable on the green fill. Per the design system the
   status chip is the SOFT form: mint tint + dark green bold text, matching the badge-warning /
   badge-danger chips. .label-success (the Bootstrap sibling chip — Customise module cards,
   reception/community "Checked in" / allowance chips) takes the same soft treatment; only
   progress BARS stay solid — they're fills, not chips. The explicit color also overrides
   bootstrap's white label text. */
.badge.badge-success, .badge-success,
.label.label-success, .label-success {
  background-color: var(--status-success-bg) !important;
  color: var(--status-success-fg) !important;
  font-weight: 700 !important;
}
.text-success { color: var(--status-success-fg) !important; }
.alert-success {
  background-color: var(--status-success-bg) !important;
  border-color: var(--status-success-solid) !important;
  color: var(--status-success-fg) !important;
}
/* RESKIN area:"alert family → status tokens (danger/warning/info join success)" comp:--status-danger/-warning/-info was:stock Bootstrap alert colours (#f2dede red / #fcf8e3 amber / #d9edf7 cyan) less:data-type-controls.js validation messages + 30+ templates
   Only .alert-success had been editorialised; the other three fell to Bootstrap defaults —
   readable but off the palette. alert-danger is the highest-volume one: every field-validation
   message (required / maxlength / pattern) renders through it. */
.alert-danger {
  background-color: var(--status-danger-bg) !important;
  border-color: var(--status-danger-bd) !important;
  color: var(--status-danger-fg) !important;
}
.alert-warning {
  background-color: var(--status-warning-bg) !important;
  border-color: var(--status-warning-bd) !important;
  color: var(--status-warning-fg) !important;
}
.alert-info {
  background-color: var(--status-info-bg) !important;
  border-color: var(--status-info-bd) !important;
  color: var(--status-info-fg) !important;
}
.bg-success { background-color: var(--status-success-solid) !important; }
.gritter-success .gritter-title { color: var(--status-success-fg) !important; }
.modern-ui--newdashboard-layout .text-success,
.modern-ui--dashboard .text-success,
.editTip.text-success { color: var(--status-success-fg) !important; }

/* --- (A) Shared accent components: cyan → elumo blue (Task #4 sweep) ---
   Matches Operate's compiled selectors (some carry !important). */

/* form focus rings — Operate glows cyan (`body .form-control:focus` etc. are !important) */
body .form-control:focus,
.uneditable-input:focus,
input:focus, textarea:focus, select:focus,
.ui-select-bootstrap input[type="text"]:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--input-focus-bd) !important;
  box-shadow: 0 0 0 3px var(--input-focus-ring) !important;
}

/* RESKIN area:"search bars cyan left bar → elumo blue" comp:--elumo-primary was:#6fc6d8 (border-left:3px) less:operateui (.spotlight input, #top-nav .navbar-search .results)
   3px cyan accent on the left of search inputs/results. Specific selectors needed to beat
   `.spotlight input[type="search"]{…!important}` (0,2,1). */
input[type="search"],
.spotlight input[type="search"],
#top-nav .navbar-search .results {
  border-left-color: var(--accent) !important;
}

/* info labels + generic label base (success→green & primary handled above/earlier).
   NB .badge-info is NOT here: a solid accent bg under the .badge base's soft-teal text was
   low-contrast — badge-info now falls to the .badge base (soft blue chip), matching the
   status-chip family. */
.label, .label-info { background-color: var(--accent) !important; }

/* active / selected / filled accents */
.carousel-custom .carousel-indicators li.active,
.slider.slider-horizontal .slider-selection,
.slider.slider-vertical .slider-selection,
.wizard-steps li.active,
.inbox-action.active,
.inbox-action.active a:hover,
.inbox-action.active a:focus,
.switch.checked,
.bootstrap-tagsinput .tag,
.gpaginator .custom-paginator ul li.active > a,
.gpaginator .custom-paginator ul li.active:hover > a,
.ucDate.bootstrap-datetimepicker-widget .datepicker-months .table-condensed tbody td span.month.active,
.ucDate.bootstrap-datetimepicker-widget .datepicker-years .table-condensed tbody td span.year.active,
.ucDate.bootstrap-datetimepicker-widget .datepicker-days .table-condensed tbody td.day.active,
.ucDateTime.bootstrap-datetimepicker-widget .datepicker-months .table-condensed tbody td span.month.active,
.ucDateTime.bootstrap-datetimepicker-widget .datepicker-years .table-condensed tbody td span.year.active,
.ucDateTime.bootstrap-datetimepicker-widget .datepicker-days .table-condensed tbody td.day.active {
  background-color: var(--accent) !important;
}
.wizard-steps li.active:after { border-left-color: var(--accent) !important; }
.switch.checked { border-color: var(--accent) !important; }

/* top-nav selected/hover underline (was cyan 2px) → elumo blue */
.topmain-menu ul.modern-ui--top-menu > li:hover > a span,
.topmain-menu ul.modern-ui--top-menu > li.selected > a span {
  border-bottom-color: var(--elumo-nav-active) !important;
}

/* generic progress bar (default) → blue; .progress-bar-success stays green (more specific, above) */
.progress .progress-bar { background-color: var(--accent) !important; }

/* generic table body links (non-list-view tables) → blue */
table tbody td a:not([title='-- Not Specified --']) { color: var(--link-color) !important; }

/* --- (A) Per-screen cyan tail → elumo blue (Phase 1 whack-a-mole) ---
   All accent uses; matched to Operate's exact selectors. */
.messenger-message-container a,
.reports--output-table .table tbody > tr.reportrow td.reportrowcell a,
.settings--widget,
#cookie-policy i:focus,
.options-screen h4,
.checklist .checklist-group-item-card i.fa,
.menusettings-screen .displayitems h4 a,
.menusettings-screen .searchtree ul.secondlevel li:hover > a,
.menusettings-screen .searchtree ul.secondlevel li a.activeSecondLevel,
.menusettings-screen .searchtree ul.thirdlevel li:hover > a,
/* folder-tree FIRST level (all list views + Integrations + Email/SMS Templates + MenuSettings):
   operate paints hover/active navy #202e53 !important (modern-ui ~25834/25838) — the anchor is
   hrefless AND its ng-click sits on the <li>, so no link override reaches it; match operate's
   exact selectors (same specificity, skin loads later). Inactive stays operate grey #888. */
.listview-wrapper .searchtree ul.firstlevel li:hover > a,
.listview-wrapper .searchtree ul.firstlevel li a.activeFirstLevel,
.invite-screen p i {
  color: var(--link-color) !important;
}
.modern-ui--gocardless .btn-launch,
.growl.growl-notice,
#calendar-screen .dhx_scale_bar .dhx_cal_prev_button,
.template-designer .provisionalbooking-templates .menuitem,
.getting-started .content .header ul li.active:before,
.getting-started .content .header ul li.active .circle,
.checklist .checklist-group-item .circle.active {
  background: var(--accent) !important;
}
.registration-started .theme-widget-container .theme-widget.true {
  border-color: var(--accent) !important;
}
/* banner: navy→cyan gradient → elumo blue gradient */
.banner {
  background: linear-gradient(to right, var(--accent-hover), var(--accent)) !important;
}

/* ===================================================================
   §5. CHROME
   app frame
   =================================================================== */
/* --- Top nav: light "elumo" chrome (matches the React app: white bar, grey text, blue active) ---
   #navbar background is driven by --elumo-nav-bg via the inline style (TopMenu.ascx +
   render-modernui.js), so nav colour is now CSS-controlled here — no rebuild for future tweaks. */
#navbar,
.navbar.topmain-menu #navbar {
  border-bottom: 1px solid var(--elumo-nav-border) !important;
  box-shadow: none !important;
}
/* menu item labels → grey. Beats Operate's `.topmain-menu ul.modern-ui--top-menu > li a span
   { color:#fff !important }` (specificity 0,2,4) by matching that selector. */
.topmain-menu ul.modern-ui--top-menu > li a,
.topmain-menu ul.modern-ui--top-menu > li a span,
.topmain-menu ul.modern-ui--top-menu > li .ng-binding,
.topmain-menu ul.modern-ui--top-menu > li .text,
.topmain-menu ul.modern-ui--top-menu > li i { color: var(--elumo-nav-fg) !important; }
/* hover / open / active → elumo blue (state class adds specificity) */
.topmain-menu ul.modern-ui--top-menu > li > a:hover,
.topmain-menu ul.modern-ui--top-menu > li > a:hover span,
.topmain-menu ul.modern-ui--top-menu > li.open > a,
.topmain-menu ul.modern-ui--top-menu > li.open > a span,
.topmain-menu ul.modern-ui--top-menu > li.active > a,
.topmain-menu ul.modern-ui--top-menu > li.active > a span { color: var(--elumo-nav-active) !important; }

/* --- Page header --- */
.page-header { border-bottom-color: var(--border-color); }

/* ===================================================================
   §6. PER-SCREEN
   =================================================================== */
/* ============================================================
   RESKIN area:"login → essensys editorial CARD" comp:--card,--accent,--font-display was:"no-card float on grey" less:Admin/Login.ascx
   Matches the design mock (operate-react-shell/login.html): essensys wordmark top-left,
   centred Operate logo + "Part of essensys" eyebrow, white accent-top card with serif
   "Sign in" heading + subtitle, labelled pill fields, footer. Loads after the earlier
   "kill the panel chrome" rule so the card wins. Scoped to .login.
   ============================================================ */
#login-screen.login {
  background-image: linear-gradient(180deg, var(--accent-soft), var(--canvas-bg) 360px) !important;
  display: flex !important; flex-direction: column !important;
  min-height: 100vh;
}
/* The editorial mock has NO header bar — just the floating wordmark. Hide the master-page
   header band (#top-nav) and the top margin Operate's calcHeaders reserves for it, on the
   login page only (scoped via the login screen being present). */
body:has(#login-screen) #top-nav,
body:has(#login-screen) #navbar,
body:has(#login-screen) .topmain-menu,
body:has(#login-screen) .navbar.topmain-menu { display: none !important; }
body:has(#login-screen) #mainContainer { margin-top: 0 !important; }
/* NON-RESKIN reason:"layout — companion JS, NOT a CSS rule. The #mainContainer margin-zero above
   can't fully win: on the top-level login (no /app embed bridge) Operate's calcHeaders() re-reserves
   the header gap via an INLINE !important margin that no stylesheet can beat → a white bar at the top.
   The real fix is a JS calcHeaders override (fixLoginContainer) in Admin/Login.ascx, mirroring the
   embed bridge's fixMainContainer. Noted here so the login skin points to its companion JS."
   target:Admin/Login.ascx <script> change:JS calcHeaders override (zeroes #mainContainer/#wrapper) date:2026-06-19 */

/* RESKIN: cookie banner — RESTORED on login (was hidden for the demo) and brought onto elumo.
   #cookie-policy is JS-injected into <body> by Admin/Login.ascx; base CSS positions it, we recolour. */
#cookie-policy {
  background: var(--card-bg) !important;
  color: var(--text-body) !important;
  border-top: 3px solid var(--accent) !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .08) !important;
  font-size: 13px !important; line-height: 1.5 !important;
}
#cookie-policy i { color: var(--text-muted) !important; cursor: pointer; }
#cookie-policy i:hover { color: var(--accent) !important; }
.login .brand-essensys { position: fixed; top: 28px; left: 32px; z-index: 10; }
.login .brand-essensys-logo { height: 26px; width: auto; }
.login .modern-ui--login {
  width: 420px; max-width: 90vw; margin: auto !important; padding: 40px 0 56px;
  text-align: center; float: none !important;
}
.login .login-icon { text-align: center; margin: 0 0 8px !important; background: transparent !important; }
.login .login-icon .modern-ui-logo { height: 48px; width: auto; }
.login .endorse {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
  color: var(--text-muted); margin-bottom: 30px;
}
/* white accent-top card (overrides the earlier transparent .login .panel rule) */
.login .panel, .login .panel-default {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-top: 3px solid var(--accent) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .10) !important;
  text-align: left;
  max-width: none !important;   /* beat Operate's #login-screen .panel.panel-default{max-width:300px} so the card fills the wider tile */
}
.login .panel-body { padding: 32px 34px 36px !important; background: transparent !important; }
.login .login-heading { margin-bottom: 22px; text-align: center; }
.login .login-title {
  font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 34px !important;
  letter-spacing: -.02em !important; margin: 0 0 4px !important; color: var(--text-body) !important;
}
.login .login-sub { color: var(--text-muted) !important; font-size: 14px !important; margin: 0 !important; }
.login .login-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 7px; }
.login .form-group { margin-bottom: 18px !important; }
.login .input-group { display: flex; position: relative; }
.login .input-group .form-control {
  width: 100% !important; height: 44px !important; border: 1px solid var(--input-border) !important;
  border-radius: 100px !important; padding: 0 16px !important; background: var(--canvas-bg) !important;
}
.login .input-group:has(.input-group-addon) .form-control { padding-right: 46px !important; }
.login .input-group .form-control:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; background: #fff !important;
}
/* eye toggle: borderless, floated inside the pill (was a grey addon box) */
.login .input-group-addon {
  position: absolute !important; right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none !important; background: transparent !important;
  display: flex; align-items: center; justify-content: center; color: var(--text-faint) !important;
}
.login .btnsignin { display: block !important; width: 100% !important; border-radius: var(--btn-radius) !important; height: 44px; margin-top: 6px; }
/* Auth error/success alerts are floated left by base CSS → taken out of flow, so the (later-in-DOM)
   Sign-in / Next button renders on top and hides the message. Unfloat them so they sit in normal
   flow above the button. Covers login + forgot/reset. */
#login-screen .alert, .login .alert,
#forgot-password-screen .alert, .forgot-password .alert { float: none !important; width: 100% !important; }
.login .linkForgotPassword { text-align: center; margin-top: 18px; }
.login .login-foot { text-align: center; color: var(--text-muted); font-size: 12px; margin-top: 28px; opacity: .85; }

/* RESKIN area:"forgot-password → same editorial CARD as login" comp:--card,--accent,--font-display was:"unstyled Bootstrap panel on grey" less:Admin/ForgotPassword.ascx
   ForgotPassword.ascx mirrors Login.ascx's structure but with its OWN wrappers
   (#forgot-password-screen / .forgot-password-ui / .btn-forgot) so the .login-scoped rules
   above all miss it. Re-apply the identical treatment here so the two pages match. Same page
   plumbing as login: pre-auth, OperateMasterPage → skin loads. */
#forgot-password-screen {
  background-image: linear-gradient(180deg, var(--accent-soft), var(--canvas-bg) 360px) !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  /* legacy Operate CSS pins this (and the .row) to a ~330px fixed column — override so it fills
     the viewport and the card can centre instead of overflowing hard-left. */
  width: 100% !important; max-width: none !important; min-height: 100vh;
}
body:has(#forgot-password-screen) #top-nav,
body:has(#forgot-password-screen) #navbar,
body:has(#forgot-password-screen) .topmain-menu,
body:has(#forgot-password-screen) .navbar.topmain-menu { display: none !important; }
/* NOTE: calcHeaders pins #mainContainer's top gap via an inline margin (`!important`) that CSS
   can't beat, so a small header-height gap sits above the gradient. A JS companion (mirroring
   Login.ascx) could zero it, but re-running calcHeaders shifted the card after paint = a visible
   blink, so it was removed and the gap is accepted as-is. Do NOT re-add a calcHeaders wrapper here. */
.forgot-password { width: 100% !important; max-width: none !important; margin: 0 !important; }
#forgot-password-screen .login-icon { text-align: center; margin: 0 0 22px !important; background: transparent !important; }
#forgot-password-screen .login-icon .modern-ui-logo { height: 48px; width: auto; }
/* white accent-top card (parallels .login .panel) */
#forgot-password-screen .panel,
#forgot-password-screen .forgot-password-ui {
  width: 420px; max-width: 90vw; margin: 0 auto !important; text-align: left;
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-top: 3px solid var(--accent) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .10) !important;
}
#forgot-password-screen .panel-body { padding: 32px 34px 36px !important; background: transparent !important; }
#forgot-password-screen .form-group { margin-bottom: 18px !important; }
#forgot-password-screen .input-group { display: flex; position: relative; }
#forgot-password-screen .input-group .form-control {
  width: 100% !important; height: 44px !important; border: 1px solid var(--input-border) !important;
  border-radius: 100px !important; padding: 0 16px !important; background: var(--canvas-bg) !important;
}
#forgot-password-screen .input-group .form-control:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; background: #fff !important;
}
#forgot-password-screen .btn-forgot {
  display: block !important; width: 100% !important; border-radius: var(--btn-radius) !important;
  height: 44px; margin-top: 6px;
}
#forgot-password-screen .linkBackLogin { text-align: center; margin-top: 18px; }

/* RESKIN area:"licence/trial/unauthorised expiry screens → login page-frame" comp:--card,--accent,--canvas-bg was:"reskinned card floating on legacy fabric-plaid bg, master header bar showing" less:Admin/LicenceExpired.ascx,LicenceExpiring.ascx,TrialExpired.ascx,Unauthorized.ascx
   These carry class="row login" so the .login .panel card rules above ALREADY apply, but the
   page-frame rules (gradient bg, header-bar hide) were scoped to #login-screen — an id only
   Login.ascx has — so they missed. Each page also ships a legacy inline <style> painting
   #wrapper/#mainContainer with fabric_plaid.png; the wrapper rule below out-specifies it
   (html body :has(.row.login) #wrapper ≫ #wrapper) so the texture is replaced, no markup edit. */
body:has(.row.login) #top-nav,
body:has(.row.login) #navbar,
body:has(.row.login) .topmain-menu,
body:has(.row.login) .navbar.topmain-menu,
body:has(.row.login) .nav.navbar-nav { display: none !important; }
html body:has(.row.login) #wrapper,
html body:has(.row.login) #mainContainer {
  margin-top: 0 !important;
  background: linear-gradient(180deg, var(--accent-soft), var(--canvas-bg) 360px) !important;
}
.row.login { float: none !important; padding-top: 6vh; }
.row.login h1 {
  margin: 0 0 8px !important; text-align: center;
  font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 28px !important;
  letter-spacing: -.02em !important; color: var(--text-body) !important;
}
.row.login h3 {
  text-align: center; color: var(--text-muted) !important;
  font-size: 15px !important; font-weight: 500 !important; margin: 0 0 20px !important;
}
.row.login h4 { color: var(--text-body) !important; }

.modern-ui--dashboard { background-color: var(--canvas-bg); }

/* RESKIN area:"home dashboard tiles" comp:--elumo-text-muted(label)/--elumo-text(number)/--elumo-primary-50+--elumo-primary(icon chip) was:#6fc6d8(.result)/blue(icon) less:homedashboard.less
   KPI hierarchy: muted label · dark-grey number (hero) · soft-blue icon chip (controlled accent, echoes Quick Links).
   Icons are Font Awesome <i> glyphs — the <i> itself becomes the chip (rounded square, pale-blue bg, blue glyph). */
.home-dashboard .main .dash .dash-item,
.home-dashboard .main .dash .dash-item p { color: var(--text-muted) !important; }
/* KPI figure → editorial serif-ITALIC terracotta (the signature "figure" look from the mock) */
.home-dashboard .main .dash .dash-item .result {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 42px !important;
  line-height: 1 !important;
  color: var(--accent) !important;
}
.home-dashboard .main .dash .dash-item .col-xs-8 p {
  font-size: 13px !important;
  margin: 8px 0 0 !important;
  line-height: 1.4 !important;
}
/* smaller, squarer tinted icon chip (mock) */
.home-dashboard .main .dash .dash-item i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  line-height: 1;
  border-radius: 8px;
  background: var(--icon-chip-bg) !important;   /* pale terracotta chip */
  color: var(--icon-chip-fg) !important;        /* terracotta glyph */
  font-size: 22px !important;
}
/* RESKIN area:"dashboard Quick Links → mock style (dark links + terracotta arrow + hairline rows)" comp:--text-body,--accent,--border-color was:bold terracotta links less:home-dashboard.htm
   Each link is a flex row (label left, arrow right), 15px, dark ink with a terracotta arrow, rows
   separated by hairline rules — matching the editorial mock. */
.home-dashboard .sidebar ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.home-dashboard .sidebar ul li { border-bottom: 1px solid var(--border-color) !important; }
.home-dashboard .sidebar ul li:last-child { border-bottom: 0 !important; }
.home-dashboard .sidebar ul li a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 13px 2px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-body) !important;
}
.home-dashboard .sidebar ul li a:hover { color: var(--accent) !important; }
.home-dashboard .sidebar ul li a::after {
  content: "\2192";   /* arrow */
  color: var(--accent);
  font-weight: 400;
  margin-left: 12px;
}

/* RESKIN area:"home dashboard headings → larger editorial serif" comp:--font-display was:Operate default h2/h3 sizes less:home-dashboard.htm
   The date title (h2) + Quick Links (h3) inherit serif from the global heading rule but kept
   Operate's small sizes, so they read tiny. Scale them up as editorial display headings.
   (Size only — font-family/colour come from the heading rule; scoped to .home-dashboard.) */
.home-dashboard .title-sections-angular h2 {
  font-size: 32px !important; line-height: 1.15 !important; margin: 0 0 4px !important;
}
.home-dashboard .sidebar h3 {
  font-size: 22px !important; line-height: 1.2 !important; margin: 0 0 12px !important;
}
/* RESKIN area:"home dashboard — KPI grid + Quick Links → white card tiles (stop floating on grey)" comp:--elumo-surface was:transparent on grey less:home-dashboard.htm
   Card the EXISTING containers (.main = KPI grid, .sidebar = Quick Links) — no DOM change.
   Cols already carry Bootstrap gutters, so no margins needed. The `border` shorthand also
   replaces .main's old #d3d3d3 right-divider. */
.home-dashboard .main,
.home-dashboard .sidebar {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}


/* RESKIN area:"list-view title → editorial serif display" comp:--font-display,--text-body was:Operate default h2 less:list-view/listview.htm
   The title is `.title-sections-angular h2` (NOT .gtitle — earlier rule missed it). Bring it into
   the editorial scale. Top breathing room is added on the ROOT wrapper below (padding on the title
   section itself pushed the absolutely-positioned view-selector dropdown up + clipped it). */
.listview-wrapper .title-sections-angular h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  color: var(--text-body) !important;
  font-size: 32px !important;
  margin: 0 !important;   /* drop Operate's 13px top margin — band padding controls spacing */
}

/* RESKIN area:"calendar title → editorial serif display (match list/edit page headers)" comp:--font-display,--text-body was:Operate default h2 less:calendar.htm ~7-10
   The calendar page title `.title-sections-angular h2` (ng-translation="calendar_alias") had no reskin
   rule — home/listview/edit each do — so it fell back to Operate's default h2 and read out of scale next
   to the other headers. Bring it into the same editorial scale. */
#calendar-screen .title-sections-angular h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  color: var(--text-body) !important;
  font-size: 32px !important;
  margin: 0 !important;
}

/* RESKIN area:"view/edit page sections → white card surface (stop content floating on grey)" comp:--elumo-surface was:transparent(.edit-section) less:Billing/* + detail view templates
   elumo holds content in white cards on the grey page. Give the EXISTING section container
   (.edit-section) a card surface — no new DOM. Visual-only here (bg/border/radius/shadow);
   the vertical gap between cards is a layout tweak tracked under NON-RESKIN. */
.edit-section {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}
/* RESKIN area:"preview pages (invoice/credit note/statement/proforma/licence) → NO outer card" comp:(transparent) was:the .edit-section card above less:invoice-preview/invoicepreview.htm ~68
   The preview template wraps its whole content area in ONE `.edit-section.ip-fade--wrapper`, so the
   card treatment boxed the entire page. The document preview is already its own tile (grey backdrop
   + white page), so the outer card is noise — strip it on the preview wrapper. Covers every page on
   the invoicepreview.htm mechanism via the shared .invoice-preview-wrapper root (0,2,0 beats the
   0,1,0 card + accent-edge rules regardless of order). */
.invoice-preview-wrapper .edit-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* RESKIN area:"NESTED .edit-section → no inner card (tile-in-a-tile)" comp:(transparent) was:the .edit-section card above less:esign SPLaunch.htm ~89
   Some legacy templates nest .edit-section inside .edit-section (eSign Setup: Licence Templates +
   Countersigners sit INSIDE the Email Templates section). Carding both draws a tile inside a tile.
   Un-card any nested section — content reads as a titled sub-section of the parent card. Generic
   (0,2,0 beats the 0,1,0 card + accent-edge rules), so future double-wrapped templates self-heal —
   same pattern as the nested .modern-ui-hubcreatesettings fix. border:none also drops the 3px
   accent left edge. Section-title typography is untouched (owned by the shared h3 rule). */
.edit-section .edit-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* RESKIN area:"customizable module view (Account/Contact/Product Group etc.) sections → white card surface" comp:--elumo-surface was:transparent(.edit-section-accordion .tab) less:view-view/viewview.htm
   TYPE B pages (the user-configurable /mod/{id}/view engine) wrap each section in `.tab` (twin of TYPE A's
   `.edit-section`), but `.tab` was never carded → flat on grey. Same surface treatment as `.edit-section` so
   both engines tile identically. Surface-only (bg/border/radius/shadow) + margin-bottom for the inter-card gap;
   .tab is a full-width block in the same col-md-10 as .edit-section, so NO grid width/margin hacks needed. */
.edit-section-accordion .tab {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  margin-bottom: 16px !important;
  display: flow-root !important;  /* contain the floated .col-xs-12 children (.tab-label/.tab-content) so the card has height — without this the surface renders at 0px and is invisible. (No overflow:hidden — it would clip picklist/lookup dropdowns inside the card.) */
}

/* RESKIN area:"view/edit page canvas → grey, so the white section cards read as floating tiles" comp:--elumo-bg was:white(operate body !important)
   body is forced white by operate (operate.css ~1744 `body{background:white!important}`), so the grey page must
   live on the page wrapper instead. Greying .edit-wrapper makes BOTH engines' cards (.edit-section AND .tab) float
   on grey, matching the dashboard / rest of the app. Colour-only (background) — no layout change. */
.gwrapper.edit-wrapper { background-color: var(--canvas-bg) !important; }

/* RESKIN area:"WebForms configurable module view (Account / Contact / Product Group via system.objects) → white card tiles on grey" comp:--elumo-surface/--elumo-bg was:transparent sections on white .responsive-content-wrapper less:SystemApps/system.objects.rjmetis.com.1.0.0/launch.ascx
   This is the engine Account/Contact/etc. ACTUALLY use (confirmed via DOM probe): jQuery-UI accordion sections
   `.form-group.section{Name}` inside `.modern-ui--viewscreen`, root `.gwrapper.listview-wrapper`, canvas = white
   `.responsive-content-wrapper`. NOT the Angular `.edit-section`/`.tab` engine. Card each section; grey the canvas
   scoped via :has() so only view screens go grey (real list views, which share .responsive-content-wrapper, don't). */
.modern-ui--viewscreen .form-group[class*="section"],
/* E3-CUSTOM: hand-written custom view screens (Notes NoteView.ascx / AttachmentView.ascx) load
   INTO divViewData (.modern-ui--viewscreen) but their groups are BARE .form-group with no
   section* token, under an inner .viewScreen root — child chain scopes to TOP-LEVEL groups only
   (nested field .form-groups stay uncarded). Standard E3 pages have no inner .viewScreen. */
.modern-ui--viewscreen .viewScreen > div > .form-group,
.relatedlists .modern-ui--related-list-panel {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  margin-bottom: 16px !important;
  display: flow-root !important;  /* contain floated children — with an EMPTY grid ("no records") the card otherwise collapses shorter than its content and the next tile overlaps it (seen on Events related lists). Same fix as the E2 .tab card; no overflow:hidden (would clip dropdowns). */
}
.responsive-content-wrapper:has(.modern-ui--viewscreen) {
  background-color: var(--canvas-bg) !important;
}
/* RESKIN area:"WebForms EDIT screen (E3) → per-section white cards + clear the fixed title banner" comp:--card-* + --canvas-bg was:one big .panel.panel-editview white block (no per-section framing) + content clipped under the 46px fixed header less:system.objects launch.ascx ~745 + modern-ui.css ~19058
   Edit mode differs from view (DOM-probe confirmed): all 9 sections sit inside ONE white .panel.panel-editview,
   and each section is a `.section{Name}.ui-accordion` (NOT .form-group.section*). So the view rule misses them and
   the page reads as one flat white block. Make the wrapper transparent (cream shows in the gaps) and card each
   section like view mode. (The banner-clearance offset is handled in render-modernui.js — the "iframe popup"
   block was zeroing the edit margins in the embedded shell; that reset is now skipped for embedded edit pages
   so the edit-view's own 65px offset stands. Not a CSS concern.) */
.modern-ui--editscreen .panel.panel-editview {
  background: transparent !important;
  border-radius: 0 !important;
}
.modern-ui--editscreen .panel-editview > [class*="section"] {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  margin-bottom: 16px !important;
}
/* E3-CUSTOM edit (Notes NoteEdit.ascx): the form is a BARE bootstrap .panel (no .panel-editview,
   no section* token) in the col-md-10 next to the .modern-ui--note-edit marker div — the section
   card rules all miss it, so Subject/Comments sat on an edge-to-edge white sheet. Card that panel;
   its inline padding (35/20, no !important) is kept as the card's inner spacing. */
.modern-ui--editscreen .modern-ui--note-edit ~ .col-md-10 > .panel {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-left: 3px solid var(--accent) !important;  /* house card accent edge (this one-off panel isn't in the shared accent-edge group's selector list) */
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  margin-bottom: 16px !important;
}
/* RESKIN area:"content section cards → top/bottom breathing room" comp:(layout literal) less:view/edit section cards (all engines)
   Give the data tiles vertical padding so the header + fields aren't flush to the card edges. Top/bottom only —
   preserve each engine's own horizontal padding. All the record-data card surfaces (E1 .edit-section, E2 .tab,
   E3 view .form-group[section]* + related-list panels, E3 edit .section*). */
.edit-section,
.edit-section-accordion .tab,
.modern-ui--viewscreen .form-group[class*="section"],
.modern-ui--viewscreen .viewScreen > div > .form-group,
.relatedlists .modern-ui--related-list-panel,
.modern-ui--editscreen .panel-editview > [class*="section"] {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
/* RESKIN area:"collapsible section header → drop the grey bar, title sits on the white card" comp:(transparent) was:#f5f5f5(.ui-widget-content .ui-state-default/-active/-hover !important, 0,2,0) less:jquery-ui accordion (modern-ui.css ~24853-24872)
   Account/Contact/etc. sections are jQuery-UI accordions: the "▾ Information" header is an h3.ui-accordion-header
   carrying .ui-state-default/-active, which operate paints #f5f5f5 → a grey band across the top of each white
   section card. Clear the header fill so the title + collapse arrow read directly on the card. Scoped to the
   view/edit screens AND the related-list panels (OPPORTUNITIES/CONTACTS etc. under .relatedlists — same
   jQuery-UI accordion header, different ancestor, so they need their own scope); 0,3,0 !important beats
   operate's 0,2,0 !important ui-state rules. */
.modern-ui--viewscreen .ui-accordion-header.ui-state-default,
.modern-ui--viewscreen .ui-accordion-header.ui-state-active,
.modern-ui--viewscreen .ui-accordion-header.ui-state-hover,
.modern-ui--editscreen .ui-accordion-header.ui-state-default,
.modern-ui--editscreen .ui-accordion-header.ui-state-active,
.modern-ui--editscreen .ui-accordion-header.ui-state-hover,
.relatedlists .ui-accordion-header.ui-state-default,
.relatedlists .ui-accordion-header.ui-state-active,
.relatedlists .ui-accordion-header.ui-state-hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* RESKIN area:"E2 render-accordion section headers (Online Plans view+edit etc.) → drop the grey bar, match E3 card titles" comp:(transparent)/--text-muted was:#f5f5f5 less:modern-ui.css ~26036
   The configurable-ANGULAR engine with accordion=true adds .render-accordion, and operate paints
   those .tab-label headers grey via `.edit-wrapper .edit-wrapper-content .edit-section-accordion
   .render-accordion .tab-label { #f5f5f5 !important }` (0,5,0) — which OUT-SPECIFIES the skin's
   shared .tab-label rules (0,3,0), so Online Plan kept grey bands + big 18px titles while
   Account/Contact (jQuery-UI engine, cleared above) were fixed. Match the full chain (skin loads
   later → wins the tie) and apply the same eyebrow treatment the other engines' headers get. */
.edit-wrapper .edit-wrapper-content .edit-section-accordion .render-accordion .tab-label {
  background: transparent !important;
  background-color: transparent !important;
  /* typography comes from the shared card-title rule (§ align section-title styles) */
}
/* RESKIN area:"E3 with accordion DISABLED (Online Plans etc.) — section headers → drop the grey bar + eyebrow" comp:(transparent)/--text-muted was:#f5f5f5 (operateui, DB-generated theme css — not greppable in repo) less:system.objects launch.ascx ~1798/2448
   Per-module config: when a configurable module's accordion option is OFF, `<%=accordionclass %>`
   renders empty and jQuery-UI never runs — section headers stay plain `h3.page-header` (probed
   live on Online Plans: h3.page-header > .form-group.sectionInformation > … .modern-ui--viewscreen),
   so ALL the skin's ui-accordion-header rules miss them. Same eyebrow treatment as the other
   engines; covers view + edit (editview/editscreen). */
.modern-ui--viewscreen [class*="section"] > h3.page-header,
.modern-ui--viewscreen .viewScreen .form-group > h3.page-header,  /* E3-CUSTOM (Notes/Attachment): bare .form-group parent, no section* token */
.modern-ui--editview [class*="section"] > h3.page-header,
.modern-ui--editscreen [class*="section"] > h3.page-header {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  /* typography comes from the shared card-title rule (§ align section-title styles) */
}
/* RESKIN area:"view/edit page title → editorial serif display" comp:--font-display,--text-body was:Operate default h2 less:edit-wrapper templates (Billing/credit-note, draft-invoice, etc.)
   Same fixed-banner pattern as list views: `.title-sections-angular` is position:fixed; the first
   `.edit-section` clears it with margin-top:55px and the side action navbar (.edit-navbar) with
   margin-top:55px. Size the title, give the banner a defined height, and bump both clearances to match. */
.edit-wrapper .title-sections-angular h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  color: var(--text-body) !important;
  font-size: 32px !important;
  margin: 0 !important;
}
.edit-wrapper .title-sections-angular {
  padding-top: 14px !important;
  padding-bottom: 12px !important;
}

/* RESKIN area:"Point of Sale — cyan keypad + navy totals → elumo blue" comp:--elumo-primary was:#6fc6d8(keypad bg/border)/#202e53(keypad hover + totals footer) less:pos.less
   POS keypad (.button--style) was solid cyan with navy hover; totals footer navy. → elumo blue (white text kept). */
.button--style {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.button--style:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: var(--card-shadow) !important;
}
.pos--sidebar-footer { background: var(--accent) !important; }
/* RESKIN area:"POS section rows blend into the workspace" comp:(transparent) was:#f5f5f5/#fff fills + #cacaca separator borders less:pos.less/pos.htm
   The till's title bar, select-account toolbar and produce/cancel/complete row carried white/grey
   fills + border-bottom separator lines — drop them so the rows sit flat on the canvas. Title bar
   scoped to .col-xs-12 so the Stripe band wrapper (also .pos--primary, but .row + inline white,
   line ~78) is untouched. .pos--secondary base is `#fff !important` so needs !important here. */
.pos--primary.col-xs-12,
.pos--secondary,
.pos--footer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* the keypad scroll area gets `.ps-container` from perfectScrollbar at runtime, which operate gives
   a `border-bottom: 1px #cacaca` (modern-ui.css ~23721) — that's the line between keypad and the
   button row. Drop it. */
.pos--content.ps-container { border-bottom: none !important; }
/* Embedded: fitPOS (embed bridge) gives .pos--content native overflow-y:auto scrolling, so
   perfectScrollbar's own drawn rails DOUBLE the scrollbar — hide the plugin rails and let the
   native bar own it. */
html.embedded .pos--content > .ps-scrollbar-y-rail,
html.embedded .pos--content > .ps-scrollbar-x-rail {
  display: none !important;
}
/* RESKIN area:"POS fits the frame WIDTH (embedded)" comp:(layout) was:sidebar cell expands past 350px less:pos.htm/orderlist.htm/orderlisttotals.htm
   The order sidebar is a fixed 350px table-cell, but its product table (icon/Product/Qty/Price/icon)
   is wider than 350 at natural width → the auto-layout `display:table` expands the cell and pushes
   the whole POS past the iframe (Price column clipped + horizontal scroll). Width is NOT renderPOS-
   locked (it only pins heights inline), so CSS can fix it: pin the outer table to fixed layout (cells
   keep declared widths — sidebar 350, keypad column the rest) and make the sidebar's inner tables
   fit 350 (long product names truncate). Embedded only (html.embedded) → standalone Operate untouched.
   NB the two columns (.pos--content-wrapper + .pos--sidebar-wrapper) are display:table-cell but their
   parent .pos--content-wrapper-global has NO display:table (the referenced `.pos--wrapper` doesn't
   exist in pos.htm), so they fall into an anonymous auto-layout table. Make the parent an explicit
   fixed-layout table so the sidebar can't expand past 350 and the keypad column absorbs the rest. */
html.embedded .pos--content-wrapper-global {
  display: table !important;
  table-layout: fixed !important;
  width: 100% !important;
}
/* display:table sweeps ALL children into columns — content-wrapper-global also holds an empty
   leftover `.pos--push` div (no CSS, old clearfix), which became a stray anonymous table-cell = the
   phantom white box beside the sidebar. Drop it from the table (the modal sibling is position:fixed,
   so it stays out of flow). */
html.embedded .pos--content-wrapper-global > .pos--push { display: none !important; }
html.embedded .pos--sidebar .table,
html.embedded .pos--sidebar-footer .table {
  table-layout: fixed !important;
  width: 100% !important;
}
html.embedded .pos--sidebar .table td,
html.embedded .pos--sidebar .table th {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* …and the Stripe Terminal band lives INSIDE the (now narrower) keypad column. Its row carries two
   350px selects (.pos--terminal-dropdown) + Status + Connect Reader + Pay ≈ 900px natural width, so
   it overflowed the column and spilled under the sidebar totals. Force the band table to share its
   column (fixed layout) and let the selects shrink to their cell. Scoped to the POS footer band and
   embedded — the invoice-preview band (#StripePayArea, wider context) is untouched. */
html.embedded .pos--footer .pos--primary .table {
  table-layout: fixed !important;
  width: 100% !important;
}
html.embedded .pos--footer .pos--terminal-dropdown {
  width: 100% !important;
  min-width: 0 !important;
}
/* Rebalance the fixed-layout band columns. NB fixed layout takes column widths from the table's
   FIRST ROW — here the colspan-5 header th, which provides none — so widths on tbody cells are
   IGNORED (first attempt failed that way). The honoured hook is <col>: pos.htm now carries five
   bare .pos-terminal-col cols; width them here (embedded only) — selects get the lion's share,
   Status readable, buttons compact on the right. */
html.embedded .pos--footer .pos--primary .table col.pos-terminal-col:nth-child(1) { width: 28% !important; }
html.embedded .pos--footer .pos--primary .table col.pos-terminal-col:nth-child(2) { width: 30% !important; }  /* + help icon */
html.embedded .pos--footer .pos--primary .table col.pos-terminal-col:nth-child(3) { width: 20% !important; }
html.embedded .pos--footer .pos--primary .table col.pos-terminal-col:nth-child(4) { width: 13% !important; }
html.embedded .pos--footer .pos--primary .table col.pos-terminal-col:nth-child(5) { width: 9%  !important; }
/* Stripe Terminal — shared .pos--terminal-* classes across POS (pos.htm) and invoice preview
   (invoicepreview.htm). Labels are white ONLY on the accent band (the tokenised inline
   elumo-link bg both templates carry on their band <tr>); everywhere else —
   invoice-preview Location/Reader row, POS Payment Log — they sit on a white row, so the old
   blanket white rule made them invisible (their inline color:gray lost to our !important).
   Muted default also brings that inline gray onto the token. (Selector matches the inline
   style value — keep it in sync with the band markup.) */
.pos--terminal-label { color: var(--text-muted) !important; }
tr[style*="elumo-link"] .pos--terminal-label { color: var(--text-on-accent) !important; }

/* RESKIN area:"Stripe Terminal panel (invoice preview) → white card" comp:--card-* /--accent was:browser-default 3px solid grey (inline border-style:solid with no width/colour on the table) less:invoicepreview.htm #StripePayArea
   The panel's inline styles carry no !important, so the sheet wins outright. Card the wrapper
   (house style: hairline border + accent left edge + radius + shadow) and strip the table's
   inline border; overflow hidden so the blue band follows the card radius. */
#StripePayArea {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  overflow: hidden !important;
}
#StripePayArea > .table { border: none !important; margin-bottom: 0 !important; }

/* RESKIN area:"Stripe Terminal Location/Reader selects → standard input look" comp:--input-* was:unstyled native select (browser chrome) less:pos.htm + invoicepreview.htm .pos--terminal-dropdown */
.pos--terminal-dropdown {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  padding: 5px 8px !important;
  color: var(--text-body) !important;
}
.pos--terminal-dropdown:focus {
  border-color: var(--input-focus-bd) !important;
  box-shadow: 0 0 0 3px var(--input-focus-ring) !important;
  outline: none !important;
}

/* RESKIN area:"Stripe Terminal 'Pay' → CTA (INVOICE PREVIEW only)" comp:--btn-primary was:grey (invoice preview: generic .btn-primary→grey) less:invoicepreview.htm #btnPayNow
   Pay is THE primary action when settling an invoice → CTA there. On POS it is NOT a CTA (the till
   is a flat workspace, no hero button — user call 2026-07-07), so scope OUT the POS Pay: its button
   carries `.button--action` (pos.htm) while the invoice-preview one does not (invoicepreview.htm),
   so `:not(.button--action)` keeps invoice CTA and lets POS Pay fall to the grey .button--action
   rule below. Connect Reader was always grey. */
#btnPayNow.btn:not(.button--action) {
  background: var(--btn-primary-bg) !important;
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border: 1px solid var(--btn-primary-bd) !important;
}
#btnPayNow.btn:not(.button--action):hover, #btnPayNow.btn:not(.button--action):focus, #btnPayNow.btn:not(.button--action):active {
  background: var(--btn-primary-hover) !important;
  background-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-fg) !important;
  border: 1px solid var(--btn-primary-hover) !important;
}

/* POS payment-log box: retint the inline 1px #ccc border onto the token (inline has no !important). */
#log-container { border-color: var(--border-color) !important; }
/* RESKIN area:"POS action buttons + keypad tiles (.button--action / .tillbutton / .button--style) → standard grey" comp:--btn-secondary was:white(.button--action) / #6fc6d8 cyan(.button--style, navy hover) less:pos.less/pos.htm/SelectLetter.htm/tillbuttons.htm
   The till is a flat workspace — every key is grey, no cyan/CTA. `.button--action` forces its inner
   <h3> white; `.button--style` (the A-Z/0-9/New Client/Find keypad tiles + Select* variants) is cyan
   #6fc6d8 with a navy hover and white text — grey the fill AND the inner .circle h2/h3 or they'd be
   white-on-grey. Bare `.button--style` covers the Select* variants too. EXCEPT .btn-danger (Cancel
   stays red). */
.btn.button--action:not(.btn-danger),
.btn.tillbutton,
.button--style {
  background: var(--btn-secondary-bg) !important;
  background-color: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
  box-shadow: none !important;
  /* Flicker fix (Connect Reader et al. in the terminal <table> row): operate's
     `transition: all 0.3s` on .button--action animated incidental sub-pixel changes in the
     auto-layout <td>, thrashing the row's column widths, dropping the cursor and looping. Killing
     the transition stops it (opacity is instant now, doesn't reflow — so we DON'T force opacity:1,
     which would defeat the disabled-state dimming on ng-disabled buttons like Connect Reader).
     border-box keeps our 1px border off the outer size too. */
  box-sizing: border-box !important;
  transition: none !important;
}
.btn.button--action:not(.btn-danger) h3,
.btn.button--action:not(.btn-danger) h2,
.button--style h2, .button--style h3,
.button--style .circle h2, .button--style .circle h3 {
  color: var(--btn-secondary-fg) !important;
}
.btn.button--action:not(.btn-danger):hover,
.btn.tillbutton:hover,
.button--style:hover {
  background: var(--btn-secondary-hover) !important;
  background-color: var(--btn-secondary-hover) !important;
  border: 1px solid var(--btn-secondary-bd) !important;   /* operate hover sets 3px navy border + inset shadow */
  box-shadow: none !important;
  color: var(--btn-secondary-fg) !important;
}
/* inner heading text on hover: COLOUR ONLY — never background, or the h2 (a block the width of the
   .circle) paints a grey box around the letter. */
.btn.button--action:not(.btn-danger):hover h3,
.btn.button--action:not(.btn-danger):hover h2,
.button--style:hover h2, .button--style:hover h3,
.button--style:hover .circle h2, .button--style:hover .circle h3 {
  background: transparent !important;
  color: var(--btn-secondary-fg) !important;
}
/* RESKIN area:"POS Select Account/Contact/Product → CTA" comp:--btn-primary was:grey(.button--action rule above) less:pos.htm
   These three are the entry actions for building an order → CTA accent. Hooked by ng-click so the
   identically-classed New Item (and Produce Invoice etc.) stay grey. `.btn-primary` in the selector
   makes it (0,4,0) — beats the grey `.btn.button--action:not(.btn-danger)` (0,3,0) regardless of order.
   Inner <h3> label → on-accent white. */
.btn.button--action.btn-primary[ng-click="selectaccount()"],
.btn.button--action.btn-primary[ng-click="selectcontact()"],
.btn.button--action.btn-primary[ng-click="selectproduct()"] {
  background: var(--btn-primary-bg) !important;
  background-color: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bd) !important;
  color: var(--btn-primary-fg) !important;
  box-shadow: var(--btn-shadow) !important;
}
.btn.button--action.btn-primary[ng-click="selectaccount()"] h3,
.btn.button--action.btn-primary[ng-click="selectcontact()"] h3,
.btn.button--action.btn-primary[ng-click="selectproduct()"] h3 {
  color: var(--btn-primary-fg) !important;
}
.btn.button--action.btn-primary[ng-click="selectaccount()"]:hover,
.btn.button--action.btn-primary[ng-click="selectcontact()"]:hover,
.btn.button--action.btn-primary[ng-click="selectproduct()"]:hover,
.btn.button--action.btn-primary[ng-click="selectaccount()"]:focus,
.btn.button--action.btn-primary[ng-click="selectcontact()"]:focus,
.btn.button--action.btn-primary[ng-click="selectproduct()"]:focus {
  background: var(--btn-primary-hover) !important;
  background-color: var(--btn-primary-hover) !important;
  border: 1px solid var(--btn-primary-hover) !important;
  color: var(--btn-primary-fg) !important;
}
.btn.button--action.btn-primary[ng-click="selectaccount()"]:hover h3,
.btn.button--action.btn-primary[ng-click="selectcontact()"]:hover h3,
.btn.button--action.btn-primary[ng-click="selectproduct()"]:hover h3 {
  background: transparent !important;
  color: var(--btn-primary-fg) !important;
}

/* RESKIN area:"calendar filter bar → one calm neutral panel (Phase 1)" comp:--elumo-bg/--elumo-text/--btn-secondary/--elumo-primary was:#6fc6d8(.filter-dropdown-container cyan)/#202e53(.main-filters navy)/#fff(#filter-content labels) less:calendar.less + modern-ui.css ~23089/23097/23061
   Collapse the loud cyan + navy filter bands into a single light filter strip; white labels → dark; Reset Filters → grey secondary; active view tab → blue. The dhtmlxScheduler grid itself (.dhx_cal_*) is a separate Phase-2 pass. */
#calendar-screen .filter-dropdown-container { background: var(--filter-panel-bg) !important; }
#calendar-screen .main-filters {
  background-color: var(--filter-panel-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
#calendar-screen #filter-content label { color: var(--text-body) !important; }   /* matches operate's 2-ID rule (#calendar-screen #filter-content label) */
#calendar-screen .resetfilters {
  background: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
}
.calendar-view-tabs .btn.btn-success.active,
.calendar-view-tabs .btn.btn-success.timeline-tab.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
}

/* RESKIN area:"calendar header icons → terracotta brand accent" comp:--accent was:#202e53(navy)/#fff inline less:calendar.less ~13-84
   The recurring/multiple/print/download glyphs (already Lucide-masked: fa-calendar-o/-calendar +
   the new fa-print/-download/-refresh masks) were Operate navy; repaint to the terracotta accent.
   currentColor drives the masks, so `color` recolours the line icon. Matches calendar.less's own
   #calendar-screen 1,2,0 rules; later source + !important wins. */
#calendar-screen .calendar-print,
#calendar-screen .calendar-print i,
#calendar-screen #calendar-export-csv i {
  color: var(--accent) !important;
}
/* The CSV-download <i> keeps its inline navy (color:#202e53 !important) so STOCK Operate — which does
   NOT load this skin — is unchanged. That inline pins currentColor to navy, so paint the Lucide mask
   terracotta DIRECTLY via background-color here (higher specificity + !important beats the shared
   `.fa-download::before` currentColor fill). */
#calendar-screen #calendar-export-csv i::before { background-color: var(--accent) !important; }
/* RESKIN area:"calendar recurring/multiple buttons → a single Lucide icon" less:modules/angular/calendar.less ~13-84
   Each button is a FontAwesome icon PAIR overlaid by absolute positioning: a 30px .fa-calendar-o base
   + a 15px inner glyph (fa-refresh / fa-calendar) at position:absolute (left/top). Hiding one leaves the
   other absolutely positioned → they collapse onto each other. So hide BOTH <i>s and draw ONE 30px mask
   on the anchor (matches the 30px print/download icons). recurring → calendar-sync, multiple → calendar. */
#calendar-screen .recurring-booking > i,
#calendar-screen .multiple-booking > i { display: none !important; }
#calendar-screen .recurring-booking::before,
#calendar-screen .multiple-booking::before {
  content: "" !important;
  display: inline-block;
  width: 30px; height: 30px;
  background-color: var(--accent) !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
#calendar-screen .recurring-booking::before { -webkit-mask-image: var(--m-calendar-sync); mask-image: var(--m-calendar-sync); }
#calendar-screen .multiple-booking::before  { -webkit-mask-image: var(--m-calendars); mask-image: var(--m-calendars); }
/* RESKIN area:"calendar prev/next/today nav buttons → terracotta (was navy fill)" comp:--accent was:#202e53 less:calendar.less ~28-45
   The date-nav cluster the user circled: solid navy buttons → solid terracotta, white glyph/text. */
#calendar-screen .dhx_cal_navline .dhx_cal_prev_button,
#calendar-screen .dhx_cal_navline .dhx_cal_next_button,
#calendar-screen .dhx_cal_navline .dhx_cal_today_button,
#calendar-screen .dhx_cal_today_button {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--text-on-accent) !important;
}
#calendar-screen .dhx_cal_navline .dhx_cal_prev_button i,
#calendar-screen .dhx_cal_navline .dhx_cal_next_button i {
  color: var(--text-on-accent) !important;
}
/* in-grid scale-bar arrows (#6fc6d8 cyan) → terracotta — complete the prev half started in §4 */
#calendar-screen .dhx_scale_bar .dhx_cal_next_button,
#calendar-screen .dhx_scale_bar .dhx_cal_prev_button {
  background: var(--accent) !important;
}

/* RESKIN area:"calendar booking side-action menu → one CTA (Edit), everything else neutral" comp:--btn-secondary/--btn-primary was:#dea6a6(inuse)/#FFC84D(tobecleared)/#afb473(cleared)/striped(standard)/#5CB85C(confirm)/btn-info(notes) less:calendar.less ~307-335
   The .menu-actions stack carried a rainbow of status colours (In Use pink, To Be Cleared amber,
   Cleared olive, Standard stripe, Confirm green, Add Notes blue). Bring them ALL to the neutral
   grey button; only Edit Booking stays the terracotta CTA. Compound (1,3,0) beats calendar.less's
   #calendar-screen .btn.inuse etc (1,2,0). */
#calendar-screen .menu-actions .baction,
#calendar-screen .menu-actions .baction.confirm,
#calendar-screen .menu-actions .baction.inuse,
#calendar-screen .menu-actions .baction.tobecleared,
#calendar-screen .menu-actions .baction.cleared,
#calendar-screen .menu-actions .baction.standard,
#calendar-screen .menu-actions .baction.proforma {
  background: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
  box-shadow: none !important;
}
#calendar-screen .menu-actions .baction:hover,
#calendar-screen .menu-actions .baction:focus,
#calendar-screen .menu-actions .baction:active {
  background: var(--btn-secondary-hover) !important;
  border-color: var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
}
/* Edit Booking = the single CTA in the side menu (terracotta). i18n-keyed so it survives translation. */
#calendar-screen .menu-actions .baction[ng-translation="btn_edit_booking"] {
  background: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bd) !important;
  color: var(--text-on-accent) !important;
  box-shadow: var(--btn-shadow) !important;
}
#calendar-screen .menu-actions .baction[ng-translation="btn_edit_booking"]:hover,
#calendar-screen .menu-actions .baction[ng-translation="btn_edit_booking"]:focus,
#calendar-screen .menu-actions .baction[ng-translation="btn_edit_booking"]:active {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--text-on-accent) !important;
}

/* RESKIN area:"booking detail view → Confirm is the only CTA" comp:--btn-secondary was:--btn-validate(CTA) less:booking.htm + customsubmit.htm
   custom-submit renders .btn.btn-validate, which §3 promotes to the terracotta Save CTA globally —
   so booking.htm's Provisional / Apply Delegate Rate / Produce Invoice all read as CTAs too.
   Demote those THREE (keyed by their click handler so sibling viewscreens' Save stays a CTA) to grey;
   Confirm (custom-submit click="confirmbooking()") keeps the global CTA. btn-warning/-danger/-primary
   here are already neutral via §3. (1,3,1) beats the global .btn.btn-validate (0,2,0). */
#calendar-screen .edit-navbar custom-submit[click="provisionalbooking()"] .btn,
#calendar-screen .edit-navbar custom-submit[click="viewdaydelegate()"] .btn,
#calendar-screen .edit-navbar custom-submit[click="produceinvoice()"] .btn {
  background: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
  box-shadow: none !important;
}
#calendar-screen .edit-navbar custom-submit[click="provisionalbooking()"] .btn:hover,
#calendar-screen .edit-navbar custom-submit[click="viewdaydelegate()"] .btn:hover,
#calendar-screen .edit-navbar custom-submit[click="produceinvoice()"] .btn:hover,
#calendar-screen .edit-navbar custom-submit[click="provisionalbooking()"] .btn:focus,
#calendar-screen .edit-navbar custom-submit[click="viewdaydelegate()"] .btn:focus,
#calendar-screen .edit-navbar custom-submit[click="produceinvoice()"] .btn:focus {
  background: var(--btn-secondary-hover) !important;
  border-color: var(--btn-secondary-bd) !important;
  color: var(--btn-secondary-fg) !important;
}


/* RESKIN area:"settings page → white card tiles (left nav + ONE tile PER CATEGORY)" comp:--elumo-surface was:one big card on .displayitems with <hr> dividers less:Settings/MenuSettings.htm
   The customize grid repeats a category block (h3 title + <hr> + items) inside .displayitems.
   Card each category block instead of the whole column, and drop the now-redundant <hr>
   divider under each title. Selector = the ng-repeat attr Angular leaves on every clone. */
.menusettings-screen .searchtree,
.menusettings-screen .displayitems .row > div[ng-repeat*="selectedCategories"] {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}
.menusettings-screen .displayitems .row > div[ng-repeat*="selectedCategories"] {
  display: flow-root !important;   /* contain the floated item cols so the tile has height */
  padding: 12px 20px !important;
  margin-bottom: 16px !important;
}
.menusettings-screen .displayitems { background: transparent !important; border: none !important; box-shadow: none !important; }
.menusettings-screen .displayitems .row > div[ng-repeat*="selectedCategories"] > hr { display: none !important; }

/* RESKIN area:"integrations page → white card tile for category nav" comp:--elumo-surface was:transparent on grey less:Integrations/integration-list/integrationlistview.htm
   Card the existing .searchtree (category list) — float/margins handled under NON-RESKIN. Integration list (.displayitems) left as-is. */
.integrations-screen .searchtree {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}

/* RESKIN area:"integration settings pages (Desks / Meeting Rooms / Availability / Email+SMS setup / Portal* / GA / Eloqua) → white tile on canvas" comp:--card-* /--canvas-bg was:edge-to-edge white sheet, title on a '#f5f5f5' band less:Settings/**(shared wrapper)
   These module-settings pages all share ONE wrapper: .responsive-content-wrapper >
   .panel.modern-ui-hubcreatesettings. Grey the canvas (same :has pattern as the E3 viewscreen
   rule) and card the settings panel. The page-header banner needs NO work: render-modernui.js
   (~L405) already paints it --canvas-bg when the skin is live, so once the canvas below matches,
   the banner blends away and the title reads as sitting on the background above the tile. */
.responsive-content-wrapper:has(.modern-ui-hubcreatesettings) {
  background: var(--canvas-bg) !important;
}
.panel.modern-ui-hubcreatesettings {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  margin: 52px 24px 16px !important;   /* top: banner+strip are FIXED but other flow offsets (wrapper/panel margins) already push the tile down — 52px lands its edge ~16px under the strip; sides float the tile off the canvas edges (block-level panel — safe, auto-shrinks) */
}
/* Availability.htm nests .panel.modern-ui-hubcreatesettings TWICE (~L8 outer, ~L16 inner — the only
   template that does, audited 2026-07-07), which the card rule above turns into a tile-in-a-tile.
   Un-card any NESTED wrapper so it blends into its parent tile; generic, so a future double-wrapped
   template self-heals. */
.panel.modern-ui-hubcreatesettings .panel.modern-ui-hubcreatesettings {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
/* RESKIN area:"Customise app (Settings→General→Customize: field lists, field view/new wizard) → tile on canvas" comp:--card-* /--canvas-bg was:edge-to-edge white .responsive-content-wrapper, no cards less:Apps/spacedadi.customobjects ucObjectEdit.ascx + ucFieldEdit.ascx
   The Customise app is a WebForms host whose wrappers match none of the skin's page keys
   (.modern-ui-wrap-with-panel for the standard/custom-field + page-layout lists;
   .modern-ui--custom-fields for the choose-field-type step; bare .tab-pane > .panel.panel-body
   for the field details/view steps). Same canvas+tile pattern as the hubcreatesettings pages.
   Top clearance comes from render-modernui's inline margin-top on the wrapper (not set here).
   NB the .tab-pane chain also matches the CampaignEmail / Workflows custom EDIT screens — same
   unthemed primitive, tiled intentionally. */
.responsive-content-wrapper:has(.modern-ui-wrap-with-panel),
.responsive-content-wrapper:has(.modern-ui--custom-fields),
.responsive-content-wrapper:has(> .tab-pane > .panel.panel-body),
.responsive-content-wrapper:has(> .col-md-10 > .panel),
.modern-ui--vwEditView,   /* the field-view shell (float:left width:100% inline) — its area past the wrapper otherwise shows operate's white body as a stray bar */
div:has(> .responsive-content-wrapper > .col-md-10 > .panel) {  /* the same shell for the EDIT state (vwEditEdit has no marker class — match the wrapper's direct parent) */
  background: var(--canvas-bg) !important;
  display: flow-root !important;   /* the wrapper's children are floated (.col-md-10 / sticky panel), so without float containment the wrapper collapses and its canvas paints ~0px — the un-painted band below (br + empty #picklists) read as a white bar */
  border: none !important;         /* the shell may be a bootstrap .panel — with real height its 1px border paints as a stray full-height edge line */
  box-shadow: none !important;
}
.modern-ui-wrap-with-panel,
.responsive-content-wrapper > .panel.modern-ui--custom-fields,
.responsive-content-wrapper > .tab-pane > .panel.panel-body,
.responsive-content-wrapper > .col-md-10 > .panel {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  margin: 16px 24px !important;
  padding: 12px 20px !important;
  display: flow-root !important;   /* contain floated children so the tile has height */
}
/* Field VIEW (vwEditView) + EDIT (vwEditEdit) states render `.responsive-content-wrapper >
   .col-md-10 > .panel` (no .tab-pane) — render-modernui pins the wrapper to inline
   `margin-top:0!important` on these states (DOM-probed), so ALL banner clearance must come from
   the tile itself: fixed banner bottom ≈61px, tile margin 62px → top edge ~77px, a 16px gap. */
.responsive-content-wrapper > .col-md-10 > .panel {
  margin-top: 62px !important;
}
/* Same states: the Edit/Back sticky column carries INLINE `margin-top:25px!important` from
   render-modernui's iframe-popup reset (this host doesn't match the embedded-edit gate that
   skips it), pinning the buttons under the ~61px fixed banner. Inline !important beats any CSS
   margin, so shift with a transform instead — visual offset only, aligns the buttons with the
   tile top (25 + 38 ≈ the tile's 62px clearance + wrapper offset). */
.responsive-content-wrapper:has(> .col-md-10 > .panel) > .modern-ui--sticky-panel {
  transform: translateY(38px) !important;
}
/* Customise LIST states (standard/custom fields, page layouts): the fixed white
   .navbar--page.navbar--generic-top strip (Back to modules) overlapped the tile top and hid the
   New button — the strip is themed globally below (canvas fill + dark button text, the
   "theme the primitive" rule), so here the tile just needs to CLEAR it: strip sits at
   top:45px + ~36px tall ≈ 81px → tile top 96px. */
/* Runtime, render-modernui re-classes this div to `modern-ui-wrap-with-panel panel-body
   panel-default`, and operateui.min.css owns its offset at (0,3,1)!important
   (`body.modern-ui--vwView .modern-ui--vwView .panel-body { margin-top:19px }` — DOM-probed) —
   match those chains with the wrap class appended → (0,4,1) wins. Bare selector kept as the
   pre-JS fallback. */
.modern-ui-wrap-with-panel,
body.modern-ui--vwView .modern-ui--vwView .panel-body.modern-ui-wrap-with-panel,
body.modern-ui--vwEditView .modern-ui--vwEditView .panel-body.modern-ui-wrap-with-panel {
  margin-top: 96px !important;
}
/* The list state's shell (same white-bar mechanism as the view/edit states). border:none —
   the shell is a bootstrap .panel; flow-root gives it real height, so its 1px border otherwise
   paints as a stray full-height line at the content edge. */
div:has(> .responsive-content-wrapper > .modern-ui-wrap-with-panel) {
  background: var(--canvas-bg) !important;
  display: flow-root !important;
  border: none !important;
  box-shadow: none !important;
}
/* New (custom/standard field) → the tile's one primary action: CTA fill. */
.modern-ui-wrap-with-panel p.text-left a.btn.btn-success {
  background: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bd) !important;
  color: var(--btn-primary-fg) !important;
}
.modern-ui-wrap-with-panel p.text-left a.btn.btn-success:hover,
.modern-ui-wrap-with-panel p.text-left a.btn.btn-success:focus {
  background: var(--btn-primary-hover) !important;
  color: var(--btn-primary-fg) !important;
}
/* --- Fixed action strips (.navbar--page) → themed by PRIMITIVE class ---
   Operate paints every strip white (#fff !important, modern-ui ~5875) and forces every anchor
   in it white (`.navbar--page a { color:#fff!important }`, modern-ui ~18588) — invisible once
   the skin neutralises the button fills (the Uninstall failure class). Canvas fill so the strip
   reads as a header band on any host (the hubcreatesettings pages already did this scoped);
   dark text restored on non-CTA anchor buttons (Save/validate CTAs keep their white-on-teal). */
.navbar--page {
  background: var(--canvas-bg) !important;
}
.navbar--page a.btn:not(.btn-save):not(.btn-validate) {
  color: var(--btn-secondary-fg) !important;
}
/* Same pages: the title renders small and the action buttons (Save Settings / Back to modules)
   sit in a SEPARATE fixed white strip (.navbar--page, operate paints #fff !important) under the
   banner — unlike Payload-style pages where actions share the title row. Scope by page content
   (body:has — the Desks strip is a sibling of the wrapper, so no closer ancestor exists):
   title → house display 32px; strip → transparent + pulled up into the banner row so the
   buttons align with the title. Both bars are position:fixed z-999; the strip is later in the
   DOM, so its buttons stay clickable over the banner. */
body:has(.panel.modern-ui-hubcreatesettings) .page-header.has-page-header h2 {
  font-size: 32px !important;
}
/* Actions strip (Back to modules / Save Settings): its POSITION is owned by render-modernui.js
   (~L735 writes an inline top:<n>px!important every layout pass — unbeatable from CSS; three
   attempts to move it into the title row are reverted). RESOLUTION (user): accept the strip in
   its own row BELOW the banner, but make it read as sitting ON the background — strip fill →
   transparent (that's a plain stylesheet rule, which we CAN out-specify), banner is already
   canvas-painted by the JS palleteColor hook, and the tile drops below the strip. */
body:has(.panel.modern-ui-hubcreatesettings) .navbar--page {
  /* CANVAS fill, not transparent: at rest it blends into the background (looks like the buttons
     sit on the page), but the strip is fixed — on scroll content passes underneath, and an opaque
     canvas band keeps it reading as a header instead of buttons floating over the tile. */
  background: var(--canvas-bg) !important;
  padding-right: 24px !important;   /* inset the buttons to match the tile edge */
  /* Position: the render-modernui.js top-write never lands on these strips (they're
     Angular-rendered AFTER the layout pass), so PAGE CSS was positioning them — Desks.css ships
     `top:154px !important` sized for the old full-chrome page (own top navs), which in the
     embedded shell dumps the strip inside the tile. Pin just under the canvas banner instead.
     NB the banner measures ~59.2px with the 32px title (line box + padding-bottom 8): top:44
     clipped the title's descenders under the strip's opaque band; top:60 left a ~1px seam where
     scrolling content peeked between the two bands (fractional banner height). 58px tucks the
     strip ~1px under the banner's bottom PADDING (text line box ends ~8px higher — no clip). */
  top: 58px !important;
}
/* Desks.css also gives ITS wrapper margin-top:60px (same stale full-chrome maths) — neutralise so
   Desks and Meeting Rooms tiles start at the same height (the tile margin below owns clearance).
   Meeting Rooms has the same stale offset TWICE: vno-ui.css `.navbar--page--meetingrooms
   { margin-top:45px !important }` (overridden here) AND inline in the MeetingRooms.js template
   (tokenised to --settings-strip-mt, 0 under the skin — needs a fresh fetch of that JS). */
body:has(.panel.modern-ui-hubcreatesettings) .responsive-content-wrapper.desks-wrapper,
body:has(.panel.modern-ui-hubcreatesettings) .navbar--page.navbar--page--meetingrooms {
  margin-top: 0 !important;
}


/* RESKIN area:"tile/section headers → body font (Open Sans), not serif" comp:--font-base was:--font-display (global heading rule) less:edit-wrapper/view templates + home-dashboard
   PAGE titles (in the fixed banner) stay editorial serif; the headers INSIDE the white tiles
   (Information, Transactions, section names, Quick Links) render in Open Sans semibold. */
.edit-section .title-section h3,
.edit-section-accordion .tab-label,
.modern-ui--viewscreen .form-group[class*="section"] .form-group-label,
.relatedlists .modern-ui--related-list-panel .ui-accordion-header,
.home-dashboard .sidebar h3 {
  font-family: var(--font-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
/* RESKIN area:"align the account-view's two section-title styles" comp:--font-base was:info-section accordion h3 (Geist display 400, ~h3 size) vs related-list title .modern-ui--helptitle (19px, weight 300) less:modern-ui.css helptitle
   The info sections (Information/Financial Data…) title via the accordion h3; the related-list panels
   (Opportunities/Contacts…) title via .modern-ui--helptitle (19px/300) — so the two read differently. Force
   both to the SAME card-title: Geist 16px semibold, no transform. Uses the proven viewscreen accordion-header
   selector (same as the grey-bar fix) — the earlier `.form-group[class*=section] > .ui-accordion-header`
   direct-child form didn't match, leaving info headers lighter than the bold related-list titles. Related
   lists live in the sibling `.relatedlists`, so the viewscreen selector only catches the info sections. */
/* User-standardised (2026-07-07): this card-title is THE section-header style for EVERY engine —
   E1 .title-section h3 / .gheader · E2 .tab-label (± .render-accordion) · E3-on .ui-accordion-header
   · E3-off h3.page-header. (Was E3-only, which left E2/E3-off pages — Events, Online Plans — on the
   provisional eyebrow, reading differently from Accounts.) */
.modern-ui--viewscreen .ui-accordion-header,
.modern-ui--viewscreen .ui-accordion-header span,
.relatedlists .modern-ui--related-list-panel .ui-accordion-header,
.relatedlists .modern-ui--related-list-panel .modern-ui--helptitle,
.edit-section > .gheader,
.edit-section .title-section h3,
.edit-section-accordion .tab .tab-label,
.edit-wrapper .edit-wrapper-content .edit-section-accordion .render-accordion .tab-label,
.modern-ui--viewscreen .form-group[class*="section"] > .form-group-label,
.modern-ui--viewscreen [class*="section"] > h3.page-header,
.modern-ui--viewscreen .viewScreen .form-group > h3.page-header,  /* E3-CUSTOM (Notes/Attachment) */
.modern-ui--editview [class*="section"] > h3.page-header,
.modern-ui--editscreen [class*="section"] > h3.page-header {
  font-family: var(--font-base) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-body) !important;
}

/* RESKIN area:"remove grey title banner + section underlines from titles (all screens)" comp:--canvas-bg was:#f5f5f5 banner / #e1e1e1 section underline less:titlesections.less, edit-wrapper.less
   The fixed page-title banner blends into the cream canvas (kept OPAQUE cream so content scrolling
   under it is masked); section-title grey underlines removed. Dashboards, list views and view/edit. */
.title-sections-angular { background: var(--canvas-bg) !important; }
.edit-wrapper .edit-section .title-section,
.edit-wrapper .edit-section-accordion .title-section { border-bottom: none !important; }

/* RESKIN area:"WebForms view page (E3) header + quick-nav + side actions → sit on the cream canvas" comp:--canvas-bg/--font-display/--text-body was:#f5f5f5 fixed banner + grey tab band + white side panel (.modern-ui--sticky-panel #fff, border-left #e1e1e1) less:system.objects launch.ascx + modern-ui.css ~18458/20864
   The Angular engine uses .title-sections-angular (handled above); the WebForms view engine
   (Account/Contact/etc.) uses .page-header.record-detail instead, so its title, quick-nav tab bar
   and right-hand action column were never brought onto the canvas.
   NOTE the banner background itself is painted by render-modernui.js as an inline !important
   (reads --canvas-bg → cream under the skin, else #f5f5f5) — CSS cannot beat that inline, so the
   .page-header.record-detail background rule below is only a pre-JS/JS-failure fallback. The h2
   sizing (serif scale, not set inline) and the tab-bar + side-panel rules ARE the live CSS. */
.page-header.record-detail {
  background: var(--canvas-bg) !important;
  border-top: none !important;
  border-bottom: none !important;
}
.page-header.record-detail h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  color: var(--text-body) !important;
  font-size: 32px !important;
  margin: 0 !important;
}
/* Quick-nav strip: themed by PRIMITIVE class, not host ancestry — the same
   .link-bar-overflow/.context-bar element ships in TWO engines: E3 inside
   .related-lists-shortcut (launch.ascx ~412) and E2 inside .anchor-section
   (viewview.htm ~15, payment types / credit card types etc.). The old
   .related-lists-shortcut-scoped selectors missed E2, so its fixed white strip
   (modern-ui ~21326 background:#fff) showed as a stray white bar under the banner. */
.related-lists-shortcut,
.link-bar-overflow,
.context-bar {
  background: var(--canvas-bg) !important;
}
/* RESKIN area:"tab-overflow dropdown (grouped-link ☰ menu) → lift above content + flat menu rows (not pills)" comp:--card-radius/--row-hover-bg was:no z-index (rendered behind, unclickable) + display:inline squished PILLS less:modern-ui.css ~21365-21392
   .dropdown-content-bar is position:absolute with NO z-index (stacks behind content to its left); its items
   are display:inline pills (the tab-bar chip style leaks onto the cloned anchors) → cramped stack of buttons.
   Lift it, and turn each overflowed tab into a full-width flat menu row: strip the pill border/radius/fill,
   left-align, comfortable padding, whole-row hover. Reads as a dropdown list, not stacked buttons. */
.dropdown-content-bar {
  z-index: 1001 !important;
  border-radius: var(--card-radius) !important;
  padding: 6px 0 !important;
  width: auto !important;         /* size to the widest row instead of clipping/scrolling a fixed 190px */
  min-width: 190px !important;
  max-width: none !important;
  /* NB do NOT force overflow here — the menu opens via jQuery .slideToggle(200), which sets
     overflow:hidden inline to clip the growing content during the slide. An !important overflow
     override beats that inline style, so the item text spills out ("floats") mid-animation. Leave
     overflow to jQuery (reverts to operate's overflow-y:auto after; content fits so no scrollbar). */
}
.dropdown-content-bar .context-bar-link {
  display: block !important;
  padding: 0 !important;
}
.dropdown-content-bar .context-bar-link a {
  display: flex !important;       /* row: label left, count badge pushed to the right */
  align-items: center !important;
  text-align: left !important;
  white-space: nowrap !important; /* don't wrap long labels — let the menu widen */
  height: auto !important;
  line-height: 1.4 !important;
  padding: 10px 16px !important;
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.dropdown-content-bar .context-bar-link a .related-list-field-name-count,
.dropdown-content-bar .context-bar-link a .badge {
  margin-left: auto !important;   /* pin counts to the right edge → they line up in a column */
}
.dropdown-content-bar .context-bar-link:hover,
.dropdown-content-bar .context-bar-link a:hover {
  background-color: var(--row-hover-bg) !important;
}
.modern-ui--sticky-panel {
  background-color: var(--canvas-bg) !important;
  border-left: none !important;
}
/* NON-RESKIN reason:"side-panel button spacing — the custom quick-action buttons (New Task / Book a tour /
   Log a Call / Send Email) are .btn--link in one .btn--link__container with margin-bottom:0 (tightly stacked),
   while Actions / Back to list use margin-bottom:10px. Match the 10px so the whole column is evenly spaced."
   target:.modern-ui--sticky-panel .btn--link__container a.btn--link change:margin-bottom 0→10px date:2026-07-03 */
.modern-ui--sticky-panel .btn--link__container a.btn--link {
  margin-bottom: 10px !important;
}
/* RESKIN area:"view/edit outer content panel → cream (kill the white gap top-right of the sticky panel)" comp:--canvas-bg was:#fff(.panel#normalview bg) less:system.objects launch.ascx ~263
   The content wrapper .panel (id normalview) is white; the cream tab bar only spans col-md-10 and the cream
   sticky panel starts lower, so the panel's white leaks through the wedge top-right. Its .panel-body is
   transparent, so greying the .panel itself fills the gap. Cards keep their own white bg. :has() scopes to
   view/edit screens (Chrome 105+), like the .responsive-content-wrapper canvas rule above. */
.panel:has(.modern-ui--viewscreen),
.panel:has(.modern-ui--editscreen) {
  background-color: var(--canvas-bg) !important;
}


/* ===================================================================
   §7. EDITORIAL SIGNATURES
   brand layer not expressible as tokens — stays LAST among visual layers
   =================================================================== */
/* ============================================================
   EDITORIAL ADOPTION  (essensys Platform brand system — Operate terracotta)
   ------------------------------------------------------------
   The palette/radius/shadow/font SWAP above re-themes the whole app through the
   token seam. This section adds the editorial signatures that aren't expressible
   as token values alone: serif display type, uppercase eyebrow labels, the card
   accent edge, the pill-button lift, and the accent gradient bleed.
   Several selectors here are PROVISIONAL — Operate's real title/section markup
   varies per render engine; verify against the live DOM and extend. (See the
   change summary's "needs DOM verification" note.)
   ============================================================ */

/* --- Display type: Geist on page + section titles (weight 400, tight -0.025em tracking, per v9 spec) ---
   PROVISIONAL selector set — covers the common title hooks across the WebForms + Angular
   engines; sweep the rest once confirmed on the live DOM. */
h1, h2, h3,
.page-header h1, .page-header h2,
.gtitle, .page-title, .list-title,
.home-dashboard .title-sections-angular h1,
.home-dashboard .title-sections-angular h2,
.modern-ui--viewscreen .gtitle,
.listview-wrapper .gtitle,
.edit-wrapper .gtitle {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  color: var(--text-body) !important;
}

/* --- Eyebrow labels: DASHBOARD kickers only (Quick Links) — UPPERCASE, tracked-out, small.
   Section/card headers were in this group too (marked PROVISIONAL), but the standard is now the
   Accounts card-title (Geist 16px semibold, sentence case) for ALL engines' section headers —
   owned by the aligned card-title rule (§ "align the account-view's two section-title styles"). */
.home-dashboard .sidebar .gheader {
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: var(--font-base) !important;   /* eyebrow is BODY font, not serif */
  color: var(--text-muted) !important;
}
/* Quick-nav tabs (view-page .context-bar-link) share the eyebrow look but at REGULAR
   weight — 600 reads too heavy repeated across a whole row of pills. Weight is set on
   the a.btn too: the label lives in the anchor, which doesn't just inherit from the li. */
.context-bar-link,
.context-bar .context-bar-link a.btn {
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  font-family: var(--font-base) !important;
  color: var(--text-muted) !important;
}
/* NON-RESKIN reason:"quick-nav tab label alignment — each tab anchor holds label text + an inline
   count badge; the badge's taller line box shifts the label's baseline, so labels sit at slightly
   different heights tab-to-tab. Flex-centre the anchor so label and badge share one centred line.
   Scoped to .context-bar — the tab-overflow dropdown (.dropdown-content-bar) is a SIBLING container
   with its own left-aligned flex rows, untouched by this."
   target:.context-bar .context-bar-link a.btn change:inline-flex + centred both axes date:2026-07-07 */
.context-bar .context-bar-link a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.context-bar .context-bar-link a.btn .badge { line-height: 1 !important; }

/* --- Card accent edge: the editorial brand tie is a 3px accent LEFT rule (not a filled card) ---
   Added to every surface the skin already cards, so the terracotta edge appears app-wide. */
.edit-section,
.edit-section-accordion .tab,
.modern-ui--viewscreen .form-group[class*="section"],
.modern-ui--viewscreen .viewScreen > div > .form-group,
.relatedlists .modern-ui--related-list-panel,
.home-dashboard .main,
.home-dashboard .sidebar,
.menusettings-screen .searchtree,
.menusettings-screen .displayitems .row > div[ng-repeat*="selectedCategories"],
.integrations-screen .searchtree {
  border-left: 3px solid var(--accent) !important;
}

/* --- Pill-button elevation: filled CTAs carry a quiet static shadow for authority; feedback is
   colour on hover (--btn-primary-hover, set in the Buttons section) and a shadow press on :active.
   NO hover movement/gloss — positional hover motion + inset highlight read dated in a dense app
   and fight the calm editorial identity. Outline/grey buttons keep box-shadow:none. Hooks = the
   same CTA selectors promoted to primary earlier. */
.btn.btn-validate:has([ng-translation^="btn_save"]),
.btn.btn-validate:has([ng-translation="btn_copy_save"]),
.btn.btn-validate:has([ng-translation="btn_confirm"]),
.btn.btn-validate:has([ng-translation="modal_ok"]),
.btn.btn-save, .btn.btn-success.btn-save, .btn.btn-default.btn-save, .btn.btn-warning.btn-save,
.btn.btn-success.dropdown-toggle,
.btn.btn-success[create-dependency],
.btn.btn-success[ng-translation="btn_edit"],
.btn.btn-success[update-dependency-dynamic],
.actions .btn.btn-success,
#btnPayNow.btn:not(.button--action),
#btnLogin.btn.btn-success, .btnsignin.btn-success {
  box-shadow: var(--btn-shadow) !important;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.btn.btn-validate:has([ng-translation^="btn_save"]):active,
.btn.btn-validate:has([ng-translation="btn_confirm"]):active,
.btn.btn-save:active, .btn.btn-success.btn-save:active,
.btn.btn-success.dropdown-toggle:active,
.actions .btn.btn-success:active,
#btnPayNow.btn:not(.button--action):active,
#btnLogin.btn.btn-success:active, .btnsignin.btn-success:active { box-shadow: none !important; }

/* --- Accent gradient bleed: the editorial signature — a 12% accent wash at the top of the
   page fading into the cream canvas. Approximated on the existing canvas wrappers; a precise
   per-page implementation wants a dedicated top wrapper element (FLAGGED outside-CSS).
   Dashboards only — view/edit pages drop the wash and use the plain cream canvas
   (their `.gwrapper.edit-wrapper` / `.responsive-content-wrapper:has(.modern-ui--viewscreen)`
   background-color rules above), so the white section cards read cleanly on flat cream. --- */
.modern-ui--dashboard,
.home-dashboard {
  background-image: linear-gradient(180deg, var(--accent-tint-strong), var(--canvas-bg) 240px) !important;
  background-repeat: no-repeat !important;
  background-attachment: local !important;
}

/* --- Links: editorial hover drops opacity (rather than darkening) — keep the colour, fade it. --- */
a[href]:hover, a[href]:focus { opacity: .72; }

/* --- Placeholder / faint ink uses the editorial faint tone. --- */
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--text-faint) !important; }

/* ===================================================================
   §8. NON-RESKIN (layout / functional)
   NOT visual-only — will not map to tokens in Phase 2; each reversible.
   =================================================================== */
/* ============================================================
   NON-RESKIN CHANGES  (functional / layout — NOT visual-only)
   ------------------------------------------------------------
   These DEVIATE from the skin's strict "colour/background/border/radius/font
   only" rule. They are product/UX decisions, not theming, so:
     · they will NOT map to design tokens in Phase 2 (don't bake into LESS as colour);
     · each is tagged NON-RESKIN (not RESKIN) and listed separately by audit-skin.sh;
     · each is individually reversible (delete the rule).
   ============================================================ */

/* NON-RESKIN reason:"deemed pointless — reskinning it is wasted effort, so hidden not styled"
   target:.btn-launches (top-nav "Operate" launcher dropdown) change:display:none date:2026-06-10 */
.btn-launches { display: none !important; }

/* NON-RESKIN reason:"spacing/layout (margin) — count badge was touching the tab label; not a colour change"
   target:.context-bar .badge (quick-jump tab count badges) change:margin-left:6px date:2026-06-10 */
.context-bar .badge,
.context-bar-link .badge { margin-left: 6px !important; }

/* NON-RESKIN reason:"layout — gap below each section card (vertical separation between cards)"
   target:.edit-section change:margin-bottom:16px date:2026-06-10 */
.edit-section { margin-bottom: 16px !important; }
/* NON-RESKIN reason:"layout — left inset on the cards' CONTAINER so cards float off the window edge
   WITHOUT pushing their right edge into the sidebar (padding on container, not margin on the card)"
   target:.edit-wrapper-content change:padding-left:15px date:2026-06-10 */
.edit-wrapper-content { padding-left: 15px !important; }

/* NON-RESKIN reason:"layout (padding) — gap between the first sidebar button (Save) and the top of the white sticky-panel tile (Operate pins first button margin-top:0 with no tile padding)"
   target:.modern-ui--sticky-panel change:padding-top:14px date:2026-06-10 */
.modern-ui--sticky-panel { padding-top: 14px !important; }

/* NON-RESKIN reason:"integrations page — the category-filter tile (.searchtree) topped out level with the
   filter box / Integration History row, but the table it filters starts BELOW that row (row height + the
   table's own margin-top:20px), so the two columns looked misaligned. Drop the tile to the table's top edge."
   target:.integrations-screen .searchtree change:margin-top:48px date:2026-07-07 */
.integrations-screen .searchtree { margin-top: 48px !important; }

/* NON-RESKIN reason:"layout — gap between the settings nav tile (.searchtree) and the content tile (.displayitems).
   Reduce .displayitems width by the margin so the row still fits (no overflow); per breakpoint
   (cols are 10/2 at lg, 9/3 at md/sm)." target:.menusettings-screen .displayitems change:margin-left:24px + width calc date:2026-06-11 */
@media (min-width: 1200px) {
  .menusettings-screen .displayitems { width: calc(83.3333% - 24px) !important; margin-left: 24px !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .menusettings-screen .displayitems { width: calc(75% - 24px) !important; margin-left: 24px !important; }
}


/* NON-RESKIN reason:"layout — float the home-dashboard tiles: gap between the two cards + inset from edges.
   Cards are on the .main/.sidebar COLUMNS, so shrink each by the margin (calc) to keep the row at 100%
   (no overflow); md+ only so mobile still stacks full-width. Also zero the row's negative gutters."
   target:.home-dashboard .content/.main/.sidebar change:margin+width(calc) date:2026-06-10 */
.home-dashboard .content.row { margin-left: 0 !important; margin-right: 0 !important; }
@media (min-width: 992px) {
  .home-dashboard .main    { width: calc(66.6667% - 24px) !important; margin: 16px 12px 16px !important; }
  .home-dashboard .sidebar { width: calc(33.3333% - 24px) !important; margin: 16px 12px 16px !important; }
}


/* NON-RESKIN reason:"layout — mock stacks the figure ABOVE its label (markup has label <p> first,
   number <a> second); column-reverse flips the order; label gets top spacing." target:.home-dashboard .dash-item .col-xs-8 change:flex column-reverse date:2026-06-17 */
.home-dashboard .main .dash .dash-item .col-xs-8 {
  display: flex !important;
  flex-direction: column-reverse !important;
}
/* NON-RESKIN reason:"layout — breathing room above the dashboard date; padding INSIDE the grey title
   band (not the root) so the band stays flush to the top while the text drops down." target:.home-dashboard .title-sections-angular change:padding-top:18px date:2026-06-17 */
.home-dashboard .title-sections-angular { padding-top: 18px !important; }

/* NON-RESKIN reason:"layout — .title-sections-angular is a position:fixed pinned banner (min-height 46px);
   Operate clears it with a hard-coded .content-section{margin-top:55px}. The larger serif title makes the
   fixed banner taller than 55px, so the controls slide UNDER it. Give the banner a defined height via
   padding and bump the content clearance to match (≈9px gap, same as Operate's original)."
   target:.listview-wrapper .title-sections-angular + .content-section change:padding + margin-top:72px date:2026-06-17 */
.listview-wrapper .title-sections-angular {
  padding-top: 14px !important;
  padding-bottom: 12px !important;
}
.listview-wrapper .content-section { margin-top: 72px !important; }

/* NON-RESKIN reason:"layout — clear the taller fixed title banner (Operate's defaults assumed a ~46px
   banner: first section margin-top:55px, side navbar margin-top:55px). Exclude .edit-overflowmenu which
   needs its own 90px for the quick-jump anchor bar." target:.edit-wrapper first .edit-section + .edit-navbar change:margin-top:72px date:2026-06-17 */
.edit-wrapper .edit-wrapper-content .edit-section:first-child,
.edit-wrapper .edit-wrapper-content .edit-section-accordion:first-child:not(.edit-overflowmenu) { margin-top: 72px !important; }
.edit-wrapper .edit-navbar { margin-top: 72px !important; }

/* Related-list sections (Opportunities/Contacts/Transactions etc.) live in a SEPARATE `.relatedlists`
   container (NOT `.modern-ui--viewscreen`) as `.modern-ui--related-list-panel` — that's why the viewScreen
   card rule missed them and they rendered grouped with margin-bottom:0. Same surface above gives them the gap.
   They already sit on the grey `.responsive-content-wrapper`, so no extra canvas rule needed.
   NON-RESKIN reason:"layout — these panels are float:left (the info sections are float:none, the ONLY box-model
   difference per DOM probe). The float drops them out of normal flow → inconsistent render + overlap with the
   toolbar/sidebar when expanded. float:none makes them block-flow like the info sections (full-width, nothing
   sits beside them, so the float was vestigial)." target:.relatedlists .modern-ui--related-list-panel change:float:none date:2026-06-11 */
.relatedlists .modern-ui--related-list-panel { float: none !important; }
/* NON-RESKIN reason:"layout — expanded related-list content (toolbar New/Delete + grid) sits flush against the
   grey accordion header; its .ui-accordion-content has padding-top:0. Add a gap below the header. Scoped to
   .relatedlists so info-section content is untouched." target:.relatedlists .modern-ui--related-list-panel .ui-accordion-content change:padding-top:16px date:2026-06-11 */
.relatedlists .modern-ui--related-list-panel .ui-accordion-content { padding-top: 16px !important; }
/* NON-RESKIN reason:"layout — gap between the quick-link bar (.context-bar nav, sits above/outside the viewScreen
   per launch.ascx ~L413 vs viewScreen ~L561) and the first section card. Block margin-top, safe (no overflow)."
   target:.modern-ui--viewscreen change:margin-top:16px date:2026-06-11 */
.modern-ui--viewscreen { margin-top: 16px !important; }

/* NON-RESKIN reason:"hide the 'Go back to the original dashboard / Click here' prompt on the home dashboard (per user).
   Scoped under .home-dashboard so the generic .col-sm-7.text-right column isn't hidden on other pages."
   target:.home-dashboard .title-sections-angular .col-sm-7.hidden-xs.text-right change:display:none date:2026-06-11 */
.home-dashboard .title-sections-angular .col-sm-7.hidden-xs.text-right { display: none !important; }

/* NON-RESKIN reason:"top-bar currency dropdown (.currency-select-ng) sat higher + shorter than the .icontop icons
   (select h18 vs icon h23, centre ~3px high) → not level. Match the icon box height/line-height so it aligns."
   target:.currency-select-ng change:height:23px + line-height:23px date:2026-06-11 */
.currency-select-ng {
  height: 23px !important;
  line-height: 23px !important;
  vertical-align: baseline !important;
}