/* 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; }
}