/* ============================================================================
   LAFFIT — Design System
   Home Cleaning Service Platform · Sultanate of Oman
   ----------------------------------------------------------------------------
   Tokens below map 1:1 onto a Tailwind v4 `@theme` block in Phase 4, so the
   design language ports to React without re-deriving it.

   RTL: this file uses CSS logical properties exclusively
   (padding-inline, margin-inline, border-inline, inset-inline).
   Arabic mirroring is therefore automatic — no separate stylesheet.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* -- Brand palette (client-approved distribution) ------------------------ */
  --ivory:        #FAF6EE;   /* 40% — main background                        */
  --deep-green:   #0F4A43;   /* 30% — brand, hierarchy, navigation           */
  --mint:         #BFE3D7;   /* 15% — cards, soft surfaces                   */
  --sand:         #E9DCC8;   /* 10% — warm neutral, separation               */
  --coral:        #E9836A;   /*  5% — accent, highlights                     */

  /* -- Coral, split for accessibility -------------------------------------- */
  /* #E9836A on white = 2.65:1 — fails WCAG AA (needs 4.5:1).
     Decorative use keeps the client's exact hex; text-bearing buttons use
     the darker step, which measures 5.1:1 with white.                        */
  --coral-500:    #E9836A;   /* fills, badges, illustration, alert grounds    */
  --coral-600:    #D9694C;   /* hover on decorative                           */
  --coral-700:    #B54F35;   /* buttons carrying white text  ✓ 5.1:1          */
  --coral-800:    #97402A;   /* button hover                                  */
  --coral-050:    #FDEFEA;   /* tint ground                                   */

  /* -- Green ramp ---------------------------------------------------------- */
  --green-900:    #08302B;
  --green-800:    #0F4A43;
  --green-700:    #17635A;
  --green-600:    #1F7D71;
  --green-500:    #2A9587;
  --green-200:    #BFE3D7;
  --green-100:    #DCF0EA;
  --green-050:    #EEF8F5;

  /* -- Warm neutrals ------------------------------------------------------- */
  --sand-300:     #DCCBB0;
  --sand-200:     #E9DCC8;
  --sand-100:     #F3EBDF;

  /* -- Ink ----------------------------------------------------------------- */
  --ink:          #13211F;
  --ink-2:        #455855;
  --ink-3:        #7B8D8A;
  --ink-4:        #A4B2AF;

  /* -- Surfaces & lines ---------------------------------------------------- */
  --bg:           #FAF6EE;
  --surface:      #FFFFFF;
  --surface-2:    #F6F1E7;
  --line:         #E7E1D4;
  --line-2:       #F0EADE;
  --line-green:   #CFE5DE;

  /* -- Functional (Coral stays reserved for CTAs, never for status) -------- */
  --success:      #1E7A4C;  --success-bg: #E4F3EA;  --success-line: #BFE0CC;
  --warning:      #A96D12;  --warning-bg: #FBF0DC;  --warning-line: #EBD5AB;
  --danger:       #B3392B;  --danger-bg:  #FBE9E6;  --danger-line:  #EFC8C1;
  --info:         #256A96;  --info-bg:    #E4F0F8;  --info-line:    #C0DCEC;
  --neutral:      #5E6E6B;  --neutral-bg: #EEEAE1;  --neutral-line: #DCD5C8;

  /* -- Radii --------------------------------------------------------------- */
  --r-xs: 6px;  --r-sm: 9px;  --r-md: 13px;  --r-lg: 18px;  --r-xl: 24px;
  --r-full: 999px;

  /* -- Elevation — warm/green tinted, never pure black --------------------- */
  --sh-xs: 0 1px 2px rgba(15,74,67,.06);
  --sh-sm: 0 1px 3px rgba(15,74,67,.07), 0 1px 2px rgba(15,74,67,.04);
  --sh-md: 0 4px 12px rgba(15,74,67,.08), 0 1px 3px rgba(15,74,67,.04);
  --sh-lg: 0 12px 28px rgba(15,74,67,.10), 0 4px 10px rgba(15,74,67,.05);
  --sh-xl: 0 24px 56px rgba(15,74,67,.14), 0 8px 20px rgba(15,74,67,.06);

  /* -- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(.4,0,.2,1);
  --fast: 130ms;  --base: 200ms;  --slow: 320ms;

  /* -- Layout -------------------------------------------------------------- */
  --sidebar: 260px;
  --topbar: 64px;
}

/* ----------------------------------------------------------------- 2. RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1;
}

img, svg { display: block; max-width: 100%; }

/* Every icon() call emits .ico. An inline SVG with no intrinsic size expands to
   fill its container, so this base size is what stops that. Context rules
   further down (.btn svg, .stat-ico svg, …) are more specific and still win.  */
.ico    { width: 17px; height: 17px; flex: none; }
.ico-sm { width: 13px; height: 13px; flex: none; }
.ico-xs { width: 11px; height: 11px; flex: none; }
.ico-lg { width: 22px; height: 22px; flex: none; }
.ico-xl { width: 54px; height: 54px; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-full); border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ------------------------------------------------------------ 3. TYPOGRAPHY */
/* Tajawal has no weight 600 — the ramp jumps 500 → 700. Client asked for
   "Tajawal Bold": 700 carries headings, labels and numerals; body stays 400
   so long Arabic paragraphs remain readable.                                 */

.t-display { font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.t-h1      { font-size: 23px; line-height: 1.3;  font-weight: 700; letter-spacing: -.01em; }
.t-h2      { font-size: 19px; line-height: 1.35; font-weight: 700; }
.t-h3      { font-size: 16px; line-height: 1.4;  font-weight: 700; }
.t-body    { font-size: 15px; line-height: 1.6;  font-weight: 400; }
.t-sm      { font-size: 13.5px; line-height: 1.5; font-weight: 400; }
.t-xs      { font-size: 12px; line-height: 1.45; font-weight: 500; }
.t-label   { font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.t-num     { font-variant-numeric: tabular-nums; font-weight: 700; }

.c-ink   { color: var(--ink); }
.c-2     { color: var(--ink-2); }
.c-3     { color: var(--ink-3); }
.c-green { color: var(--deep-green); }
.c-coral { color: var(--coral-700); }

/* Arabic sizing: Tajawal's Arabic glyphs read slightly smaller at the same
   px value than its Latin, so nudge up when the document is RTL.             */
[dir="rtl"] body { font-size: 15.5px; }
[dir="rtl"] .t-display { font-size: 31px; }
[dir="rtl"] .t-sm { font-size: 14px; }

/* --------------------------------------------------------------- 4. LAYOUT */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.row-t   { display: flex; align-items: flex-start; }
.between { justify-content: space-between; }
.center  { justify-content: center; align-items: center; }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }
.g-4 { gap: 4px; }  .g-6 { gap: 6px; }   .g-8 { gap: 8px; }
.g-10{ gap: 10px; } .g-12{ gap: 12px; }  .g-16{ gap: 16px; }
.g-20{ gap: 20px; } .g-24{ gap: 24px; }  .g-32{ gap: 32px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 860px)  { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- 5. CARD */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card-pad { padding: 20px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2);
}
.card-soft { background: var(--green-050); border-color: var(--line-green); }
.card-sand { background: var(--sand-100); border-color: var(--sand-300); }

/* --------------------------------------------------------------- 6. BUTTON */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding-inline: 18px;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }

/* Primary CTA — coral-700, the accessible step. 5.1:1 with white.           */
.btn-primary   { background: var(--coral-700); color: #fff; box-shadow: var(--sh-sm); }
.btn-primary:hover { background: var(--coral-800); box-shadow: var(--sh-md); }

.btn-green     { background: var(--deep-green); color: #fff; box-shadow: var(--sh-sm); }
.btn-green:hover { background: var(--green-900); box-shadow: var(--sh-md); }

.btn-outline   { border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.btn-outline:hover { border-color: var(--deep-green); color: var(--deep-green); background: var(--green-050); }

.btn-ghost     { color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

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

.btn-sm { height: 32px; padding-inline: 12px; font-size: 13px; border-radius: var(--r-xs); }
.btn-lg { height: 48px; padding-inline: 26px; font-size: 15.5px; border-radius: var(--r-md); }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--r-sm); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* ---------------------------------------------------------------- 7. BADGE */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding-inline: 10px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.badge-plain::before { display: none; }

/* Six order statuses — each visually distinct, and none uses Coral, which
   stays reserved for calls to action so status never competes with a CTA.   */
.st-pending    { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-line); }
.st-confirmed  { color: var(--deep-green); background: var(--green-100); border-color: var(--line-green); }
.st-progress   { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.st-completed  { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
.st-cancelled  { color: var(--neutral); background: var(--neutral-bg); border-color: var(--neutral-line); }
.st-rejected   { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.st-paid       { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
.st-unpaid     { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-line); }
.st-cash       { color: var(--neutral); background: var(--neutral-bg); border-color: var(--neutral-line); }
.st-new        { color: var(--coral-700); background: var(--coral-050); border-color: #F2CDC0; }

/* ---------------------------------------------------------------- 8. FIELD */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.field-hint  { font-size: 12px; color: var(--ink-3); }
.field-err   { font-size: 12px; color: var(--danger); font-weight: 500; }

.input, .select, .textarea {
  width: 100%; height: 40px;
  padding-inline: 12px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.textarea { height: auto; min-height: 96px; padding-block: 10px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(31,125,113,.13);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B8D8A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 16px;
  padding-inline-end: 34px;
}
[dir="rtl"] .select { background-position: left 11px center; }

.search { position: relative; }
.search .input { padding-inline-start: 38px; }
.search svg {
  position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-3); pointer-events: none;
}

/* Toggle */
/* display is required: a <label> is inline by default, and width/height do not
   apply to inline elements — inside a table cell the switch collapsed to zero. */
.switch { position: relative; display: inline-block; vertical-align: middle;
          width: 42px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span {
  position: absolute; inset: 0; background: var(--ink-4);
  border-radius: var(--r-full); transition: background var(--base) var(--ease);
}
.switch span::after {
  content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px; background: #fff; border-radius: 50%;
  box-shadow: var(--sh-sm);
  transform: translateX(0);          /* explicit start value — a transition
                                        cannot animate from `none`          */
  transition: transform var(--base) var(--ease);
}
.switch input:checked + span { background: var(--green-600); }
.switch input:checked + span::after { transform: translateX(18px); }
[dir="rtl"] .switch input:checked + span::after { transform: translateX(-18px); }

/* Checkbox */
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; }
.check input { appearance: none; width: 19px; height: 19px; flex: none;
  border: 1.5px solid var(--ink-4); border-radius: 5px; background: #fff;
  transition: all var(--fast) var(--ease); }
.check input:checked { background: var(--deep-green); border-color: var(--deep-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 13px; background-position: center; background-repeat: no-repeat; }

/* ---------------------------------------------------------------- 9. TABLE */
.tbl-wrap { overflow-x: auto; }
.tbl { font-size: 14px; }
.tbl thead th {
  text-align: start; padding: 11px 16px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tbody tr { transition: background var(--fast) var(--ease); }
.tbl tbody tr:hover { background: var(--green-050); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.tbl .end { text-align: end; }

/* --------------------------------------------------------------- 10. AVATAR */
.avatar {
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  background: var(--green-100); color: var(--deep-green);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.avatar-lg { width: 52px; height: 52px; font-size: 17px; }
.avatar-sand { background: var(--sand-200); color: #7A6438; }
.avatar-coral { background: var(--coral-050); color: var(--coral-700); }

/* ------------------------------------------------------------- 11. ADMIN UI */
.admin { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar); flex: none;
  background: var(--deep-green); color: #fff;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { padding: 20px 20px 16px; display: flex; align-items: center; gap: 11px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 12px 20px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-color: transparent; }
.nav-group { margin-top: 18px; padding-inline: 10px; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.42); }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.76);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
  cursor: pointer; margin-bottom: 1px;
}
.nav-item svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: var(--mint); color: var(--green-900); font-weight: 700; }
.nav-item.active svg { opacity: 1; }
.nav-badge {
  margin-inline-start: auto; min-width: 20px; height: 20px; padding-inline: 6px;
  border-radius: var(--r-full); background: var(--coral-700); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.nav-item.active .nav-badge { background: var(--coral-700); color: #fff; }
.sidebar-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.12); }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar); flex: none;
  background: rgba(250,246,238,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
  padding-inline: 24px;
  position: sticky; top: 0; z-index: 20;
}
.admin-body { padding: 24px; flex: 1; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }

/* Stat tile */
.stat { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-ico { width: 38px; height: 38px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; }
.stat-ico svg { width: 19px; height: 19px; }
.stat-val { font-size: 27px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-lbl { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; }
.trend-up { color: var(--success); } .trend-down { color: var(--danger); }

/* Tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab {
  padding: 10px 15px; font-size: 14px; font-weight: 700; color: var(--ink-3);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--deep-green); border-bottom-color: var(--deep-green); }

/* Empty state */
.empty { padding: 56px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--green-050);
  display: flex; align-items: center; justify-content: center; color: var(--green-600); }
.empty-ico svg { width: 28px; height: 28px; }

/* Timeline */
.tl { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; inset-inline-start: 11px; top: 26px; bottom: 0;
  width: 2px; background: var(--line);
}
.tl-item:last-child::before { display: none; }
.tl-dot {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.tl-dot svg { width: 12px; height: 12px; }
.tl-done .tl-dot { background: var(--deep-green); border-color: var(--deep-green); color: #fff; }
.tl-now  .tl-dot { background: var(--coral-700); border-color: var(--coral-700); color: #fff;
  box-shadow: 0 0 0 4px rgba(181,79,53,.16); }
.tl-done::before { background: var(--deep-green); }

/* Alert */
.alert { display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--r-md); border: 1px solid; font-size: 13.5px; }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.alert-info    { background: var(--info-bg);    border-color: var(--info-line);    color: #1B4F70; }
.alert-warn    { background: var(--warning-bg); border-color: var(--warning-line); color: #7D500B; }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-line);  color: #8E2A1F; }
.alert-success { background: var(--success-bg); border-color: var(--success-line); color: #15603A; }

/* Progress */
.bar { height: 7px; border-radius: var(--r-full); background: var(--line-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--r-full); background: var(--green-600); }
.bar-coral > i { background: var(--coral-500); }

/* Chart (pure CSS bars) */
.chart { display: flex; align-items: flex-end; gap: 8px; height: 168px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.chart-bar { width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; background: var(--green-600); position: relative;
  transition: background var(--fast) var(--ease); }
.chart-col:hover .chart-bar { background: var(--coral-500); }
.chart-lbl { font-size: 11px; color: var(--ink-3); font-weight: 500; }

/* Toolbar */
.toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }

/* Pagination */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.pager-btn { width: 32px; height: 32px; border-radius: var(--r-xs); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--surface); }
.pager-btn.active { background: var(--deep-green); border-color: var(--deep-green); color: #fff; }
.pager-btn:hover:not(.active) { border-color: var(--deep-green); color: var(--deep-green); }
[dir="rtl"] .pager-btn svg { transform: scaleX(-1); }

/* --------------------------------------------------------- 12. PHONE FRAMES */
.phones { display: flex; flex-wrap: wrap; gap: 34px 26px; }

.phone-wrap { width: 300px; display: flex; flex-direction: column; gap: 11px; }
.phone-cap { display: flex; align-items: baseline; gap: 8px; }
.phone-n {
  width: 21px; height: 21px; flex: none; border-radius: 50%;
  background: var(--deep-green); color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.phone-title { font-size: 13.5px; font-weight: 700; }
.phone-sub { font-size: 11.5px; color: var(--ink-3); }

.phone {
  width: 300px; height: 640px; flex: none; position: relative;
  background: #0B1F1C;
  border-radius: 38px;
  padding: 9px;
  box-shadow: var(--sh-xl), 0 0 0 1px rgba(0,0,0,.16);
}
.phone-screen {
  width: 100%; height: 100%; overflow: hidden; position: relative;
  border-radius: 30px; background: var(--ivory);
  display: flex; flex-direction: column;
}
.notch {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 22px; background: #0B1F1C; border-radius: var(--r-full); z-index: 60;
}
.statusbar {
  height: 38px; flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; font-size: 11.5px; font-weight: 700; color: var(--ink);
  padding-top: 6px;
}
.statusbar .sb-r { display: flex; align-items: center; gap: 4px; }
/* Scrolls like a real device, so a long screen is reviewable rather than clipped */
.phone-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }
.phone-scroll::-webkit-scrollbar { width: 4px; }
.phone-scroll::-webkit-scrollbar-thumb { background: var(--line); border: 0; }

/* Mobile app chrome inside the frame */
.m-head { display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; flex: none; }
.m-title { font-size: 16px; font-weight: 700; }
.m-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.m-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px; box-shadow: var(--sh-xs); }
.m-card-mint { background: var(--mint); border-color: transparent; }
.m-card-sand { background: var(--sand-200); border-color: transparent; }

.m-tabbar {
  flex: none; height: 62px; display: flex; align-items: center;
  background: #fff; border-top: 1px solid var(--line);
  padding-bottom: 8px;
}
.m-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; color: var(--ink-4); }
.m-tab svg { width: 20px; height: 20px; }
.m-tab.on { color: var(--deep-green); }

.m-btn {
  height: 46px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14.5px; font-weight: 700; width: 100%;
}
.m-btn-primary { background: var(--coral-700); color: #fff; }
.m-btn-green   { background: var(--deep-green); color: #fff; }
.m-btn-outline { border: 1.5px solid var(--line); color: var(--ink); background: #fff; }

.m-icon-tile {
  aspect-ratio: 1; border-radius: var(--r-md); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 6px 3px;
  font-size: 9.5px; font-weight: 700; text-align: center; line-height: 1.2;
  overflow: hidden;
}
.m-icon-tile svg { width: 20px; height: 20px; }
.m-icon-tile span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .m-icon-tile { font-size: 10px; }

.m-step { display: flex; align-items: center; gap: 5px; padding: 0 16px 10px; }
.m-step i { height: 3.5px; border-radius: var(--r-full); background: var(--line); flex: 1; }
.m-step i.on { background: var(--deep-green); }

.m-map {
  height: 150px; border-radius: var(--r-md); position: relative; overflow: hidden;
  background:
    linear-gradient(115deg, rgba(191,227,215,.5), rgba(233,220,200,.5)),
    repeating-linear-gradient(0deg,  transparent 0 26px, rgba(15,74,67,.09) 26px 27px),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(15,74,67,.09) 26px 27px),
    var(--green-050);
  border: 1px solid var(--line-green);
}
.m-pin {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-100%);
  width: 26px; height: 26px; border-radius: 50% 50% 50% 0; rotate: -45deg;
  background: var(--coral-700); box-shadow: var(--sh-md);
}
.m-pin::after { content:''; position: absolute; inset: 7px; background: #fff; border-radius: 50%; }
.m-area {
  position: absolute; border-radius: 40% 55% 45% 50%;
  background: rgba(31,125,113,.17); border: 1.5px dashed var(--green-600);
}

/* ---------------------------------------------------------- 13. LANG TOGGLE */
.lang {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full);
}
.lang button {
  padding: 5px 13px; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 700; color: var(--ink-3);
  transition: all var(--fast) var(--ease);
}
.lang button.on { background: var(--deep-green); color: #fff; box-shadow: var(--sh-xs); }

/* ------------------------------------------------------------- 14. UTILITIES */
.hide { display: none !important; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono  { font-variant-numeric: tabular-nums; }
.sep   { height: 1px; background: var(--line-2); }
.pill  { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 12px;
         border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line);
         font-size: 12.5px; font-weight: 700; white-space: nowrap; flex: none; }
.pill .ico { width: 14px; height: 14px; }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); flex: none; }

/* Directional icons must mirror in RTL; brand marks must not. */
[dir="rtl"] .flip { transform: scaleX(-1); }

.scroll-y { overflow-y: auto; }
.rel { position: relative; }

/* Mock-data marker — everything the client still owes us is tagged with this
   so nothing placeholder-ish silently survives into production.             */
.tbd {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px; border-radius: var(--r-xs);
  background: repeating-linear-gradient(45deg, #FDEFEA 0 6px, #FBE4DC 6px 12px);
  border: 1px dashed var(--coral-600); color: var(--coral-800);
  font-size: 11px; font-weight: 700;
}

@media print { .sidebar, .topbar, .no-print { display: none !important; } }

/* ====================================================== 15. RESPONSIVE ADMIN */
/* Hamburger + scrim, hidden until the sidebar becomes a drawer. */
.nav-toggle { display: none; }
.scrim {
  display: none; position: fixed; inset: 0; z-index: 55;
  background: rgba(8,48,43,.48); backdrop-filter: blur(2px);
}
.scrim.on { display: block; }

@media (max-width: 1024px) {
  /* Sidebar becomes an off-canvas drawer. inset-inline-start + a direction-
     aware transform means it slides from the left in English and the right
     in Arabic without a second rule set.                                     */
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    z-index: 60; height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--base) var(--ease);
    box-shadow: var(--sh-xl);
  }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: translateX(0); }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 900px) {
  /* Inline grid-template-columns (1.55fr 1fr and friends) are set per view,
     so they need overriding here rather than in each template.              */
  .grid { grid-template-columns: 1fr !important; gap: 12px; }
  .grid-4, .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .admin-body { padding: 14px; }
  .topbar { padding-inline: 14px; gap: 10px; }
  .page-head { gap: 12px; margin-bottom: 16px; }
  .card-pad { padding: 15px; }
  .card-head { padding: 14px 15px; }
  .toolbar { padding: 12px; }
  .t-display { font-size: 25px; }
  .t-h1 { font-size: 20px; }
  .stat-val { font-size: 23px; }
  .stat { padding: 14px; }
}

@media (max-width: 560px) {
  .grid-4, .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .topbar .search { display: none; }         /* icon button takes over */
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .row { flex-wrap: wrap; }
  .sidebar { width: min(84vw, 300px); }
  .tbl thead th, .tbl tbody td { padding-inline: 12px; }
  .pager { justify-content: center; }
}

/* The phone gallery stays legible on a phone by shrinking the frames. */
@media (max-width: 700px) {
  .phones { gap: 26px 16px; justify-content: center; }
  .phone-wrap, .phone { width: 270px; }
  .phone { height: 578px; }
}