/* ──────────────────────────────────────────────────────────────────────────
   InOneLink — shared surface style.

   The finance pages (Profit, Cash, Balance Sheet, POS, Customers, Returns)
   were built on a calm system: flat cards, one radius, a hairline border,
   almost no shadow and no gradients. The older pages were built on Tailwind
   utilities with rounded-2xl, shadow-lg and a lot of gradient fills, so
   moving between the two felt like two different products.

   This sheet brings the older pages onto the same surface without rewriting
   their markup. It deliberately touches surfaces and type only — never
   layout, never spacing that a page relies on to position things.
   Loaded last, so it wins over the utilities it is correcting.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --il-bg:       #f6f7f9;
  --il-surface:  #ffffff;
  --il-line:     #e9edf2;
  --il-line-soft:#f1f5f9;
  --il-ink:      #0f172a;
  --il-ink-2:    #334155;
  --il-muted:    #64748b;
  --il-faint:    #94a3b8;
  --il-radius:   14px;
  --il-shadow:   0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}

/* `html body` beats the utility class the pages set on <body>, which
   resolved to transparent and left the page with no ground of its own. */
html body, body.bg-white{
  background-color: var(--il-bg) !important;
  background-image: none !important;
}
body{
  color: var(--il-ink);
  font-family: 'Inter','Noto Sans Khmer',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- surfaces ----------------------------------------------------------
   One radius and one shadow. The heavy drop shadows read as "floating
   object"; at this density everything was floating, which flattens the
   hierarchy rather than creating one. */
.bg-white.rounded-2xl, .bg-white.rounded-xl, .bg-white.rounded-lg,
.stat-card, .card, .glass-card{
  border-radius: var(--il-radius) !important;
  box-shadow: var(--il-shadow) !important;
}
/* Only repaint a card that has not chosen its own colour. A card carrying a
   dark utility -- the Cash page's "Total on hand" is `card bg-slate-900` --
   or one holding white text is deliberately dark, and forcing it white made
   its own text vanish. */
.bg-white.rounded-2xl, .bg-white.rounded-xl, .bg-white.rounded-lg,
.stat-card, .card, .glass-card{
  border: 1px solid var(--il-line);
}
:is(.bg-white.rounded-2xl,.bg-white.rounded-xl,.bg-white.rounded-lg,.stat-card,.card,.glass-card):not([class*="text-white"]):not([class*="bg-slate-"]):not([class*="bg-gray-"]):not([class*="bg-zinc-"]):not([class*="bg-neutral-"]):not([class*="bg-indigo-"]):not([class*="bg-purple-"]):not([class*="bg-emerald-"]):not([class*="bg-rose-"]):not([class*="bg-amber-"]):not([class*="bg-teal-"]):not([class*="bg-blue-"]):not([class*="bg-green-"]):not([class*="bg-red-"]){
  background-image: none !important;
  background-color: var(--il-surface) !important;
  border: 1px solid var(--il-line) !important;
}

/* A gradient fill on a container is decoration competing with the data it
   holds. Panels go flat; buttons and badges keep their colour below. */
[class*="bg-gradient-to-"]:is(div,section,header,aside,li,td,th){
  background-image: none !important;
}
.stat-card [class*="bg-gradient-to-"]{ background-image: none !important; }

/* ---- the one place colour still earns its keep -------------------------
   Primary actions stay solid and confident; they are the only saturated
   surface on the page, so they read as the thing to press. */
/* Strip the gradient only where a solid colour is supplied below; a bare
   `background-image:none` on .btn-primary left a white button on a white
   card with white text. */
.btn-primary, .btn.btn-primary{
  background-image: none !important;
  background-color: #4f46e5 !important;
  color: #fff !important;
}

/* ---- type --------------------------------------------------------------
   Figures line up in columns; proportional digits make a price list look
   ragged and make totals hard to compare down a column. */
table td, table th, .num, [class*="text-"][class*="font-bold"]:has(+ *),
input[type="number"]{ font-variant-numeric: tabular-nums; }

table th{
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--il-faint); font-weight: 600; text-align: left;
}
table td{ color: var(--il-ink-2); }
table tbody tr{ border-top: 1px solid var(--il-line-soft); }

/* ---- controls ---------------------------------------------------------- */
input:not([type=checkbox]):not([type=radio]), select, textarea{
  border-radius: 10px !important;
}
input:focus, select:focus, textarea:focus{ outline: none; }

/* ---- restraint ---------------------------------------------------------
   Rings and double borders on every card produced visual noise with no
   information in it. */
.ring, .ring-1, .ring-2{ --tw-ring-shadow: 0 0 #0000 !important; }

@media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; } }

/* ---- decoration ---------------------------------------------------------
   Animated gradient blobs drifting behind the content. They are aria-hidden,
   carry no information, and are the loudest thing on a page whose job is to
   show stock figures. The calm pages never had them. */
.floating-shapes, .shape{ display: none !important; }

/* ---- the page itself ----------------------------------------------------
   A gradient on <html> shows through everywhere and fights every surface
   sitting on it. */
html{ background-image: none !important; background-color: var(--il-bg) !important; }

/* Table headers are a label row, not a surface to decorate. */
thead, thead tr, thead th{ background-image: none !important; }
thead th{ background-color: #fbfcfd !important; }

/* ---- primary actions ----------------------------------------------------
   Buttons keep their colour — they are the one thing on the page that should
   pull the eye — but as a single confident fill rather than a two-stop
   gradient. Each pair below resolves to the stronger end of the gradient it
   replaces, so nothing changes meaning or loses contrast. Any pair not
   listed keeps its gradient rather than risking a colourless control. */
:is(button,a).bg-gradient-to-r.from-indigo-600.to-purple-600,
:is(button,a).bg-gradient-to-r.from-indigo-500.to-purple-600,
:is(button,a).bg-gradient-to-r.from-violet-500.to-purple-600,
:is(button,a).bg-gradient-to-r.from-purple-600.to-pink-600,
:is(button,a).bg-gradient-to-r.from-indigo-500.to-purple-500,
:is(button,a).bg-gradient-to-r.from-purple-500.to-pink-500{
  background-image:none !important; background-color:#7c3aed !important;
}
:is(button,a).bg-gradient-to-r.from-purple-500.to-indigo-500,
:is(button,a).bg-gradient-to-r.from-purple-600.to-indigo-600,
:is(button,a).bg-gradient-to-r.from-blue-600.to-indigo-600,
:is(button,a).bg-gradient-to-r.from-blue-500.to-indigo-600{
  background-image:none !important; background-color:#4f46e5 !important;
}
:is(button,a).bg-gradient-to-r.from-blue-500.to-blue-600{
  background-image:none !important; background-color:#2563eb !important;
}
:is(button,a).bg-gradient-to-r.from-green-500.to-emerald-600,
:is(button,a).bg-gradient-to-r.from-emerald-500.to-teal-600{
  background-image:none !important; background-color:#059669 !important;
}
:is(button,a).bg-gradient-to-r.from-orange-500.to-red-600,
:is(button,a).bg-gradient-to-r.from-orange-500.to-pink-500{
  background-image:none !important; background-color:#ea580c !important;
}
:is(button,a).bg-gradient-to-r.from-pink-500.to-rose-600{
  background-image:none !important; background-color:#e11d48 !important;
}
/* The hover variants would re-introduce the gradient on pointer-over. */
:is(button,a)[class*="hover:from-"]:hover{ background-image: none !important; }

/* ---- small decorative fills --------------------------------------------
   Icon chips, badges and injected banners also carried two-stop fills. At
   16-32px a gradient reads as noise, not as colour. These keep their hue as
   a flat tint so the icon inside stays legible. */
span[class*="bg-gradient-to-"], .page-lock-banner, #page-lock-banner,
.floating-save-btn, [class*="bg-gradient-to-"][class*="rounded-full"]{
  background-image: none !important;
}
span[class*="bg-gradient-to-"][class*="from-indigo"],
span[class*="bg-gradient-to-"][class*="from-purple"],
span[class*="bg-gradient-to-"][class*="from-violet"]{ background-color:#6366f1 !important; }
span[class*="bg-gradient-to-"][class*="from-blue"]   { background-color:#3b82f6 !important; }
span[class*="bg-gradient-to-"][class*="from-green"],
span[class*="bg-gradient-to-"][class*="from-emerald"]{ background-color:#10b981 !important; }
span[class*="bg-gradient-to-"][class*="from-orange"],
span[class*="bg-gradient-to-"][class*="from-amber"]  { background-color:#f59e0b !important; }
span[class*="bg-gradient-to-"][class*="from-pink"],
span[class*="bg-gradient-to-"][class*="from-rose"]   { background-color:#ec4899 !important; }
span[class*="bg-gradient-to-"][class*="from-red"]    { background-color:#ef4444 !important; }
span[class*="bg-gradient-to-"][class*="from-teal"],
span[class*="bg-gradient-to-"][class*="from-cyan"]   { background-color:#14b8a6 !important; }
span[class*="bg-gradient-to-"][class*="from-gray"],
span[class*="bg-gradient-to-"][class*="from-slate"]  { background-color:#64748b !important; }
#page-lock-banner, .page-lock-banner{ background-color:#fffbeb !important; }
.floating-save-btn{ background-color:#4f46e5 !important; }

/* ---- last surfaces ------------------------------------------------------ */
/* Its text is white, so the banner has to stay dark. */
.welcome-banner{ background-image:none !important; background-color:#5b5bd6 !important; color:#fff !important; }
.welcome-banner *{ color:#fff; }

/* Gradient-filled text. The gradient is clipped to the glyphs, so removing
   it alone leaves transparent letters -- the fill colour has to come back
   at the same time. */
.text-gradient, .gradient-text{
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--il-ink) !important;
}

#plusBtn, #premiumBtn{ background-image:none !important; }
#plusBtn:not([disabled]):not([class*="bg-gray"]):not([class*="bg-amber"]):not([class*="bg-slate"])
           { background-color:#4f46e5 !important; }
#premiumBtn{ background-color:#7c3aed !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Never flatten a surface out from under white text.

   The rule above removes gradient fills from containers. Where that container
   was a coloured modal header, banner or badge carrying `text-white`, taking
   the fill away left white text on a white card -- invisible. These restore a
   solid fill keyed to the colour the gradient started from, so the element
   keeps its meaning (red = destructive, green = good) and its contrast.
   Higher specificity than the flatten rule, so it wins.
   ────────────────────────────────────────────────────────────────────────── */
[class*="bg-gradient-to-"][class*="text-white"],
[class*="bg-gradient-to-"]:has(> .text-white){ background-image: none !important; }

[class*="bg-gradient-to-"][class*="text-white"][class*="from-indigo"]  { background-color:#4f46e5 !important; }
[class*="bg-gradient-to-"][class*="text-white"][class*="from-blue"]    { background-color:#2563eb !important; }
[class*="bg-gradient-to-"][class*="text-white"][class*="from-sky"]     { background-color:#0284c7 !important; }
[class*="bg-gradient-to-"][class*="text-white"][class*="from-purple"],
[class*="bg-gradient-to-"][class*="text-white"][class*="from-violet"],
[class*="bg-gradient-to-"][class*="text-white"][class*="from-fuchsia"] { background-color:#7c3aed !important; }
[class*="bg-gradient-to-"][class*="text-white"][class*="from-pink"]    { background-color:#db2777 !important; }
[class*="bg-gradient-to-"][class*="text-white"][class*="from-rose"],
[class*="bg-gradient-to-"][class*="text-white"][class*="from-red"]     { background-color:#dc2626 !important; }
[class*="bg-gradient-to-"][class*="text-white"][class*="from-orange"],
[class*="bg-gradient-to-"][class*="text-white"][class*="from-amber"]   { background-color:#ea580c !important; }
[class*="bg-gradient-to-"][class*="text-white"][class*="from-yellow"]  { background-color:#ca8a04 !important; }
[class*="bg-gradient-to-"][class*="text-white"][class*="from-green"],
[class*="bg-gradient-to-"][class*="text-white"][class*="from-emerald"] { background-color:#059669 !important; }
[class*="bg-gradient-to-"][class*="text-white"][class*="from-teal"],
[class*="bg-gradient-to-"][class*="text-white"][class*="from-cyan"]    { background-color:#0d9488 !important; }
[class*="bg-gradient-to-"][class*="text-white"][class*="from-gray"],
[class*="bg-gradient-to-"][class*="text-white"][class*="from-slate"],
[class*="bg-gradient-to-"][class*="text-white"][class*="from-zinc"]    { background-color:#475569 !important; }

/* A last resort: a white-on-white surface is unreadable, so anything still
   carrying text-white without a fill gets the brand colour rather than
   disappearing. */
[class*="bg-gradient-to-"][class*="text-white"]{ background-color:#4f46e5; }

/* ---- surfaces that asked to be dark ------------------------------------
   Several pages define their own `.card{background:#fff}` in a <style>
   block, which loads after the utilities and so beats `bg-slate-900` on the
   same element. The Cash page's "Total on hand" tile is one: it was drawing
   slate-300 and white text onto a white card. Restore the intent. */
.card[class*="bg-slate-9"], .card[class*="bg-gray-9"], .card[class*="bg-zinc-9"],
[class*="bg-slate-900"], [class*="bg-gray-900"]{
  background-color:#0f172a !important;
  border-color:#0f172a !important;
}
[class*="bg-slate-900"] *, [class*="bg-gray-900"] *{ border-color:#1e293b; }

/* ---- legibility of small coloured text ---------------------------------
   amber-500 on white is 2.15:1 -- below the 3:1 a figure this small needs.
   amber-600 reads at 3.1:1 and keeps the same meaning. */
.text-amber-500, .text-yellow-500{ color:#d97706 !important; }
/* slate-300 as a separator or arrow sat at 1.48:1, effectively invisible. */
.text-slate-300:not(.fa-lock), .text-gray-300:not(.fa-lock){ color:#94a3b8 !important; }
/* but inside a dark tile those lighter tones are correct, so put them back */
[class*="bg-slate-900"] .text-slate-300, [class*="bg-slate-900"] .text-slate-400,
[class*="bg-gray-900"] .text-gray-300{ color:#cbd5e1 !important; }

/* ---- legible figures ----------------------------------------------------
   The stat tiles set their colour inline. Tailwind's 500-weight hues are
   tuned for use *as* a background, not as text on white: emerald-500 reads
   2.54:1 and amber-500 2.15:1, both under the 3:1 a number this size needs.
   The 600 weights carry the same meaning and clear the bar. */
.stat-number[style*="#10b981"]{ color:#059669 !important; }  /* 2.54 -> 3.65 */
.stat-number[style*="#f59e0b"]{ color:#d97706 !important; }  /* 2.15 -> 3.13 */
.stat-number[style*="#ef4444"]{ color:#dc2626 !important; }
.stat-number[style*="#6366f1"]{ color:#4f46e5 !important; }
.stat-number[style*="#8b5cf6"]{ color:#7c3aed !important; }
.stat-number[style*="#06b6d4"]{ color:#0891b2 !important; }

/* Supporting lines under a figure were gray-400 on white, 2.54:1 -- too
   faint to read at 12px. gray-500 is 4.6:1 and still clearly secondary. */
.text-gray-400:not(.fa-lock):not([class*="bg-"]),
.text-slate-400:not(.fa-lock):not([class*="bg-"]){ color:#6b7280 !important; }
[class*="bg-slate-900"] .text-slate-400,
[class*="bg-gray-900"] .text-gray-400{ color:#cbd5e1 !important; }

/* Sidebar group headings sat at 2.37:1 against the rail. */
#ilSidebar .il-section{ color:#6b7280 !important; }

/* ---- button fills that carry white text --------------------------------
   The 500-weight hues came through from the gradients they replaced. As a
   background behind white text they are too light: emerald-500 gives 2.54:1
   and indigo-500 3.1:1. Their 600 weights read the same but clear 4.5:1,
   which is what a label on a button needs. */
/* Match the declaration, not the string. An earlier version of this matched
   any style attribute containing the hex -- which included every sidebar
   link, because each carries `--il-icon:#6366f1` as a variable. They all got
   a dark fill behind dark text. Anchor on the property name. */
:is(button,a)[style*="background: #10b981"], :is(button,a)[style*="background:#10b981"]{ background-color:#047857 !important; }
:is(button,a)[style*="background: #6366f1"], :is(button,a)[style*="background:#6366f1"]{ background-color:#4338ca !important; }
:is(button,a)[style*="background: #8b5cf6"], :is(button,a)[style*="background:#8b5cf6"]{ background-color:#6d28d9 !important; }
:is(button,a)[style*="background: #f59e0b"], :is(button,a)[style*="background:#f59e0b"]{ background-color:#b45309 !important; }
:is(button,a)[style*="background: #ef4444"], :is(button,a)[style*="background:#ef4444"]{ background-color:#b91c1c !important; }
:is(button,a)[style*="background: #3b82f6"], :is(button,a)[style*="background:#3b82f6"]{ background-color:#1d4ed8 !important; }
/* and never repaint a sidebar link, whatever its style attribute holds */
#ilSidebar a, #ilNav a{ background-color: initial !important; }
#ilSidebar a.is-active, #ilNav a.is-active{ background-color: var(--il-bg, #eef2ff) !important; }

/* Column headings were #94a3b8 on white -- 2.5:1, readable only if you were
   already looking for them. slate-500 keeps them clearly secondary to the
   data while being legible at this size. */
table th, thead th{ color:#64748b !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Icon tiles: keep the fill when the glyph inside is white.

   The flatten rule above matched `bg-gradient-to-*` and `text-white` on the
   SAME element. These tiles put the gradient on a wrapper and `text-white`
   on the <i> inside it, so the wrapper lost its fill and the glyph went
   white on white -- 53 icons across 15 pages.

   The contrast audit missed them because it only examined elements with
   text content, and an icon element has none.
   ────────────────────────────────────────────────────────────────────────── */
[class*="bg-gradient-to-"]:has(> i[class*="text-white"]),
[class*="bg-gradient-to-"]:has(> svg[class*="text-white"]),
[class*="bg-gradient-to-"]:has(> .text-white){ background-image: none !important; }

:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-indigo"]  { background-color:#4f46e5 !important; }
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-blue"]    { background-color:#2563eb !important; }
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-sky"]     { background-color:#0284c7 !important; }
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-purple"],
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-violet"],
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-fuchsia"] { background-color:#7c3aed !important; }
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-pink"]    { background-color:#db2777 !important; }
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-rose"],
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-red"]     { background-color:#dc2626 !important; }
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-orange"],
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-amber"]   { background-color:#ea580c !important; }
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-yellow"]  { background-color:#ca8a04 !important; }
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-green"],
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-emerald"] { background-color:#059669 !important; }
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-teal"],
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-cyan"]    { background-color:#0d9488 !important; }
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-gray"],
:is([class*="bg-gradient-to-"]):has(> [class*="text-white"])[class*="from-slate"]   { background-color:#475569 !important; }
[class*="bg-gradient-to-"]:has(> [class*="text-white"]){ background-color:#4f46e5; }

/* ---- icons that were already too faint before any of this ---------------
   gray-300 is 1.4:1 on white and slate-200 is 1.2:1. They should read as
   muted, not absent. The sidebar padlock sets its own colour and is
   unaffected. */
i.fa-lock.text-gray-300, i.fa-lock.text-slate-300,
td .text-gray-300, li .text-gray-300{ color:#9ca3af !important; }
.text-slate-200, .text-gray-200{ color:#cbd5e1 !important; }
i[class*="text-slate-200"], i[class*="text-gray-200"]{ color:#cbd5e1 !important; }
i:not([class*="text-"]):not([style*="color"]){ color: inherit; }

/* Empty-state illustrations: large, decorative, but the whole point is to be
   seen when a list is empty. slate-200 read at 1.2:1, slate-400 at 2.6:1. */
.text-center i[class*="text-slate-200"], .text-center i[class*="text-gray-200"],
i.fa-wallet[class*="text-slate-"], i.fa-inbox[class*="text-slate-"],
i.fa-box-open[class*="text-slate-"]{ color:#94a3b8 !important; }

/* Chrome icons that carry no colour of their own were inheriting white from
   an ancestor and vanishing on a pale surface. These three are always UI
   furniture, never content. */
i.fa-filter:not([class*="text-"]):not([class*="bg-"]),
i.fa-search:not([class*="text-"]):not([class*="bg-"]),
i.fa-cube:not([class*="text-"]):not([class*="bg-"]),
i.fa-magnifying-glass:not([class*="text-"]):not([class*="bg-"]){ color:#64748b !important; }

/* ...except on a saturated banner or a dark bar, where white is the correct
   colour and slate-500 is the thing that disappears. Shades are spelled out in
   full because [class*="bg-indigo-5"] also matches bg-indigo-50. Cards are
   excluded: the flatten rules above repaint those to a pale surface. */
[class*="bg-gradient-to-"]:is(
    [class*="from-slate-500"],
    [class*="from-slate-600"],
    [class*="from-slate-700"],
    [class*="from-slate-800"],
    [class*="from-slate-900"],
    [class*="from-gray-500"],
    [class*="from-gray-600"],
    [class*="from-gray-700"],
    [class*="from-gray-800"],
    [class*="from-gray-900"],
    [class*="from-zinc-500"],
    [class*="from-zinc-600"],
    [class*="from-zinc-700"],
    [class*="from-zinc-800"],
    [class*="from-zinc-900"],
    [class*="from-neutral-500"],
    [class*="from-neutral-600"],
    [class*="from-neutral-700"],
    [class*="from-neutral-800"],
    [class*="from-neutral-900"],
    [class*="from-stone-500"],
    [class*="from-stone-600"],
    [class*="from-stone-700"],
    [class*="from-stone-800"],
    [class*="from-stone-900"],
    [class*="from-indigo-500"],
    [class*="from-indigo-600"],
    [class*="from-indigo-700"],
    [class*="from-indigo-800"],
    [class*="from-indigo-900"],
    [class*="from-violet-500"],
    [class*="from-violet-600"],
    [class*="from-violet-700"],
    [class*="from-violet-800"],
    [class*="from-violet-900"],
    [class*="from-purple-500"],
    [class*="from-purple-600"],
    [class*="from-purple-700"],
    [class*="from-purple-800"],
    [class*="from-purple-900"],
    [class*="from-fuchsia-500"],
    [class*="from-fuchsia-600"],
    [class*="from-fuchsia-700"],
    [class*="from-fuchsia-800"],
    [class*="from-fuchsia-900"],
    [class*="from-blue-500"],
    [class*="from-blue-600"],
    [class*="from-blue-700"],
    [class*="from-blue-800"],
    [class*="from-blue-900"],
    [class*="from-sky-500"],
    [class*="from-sky-600"],
    [class*="from-sky-700"],
    [class*="from-sky-800"],
    [class*="from-sky-900"],
    [class*="from-cyan-500"],
    [class*="from-cyan-600"],
    [class*="from-cyan-700"],
    [class*="from-cyan-800"],
    [class*="from-cyan-900"],
    [class*="from-teal-500"],
    [class*="from-teal-600"],
    [class*="from-teal-700"],
    [class*="from-teal-800"],
    [class*="from-teal-900"],
    [class*="from-emerald-500"],
    [class*="from-emerald-600"],
    [class*="from-emerald-700"],
    [class*="from-emerald-800"],
    [class*="from-emerald-900"],
    [class*="from-green-500"],
    [class*="from-green-600"],
    [class*="from-green-700"],
    [class*="from-green-800"],
    [class*="from-green-900"],
    [class*="from-lime-500"],
    [class*="from-lime-600"],
    [class*="from-lime-700"],
    [class*="from-lime-800"],
    [class*="from-lime-900"],
    [class*="from-amber-500"],
    [class*="from-amber-600"],
    [class*="from-amber-700"],
    [class*="from-amber-800"],
    [class*="from-amber-900"],
    [class*="from-orange-500"],
    [class*="from-orange-600"],
    [class*="from-orange-700"],
    [class*="from-orange-800"],
    [class*="from-orange-900"],
    [class*="from-red-500"],
    [class*="from-red-600"],
    [class*="from-red-700"],
    [class*="from-red-800"],
    [class*="from-red-900"],
    [class*="from-rose-500"],
    [class*="from-rose-600"],
    [class*="from-rose-700"],
    [class*="from-rose-800"],
    [class*="from-rose-900"],
    [class*="from-pink-500"],
    [class*="from-pink-600"],
    [class*="from-pink-700"],
    [class*="from-pink-800"],
    [class*="from-pink-900"]):not(.card):not(.stat-card):not(.glass-card):not([class*="bg-white"])
  :is(i.fa-filter,i.fa-search,i.fa-cube,i.fa-magnifying-glass):not([class*="text-"]):not([class*="bg-"]),
:is(
    [class*="bg-slate-500"],
    [class*="bg-slate-600"],
    [class*="bg-slate-700"],
    [class*="bg-slate-800"],
    [class*="bg-slate-900"],
    [class*="bg-gray-500"],
    [class*="bg-gray-600"],
    [class*="bg-gray-700"],
    [class*="bg-gray-800"],
    [class*="bg-gray-900"],
    [class*="bg-zinc-500"],
    [class*="bg-zinc-600"],
    [class*="bg-zinc-700"],
    [class*="bg-zinc-800"],
    [class*="bg-zinc-900"],
    [class*="bg-neutral-500"],
    [class*="bg-neutral-600"],
    [class*="bg-neutral-700"],
    [class*="bg-neutral-800"],
    [class*="bg-neutral-900"],
    [class*="bg-stone-500"],
    [class*="bg-stone-600"],
    [class*="bg-stone-700"],
    [class*="bg-stone-800"],
    [class*="bg-stone-900"],
    [class*="bg-indigo-500"],
    [class*="bg-indigo-600"],
    [class*="bg-indigo-700"],
    [class*="bg-indigo-800"],
    [class*="bg-indigo-900"],
    [class*="bg-violet-500"],
    [class*="bg-violet-600"],
    [class*="bg-violet-700"],
    [class*="bg-violet-800"],
    [class*="bg-violet-900"],
    [class*="bg-purple-500"],
    [class*="bg-purple-600"],
    [class*="bg-purple-700"],
    [class*="bg-purple-800"],
    [class*="bg-purple-900"],
    [class*="bg-fuchsia-500"],
    [class*="bg-fuchsia-600"],
    [class*="bg-fuchsia-700"],
    [class*="bg-fuchsia-800"],
    [class*="bg-fuchsia-900"],
    [class*="bg-blue-500"],
    [class*="bg-blue-600"],
    [class*="bg-blue-700"],
    [class*="bg-blue-800"],
    [class*="bg-blue-900"],
    [class*="bg-sky-500"],
    [class*="bg-sky-600"],
    [class*="bg-sky-700"],
    [class*="bg-sky-800"],
    [class*="bg-sky-900"],
    [class*="bg-cyan-500"],
    [class*="bg-cyan-600"],
    [class*="bg-cyan-700"],
    [class*="bg-cyan-800"],
    [class*="bg-cyan-900"],
    [class*="bg-teal-500"],
    [class*="bg-teal-600"],
    [class*="bg-teal-700"],
    [class*="bg-teal-800"],
    [class*="bg-teal-900"],
    [class*="bg-emerald-500"],
    [class*="bg-emerald-600"],
    [class*="bg-emerald-700"],
    [class*="bg-emerald-800"],
    [class*="bg-emerald-900"],
    [class*="bg-green-500"],
    [class*="bg-green-600"],
    [class*="bg-green-700"],
    [class*="bg-green-800"],
    [class*="bg-green-900"],
    [class*="bg-lime-500"],
    [class*="bg-lime-600"],
    [class*="bg-lime-700"],
    [class*="bg-lime-800"],
    [class*="bg-lime-900"],
    [class*="bg-amber-500"],
    [class*="bg-amber-600"],
    [class*="bg-amber-700"],
    [class*="bg-amber-800"],
    [class*="bg-amber-900"],
    [class*="bg-orange-500"],
    [class*="bg-orange-600"],
    [class*="bg-orange-700"],
    [class*="bg-orange-800"],
    [class*="bg-orange-900"],
    [class*="bg-red-500"],
    [class*="bg-red-600"],
    [class*="bg-red-700"],
    [class*="bg-red-800"],
    [class*="bg-red-900"],
    [class*="bg-rose-500"],
    [class*="bg-rose-600"],
    [class*="bg-rose-700"],
    [class*="bg-rose-800"],
    [class*="bg-rose-900"],
    [class*="bg-pink-500"],
    [class*="bg-pink-600"],
    [class*="bg-pink-700"],
    [class*="bg-pink-800"],
    [class*="bg-pink-900"]):not(.card):not(.stat-card):not(.glass-card):not([class*="bg-white"])
  :is(i.fa-filter,i.fa-search,i.fa-cube,i.fa-magnifying-glass):not([class*="text-"]):not([class*="bg-"]){
  color:#fff !important; }

/* ══ Legibility pass ═══════════════════════════════════════════════════════
   Measured against WCAG AA: 4.5:1 for body text, 3:1 for icons and large
   text. Each value moves to the next step that clears the threshold, so the
   hue is kept and only the shade changes. Specificity here is deliberate:
   several of the rules above are .class:not(.class) (0,2,0), so a plain
   .class rule would lose to them even with !important.
   ───────────────────────────────────────────────────────────────────────── */

/* Secondary text. slate-500 reads 4.44:1 on the page ground (just under AA)
   and the 11px slate-400 field labels read 2.56:1. `.pill.on` is the selected
   filter -- white on near-black -- so it must keep its own colour. */
.text-slate-500, .lbl{ color:#475569 !important; }
.pill:not(.on){ color:#475569 !important; }
:is(span,div,p,td,th,li).text-slate-300:not(.fa-lock){ color:#64748b !important; }

/* Status words carry meaning, so they have to be readable, not just tinted. */
.text-green-600{ color:#15803d !important; }
[class*="bg-gray-1"] .text-green-600, [class*="bg-slate-1"] .text-green-600{
  color:#166534 !important; }
.text-orange-600{ color:#c2410c !important; }
.text-yellow-600{ color:#a16207 !important; }
.text-red-500{ color:#dc2626 !important; }

/* White on a yellow-500/600 gradient is 2.94:1, under even the large-text
   floor. Two steps darker keeps the amber reading and clears AA. */
[class*="bg-gradient-to-"][class*="from-yellow"]{
  background-image: linear-gradient(to right,#a16207 0%,#854d0e 100%) !important; }
[class*="bg-yellow-600"]{ background-color:#a16207 !important; }

/* Accent icons: one step darker clears 3:1 and keeps the colour identity.
   The class forms are set on the icon; the bare forms let a child <i> that
   inherits its colour from the wrapper come along too. */
i.text-green-500, svg.text-green-500   { color:#16a34a !important; }
i.text-cyan-500, svg.text-cyan-500     { color:#0891b2 !important; }
i.text-orange-500, svg.text-orange-500 { color:#ea580c !important; }
i.text-sky-500, svg.text-sky-500       { color:#0284c7 !important; }
i.text-indigo-400, svg.text-indigo-400 { color:#6366f1 !important; }
[class*="text-emerald-500"]            { color:#059669 !important; }
i.fa-lock.text-gray-300, i.fa-lock.text-gray-400{ color:#6b7280 !important; }

/* Empty-state glyphs should read as muted, not absent: 3.1:1 at 36px. */
i.fa-receipt[class*="text-gray-3"], i.fa-receipt[class*="text-slate-3"],
i.fa-receipt[class*="text-gray-4"], i.fa-receipt[class*="text-slate-4"]{
  color:#7f8ea3 !important; }

/* Search glyphs inside inputs were slate-400 on white -- 2.56:1. */
:is(i,svg).fa-magnifying-glass[class*="text-"]:not([class*="text-white"]),
:is(i,svg).fa-search[class*="text-"]:not([class*="text-white"]){
  color:#64748b !important; }

/* Stat figures take their colour from an inline style; anchor on the property
   so the match cannot land on a custom property that merely holds the hex. */
[style*="color: #14b8a6"]{ color:#0d9488 !important; }

/* The dashboard welcome banner put 12px white type on a mid-indigo gradient
   (3.63-4.41:1). Same hue family, two steps darker. */
.welcome-banner{
  background-image: linear-gradient(135deg,#4338ca 0%,#6d28d9 100%) !important; }

/* Chrome icons sitting on a saturated gradient set through a style attribute.
   No class selector can reach those, so key on the attribute itself and
   exclude the near-white gradients used for panel surfaces. Must come after
   the search-glyph rule above, which would otherwise win on source order. */
[style*="linear-gradient"]:not([style*="255, 255, 255"]):not([style*="#fff"])
  > :is(i.fa-filter,i.fa-search,i.fa-cube,i.fa-magnifying-glass){
  color:#fff !important; }

/* subscription.html paints this tile from the plan's own gradient in JS; give
   it a fill so the white icon is never briefly white-on-white. */
#planIcon:not([class*="bg-"]){ background-color:#4f46e5 !important; }

/* emerald-500 set through a style attribute: a select's chevron (2.53:1) and
   a count badge whose white digit reads 2.54:1. Both anchored on the property
   so the match cannot land on a custom property that merely holds the hex. */
[style*="color: #10b981"]{ color:#059669 !important; }
[style*="background: #10b981"]{ background-color:#047857 !important; background-image:none !important; }


/* ══ Final legibility pass ══════════════════════════════════════════════════
   White 13-14px type on these fills measured 3.2-4.5:1 -- legible, but under
   AA. One step darker on the fill (not the text) clears it without changing
   which colour the control reads as. */
:is(button,a,span,div)[class*="bg-indigo-500"]:not([class*="hover:"]) ,
:is(button,a,span,div)[class*="bg-indigo-500"]{ background-color:#4f46e5 !important; }
:is(button,a,span,div)[class*="bg-sky-600"]    { background-color:#0369a1 !important; }
:is(button,a,span,div)[class*="bg-emerald-600"]{ background-color:#047857 !important; }
.text-amber-600{ color:#b45309 !important; }


/* Landing page: the plan name sat at 3.77:1 and a decorative glyph at 2.56:1. */
.text-emerald-600{ color:#047857 !important; }
i[class*="text-slate-400"]{ color:#64748b !important; }

/* "not included" crosses in the pricing table read 2.56:1 */
i.fa-times-circle[class*="text-gray-"], i.fa-times-circle[class*="text-slate-"]{
  color:#64748b !important; }

/* ══ Dark-panel correction ═════════════════════════════════════════════════
   The muted-text rules above assume a light surface. Inside a dark panel the
   same classes must get LIGHTER, not darker -- on cash.html they had been
   pushed to 3.7:1 against near-black. Re-assert them here, after those rules,
   scoped to the dark containers only. */
:is([class*="bg-slate-9"],[class*="bg-slate-8"],[class*="bg-gray-9"],[class*="bg-gray-8"],
    [class*="bg-zinc-9"],[class*="bg-neutral-9"],[class*="bg-black"])
  :is(div,span,p,td,th,li,h1,h2,h3,h4,a,strong):is(.text-slate-500,.text-slate-400,.text-slate-300,
    .text-gray-500,.text-gray-400,.text-gray-300,.lbl,.lab,.pill){
  color:#cbd5e1 !important; }
:is([class*="bg-slate-9"],[class*="bg-slate-8"],[class*="bg-gray-9"],[class*="bg-gray-8"])
  :is(i,svg)[class*="text-slate-"], 
:is([class*="bg-slate-9"],[class*="bg-slate-8"],[class*="bg-gray-9"],[class*="bg-gray-8"])
  :is(i,svg)[class*="text-gray-"]{ color:#cbd5e1 !important; }

/* Large empty-state glyphs: 2.6:1 is too faint even for decoration. */
i.fa-box-open[class*="text-purple-4"], i.fa-box-open[class*="text-purple-3"]{ color:#9333ea !important; }
i.fa-wallet[class*="text-slate-2"], i.fa-wallet[class*="text-slate-3"]{ color:#7f8ea3 !important; }

/* The P&L column headings use .lab (not .lbl) at #94a3b8 -- 2.56:1 on white. */
.pl .head .lab, .lab{ color:#64748b !important; }

/* Last dark-panel holdout: an 11px note inside the near-black cash card.
   Specificity is raised deliberately -- the generic muted-text rules above
   are (0,2,1) and would otherwise keep darkening text on a dark ground. */
[class*="bg-slate-900"] [class*="text-slate-"],
[class*="bg-slate-900"] [class*="text-gray-"],
[class*="bg-slate-800"] [class*="text-slate-"],
[class*="bg-slate-800"] [class*="text-gray-"]{ color:#cbd5e1 !important; }

/* The Cash summary card is near-black; an 11px note inside it was still being
   pulled darker by the generic muted-text rules. Anchored on the utility that
   sets its size so this wins without widening the blast radius. */
[class*="bg-slate-900"] [class*="text-[11px]"],
[class*="bg-slate-900"] [class*="text-[11px]"][class*="text-slate-"],
.card[class*="bg-slate-900"] div[class*="text-slate-"]{ color:#cbd5e1 !important; }


/* ══ Dialogs: one layer, one shape ═════════════════════════════════════════
   The sidebar is z-index 60 and the mobile bar 50. Nearly every dialog was
   z-50, so it opened UNDERNEATH the sidebar -- the dim never covered it and
   it stayed clickable while a dialog was supposedly modal. Everything that
   covers the screen now sits above both.

   New dialogs: add class="il-modal" and they inherit all of this. The id list
   is only here for the dialogs that already shipped. */
#bundleModal,
#productSelectorModal,
#accmodal,
#successModal,
#formWrap,
#oneWrap,
#catmodal,
#actionModal,
#addBatchModal,
#editBatchModal,
#viewDetailsModal,
#createOrderModal,
#editOrderModal,
#imageModal,
#receiptWrap,
#productImageModal,
#productModal,
#restockModal,
#bannerModal,
#categoryModal,
#content-preview-modal,
#hero-slide-modal,
#popup-config-modal,
#promo-banner-modal,
#testimonial-modal,
#upgradeModal,
.il-modal{
  z-index: 1000 !important;
}

/* the dim itself: same colour and blur everywhere, and it must reach the
   sidebar, so no left offset */
#bundleModal,
#productSelectorModal,
#accmodal,
#successModal,
#formWrap,
#oneWrap,
#catmodal,
#actionModal,
#addBatchModal,
#editBatchModal,
#viewDetailsModal,
#createOrderModal,
#editOrderModal,
#imageModal,
#receiptWrap,
#productImageModal,
#productModal,
#restockModal,
#bannerModal,
#categoryModal,
#content-preview-modal,
#hero-slide-modal,
#popup-config-modal,
#promo-banner-modal,
#testimonial-modal,
#upgradeModal,
.il-modal{
  background-color: rgba(15,23,42,.55) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  left: 0 !important;
  right: 0 !important;
}

/* the panel inside: one radius, one shadow, and never taller than the screen.
   Widths are left alone -- a product editor and a confirm box legitimately
   differ -- but the shape language is shared. */
:is(#bundleModal,#productSelectorModal,#accmodal,#successModal,#formWrap,#oneWrap,#catmodal,#actionModal,#addBatchModal,#editBatchModal,#viewDetailsModal,#createOrderModal,#editOrderModal,#imageModal,#receiptWrap,#productImageModal,#productModal,#restockModal,#bannerModal,#categoryModal,#content-preview-modal,#hero-slide-modal,#popup-config-modal,#promo-banner-modal,#testimonial-modal,#upgradeModal,.il-modal) > div:not([class*="fixed"]){
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.28) !important;
  max-height: 90vh;
  overflow-y: auto;
}

/* while a dialog is open the page behind must not scroll */
body.il-modal-open{ overflow: hidden !important; }

/* same reason, for the dialogs addressed by id above */
:is(#bundleModal,#productSelectorModal,#accmodal,#successModal,#formWrap,#oneWrap,#catmodal,#actionModal,#addBatchModal,#editBatchModal,#viewDetailsModal,#createOrderModal,#editOrderModal,#imageModal,#receiptWrap,#productImageModal,#productModal,#restockModal,#bannerModal,#categoryModal,#content-preview-modal,#hero-slide-modal,#popup-config-modal,#promo-banner-modal,#testimonial-modal,#upgradeModal,.il-modal){
  margin: 0 !important;
}


/* ══ Settings tabs and panels ══════════════════════════════════════════════
   Found by sweeping each tab rather than the page as it loads.
   .tab-button.active sets color:white, but every tab's icon carries its own
   Tailwind colour class, which beats the inherited white -- so on the active
   indigo tab the glyph stayed blue (1.71:1) or indigo (1.41:1). The icon has
   to follow the button, both ways. */

/* White glyphs on mid-weight chips inside the panels: 2.4-2.8:1. */
[class*="bg-cyan-500"] i[class*="text-white"],
[class*="bg-cyan-500"]   { background-color:#0e7490 !important; }
[class*="bg-orange-500"] i[class*="text-white"]{ color:#ffffff !important; }
[class*="bg-orange-500"]:has(> i[class*="text-white"]){ background-color:#c2410c !important; }
[class*="bg-emerald-500"]:has(> i[class*="text-white"]){ background-color:#047857 !important; }
.view-mode-btn.active{ background-color:#4f46e5 !important; color:#fff !important; }

/* Muted copy on tinted panel grounds. */
[class*="bg-violet-50"] .text-gray-500,
[class*="bg-indigo-50"] .text-gray-500{ color:#4b5563 !important; }
[class*="bg-blue-100"][class*="text-blue-600"]{ color:#1d4ed8 !important; }
[class*="bg-pink-50"][class*="text-pink-600"],
[class*="text-pink-600"][class*="bg-pink-5"]{ color:#9d174d !important; }
i.fa-camera[class*="text-gray-3"], i.fa-camera[class*="text-slate-3"]{ color:#6b7280 !important; }


/* ══ Settings tabs ═════════════════════════════════════════════════════════
   Two faults, both only visible once you click a tab rather than on load:

   1. The page sets .tab-button.active{background:#6366f1} with the shorthand,
      and after a click the computed background came back transparent -- so
      the tab you were on lost its highlight entirely and nothing showed which
      tab was selected. background-color with !important holds it.
   2. Each tab's icon carries its own colour class (text-blue-500, text-pink-500
      ...), which beat the inherited white and left a coloured glyph on the
      indigo fill. Icon and label now follow the button.

   indigo-700 rather than indigo-500: white reads 6.5:1 on it, where the old
   fill measured 4.47:1 and sat just under AA. */
button.tab-button.active,
.tab-content ~ * button.tab-button.active,
.tab-button.active{
  background-color:#4338ca !important;
  background-image:none !important;
  border-color:#4338ca !important;
}
button.tab-button.active,
button.tab-button.active i,
button.tab-button.active span,
button.tab-button.active svg,
.tab-button.active i,
.tab-button.active span{ color:#ffffff !important; }

/* The two real findings from sweeping each Settings tab. */
/* the page paints this with a gradient, so a background-color could not win */
.view-mode-btn.active{
  background-image: linear-gradient(135deg,#4f46e5,#7c3aed) !important;
  color:#ffffff !important; }
i.fa-ticket[class*="text-teal-"], i.fa-ticket[class*="text-emerald-"]{ color:#0f766e !important; }


/* ══ Catch-all for full-screen overlays ════════════════════════════════════
   The id list above covers the dialogs that ship in the markup, but several
   are built in JavaScript with Tailwind's z-50 -- below the sidebar's 60, so
   the dim stopped at the sidebar edge. Anything pinned to all four sides and
   centring its content is a dialog: lift it, and make sure it really spans
   the viewport. */
.fixed.inset-0[class*="z-4"],
.fixed.inset-0[class*="z-5"],
.fixed.inset-0.flex{
  z-index: 1000 !important;
  left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  /* A fixed box still honours its margin, so an overlay that happens to sit
     inside a space-y-* wrapper gets pushed down by the sibling margin Tailwind
     adds -- which left an undimmed strip across the top of the screen. */
  margin: 0 !important;
}


/* ══ Sidebar layout reservation ════════════════════════════════════════════
   Copied verbatim from the STYLES block in system/components/sidebar.js.
   That script injects these rules at runtime from the middle of <body>, so
   the page first painted full-width and then jumped right by the sidebar's
   width on every single navigation (measured CLS: products 0.29, dashboard
   0.18, settings 0.17). Declaring them here -- in a stylesheet the <head>
   already blocks on -- means the content is in its final position at first
   paint and the sidebar simply fills the space reserved for it.
   sidebar.js still injects its own copy; the rules are identical, so the
   later copy changes nothing. Keep the two in sync. */
:root { --sidebar-w: 16rem; --content-gutter: 1.5rem; }
html { scrollbar-gutter: stable; }
@media (min-width: 1024px) {
  body.with-sidebar { padding-left: var(--sidebar-w); padding-right: 0; }

  /* ONE consistent gutter applied to the outermost page wrapper(s) — direct body children */
  body.with-sidebar > main,
  body.with-sidebar > section,
  body.with-sidebar > nav:not([style*="display: none"]),
  body.with-sidebar > div:not(#ilSidebar):not(#ilSidebarBackdrop):not(#ilTopBar):not(.floating-shapes) {
    padding-left: var(--content-gutter) !important;
    padding-right: var(--content-gutter) !important;
    box-sizing: border-box;
  }

  /* Strip any nested page-wrapper padding so gutters don't stack.
     These responsive utility patterns are only used by page wrappers, not by cards. */
  body.with-sidebar > main [class*="lg:px-8"],
  body.with-sidebar > main [class*="2xl:px-12"],
  body.with-sidebar > main [class*="lg:px-12"],
  body.with-sidebar > main [class*="sm:px-6"],
  body.with-sidebar > section [class*="lg:px-8"],
  body.with-sidebar > section [class*="2xl:px-12"],
  body.with-sidebar > div [class*="lg:px-8"],
  body.with-sidebar > div [class*="2xl:px-12"],
  body.with-sidebar > div [class*="lg:px-12"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* sidebar.js also hides each page's legacy top nav once it runs, which on
   Orders dropped <main> 80px up after first paint (CLS 0.20). Hide it here
   instead so it never occupies space. Scoped to body.with-sidebar so the
   public landing page keeps its nav, and matched on "Main navigation" --
   the sidebar's own <nav> is labelled "Main", so it is not affected. */
body.with-sidebar nav[aria-label="Main navigation"]{ display: none !important; }

/* Below 1024px sidebar.js inserts #ilTopBar as the first body child. Being
   sticky it sits in flow, so every page dropped exactly its own height
   (57px = h-14 + 1px border) the moment the script ran -- measured CLS 0.50
   on Products at 390px. Take the bar out of flow and reserve the same space
   up front, so the content starts where it ends up.
   The selector is more specific than sidebar.js's own "#ilTopBar" rule, so
   it wins no matter which stylesheet is applied last. */
@media (max-width: 1023px){
  body.with-sidebar{ padding-top: calc(3.5rem + 1px); }
  body.with-sidebar #ilTopBar{ position: fixed; top: 0; left: 0; right: 0; }
}

/* #mobile-nav-container is an empty div that each page fills by fetching
   components/mobile-nav.html and assigning innerHTML -- so it inflated
   after first paint and pushed the page around (the last shift left on
   Orders). It is also redundant now: on mobile the sidebar provides the
   nav through #ilTopBar's hamburger. Hide it wherever the sidebar is
   mounted; pages without the sidebar keep their old nav. */
body.with-sidebar #mobile-nav-container{ display: none !important; }

/* ══ Subscription plan cards ═══════════════════════════════════════════════
   Two plans, so the pair should fill the content column like everything else
   on the page -- they were capped at max-w-4xl and centred, leaving the grid
   narrower than its own section heading.
   The CTA is pinned to the bottom by id rather than an mt-auto utility,
   because selectPlan()/the pending-approval branch reassign button.className
   outright and would drop any class put in the markup. */
#planGrid{ gap: 1.5rem; }
#starterBtn, #plusBtn{ margin-top: auto; }
@media (min-width: 1024px){
  #planGrid{ gap: 2rem; }
  #starterPlanCard, #plusPlanCard{ padding: 2rem; }
}

/* ══ Touch targets on phones and tablets ═══════════════════════════════════
   Measured on a true 390px viewport (an iframe -- headless Chrome clamps its
   own window to 500px, so earlier "mobile" numbers were not mobile at all).
   Page-level controls were well under the 44px a thumb needs: the Cash date
   chips were 30px tall, its Apply button 24px, POS "Open till" 28px.
   Buttons and form controls only -- inline text links such as "View all" are
   deliberately left alone (WCAG 2.5.8 exempts links in a run of text, and
   padding them out would wreck the sentences they sit in). */
/* width OR any coarse pointer: an iPad in landscape is 1024-1194px wide and
   still a touch device, so a width-only query left the whole iPad
   landscape range with 30px controls. A desktop mouse at 1024 keeps the
   compact sizes, which is right -- precision differs, not the screen. */
@media (max-width: 1023px), (pointer: coarse){
  button:not(.il-nav-link):not([role="switch"]),
  .btn, input[type="submit"], input[type="button"], select{
    min-height: 44px;
  }
  input[type="text"], input[type="number"], input[type="search"],
  input[type="email"], input[type="tel"], input[type="date"], textarea{
    min-height: 44px;
  }
  /* A checkbox wrapped in a <label> is already tappable across the whole
     label, so it does not need to grow to 24px -- and growing it pushed the
     "Keep the form open" row 25px past the screen edge on Cash and Expenses.
     Enlarge only standalone boxes, and let label rows wrap either way. */
  input[type="checkbox"]:not(label *), input[type="radio"]:not(label *){
    min-width: 24px; min-height: 24px;
  }
  label input[type="checkbox"], label input[type="radio"]{ flex: 0 0 auto; }
  label.flex{ flex-wrap: wrap; }

  /* Raising fields to 16px widened the date controls, and a "from / to /
     Apply" row then measured 399px inside a 390px screen. Let such a row
     wrap rather than run off the edge. The min-width:0 is the fallback for
     browsers without :has() -- there the fields shrink instead. */
  input[type="date"]{ min-width: 0; }
  .flex:has(> input[type="date"]){ flex-wrap: wrap; }
  /* and wide enough to hit, not just tall: POS "Clear" was 30px across */
  button:not(.il-nav-link):not([role="switch"]):not(.w-full){ min-width: 44px; }
}

/* ══ No zoom-on-tap in iOS Safari ══════════════════════════════════════════
   Safari on iPhone/iPad zooms the page in whenever you focus a field whose
   font-size is below 16px, and does not zoom back out -- you are left
   pinching after every tap. Measured: Settings had 62 fields at 12-14px,
   POS 5, Cash 14, Customers 8. 16px is the threshold, not a preference.
   Checkboxes and radios are excluded; they carry no text. */
@media (max-width: 1023px), (pointer: coarse){
  /* !important because the pages set this with classes (.fld, Tailwind's
     text-sm), which outrank a bare element selector. Not a style preference
     to be overridden -- below 16px iOS zooms, full stop. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea{ font-size: 16px !important; }
}

/* The sidebar's own smallest labels, which appear on every page. The section
   headings were 11.2px and the logo subtitle 10px -- fine on a monitor, mean
   on a phone. Left alone above 1023px with a mouse. */
@media (max-width: 1023px), (pointer: coarse){
  #ilSidebar .il-section{ font-size: .75rem; }
  #ilSidebar .text-\[10px\]{ font-size: .6875rem; }
  #ilSidebar .text-\[11px\]{ font-size: .75rem; }
}