/* ==========================================================================
   Raseed app — layout and components
   Mobile first. Uses logical properties (inline-start / inline-end) so the
   whole layout mirrors automatically in Arabic.
   ========================================================================== */

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--teal);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  background: var(--teal);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

html[lang="ar"] body { font-family: var(--font-arabic); }

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

img, svg { display: block; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Numbers line up in columns */
.num { font-variant-numeric: tabular-nums; }

/* Text that is always left-to-right (emails, phone numbers) */
.ltr { direction: ltr; unicode-bidi: isolate; }

/* "Skip to content": hidden until reached with the Tab key */
.skip-link {
  position: fixed;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 100;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  transform: translateY(-150%);
  transition: transform 0.15s ease;
}

.skip-link:focus { transform: none; }
.skip-link:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* ---------- Boot screen (shown until the app loads) ---------- */

.boot {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.boot__mark {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 60;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  animation: boot-pulse 1.4s ease-in-out infinite;
}

@keyframes boot-pulse { 50% { opacity: 0.45; } }

.boot__actions { margin-top: 16px; }

.boot__noscript,
.boot__error {
  max-width: 28rem;
  margin: 0 auto;
  padding: 24px;
  color: var(--cream);
  text-align: center;
}

/* ---------- Logo ---------- */

.logo { width: 100%; height: auto; }

.logo__box,
.logo__check {
  fill: none;
  stroke: var(--terracotta);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo__box { stroke-width: 70; }
.logo__check { stroke-width: 59; }
.logo__dot { fill: var(--terracotta); }
.logo__word { fill: currentColor; }

/* ---------- Icons ---------- */

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Arrows and chevrons point the other way in Arabic */
.icon--dir { transform: scaleX(var(--dir)); }

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn:active { transform: scale(0.98); }
.btn:disabled,
.btn[aria-disabled="true"] { cursor: progress; opacity: 0.7; }

.btn--primary { background: var(--teal); color: var(--cream); }
.btn--primary:hover { background: #194d4b; }

/* Terracotta, like the landing page's main button (dark text for contrast) */
.btn--accent { background: var(--terracotta); color: var(--ink); }
.btn--accent:hover { background: #e58a63; box-shadow: 0 8px 22px -10px rgba(var(--terracotta-rgb), 0.9); }

.btn--ghost { border-color: var(--border-strong); color: var(--text); background: var(--surface); }
.btn--ghost:hover { border-color: var(--teal); }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #9c2019; }

.btn--danger-ghost { border-color: rgba(179, 38, 30, 0.35); color: var(--danger); background: var(--surface); }
.btn--danger-ghost:hover { border-color: var(--danger); background: var(--danger-bg); }

.btn--block { width: 100%; }

.btn--sm { min-height: 40px; padding: 0 14px; font-size: 0.875rem; }

/* Spinner shown while a button is busy */
.btn__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.link {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(var(--teal-rgb), 0.35);
  text-underline-offset: 3px;
}

.link:hover { text-decoration-color: currentColor; }

.link-button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---------- Language toggle (same look as the landing page) ---------- */

.lang {
  position: relative;
  display: flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--on-teal-line);
  border-radius: 999px;
  background: var(--on-teal-glass);
}

.lang__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 34px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--cream);
  font: 600 0.75rem/1 var(--font-sans);
  letter-spacing: 0.1em;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.lang__btn[lang="ar"] {
  font-family: var(--font-arabic);
  font-size: 1.05rem;
  letter-spacing: 0;
  padding-bottom: 6px;
}

.lang__btn[aria-pressed="true"] { opacity: 1; }
.lang__btn:hover { opacity: 1; }

.lang__sep {
  width: 1px;
  height: 14px;
  background: rgba(var(--cream-rgb), 0.28);
}

.lang__dot {
  position: absolute;
  bottom: 5px;
  left: calc(3px + 21px - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--terracotta);
  transition: transform 0.5s var(--ease-out);
}

.lang[data-active="ar"] .lang__dot { transform: translate3d(43px, 0, 0); }

/* ---------- Prototype badge ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--terracotta-tint);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

html[lang="ar"] .badge {
  font-size: 0.75rem;
  letter-spacing: 0;
}

/* ==========================================================================
   Sign-in screens (log in, sign up)
   ========================================================================== */

.auth {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px 16px calc(28px + var(--safe-bottom));
  overflow: hidden;
  color: var(--cream);
  background:
    radial-gradient(60rem 40rem at 0% -10%, rgba(42, 107, 104, 0.7), transparent 60%),
    radial-gradient(50rem 40rem at 110% 110%, rgba(13, 52, 50, 0.8), transparent 60%),
    var(--teal);
}

.auth__top {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 1100px;
}

.auth__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: clamp(8px, 3vh, 28px) 0 clamp(18px, 3vh, 28px);
}

.auth__logo {
  display: block;
  width: 164px;
  color: var(--cream);
}

.auth__card {
  width: 100%;
  max-width: 440px;
  padding: 26px 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  animation: rise 0.45s var(--ease-out) both;
}

@media (min-width: 480px) {
  .auth__card { padding: 32px 32px 28px; }
}

.auth__title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.4rem + 1vw, 1.95rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;
}

html[lang="ar"] .auth__title {
  font-family: var(--font-arabic);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.auth__lead {
  margin-top: 8px;
  color: var(--text-2);
}

.auth__demo {
  margin-top: 22px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.auth__demo-hint {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 0.875rem;
  text-align: center;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 6px;
  color: var(--text-3);
  font-size: 0.8125rem;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth__switch {
  margin-top: 18px;
  color: var(--text-2);
  font-size: 0.9375rem;
  text-align: center;
}

.auth__foot {
  max-width: 440px;
  margin-top: 20px;
  color: var(--on-teal-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: center;
}

.auth__foot a {
  color: var(--cream);
  font-weight: 600;
  text-underline-offset: 3px;
}

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form { display: grid; gap: 16px; margin-top: 18px; }

.field { display: grid; gap: 6px; }

.field__label,
.choices__legend {
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.field__hint {
  color: var(--text-3);
  font-size: 0.8125rem;
}

/* While a field shows an error, its hint would just repeat it */
.field:has([aria-invalid="true"]) .field__hint { display: none; }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--danger);
  font-size: 0.8125rem;
  font-weight: 500;
}

.field__error .icon { width: 16px; height: 16px; margin-top: 1px; }

.input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-size: 1rem; /* 16px stops iPhones from zooming in */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input::placeholder { color: #8A9B99; opacity: 1; }

.input:hover { border-color: rgba(var(--teal-rgb), 0.45); }

.input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.18);
}

.input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

/* Password field with a show/hide button inside it */
.input-wrap { position: relative; }

.input-wrap .input { padding-inline-end: 52px; }

.input-wrap__btn {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 2px;
  display: grid;
  place-items: center;
  width: 48px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-2);
  cursor: pointer;
}

.input-wrap__btn:hover { color: var(--text); }

/* Radio buttons shown as tappable chips */
.choices {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.choices__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.choice { position: relative; }

.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.choice input:hover + span { border-color: var(--teal); }

.choice input:checked + span {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--cream);
}

.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.choices[aria-invalid="true"] .choice span { border-color: rgba(179, 38, 30, 0.6); }

/* Notes and messages inside forms */
.callout {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.5;
}

.callout .icon { margin-top: 1px; color: var(--accent-text); }

.callout--error { background: var(--danger-bg); color: var(--danger); }
.callout--error .icon { color: var(--danger); }

.callout--info { background: var(--surface-sunken); }
.callout--info .icon { color: var(--teal); }

.form__note {
  color: var(--text-3);
  font-size: 0.8125rem;
  text-align: center;
}

/* ==========================================================================
   App shell: teal bar on top, tabs at the bottom (phones) or a side menu (laptops)
   ========================================================================== */

.shell {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--appbar-h);
  padding-inline: 16px 12px;
  background: var(--teal);
  color: var(--cream);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.appbar__brand {
  display: flex;
  align-items: center;
  border-radius: 8px;
  color: var(--cream);
  text-decoration: none;
}

.appbar__brand .logo { width: clamp(84px, 26vw, 104px); }

.appbar__end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.appbar :focus-visible { outline-color: var(--terracotta-soft); }

/* Main navigation */
.nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  border-top: 1px solid var(--border);
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

.nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 6px 2px 8px;
  color: var(--text-3);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  transition: color 0.15s ease;
}

html[lang="ar"] .nav__link { font-size: 0.75rem; }

.nav__link .icon { width: 23px; height: 23px; }

.nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav__link:hover { color: var(--text); }

.nav__link[aria-current="page"] { color: var(--teal); font-weight: 600; }

/* Terracotta dot under the current tab — the same dot as in the logo */
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* Parts of the side menu that only appear on laptops */
.nav__extra,
.nav__logout { display: none; }

button.nav__link {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.main {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px 16px calc(var(--tabbar-h) + var(--safe-bottom) + 28px);
}

.main:focus { outline: none; }

/* Fade only: a transform here would trap position: fixed children (like the
   floating "New order" button) inside the page instead of the screen */
.view { animation: view-in 0.22s ease-out both; }

@keyframes view-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Laptop layout ---------- */

@media (min-width: 960px) {
  .shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--appbar-h) 1fr;
    grid-template-areas:
      "bar bar"
      "nav main";
  }

  .appbar {
    grid-area: bar;
    padding-inline: 24px 20px;
  }

  .appbar__brand .logo { width: 116px; }

  .nav {
    grid-area: nav;
    position: sticky;
    top: var(--appbar-h);
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: calc(100vh - var(--appbar-h));
    height: calc(100dvh - var(--appbar-h));
    padding: 20px 14px;
    border-top: 0;
    border-inline-end: 1px solid var(--border);
    background: var(--surface-sunken);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav__link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
  }

  html[lang="ar"] .nav__link { font-size: 0.9375rem; }

  .nav__link .icon { width: 21px; height: 21px; }

  .nav__link:hover { background: rgba(var(--teal-rgb), 0.06); }

  .nav__link[aria-current="page"] {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  .nav__link[aria-current="page"]::after {
    bottom: auto;
    inset-inline-end: 14px;
  }

  .nav__extra { display: grid; }
  .nav__logout { display: flex; }

  .nav__spacer { flex: 1; }

  .main {
    grid-area: main;
    padding: 32px 40px 56px;
  }
}

/* ---------- Side menu footer (laptops): who's signed in, waitlist, log out ---------- */

.account-card {
  gap: 2px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(var(--teal-rgb), 0.06);
}

.account-card__business {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-card__owner {
  overflow: hidden;
  color: var(--text-3);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav__waitlist {
  gap: 6px;
  padding: 0 14px 10px;
  color: var(--accent-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.nav__waitlist a { text-underline-offset: 3px; }

/* ==========================================================================
   Page content
   ========================================================================== */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 20px;
}

.page-title {
  text-wrap: balance;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

html[lang="ar"] .page-title {
  font-family: var(--font-arabic);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

.page-title:focus,
.auth__title:focus,
.empty__title:focus { outline: none; }

.page-sub {
  margin-top: 6px;
  color: var(--text-2);
}

.card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.card + .card { margin-top: 16px; }

.card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.card__text {
  margin-top: 6px;
  color: var(--text-2);
}

.card__actions { margin-top: 14px; }

/* Empty / "coming soon" state */
.empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--teal);
}

.empty__icon .icon { width: 26px; height: 26px; }

.empty__title { font-size: 1.0625rem; font-weight: 600; }

.empty__text { max-width: 26rem; color: var(--text-2); }

.empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

/* Settings: a list of rows, each with a description and an action */
.settings-group + .settings-group { margin-top: 28px; }

.settings-group__title {
  margin-bottom: 10px;
  padding-inline: 4px;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[lang="ar"] .settings-group__title {
  font-size: 0.8125rem;
  letter-spacing: 0;
}

.settings-card { padding: 0; }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 20px;
}

.row + .row { border-top: 1px solid var(--border); }

.row__text { flex: 1 1 16rem; min-width: 0; }

.row__label { font-weight: 600; }

.row__hint {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 0.875rem;
}

.row__value {
  color: var(--text-2);
  overflow-wrap: anywhere;
}

/* Key-value list (business details) */
.details {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 10px 16px;
  margin: 0;
  padding: 18px 20px;
}

.details dt { color: var(--text-3); font-size: 0.9375rem; }
.details dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* Banner shown when the browser blocks storage */
.banner {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  font-size: 0.875rem;
}

.auth .banner { width: 100%; max-width: 440px; margin: 0 0 14px; color: var(--text); }

.banner .icon { color: var(--accent-text); margin-top: 1px; }

/* Waitlist nudge inside the app */
.nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--cream);
}

.nudge__text { font-weight: 500; }

.nudge .btn { min-height: 42px; }

/* ==========================================================================
   Toasts and dialogs
   ========================================================================== */

.toasts {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
  z-index: 60;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 16px;
  pointer-events: none;
}

/* On the sign-in screens, messages appear at the top so they never cover the form */
.toasts--top {
  top: calc(16px + env(safe-area-inset-top, 0px));
  bottom: auto;
}

@media (min-width: 960px) {
  .toasts { bottom: 24px; }
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(100%, 30rem);
  min-height: 48px;
  padding-block: 10px;
  padding-inline: 16px 10px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--cream);
  font-size: 0.9375rem;
  box-shadow: var(--shadow-lg);
  pointer-events: none; /* never blocks taps on what's underneath… */
  animation: toast-in 0.3s var(--ease-out) both;
}

.toast--action { pointer-events: auto; } /* …unless it has a button, like Undo */

.toast.is-leaving { animation: toast-out 0.2s ease both; }

.toast__action {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(var(--cream-rgb), 0.12);
  color: var(--terracotta-tint);
  font-weight: 600;
  cursor: pointer;
}

.toast__action:hover { background: rgba(var(--cream-rgb), 0.2); }

@keyframes toast-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out { to { opacity: 0; transform: translate3d(0, 6px, 0); } }

.dialog {
  width: min(100% - 32px, 26rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.dialog::backdrop {
  background: rgba(11, 42, 41, 0.55);
  backdrop-filter: blur(2px);
}

.dialog[open] { animation: rise 0.25s var(--ease-out) both; }

.dialog__card { padding: 24px 22px 20px; }

.dialog__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.35; }

.dialog__body { margin-top: 8px; color: var(--text-2); }

.dialog__actions {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

@media (max-width: 420px) {
  .dialog__actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Orders and customers
   ========================================================================== */

/* ---------- Page header extras ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-bottom: 6px;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.back-link:hover { color: var(--text); }
.back-link .icon { width: 18px; height: 18px; }

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-head__person {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* The big "New order" button is replaced by the floating one on phones */
@media (max-width: 959px) {
  .page-head__new { display: none; }
}

.section-title {
  margin: 4px 0 12px;
  font-size: 1.0625rem;
  font-weight: 600;
}

.card__title + * { margin-top: 12px; }

.fine-print {
  margin-top: 12px;
  color: var(--text-3);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Search, sort and filter chips ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.search {
  position: relative;
  flex: 1 1 16rem;
  min-width: 0;
}

.search .icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 14px;
  color: var(--text-3);
  transform: translateY(-50%);
  pointer-events: none;
}

.search__input { padding-inline-start: 44px; }

.toolbar__sort { flex: 1 1 13rem; width: auto; min-width: 0; }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586E6C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  cursor: pointer;
}

html[dir="rtl"] .select { background-position: left 14px center; }

.textarea {
  min-height: 96px;
  line-height: 1.5;
  resize: vertical;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding-inline: 14px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover { border-color: var(--teal); }

.chip[aria-pressed="true"] {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--cream);
}

.chip__count {
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.chip[aria-pressed="true"] .chip__count {
  background: rgba(var(--cream-rgb), 0.18);
  color: var(--cream);
}

/* ---------- Status and payment labels ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

html[lang="ar"] .pill { font-size: 0.8125rem; }

.pill .icon { width: 13px; height: 13px; stroke-width: 2.4; }

/* All pairs below reach at least 5.5:1 contrast */
.pill--new { background: #E4EEF6; color: #1F4E79; }
.pill--in_progress { background: #FCEBD9; color: #8A4513; }
.pill--delivered { background: #E3F1E8; color: #1E6B43; }
.pill--cancelled { background: #ECE9E4; color: #57534E; }
.pill--paid { border-color: rgba(30, 107, 67, 0.35); color: #1E6B43; }
.pill--unpaid { border-color: rgba(163, 40, 31, 0.35); color: #A3281F; }

.is-late { color: #A3281F; font-weight: 600; }

/* ---------- Order list ---------- */

.order-list,
.customer-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* never wider than the screen */
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-row {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.order-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

.order-row[data-status="cancelled"] .order-row__main { opacity: 0.7; }

.order-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* lets long item lists end in "…" */
  gap: 4px;
  padding: 14px 16px 10px;
  color: inherit;
  text-decoration: none;
}

.order-row__main:focus-visible { outline-offset: -3px; border-radius: var(--radius); }

.order-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.order-row__title {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-row__total { flex: none; font-weight: 600; }

.order-row__items {
  overflow: hidden;
  color: var(--text-2);
  font-size: 0.9375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  color: var(--text-3);
  font-size: 0.8125rem;
}

.order-row__when,
.order-row__where { display: inline-flex; align-items: center; }

.order-row__meta .icon {
  width: 15px;
  height: 15px;
  margin-inline-end: 4px;
}

.order-row__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-inline: 16px 12px;
  padding-block: 0 12px;
}

.order-row__pills { display: flex; flex-wrap: wrap; gap: 6px; }

.btn--soft { background: #E6EEEC; color: var(--teal); }
.btn--soft:hover { background: #D7E5E2; }

/* ---------- Floating "New order" button (phones) ---------- */

.fab {
  position: fixed;
  inset-inline-end: 16px;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding-inline: 16px 20px;
  border-radius: 999px;
  background: var(--terracotta);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(var(--terracotta-rgb), 0.8), var(--shadow);
}

.fab .icon { width: 22px; height: 22px; stroke-width: 2.2; }

/* Leave room so the button never hides the last order */
.view:has(.fab) { padding-bottom: 72px; }

.toasts--raised { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 84px); }

@media (min-width: 960px) {
  .fab { display: none; }
  .view:has(.fab) { padding-bottom: 0; }
}

/* ---------- Order and customer pages ---------- */

.detail {
  display: grid;
  gap: 16px;
}

.detail__main,
.detail__side {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

.detail .card + .card { margin-top: 0; }

@media (min-width: 1100px) {
  .detail {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

/* Status: four buttons, one tap each */
.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 560px) {
  .segmented { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.segmented__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.segmented__btn:hover { border-color: var(--teal); }
.segmented__btn .icon { width: 17px; height: 17px; stroke-width: 2.4; }
.segmented__btn[aria-pressed="true"] { font-weight: 600; }
.segmented__btn--new[aria-pressed="true"] { background: #E4EEF6; border-color: #1F4E79; color: #1F4E79; }
.segmented__btn--in_progress[aria-pressed="true"] { background: #FCEBD9; border-color: #8A4513; color: #8A4513; }
.segmented__btn--delivered[aria-pressed="true"] { background: #E3F1E8; border-color: #1E6B43; color: #1E6B43; }
.segmented__btn--cancelled[aria-pressed="true"] { background: #ECE9E4; border-color: #57534E; color: #57534E; }

/* Items on an order */
.lines { margin: 0; padding: 0; list-style: none; }

.lines__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.lines__name { font-weight: 500; overflow-wrap: anywhere; }
.lines__calc { grid-row: 2; color: var(--text-3); font-size: 0.875rem; }
.lines__total { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; }

.totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 0; /* no column gap, so the line above the total is one piece */
  margin: 14px 0 0;
}

.totals dt { padding-inline-end: 16px; color: var(--text-2); }
.totals dd { margin: 0; text-align: end; }

.totals .totals__grand {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 700;
}

/* Small label/value lists (delivery, payment, contact) */
.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: 0;
}

.facts dt {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 0.9375rem;
}

.facts dt .icon { width: 16px; height: 16px; }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.pay-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px;
  padding: 4px;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.person:hover .person__name { text-decoration: underline; text-underline-offset: 3px; }
.person__text { min-width: 0; }
.person__name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.person__sub { display: block; color: var(--text-3); font-size: 0.875rem; }

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--terracotta-tint);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

html[lang="ar"] .avatar { font-family: var(--font-arabic); }

.avatar--lg { width: 56px; height: 56px; font-size: 1.25rem; }

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Customer summary numbers */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.stat {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.stat__label { color: var(--text-3); font-size: 0.8125rem; }

.stat__value {
  margin-top: 2px;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.stat__value--warn { color: #A3281F; }

/* ---------- Customer list ---------- */

.customer-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.customer-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

.customer-row__body {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.customer-row__name,
.customer-row__notes {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-row__name { font-weight: 600; }

.customer-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  color: var(--text-3);
  font-size: 0.8125rem;
}

.customer-row__meta > span { display: inline-flex; align-items: center; }
.customer-row__meta .icon { width: 14px; height: 14px; margin-inline-end: 3px; }
.customer-row__notes { color: var(--text-2); font-size: 0.8125rem; }

.customer-row__stats {
  display: grid;
  flex: none;
  justify-items: end;
  gap: 2px;
  text-align: end;
}

.customer-row__spent { font-weight: 600; }
.customer-row__count { color: var(--text-3); font-size: 0.8125rem; }
.customer-row__owed { color: #A3281F; font-size: 0.75rem; font-weight: 600; }

/* ---------- Order and customer forms ---------- */

.form-card { display: grid; gap: 16px; }
.order-form .form-card + .form-card { margin-top: 14px; }
.customer-form { max-width: 40rem; }

.field-row { display: grid; gap: 16px; }

@media (min-width: 640px) {
  .field-row--2 { grid-template-columns: 1fr 1fr; }
}

.new-customer {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.line-edits {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.line-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "name name"
    "qty price"
    "total remove";
  gap: 10px 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.line-edit__name { grid-area: name; }
.line-edit__qty { grid-area: qty; }
.line-edit__price { grid-area: price; }

.line-edit__total {
  display: flex;
  grid-area: total;
  align-items: center;
  gap: 8px;
}

.line-edit__total output { font-weight: 600; }

.line-edit__remove { grid-area: remove; justify-self: end; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}

.icon-btn:hover { border-color: rgba(179, 38, 30, 0.4); color: var(--danger); }

/* Laptops: each item on one line, labels only above the first row */
@media (min-width: 760px) {
  .line-edit {
    grid-template-columns: minmax(0, 1fr) 5.5rem 8.5rem 7.5rem 44px;
    grid-template-areas: "name qty price total remove";
    align-items: start;
    padding: 0;
    border: 0;
    background: none;
  }

  .line-edit__total {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  .line-edit__total output {
    display: flex;
    align-items: center;
    min-height: 48px;
  }

  .line-edit__remove { margin-top: 27px; }

  .line-edit + .line-edit .field__label,
  .line-edit + .line-edit .line-edit__total .field__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .line-edit + .line-edit .line-edit__remove { margin-top: 2px; }
}

.totals--live {
  margin-top: 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.customer-form .form-actions { margin-top: 4px; }

@media (max-width: 559px) {
  .form-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Invoices
   ========================================================================== */

/* ---------- Invoice list ---------- */

.invoice-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.invoice-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

.invoice-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-width: 0;
}

.invoice-row__number {
  color: var(--teal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.invoice-row__customer {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--text-3);
  font-size: 0.8125rem;
}

.invoice-row__meta .icon { width: 15px; height: 15px; }

.invoice-row__side {
  display: grid;
  flex: none;
  justify-items: end;
  gap: 6px;
}

.invoice-row__total { font-weight: 600; }

/* ---------- Notes above an invoice ---------- */

.invoice-hint { margin: -10px 0 16px; }

.callout { margin-bottom: 16px; }
.form .callout,
.form-card .callout { margin-bottom: 0; }

.callout--warn { background: var(--warning-bg); }
.callout__body { display: grid; gap: 4px; }
.callout__title { font-weight: 600; }
.callout__action { justify-self: start; margin-top: 6px; }

/* ---------- The invoice "paper" ---------- */

.invoice {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 44px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-size: 0.9375rem;
  box-shadow: var(--shadow);
}

.invoice p { margin: 0; }

.invoice__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--teal);
}

.invoice__brand {
  width: clamp(104px, 28vw, 150px);
  color: var(--teal);
}

.invoice__title { text-align: end; }

.invoice__kind {
  color: var(--teal);
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 500;
  line-height: 1.1;
}

html[lang="ar"] .invoice__kind { font-family: var(--font-arabic); font-weight: 600; }

.invoice__number { margin-top: 6px; font-weight: 600; letter-spacing: 0.02em; }

.invoice__sample {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px !important;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--warning-bg);
  color: #6B3410;                 /* 8.5:1 */
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}

.invoice__sample .icon { width: 17px; height: 17px; margin-top: 1px; }

.invoice__replaces { margin-top: 8px !important; color: var(--text-3); font-size: 0.8125rem; }

.invoice__parties {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 24px;
  margin-top: 22px;
  line-height: 1.5;
}

.invoice__parties p { color: var(--text-2); overflow-wrap: anywhere; } /* long emails and names wrap */
.invoice__parties .invoice__strong { color: var(--text); font-size: 1rem; font-weight: 600; }

@media (max-width: 479px) {
  .invoice__parties { grid-template-columns: minmax(0, 1fr); }
}

.invoice__label,
.invoice__meta dt,
.invoice__payment dt {
  margin-bottom: 2px;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[lang="ar"] .invoice__label,
html[lang="ar"] .invoice__meta dt,
html[lang="ar"] .invoice__payment dt {
  font-size: 0.8125rem;
  letter-spacing: 0;
}

.invoice__meta,
.invoice__payment {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 20px 0 0;
}

.invoice__meta {
  padding: 12px 0;
  border-block: 1px solid var(--border);
}

.invoice__meta dd,
.invoice__payment dd { margin: 0; font-weight: 600; }

.invoice__items {
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
}

.invoice__items thead tr { border-bottom: 2px solid var(--teal); }
.invoice__items tbody tr { border-bottom: 1px solid var(--border); }

.invoice__items th {
  padding: 8px 6px;
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: start;
  text-transform: uppercase;
}

html[lang="ar"] .invoice__items th { font-size: 0.8125rem; letter-spacing: 0; }

.invoice__items td {
  padding: 10px 6px;
  vertical-align: top;
}

.invoice__items .num-col { text-align: end; white-space: nowrap; }

.invoice__unit-inline {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 0.8125rem;
}

/* Phones: item + amount only, with "2 × 14.000 JD" under the item */
@media (max-width: 559px) {
  .invoice__items .col-qty,
  .invoice__items .col-unit { display: none; }
}

@media (min-width: 560px) {
  .invoice__unit-inline { display: none; }
}

@media (max-width: 420px) {
  .invoice__items .num-col,
  .invoice__totals dd { white-space: normal; overflow-wrap: anywhere; }
  .invoice__totals dt { padding-inline-end: 14px; }
  .invoice__number,
  .invoice__meta dd { overflow-wrap: anywhere; }
}

.invoice__bottom {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
}

.invoice__qr {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 20rem;
  margin: 0;
}

.invoice__qr-code {
  flex: none;
  width: 108px;
  height: 108px;
}

.invoice__qr-code svg { width: 100%; height: 100%; }

.invoice__qr figcaption {
  color: var(--text-3);
  font-size: 0.75rem;
  line-height: 1.45;
}

.invoice__totals {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  gap: 6px 0;
  min-width: min(100%, 17rem);
  margin: 0;
  margin-inline-start: auto;
}

.invoice__totals dt { padding-inline-end: 28px; color: var(--text-2); }
.invoice__totals dd { margin: 0; text-align: end; }

.invoice__totals .grand {
  padding-top: 8px;
  border-top: 2px solid var(--teal);
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
}

.invoice__payment {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-sunken);
}

.invoice__foot {
  margin-top: 26px;
  text-align: center;
}

.invoice__thanks {
  color: var(--teal);
  font-family: var(--font-serif);
  font-size: 1.125rem;
}

html[lang="ar"] .invoice__thanks { font-family: var(--font-arabic); font-weight: 600; }

.invoice__made { margin-top: 4px !important; color: var(--text-3); font-size: 0.75rem; }

/* ---------- Settings: on/off switch and tax rate ---------- */

.switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  margin: 0;
  border-radius: 999px;
  background: #6F8280;            /* 4:1 against the card when off */
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.2s ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s var(--ease-out);
}

.switch:checked { background: var(--teal); }
.switch:checked::after { transform: translateX(calc(22px * var(--dir))); }

.input--rate {
  width: 7rem;
  text-align: end;
}

.input:disabled {
  background: var(--surface-sunken);
  color: var(--text-3);
  cursor: not-allowed;
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

/* ---------- Summary tiles ---------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

@media (min-width: 900px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}

.kpi {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.kpi__label { color: var(--text-2); font-size: 0.875rem; font-weight: 600; }

/* Big standalone numbers use normal (proportional) digits */
.kpi__value {
  margin-top: 2px;
  font-size: clamp(1.15rem, 0.95rem + 1.1vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.kpi__value--warn { color: #A3281F; }

.kpi__sub { color: var(--text-3); font-size: 0.8125rem; line-height: 1.4; }

/* ---------- Charts ---------- */

.dash-grid {
  display: grid;
  gap: 16px;
}

.dash-grid .card + .card { margin-top: 0; }

@media (min-width: 1100px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid .chart-card:first-child { grid-column: 1 / -1; }
}

.chart-card { min-width: 0; }

.chart-card__sub { margin-top: 2px !important; color: var(--text-3); font-size: 0.8125rem; }

/* The height includes the axis labels, so nothing gets cut off */
.chart-box {
  position: relative;
  width: 100%;
  height: 220px;
  margin-top: 14px;
}

.chart-box--sales { height: 240px; }
.chart-box--status { height: 190px; }
.chart-box--products { height: 250px; }

.chart-card__empty {
  margin-top: 14px;
  padding: 28px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-2);
  text-align: center;
}

/* The table view under every chart */
.chart-table { margin-top: 10px; }

.chart-table summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--teal);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.chart-table summary:hover { text-decoration: underline; text-underline-offset: 3px; }

.data-table {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th,
.data-table td {
  padding: 7px 4px;
  text-align: start;
}

.data-table thead tr { border-bottom: 1px solid var(--border-strong); }
.data-table tbody tr { border-bottom: 1px solid var(--border); }
.data-table thead th { color: var(--text-3); font-weight: 600; }
.data-table tbody th { font-weight: 500; }
.data-table .num-col { text-align: end; white-space: nowrap; }

/* ---------- Recent orders ---------- */

.dash-recent { margin-top: 24px; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn__spinner { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
}