/* Colours from design/tokens.json (alsakanar). Cream/amber/brown are banned. */
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype"); font-weight: 400 700; }
@font-face { font-family: "Kufam"; src: url("/fonts/Kufam-VariableFont_wght.ttf") format("truetype"); font-weight: 400 900; }

:root {
  --bg: #F4F6FA; --surface: #FFFFFF; --surface-2: #EDF1F7; --ink: #14213D; --muted: #5B6577; --line: #DDE3EC;
  --brand: #2B59C3; --on-brand: #FFFFFF; --brand-soft: #DCE6F8; --focus: #2B59C3;
  --success: #157A53; --success-soft: #E2F4EC; --warning: #B83B0B; --warning-soft: #FDE7E0;
  --danger: #C92A2A; --danger-soft: #FBE4E4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1628; --surface: #16213A; --surface-2: #1D2A47; --ink: #E8EDF5; --muted: #9AA6BA; --line: #26324D;
    --brand: #7FA2F5; --on-brand: #0E1628; --brand-soft: #1D2C4F; --focus: #7FA2F5;
    --success: #4ADE9F; --success-soft: #10372A; --warning: #FF8A5C; --warning-soft: #3D2216;
    --danger: #FF7B7B; --danger-soft: #3D1C22;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/24px "IBM Plex Sans Arabic", Tahoma, sans-serif; }
a { color: var(--brand); }
h1, h2 { font-family: Kufam, "IBM Plex Sans Arabic", sans-serif; margin: 0; }
h1 { font-size: 28px; line-height: 36px; font-weight: 800; }
h2 { font-size: 20px; line-height: 28px; font-weight: 700; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.topbar { display: flex; align-items: center; gap: 16px; padding: 0 24px; height: 64px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-family: Kufam, sans-serif; font-weight: 800; font-size: 20px; color: var(--ink); text-decoration: none; }
.brand img { width: 32px; height: 32px; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { white-space: nowrap; padding: 8px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.nav a[aria-current="page"] { background: var(--brand-soft); font-weight: 700; }
main { max-width: 1120px; margin: 0 auto; padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.stat strong { display: block; font-size: 28px; line-height: 36px; font-weight: 700; }
.stat span, .muted { color: var(--muted); font-size: 14px; }

.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--brand-soft); color: var(--ink); font: 700 15px "IBM Plex Sans Arabic", sans-serif; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-outline { background: var(--surface); border: 1px solid var(--line); font-weight: 500; }

form.stack { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
/* 16px: iPhone zooms the whole page into any smaller field on focus */
input, select, textarea { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink); font: 700 16px "IBM Plex Sans Arabic", sans-serif; width: 100%; }
label.check { flex-direction: row; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
label.check input { width: 22px; min-height: 22px; height: 22px; accent-color: var(--brand); }
[data-paid][hidden] { display: none; }
input[dir="ltr"], .code { direction: ltr; text-align: left; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px; }
td.code { white-space: nowrap; }  /* a device code never breaks in two */
.error { color: var(--danger); font-size: 14px; font-weight: 500; }

.notice { border-radius: 10px; padding: 12px 16px; font-weight: 500; }
.notice-success { background: var(--success-soft); color: var(--success); }
.notice-warning { background: var(--warning-soft); color: var(--warning); }
.notice-danger { background: var(--danger-soft); color: var(--danger); }
.badge { display: inline-block; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 8px; text-align: right; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 13px; font-weight: 500; }
.table-wrap { overflow-x: auto; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.key { width: 100%; min-height: 120px; resize: none; word-break: break-all; font-size: 16px; }
.login { max-width: 420px; margin: 10vh auto; }
.qr { background: #FFFFFF; padding: 12px; border-radius: 10px; width: max-content; }
nav[role="navigation"] svg { width: 20px; }

/* phones: the top bar wraps (brand + exit on one row, sections below), tighter spacing, two stats per row */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 8px 12px; }
  .topbar form { margin-inline-start: auto; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .nav a { padding: 8px 12px; }
  main { padding: 20px 16px; gap: 16px; }
  h1 { font-size: 24px; line-height: 32px; }
  h2 { font-size: 18px; line-height: 26px; }
  .card { padding: 16px; border-radius: 14px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat strong { font-size: 22px; line-height: 30px; }
  th, td { padding: 10px 6px; font-size: 14px; }
  .key { font-size: 14px; }
  form.stack { max-width: none; }
  .wide-only { display: none; }  /* phones: the customer page shows the rest */
  td.code { font-size: 12px; letter-spacing: 0; }
}