/* Hand-written overrides loaded after the compiled bundle stylesheet.
   assets/index-CLQ6R0dj.css is build output with no source in this repo, so
   corrections to it belong here. */

/* ── Bidirectional text isolation ──────────────────────────────────────────
   A phone number is a left-to-right run. Inside an RTL page (Kurdish, Arabic)
   the Unicode bidi algorithm reorders its digit groups and moves the leading
   "+" to the visual end, so +964 780 349 9780 renders as "9780 349 780 964+".
   Isolating the run fixes how it reads without changing the stored value.

   Applied to machine-readable links generally — a tel:, wa.me or mailto:
   target is never natural-language text and must always read left to right. */
a[href^="tel:"],
a[href^="mailto:"],
a[href^="https://wa.me/"],
a[href^="http://wa.me/"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The footer contact block holds the phone and email side by side; isolating
   the container keeps the separator between them from drifting too. */
.app-footer-contact {
  unicode-bidi: isolate;
}

/* Any element explicitly marked as a phone number elsewhere in the app. */
[data-phone],
.phone-number {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ══════════════════════════════════════════════════════════════════════════
   CUSTOMERS TABLE
   Restyle of .cust-table from the compiled bundle. Everything is expressed in
   the app's own theme variables (--primary, --card-bg, --border, --text2 …) so
   it follows theme switches and dark mode without a second set of rules.
   ══════════════════════════════════════════════════════════════════════════ */

.cust-table {
  --row-h: 4.25rem;
  --radius: 16px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card-bg, #fff);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .04),
    0 8px 24px -12px color-mix(in srgb, var(--text) 22%, transparent);
  font-variant-numeric: tabular-nums;
}

/* ── Header rail ───────────────────────────────────────────────────────── */
.cust-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .95rem 1.15rem;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--primary) 7%, var(--card-bg)),
    color-mix(in srgb, var(--primary) 3%, var(--card-bg))
  );
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary) 62%, var(--text2));
  white-space: nowrap;
}

/* Logical corners so rounding follows the writing direction in RTL. */
.cust-table thead th:first-child { border-start-start-radius: var(--radius); }
.cust-table thead th:last-child  { border-start-end-radius: var(--radius); }
.cust-table tbody tr:last-child td:first-child { border-end-start-radius: var(--radius); }
.cust-table tbody tr:last-child td:last-child  { border-end-end-radius: var(--radius); }

/* ── Rows ──────────────────────────────────────────────────────────────── */
.cust-table tbody td {
  height: var(--row-h);
  padding: .7rem 1.15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  font-size: .875rem;
  color: var(--text);
  transition: background-color .18s ease;
}
.cust-table tbody tr:last-child td { border-bottom: 0; }

.cust-table tbody tr {
  transition: background-color .18s ease;
}
.cust-table tbody tr:hover td {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

/* ── Column dividers ───────────────────────────────────────────────────────
   The bundle draws a border-right on every cell, so a row in debt repeated its
   4px amber marker at every column boundary instead of marking the row once.
   Drop the per-cell rules and re-draw the marker a single time at the row's
   leading edge, as a pseudo-element so it costs no layout. */
.cust-table thead th,
.cust-table tbody td,
.cust-table tbody tr.due-row td {
  /* !important is deliberate: the winning declaration lives in the compiled
     bundle stylesheet, which has no source in this repo and cannot be edited. */
  border-left: 0 !important;
  border-right: 0 !important;
}
.cust-table tbody td { border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.cust-table tbody tr:last-child td { border-bottom: 0; }

.cust-table tbody tr.due-row td:first-child { position: relative; }
.cust-table tbody tr.due-row td:first-child::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: #f59e0b;
}
.cust-table tbody tr.due-row:hover td {
  background: color-mix(in srgb, #f59e0b 8%, transparent);
}

/* ── Identity cell ─────────────────────────────────────────────────────── */
.cust-table .cust-name-cell {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.cust-table .cust-av-sm {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent),
    0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
.cust-table tbody tr:hover .cust-av-sm { transform: scale(1.06); }

/* min-width:0 lets the flex child shrink so the ellipsis can appear at all. */
.cust-table .cust-name-cell > div:last-child { min-width: 0; }

/* unicode-bidi:plaintext lets each name take its base direction from its own
   first strong character, so a Latin name inside this RTL cell truncates at its
   end rather than its beginning ("...oundtrip Customer"). */
.cust-table .cust-name-cell .nm {
  font-weight: 650;
  font-size: .93rem;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--text);
  unicode-bidi: plaintext;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cust-table .cust-name-cell .oc {
  font-size: .76rem;
  color: var(--text2);
  line-height: 1.3;
  unicode-bidi: plaintext;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cust-table tbody td:first-child { max-width: 22rem; }

/* ── Machine-readable columns ──────────────────────────────────────────────
   Phone, date and amount are left-to-right runs. In an RTL page the bidi
   algorithm reorders their digit groups, which is why +964 770 123 4567 was
   rendering as "9647701234567+". Isolate them and give them a numeric face. */
.cust-table tbody td:nth-child(2),
.cust-table tbody td:nth-child(3),
.cust-table tbody td:nth-child(4) {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.cust-table tbody td:nth-child(2) {
  font-size: .84rem;
  letter-spacing: .01em;
  color: var(--text2);
}
.cust-table tbody td:nth-child(4) { font-weight: 700; }

.cust-table thead th:nth-child(2),
.cust-table thead th:nth-child(3),
.cust-table thead th:nth-child(4) { direction: ltr; unicode-bidi: isolate; }

/* ── Header / cell alignment ───────────────────────────────────────────────
   Two things pulled these apart:

   1. The bundle sets its own horizontal padding on th (12px) while the cells
      here use 1.15rem (18.4px), so every column sat ~6px off its header.
   2. th is explicitly text-align:right, but td inherits text-align:start —
      and `start` resolves to the LEFT edge on the three columns given
      direction:ltr above for digit ordering. Header right, data left.

   Both are pinned to the same values, keyed off the table's own directionality
   so English (LTR) and Kurdish/Arabic (RTL) each align to the correct edge. */
.cust-table thead th,
.cust-table tbody td {
  padding-inline: 1.15rem !important;
  text-align: right;
}
.cust-table:dir(ltr) thead th,
.cust-table:dir(ltr) tbody td {
  text-align: left;
}

/* The actions column is centred in both directions. */
.cust-table thead th:last-child,
.cust-table tbody td:last-child { text-align: center; }
.cust-table .cust-actions { justify-content: center; }

/* ── Status pill ───────────────────────────────────────────────────────────
   The bundle sets the semantic colour inline, so only the shape, weight and
   rhythm are adjusted here — the meaning of the colour is left alone. */
.cust-table .cust-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .73rem;
  letter-spacing: .01em;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px currentColor;
  --pill-ring: .08;
}
.cust-table .cust-badge { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }

/* ── Row actions ───────────────────────────────────────────────────────────
   Recede until the row is under the cursor, but never below a legible
   contrast and never removed from the tab order. */
.cust-table .cust-actions {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.cust-table .cust-actions .btn {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  opacity: .55;
  transition: opacity .18s ease, background-color .18s ease, transform .12s ease;
}
.cust-table tbody tr:hover .cust-actions .btn { opacity: 1; }
.cust-table .cust-actions .btn:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  transform: translateY(-1px);
}
.cust-table .cust-actions .btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* ── Small screens ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .cust-table { --row-h: 3.6rem; font-size: .82rem; }
  .cust-table thead th,
  .cust-table tbody td { padding: .6rem .7rem; }
  .cust-table .cust-av-sm { width: 2rem; height: 2rem; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cust-table *,
  .cust-table tbody tr:hover .cust-av-sm { transition: none !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COLOUR CONTRAST, EVERYWHERE
   Measured with axe-core against the running app, not guessed. Two colours
   account for every contrast failure on every screen:

     --text2   #8f7d70 on the tab strip  3.11   on the page  3.63   on a card  3.94
     --primary #248f50 behind white text 4.10   (the accent, as a button fill)

   Both need 4.5:1. This was scoped to the sign-in page for a while, on the
   grounds that changing the app the shop looks at all day was the owner's call
   rather than mine. It has now been asked for, so it applies everywhere.

   Neither is pinned to a colour, and neither can be. The app ships sixteen
   themes; it writes the chosen one straight onto <html> as an inline style,
   and two of them (midnight, cyber) are dark, with their own pale --text2. A
   fixed green would overwrite fifteen palettes, and a fixed brown --text2
   would put dark grey text on a dark background and make those two unreadable.

   So each token is derived from whatever the theme set, not replaced:

     --primary  mixed 20% toward black. Every theme keeps its hue and only gets
                dark enough for both the roles it is used in: a fill behind
                white text, and coloured text on the light tab strip. The
                second is the harder of the two and is what sets the figure —
                at 15% the fill passed at 5.39 and the text still failed at
                4.26. Forest, the default, goes #248f50 -> #1d7240, and
                4.10 -> 5.93 as a fill, 4.68 as text.

     --text2    mixed 32% toward --text, the theme's own high-contrast text
                colour. Toward black in a light theme and toward white in a
                dark one, so the same rule increases contrast either way —
                which mixing toward black would not. Light default goes
                #8f7d70 -> about #6c5f55: 4.86 / 5.67 / 6.16 across the three
                backgrounds it is really used on, the worst being the tab strip
                at #e0e6e2, which is what sets the figure.

   The two steps are not one step because a custom property cannot be defined
   in terms of itself on the same element — `--primary: color-mix(… var(--primary) …)`
   on :root is a cycle and computes to nothing. Copying it under another name
   first, then redefining on <body> from the copy, is the way round that: body
   inherits the copy from :root, so nothing refers to itself. It also happens
   to be what makes this win at all: the bundle injects its :root block from
   JavaScript at runtime, so it lands after this file in document order and
   beats it at equal specificity. A declaration on body is not competing.

   Eleven of the sixteen themes fail 4.5:1 as shipped; this clears all but the
   deliberately neon ones (cyber above all), which cannot carry white text at
   that ratio and still be neon. Those need a dark foreground, not a darker
   background, and that is a design decision rather than a correction.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --fm-theme-primary: var(--primary);
  --fm-theme-text2: var(--text2);
}
body {
  --primary: color-mix(in srgb, var(--fm-theme-primary) 80%, #000);
  --text2: color-mix(in srgb, var(--fm-theme-text2) 68%, var(--text));
}


/* WCAG 2.2 asks for 24x24. Measured: the reveal-password button 23x19, the
   remember-me box 15x15, the footer links 17px tall. Both of the first two
   carry their size in an inline style, so these have to insist.

   Padding rather than bigger glyphs, so nothing in the layout moves. */
.lp-forgot,
.lp-foot-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 4px;
}
.lp-body label.field button {
  min-width: 24px !important;
  min-height: 24px !important;
  justify-content: center;
}
.lp-body input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
}
/* A fingertip is not a mouse pointer. */
@media (pointer: coarse) {
  .lp-body input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
  }
}