/**
 * app-overrides.css
 *
 * Loaded AFTER app.css (Tailwind compiled output) on every page.
 * Fixes specificity issues where the @tailwindcss/forms plugin
 * overrides utility classes like pl-10, bg-gray-900, etc.
 *
 * ROOT CAUSE: The forms plugin applies base styles to bare attribute
 * selectors like [type=email], [type=text], etc. These have the same
 * specificity as utility classes (.pl-10, .bg-gray-900) but appear
 * LATER in the compiled CSS — so they win via cascade ordering.
 *
 * This file restores the correct behaviour with !important on the
 * specific utilities that get overridden.
 */

/* ── Padding-left on inputs with icons ───────────────────────────
   Any input using pl-* for icon spacing needs these to beat the
   Tailwind Forms plugin's padding reset. Without this, the plugin's
   0.75rem default wins because it's lower in the cascade — icons
   overlap the typed text. */
.pl-3    { padding-left: 0.75rem !important; }
.pl-3\.5 { padding-left: 0.875rem !important; }
.pl-4    { padding-left: 1rem    !important; }
.pl-8    { padding-left: 2rem    !important; }
.pl-9    { padding-left: 2.25rem !important; }
.pl-10   { padding-left: 2.5rem  !important; }
.pl-11   { padding-left: 2.75rem !important; }
.pl-12   { padding-left: 3rem    !important; }

/* ── Logical padding (RTL-safe) on inputs with icons ─────────────
   Same override as pl-* above, but for ps-/pe- logical utilities
   that flip automatically in [dir=rtl].
   IMPORTANT: Tailwind purges unused utilities from the compiled
   app.css, so any logical class added via templates MUST be listed
   here or it won't exist at runtime. */
.ps-3    { padding-inline-start: 0.75rem !important; }
.ps-3\.5 { padding-inline-start: 0.875rem !important; }
.ps-9    { padding-inline-start: 2.25rem !important; }
.ps-10   { padding-inline-start: 2.5rem  !important; }
.ps-11   { padding-inline-start: 2.75rem !important; }
.ps-12   { padding-inline-start: 3rem    !important; }
.pe-3    { padding-inline-end: 0.75rem !important; }
.pe-3\.5 { padding-inline-end: 0.875rem !important; }
.pe-4    { padding-inline-end: 1rem    !important; }
.pe-8    { padding-inline-end: 2rem    !important; }
.pe-10   { padding-inline-end: 2.5rem  !important; }

/* Logical inset positioning — inset-inline-start/end.
   Needed wherever absolute icon containers replaced left-0/right-0
   with start-0/end-0. */
.start-0 { inset-inline-start: 0 !important; }
.end-0   { inset-inline-end: 0 !important; }
.start-3 { inset-inline-start: 0.75rem !important; }
.end-3   { inset-inline-end: 0.75rem !important; }

/* Negative margins that weren't in the original compiled bundle. */
.-mt-2 { margin-top: -0.5rem !important; }

/* ── RTL directional glyph flip ─────────────────────────────────
   Arrows and chevrons that indicate "forward/next" must flip in RTL
   to point toward the start of the reading flow. These rules cover
   FontAwesome directional icons site-wide plus a manual .rtl-flip
   helper for literal unicode arrows in text ("View all →"). */
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-arrow-right-long,
[dir="rtl"] .fa-arrow-left-long,
[dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-caret-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left {
  transform: scaleX(-1);
}
[dir="rtl"] .rtl-flip { display: inline-block; transform: scaleX(-1); }

/* ── Background/text colors on dark-theme inputs ─────────────────
   The forms plugin sets background-color:#fff on all text-like inputs.
   These ensure bg-gray-800/900 + text-white actually apply. */
.bg-gray-800 { background-color: rgb(31 41 55)  !important; }
.bg-gray-900 { background-color: rgb(17 24 39)  !important; }
.text-white   { color: rgb(255 255 255) !important; }
.text-gray-200 { color: rgb(229 231 235) !important; }
.text-gray-300 { color: rgb(209 213 219) !important; }
.text-gray-900 { color: rgb(17 24 39) !important; }

/* ── Border colors ───────────────────────────────────────────────
   Forms plugin resets border-color too. */
.border-gray-300 { border-color: rgb(209 213 219) !important; }
.border-gray-600 { border-color: rgb(75 85 99) !important; }
.border-gray-700 { border-color: rgb(55 65 81) !important; }

/* ── Chrome/Edge autofill ────────────────────────────────────────
   Browser autofill forces a white/yellow background on filled inputs.
   These rules preserve the page's theme on autofill. */

/* Dark pages (admin, verify) */
.bg-gray-900 input:-webkit-autofill,
input.bg-gray-900:-webkit-autofill,
input:-webkit-autofill {
  /* Let the page's own autofill rules win — this is just a safety net */
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Placeholder colors ──────────────────────────────────────────
   Forms plugin resets placeholder too. */
.placeholder-gray-400::placeholder { color: rgb(156 163 175) !important; }
.placeholder-gray-500::placeholder { color: rgb(107 114 128) !important; }