/*
  Alhakora components — reusable on the website, the accounting app and the guide.
  Needs tokens/tokens.css and motifs/motifs.css first. Uses semantic tokens only (no raw colors), so every
  component follows [data-theme="light" | "dark"] on any ancestor.
*/

.btn, .card, .field__input, .table-wrap, .invoice, .toast { box-sizing: border-box; }
.invoice *, .invoice *::before, .invoice *::after { box-sizing: border-box; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 44px;
  padding: var(--space-2) var(--space-6);
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  font: inherit; font-size: var(--size-base); font-weight: var(--weight-semibold);
  line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: transform .12s ease, filter .15s ease;
}
.btn i { font-size: 1.25em; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ""; inline-size: 1em; block-size: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { rotate: 360deg; } }

.btn--primary { background: var(--primary); color: var(--primary-fg); }
.btn--secondary { background: transparent; color: var(--fg); border-color: currentColor; }
.btn--secondary:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); filter: none; }
.btn--whatsapp { background: var(--success); color: var(--bg); }
.btn--danger { background: var(--danger); color: var(--bg); }
.btn--sm { min-block-size: 36px; padding: var(--space-1) var(--space-4); font-size: var(--size-sm); }

/* ---------- Cards ---------- */
.card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--fg);
  box-shadow: var(--shadow-sm);
}

/* product: full-bleed photo, dark scrim, cream text */
.card--product { aspect-ratio: 3 / 4; border: 0; background: var(--color-green-950); }
.card--product .card__media { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.card--product::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-green-950) 92%, transparent) 0%, color-mix(in srgb, var(--color-green-950) 55%, transparent) 38%, transparent 62%);
}
.card--product .card__body {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1;
  display: grid; gap: var(--space-1);
  padding: var(--space-4);
  color: var(--color-cream-50);
}
.card__title { margin: 0; font-size: var(--size-lg); font-weight: var(--weight-bold); line-height: 1.3; }
.card__meta { margin: 0; font-size: var(--size-sm); opacity: .85; }
.card__price { margin: 0; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--size-xl); font-weight: var(--weight-bold); }
.card--product .card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-2); }

/* info: text card with a monstera leaf in the corner */
.card--info { padding: var(--space-6); padding-inline-end: var(--space-16); }
.card--info::after {
  content: ""; position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-4);
  inline-size: 40px; block-size: 40px;
  background-color: var(--accent); opacity: .5;
  -webkit-mask: var(--motif-leaf) center / contain no-repeat;
  mask: var(--motif-leaf) center / contain no-repeat;
}
.card--info h4 { margin: 0 0 var(--space-2); font-size: var(--size-lg); }
.card--info p { margin: 0; color: var(--fg-muted); }

/* stat: one big number */
.card--stat { padding: var(--space-6); display: grid; gap: var(--space-1); }
.card__value { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--size-3xl); font-weight: var(--weight-bold); line-height: 1.1; }
.card__label { font-size: var(--size-sm); color: var(--fg-muted); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-3);
  border: 1px solid currentColor; border-radius: var(--radius-full);
  background: var(--surface);
  font-size: var(--size-xs); font-weight: var(--weight-semibold); line-height: 1.8; white-space: nowrap;
}
.badge--new { color: var(--accent); }
.badge--popular { color: var(--fg); }
.badge--in-stock, .badge--paid { color: var(--success); }
.badge--out-of-stock { color: var(--fg-muted); }
.badge--credit { color: var(--warning); }
.badge--returned { color: var(--danger); }

/* ---------- Fields ---------- */
.field { display: grid; gap: var(--space-1); }
.field__label { font-size: var(--size-sm); font-weight: var(--weight-semibold); color: var(--fg); }
.field__input {
  inline-size: 100%; min-block-size: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--fg);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input::placeholder { color: var(--fg-muted); opacity: .7; }
.field__input:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 15%, transparent); }
.field__error { display: none; font-size: var(--size-sm); color: var(--danger); }
.field--invalid .field__input { border-color: var(--danger); }
.field--invalid .field__error { display: block; }

/* ---------- Tables ---------- */
/* scroll box: keeps wide tables off the page on phones and gives the sticky header something to stick to */
.table-wrap { overflow: auto; max-block-size: var(--table-max-height, 70vh); }
.table { inline-size: 100%; border-collapse: collapse; font-size: var(--size-sm); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: start; border-block-end: 1px solid var(--border); }
.table thead th {
  position: sticky; inset-block-start: 0;
  background: var(--surface); color: var(--fg-muted);
  font-weight: var(--weight-semibold); font-size: var(--size-xs);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--success) 9%, transparent); }
.table .num {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  /* amounts line up on the units digit, so pin the physical right edge even in RTL */
  text-align: right; direction: ltr; unicode-bidi: isolate; white-space: nowrap;
}
.table tfoot td { font-weight: var(--weight-bold); border-block-end: 0; }

/* ---------- Invoice / receipt (black and white for printing) ---------- */
.invoice {
  background: var(--color-white); color: var(--color-ink);
  font-family: var(--font-ar); font-size: 11pt; line-height: 1.6;
}
.invoice--a4 { inline-size: 210mm; min-block-size: 297mm; padding: 18mm 16mm; }
.invoice--80mm { inline-size: 80mm; padding: 5mm 4mm; font-size: 9pt; }
.invoice__head { display: flex; align-items: center; justify-content: space-between; gap: 6mm; padding-block-end: 5mm; border-block-end: 1.5pt solid var(--color-ink); }
.invoice--80mm .invoice__head { flex-direction: column; text-align: center; gap: 2mm; }
.invoice__logo { inline-size: 36mm; }
.invoice--80mm .invoice__logo { inline-size: 30mm; }
.invoice__meta { font-family: var(--font-num); font-size: .9em; }
.invoice__meta p { margin: 0; }
.invoice table { inline-size: 100%; border-collapse: collapse; margin-block: 6mm; }
.invoice--80mm table { margin-block: 3mm; }
.invoice th, .invoice td { padding: 2mm 1mm; text-align: start; border-block-end: .5pt solid var(--color-ink); }
.invoice th { font-size: .85em; }
.invoice .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.invoice__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.6em; font-weight: var(--weight-bold); }
.invoice__total .num { font-family: var(--font-num); }
.invoice__foot { display: flex; align-items: center; justify-content: space-between; gap: 4mm; margin-block-start: 10mm; padding-block-start: 4mm; border-block-start: .5pt solid var(--color-ink); font-size: .85em; }
.invoice--80mm .invoice__foot { flex-direction: column; text-align: center; margin-block-start: 5mm; }
.invoice__stamp {
  inline-size: 10mm; block-size: 10mm; background-color: var(--color-ink);
  -webkit-mask: var(--motif-leaf) center / contain no-repeat;
  mask: var(--motif-leaf) center / contain no-repeat;
}

/* mark the one invoice to print with [data-print]; pages without it print normally */
@media print {
  body:has(.invoice[data-print]) * { visibility: hidden; }
  body:has(.invoice[data-print]) { margin: 0; }
  body .invoice[data-print], body .invoice[data-print] * { visibility: visible; }
  .invoice[data-print] { position: absolute; inset-block-start: 0; inset-inline-start: 0; box-shadow: none; }
  .invoice__stamp { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------- Toasts ---------- */
.toast {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-inline-start: 4px solid var(--info);
  background: var(--surface); color: var(--fg);
  box-shadow: var(--shadow-md);
  font-size: var(--size-sm);
}
.toast i { font-size: 1.4em; color: var(--info); }
.toast--success { border-color: var(--success); }
.toast--success i { color: var(--success); }
.toast--warning { border-color: var(--warning); }
.toast--warning i { color: var(--warning); }
.toast--danger { border-color: var(--danger); }
.toast--danger i { color: var(--danger); }