/* ===========================================================================
   ADAPTERS
   ---------------------------------------------------------------------------
   Two high-traffic areas of the CRM do not read --crm-*: they carry their own
   token sets in literal hex. Redefining --crm-* does nothing for them, so
   without this file the busiest screens in the product keep the stock look
   while everything around them changes -- the single clearest way for a theme
   to read as half-finished.

   Both blocks are re-declared from the theme's tokens. Specificity is the
   whole game here, so it is worth being explicit about why each one wins.
   =========================================================================== */

/* --- Sales: invoices, estimates, proposals, payments, credit notes, items,
       plus the client-portal document views (resources/css/sales.css) --------

   sales.css declares --s-* at (0,1,0) for light and (0,2,1) for dark. Ours is
   (0,2,1) in both, so it outranks the light block outright and ties the dark
   one -- and we load after tailwind.css, so the tie goes to us. */

html[data-theme] :is(body.invoices, body.estimates, body.proposals, body.payments,
                     body.credit_notes, body.invoice_items,
                     body.viewinvoice, body.viewestimate, body.proposal-view) {
  --s-surface:       var(--thm-surface-fill);
  --s-surface-2:     var(--crm-surface-2);
  --s-surface-3:     var(--crm-surface-3);
  --s-border:        var(--thm-surface-stroke);
  --s-border-strong: var(--thm-elevated-stroke);
  --s-ink:           var(--crm-ink);
  --s-ink-2:         var(--crm-ink-2);
  --s-ink-3:         var(--crm-ink-3);
  --s-brand:         var(--crm-brand);
  --s-brand-soft:    var(--crm-brand-soft);
  --s-ok:            var(--crm-ok);    --s-ok-bg:    var(--crm-ok-bg);
  --s-wait:          var(--crm-warn);  --s-wait-bg:  var(--crm-warn-bg);
  --s-bad:           var(--crm-bad);   --s-bad-bg:   var(--crm-bad-bg);
  --s-draft:         var(--crm-ink-2); --s-draft-bg: var(--crm-surface-3);
  --s-info:          var(--crm-brand); --s-info-bg:  var(--crm-brand-soft);
  --s-shadow:        var(--thm-surface-shadow);
  --s-radius:        var(--thm-surface-radius);
}

/* sales.css paints its fields and select buttons with a literal 8px corner
   and --s-border-strong, which is the ELEVATED stroke -- black in Swiss --
   where every other field in the CRM uses the field stroke and the control
   corner. On the invoice list that turned the currency switch into a
   rounded, heavy-bordered box sitting in a square theme. Same tokens as
   everywhere else, then.

   Two selectors, not one :is(): :is() takes the specificity of its heaviest
   argument, which lifted the plain .form-control to (0,5,2) and let it
   round the inner corners of every input group on these pages -- the table
   search came apart from its magnifier. Apart, the field is (0,3,2): enough
   for sales.css's (0,2,1), and below the input-group joins in
   components.css. */
html[data-theme] :is(body.invoices, body.estimates, body.proposals, body.payments,
                     body.credit_notes, body.invoice_items,
                     body.viewinvoice, body.viewestimate, body.proposal-view) .form-control,
html[data-theme] :is(body.invoices, body.estimates, body.proposals, body.payments,
                     body.credit_notes, body.invoice_items,
                     body.viewinvoice, body.viewestimate, body.proposal-view)
  .bootstrap-select > .btn.dropdown-toggle {
  background-color: var(--thm-field-fill);
  border-color: var(--thm-field-stroke);
  border-radius: var(--thm-control-radius);
}

html[data-theme] :is(body.invoices, body.estimates, body.proposals, body.payments,
                     body.credit_notes, body.invoice_items,
                     body.viewinvoice, body.viewestimate, body.proposal-view)
  textarea.form-control {
  border-radius: min(var(--thm-control-radius), var(--thm-surface-radius));
}

/* The sales status pills (.s-status) take their text straight from --s-ok,
   --s-bad and friends at (0,3,1), past the label rules in components.css.
   Same 30% pull toward the ink as every other status text: plain, "Por
   pagar" measured 4.33:1 on Liquid Glass and Aurora dark. */
html[data-theme] :is(body.invoices, body.estimates, body.proposals, body.payments,
                     body.credit_notes, body.invoice_items,
                     body.viewinvoice, body.viewestimate, body.proposal-view) .s-status.label-success {
  color: color-mix(in srgb, var(--s-ok) 70%, var(--crm-ink));
}

html[data-theme] :is(body.invoices, body.estimates, body.proposals, body.payments,
                     body.credit_notes, body.invoice_items,
                     body.viewinvoice, body.viewestimate, body.proposal-view) .s-status.label-warning {
  color: color-mix(in srgb, var(--s-wait) 70%, var(--crm-ink));
}

html[data-theme] :is(body.invoices, body.estimates, body.proposals, body.payments,
                     body.credit_notes, body.invoice_items,
                     body.viewinvoice, body.viewestimate, body.proposal-view) .s-status.label-danger {
  color: color-mix(in srgb, var(--s-bad) 70%, var(--crm-ink));
}

html[data-theme] :is(body.invoices, body.estimates, body.proposals, body.payments,
                     body.credit_notes, body.invoice_items,
                     body.viewinvoice, body.viewestimate, body.proposal-view) .s-status:is(.label-info, .label-primary) {
  color: color-mix(in srgb, var(--s-info) 70%, var(--crm-ink));
}

/* --- Pole studio (modules/pole_studio/views/_styles.php) ---------------------
   The module reads --crm-* for everything but its brand: --ps-brand is a
   fixed indigo (#3D3A9E, #8E8AF0 in dark), so its chips, pills, tabs and
   notes stayed violet in Swiss's red and Bold's blue. Its <style> sits in
   the <body>, after our sheets, and its dark block is (1,1,1); body lifts
   ours to (1,1,2).

   --ps-brand is mostly TEXT (pills, chips, notes, tags), so it takes the
   brand pulled toward the ink, like every brand text in the core. The three
   places that use it as a FILL under white text take the plain brand and
   the text that belongs on it. The plum accent is the module's second
   colour and has no token to map to; it stays. The avatars are inline
   gradients written by the views and stay too. */
html[data-theme] body #pole-studio {
  --ps-brand:      color-mix(in srgb, var(--crm-brand) 70%, var(--crm-ink));
  --ps-brand-soft: var(--crm-brand-soft);
  --ps-radius:     var(--thm-surface-radius);
}

html[data-theme] body #pole-studio :is(.ps-day.on, .ps-msg.mine, .ps-trick.on.ps-tone-brand) {
  background: var(--crm-brand);
  border-color: var(--crm-brand);
  color: var(--thm-on-brand);
}

/* Its notes (.ps-note.warn and friends) are alerts in all but name. A link
   inside one took the link colour, tuned for the surface: red on the amber
   note measured 2.6:1 in Swiss dark. Same answer as the CRM's alerts -- the
   note's own text, underlined. */
html[data-theme] #pole-studio .ps-note a:not(.btn) {
  color: inherit;
  text-decoration: underline;
}

/* --- Electronic invoicing (modules/electronic_invoicing/views/_styles.php) ---

   That module inlines its <style> inside the <body>, so it always beats us on
   source order. Its selector is the bare id, (1,0,0); ours adds the attribute
   for (1,0,1) and wins on specificity instead. --ei-mono is left alone: it is
   a font stack, not a colour. */

html[data-theme] #electronic-invoicing {
  --ei-canvas:       transparent;
  --ei-surface:      var(--thm-surface-fill);
  --ei-surface-2:    var(--crm-surface-2);
  --ei-border:       var(--thm-surface-stroke);
  --ei-border-strong:var(--thm-elevated-stroke);
  --ei-ink:          var(--crm-ink);
  --ei-ink-2:        var(--crm-ink-2);
  --ei-ink-3:        var(--crm-ink-3);
  --ei-brand:        var(--crm-brand);
  --ei-brand-soft:   var(--crm-brand-soft);
  --ei-ok:           var(--crm-ok);    --ei-ok-bg:     var(--crm-ok-bg);
  --ei-wait:         var(--crm-warn);  --ei-wait-bg:   var(--crm-warn-bg);
  --ei-bad:          var(--crm-bad);   --ei-bad-bg:    var(--crm-bad-bg);
  --ei-draft:        var(--crm-ink-2); --ei-draft-bg:  var(--crm-surface-3);
  --ei-cancel:       var(--crm-ink-3); --ei-cancel-bg: var(--crm-surface-3);
  --ei-shadow:       var(--thm-surface-shadow);
  --ei-radius:       var(--thm-surface-radius);
}

/* The module writes literal white on --ei-brand: the "FE" glyph, the primary
   button (with !important) and the active step. A dark palette lightens the
   brand and the white went with it: 1.5:1. Text on brand is on-brand. The
   done step sits on the ok fill, which has no on-colour of its own; the
   opaque surface is dark where ok is light and light where it is dark. The
   provider's logo keeps its own colours: they are the provider's brand. */
html[data-theme] #electronic-invoicing .ei-glyph,
html[data-theme] #electronic-invoicing .ei-step.active .ei-step-num {
  color: var(--thm-on-brand);
}

html[data-theme] #electronic-invoicing .ei-btn-primary,
html[data-theme] #electronic-invoicing .ei-btn-primary:hover {
  color: var(--thm-on-brand) !important;
}

html[data-theme] #electronic-invoicing .ei-step.done .ei-step-num {
  color: var(--crm-surface);
}