/* ===========================================================================
   UTILITY REMAP
   ---------------------------------------------------------------------------
   Perfex's own views paint literal Tailwind backgrounds into the markup --
   43 tw-bg-white and 26 tw-bg-neutral-50 in application/views/admin alone.
   Left alone, each one punches an opaque rectangle through the glass, which is
   what makes a themed CRM look half-finished rather than translucent.

   The dark-mode retrofit needed the same layer (resources/css/theme-tokens.css
   has ~30 of these under html[data-theme="dark"]); those are dark-only, so a
   light theme has to bring its own.

   Prefixed with html[data-theme] to outrank the plain utility, and repeated
   with !important where the markup itself used Tailwind's ! modifier -- a
   plain rule cannot beat an !important one no matter how specific.
   =========================================================================== */

html[data-theme] .tw-bg-white,
html[data-theme] .tw-bg-neutral-50 {
  background-color: var(--thm-surface-fill);
}

/* These are quiet CONTROLS -- search fields, chips, the per-column toggles in
   table.css -- not hover states. Mapping them onto the hover fill turned them
   white on a white panel and they vanished: visible in dark, gone in light. */
html[data-theme] .tw-bg-neutral-100,
html[data-theme] .tw-bg-neutral-200 {
  background-color: var(--thm-sunken-fill);
}

html[data-theme] .tw-bg-neutral-300 {
  background-color: var(--thm-active-fill);
}

/* The same grey as a light veil (the expense form's tax box is
   tw-bg-neutral-50/30). A white veil turns grey on a dark panel: the labels
   inside fell to 2.6:1 and "+ Impuesto" to 2.0:1. Even the sunken fill cost
   that link AA on Liquid Glass dark (4.4:1): the box sits on the panel, and
   its border already outlines it. */
html[data-theme] .tw-bg-neutral-50\/30 {
  background-color: transparent;
}

html[data-theme] .hover\:tw-bg-neutral-200\/60:hover {
  background-color: var(--thm-hover-fill);
}

/* A client's reply in a ticket thread, tinted sky: the admin twin of the
   portal's .client-reply. */
html[data-theme] .tw-bg-info-50\/30 {
  background-color: var(--crm-brand-soft);
}

/* The header's search field is written as !tw-bg-neutral-100 !tw-border-white
   (application/views/admin/includes/header.php), so ours needs the same
   weapon. */
html[data-theme] .\!tw-bg-neutral-100 {
  background-color: var(--thm-elevated-fill) !important;
}

html[data-theme] .\!tw-border-white {
  border-color: var(--thm-surface-stroke) !important;
}

/* Same field, same weapon: its corner is !tw-rounded-lg, a fixed 8px that
   stayed round in Swiss and square-ish next to Dynamic's pills. It is a
   control, so it takes the control corner. Scoped to the one element: the
   class is used on cards elsewhere, which are not controls. */
html[data-theme] #search_input.\!tw-rounded-lg {
  border-radius: var(--thm-control-radius) !important;
}

/* The header's quick-create "+" (application/views/admin/includes/header.php,
   the only use in the views) is Tailwind's own blue with literal white text:
   blue in Swiss's red theme, and white on Neon's pale cyan where it cannot be
   read. It is the brand, so it takes the brand and the text that sits on it. */
html[data-theme] .tw-bg-primary-600 {
  background-color: var(--crm-brand);
  color: var(--thm-on-brand);
}

html[data-theme] .group:hover .group-hover\:\!tw-bg-primary-700 {
  background-color: var(--crm-brand) !important;
  filter: brightness(.92);
}

/* The rest of the primary utilities in the views: the active tab of a
   customer's profile ("Perfil") and a few links and edges. Same colour as
   every other brand text -- brand pulled 30% toward the ink, which holds AA
   in all ten themes. */
html[data-theme] .tw-text-primary-600,
html[data-theme] .hover\:tw-text-primary-600:hover,
html[data-theme] .group:hover .group-hover\:tw-text-primary-600 {
  color: color-mix(in srgb, var(--crm-brand) 70%, var(--crm-ink));
}

html[data-theme] .tw-border-primary-600 {
  border-color: var(--crm-brand);
}

/* The two quiet greys of the markup (tw-text-neutral-400 and -500) are
   Tailwind literals: the finance progress figures sat at 2.3:1 and the
   sidebar's e-mail at 3.95:1 on its sunken card. They are the theme's
   quietest ink, which check-contrast.php holds to AA. */
html[data-theme] .tw-text-neutral-400,
html[data-theme] .tw-text-neutral-500 {
  color: var(--crm-ink-3);
}

/* The tax rows under an invoice or estimate are written !tw-text-neutral-700
   (invoice_preview_html.php:200 and its siblings): a slate that the dark
   palette cannot reach through the !, 1.4:1. */
html[data-theme] .\!tw-text-neutral-700 {
  color: var(--crm-ink-2) !important;
}

/* Borders that outline those same cards; without this they keep a hard
   light-grey edge that reads as a seam on glass. */
html[data-theme] .tw-border-neutral-200,
html[data-theme] .tw-border-neutral-300,
html[data-theme] .tw-border-neutral-300\/80 {
  border-color: var(--thm-surface-stroke);
}