/* IntelliVision Restaurant Interactive App Design System */
:root {
  --bg-dark: #070d14;
  --bg-card: rgba(11, 23, 38, 0.85);
  --border-cyan: rgba(70, 231, 196, 0.3);
  --accent-cyan: #46e7c4;
  --accent-blue: #3b82f6;
  --accent-orange: #f36b45;
  --text-main: #ffffff;
  --text-muted: #94a3b8;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-arabic: 'Dubai', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-family);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* body is a column flex container, so its children are flex items. Two traps
   (panel wave, 2026-08-18): min-width:auto stops them shrinking below content
   width, and margin:0 auto on the cross axis CANCELS the default stretch —
   the item drops to fit-content, one wide chip row makes it 1336px, and
   mobile Chrome expands the layout viewport so nothing even reports overflow.
   Children must be shrinkable and mains must span the body. */
body > * { min-width: 0; }
body > main { width: 100%; }

/* Glassmorphism card */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-cyan);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  padding: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.5);
  transition: border-color 0.3s ease, transform 0.2s ease;
}

.glass-card:hover {
  border-color: var(--accent-cyan);
}

/* Top Navigation Header */
.app-header {
  background: rgba(7, 13, 20, 0.95);
  border-bottom: 1px solid var(--border-cyan);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

.app-nav {
  display: flex;
  gap: 16px;
}

.app-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.app-nav a.active, .app-nav a:hover {
  color: #fff;
  background: rgba(70, 231, 196, 0.15);
  border: 1px solid var(--border-cyan);
}

/* Public top bar: compact product identity, one calm navigation rail, and a
   region control that expands only when the merchant needs it. */
.iv-public-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(5, 11, 18, 0.92);
  border-bottom: 1px solid rgba(70, 231, 196, 0.18);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(135%);
}

.iv-header-shell {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 12px 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
}

.iv-header-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.iv-wordmark {
  color: var(--accent-cyan);
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.7px;
}

.iv-wordmark span { color: #fff; }

.iv-brand-badge {
  padding: 3px 8px;
  border: 1px solid rgba(70, 231, 196, 0.5);
  border-radius: 999px;
  background: rgba(70, 231, 196, 0.08);
  color: var(--accent-cyan);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.iv-header-nav {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.iv-header-nav a {
  padding: 8px 9px;
  border-radius: 9px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: color 160ms ease, background 160ms ease;
}

.iv-header-nav a:hover,
.iv-header-nav a:focus-visible {
  color: #fff;
  background: rgba(148, 163, 184, 0.1);
  outline: none;
}

.iv-header-nav a.is-featured {
  color: var(--accent-cyan);
  background: rgba(70, 231, 196, 0.08);
}

.iv-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.iv-header-actions .btn-outline,
.iv-header-actions .btn-cyan {
  min-height: 38px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
}

.iv-region-slot { display: flex; align-items: center; }

.iv-region-picker {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-family);
  color: #fff;
}

.iv-region-picker > summary {
  list-style: none;
}

.iv-region-picker > summary::-webkit-details-marker { display: none; }

.iv-region-summary {
  height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(70, 231, 196, 0.24);
  border-radius: 10px;
  background: rgba(11, 23, 38, 0.82);
  color: #d8e4ee;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: border-color 160ms ease, background 160ms ease;
}

.iv-region-summary:hover,
.iv-region-summary:focus-visible,
.iv-region-picker[open] > .iv-region-summary {
  border-color: rgba(70, 231, 196, 0.72);
  background: rgba(17, 35, 49, 0.96);
  outline: none;
}

.iv-region-globe { opacity: 0.75; }
.iv-region-flag { font-size: 14px; }
.iv-region-code,
.iv-region-currency { letter-spacing: 0.04em; }
.iv-region-currency { color: var(--accent-cyan); }
.iv-region-divider { width: 1px; height: 14px; background: rgba(148, 163, 184, 0.28); }
.iv-region-alert {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--iv-region-alert, #fbbf24);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--iv-region-alert, #fbbf24) 14%, transparent);
}
.iv-region-chevron { color: #64748b; font-size: 13px; transition: transform 160ms ease; }
.iv-region-picker[open] .iv-region-chevron { transform: rotate(180deg); }

.iv-region-panel {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 1200;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(70, 231, 196, 0.32);
  border-radius: 14px;
  background: rgba(7, 13, 20, 0.985);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(22px);
}

.iv-region-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--accent-cyan);
  font-size: 11px;
  font-weight: 800;
}

.iv-region-panel-head a {
  color: #94a3b8;
  font-size: 10px;
  text-decoration: none;
}

.iv-region-panel select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(70, 231, 196, 0.3);
  border-radius: 10px;
  background: #0b1726;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
}

.iv-region-panel select:focus { border-color: var(--accent-cyan); }

#iv-tax-pill {
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.03em;
}

/* App Shell Layout */
.app-layout {
  display: flex;
  flex: 1;
}

.app-sidebar {
  width: 240px;
  background: rgba(7, 13, 20, 0.8);
  border-right: 1px solid var(--border-cyan);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-sidebar a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.app-sidebar a.active, .app-sidebar a:hover {
  color: #fff;
  background: rgba(70, 231, 196, 0.2);
  border: 1px solid var(--accent-cyan);
}

.app-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* Buttons */
.btn-cyan {
  background: var(--accent-cyan);
  color: #02110f;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(70, 231, 196, 0.3);
  transition: all 0.2s ease;
}

.btn-cyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(70, 231, 196, 0.5);
}

.btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid var(--border-cyan);
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  background: rgba(70, 231, 196, 0.15);
  border-color: var(--accent-cyan);
}

/* Status Badges */
.badge-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

.badge-green { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid #10b981; }
.badge-orange { background: rgba(243, 107, 69, 0.2); color: #f36b45; border: 1px solid #f36b45; }
.badge-blue { background: rgba(59, 130, 246, 0.2); color: #3b82f6; border: 1px solid #3b82f6; }


/* ===== Mobile: public headers collapse instead of cramming (panel wave 2026-08-18).
   Every public page links this sheet; index-style headers use inline styles, so
   the overrides carry !important. Desktop layout is untouched. ===== */
@media (max-width: 900px) {
  .app-header { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 12px; text-align: center; }
  .app-nav { flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; }
  .app-nav a { font-size: 12px; padding: 6px 10px; }
  .app-brand { font-size: 15px; }
  .app-brand img { height: 34px !important; }
  header.header:not(.iv-public-header) > div { flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; padding: 10px 14px !important; }
  header.header:not(.iv-public-header) nav { flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; row-gap: 4px !important; width: 100%; order: 3; }
  header.header:not(.iv-public-header) nav a { font-size: 12px !important; }

  .iv-public-header .iv-header-shell {
    padding: 10px 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
  }

  .iv-header-brand { min-height: 40px; grid-column: 1; grid-row: 1; }
  .iv-wordmark { font-size: 21px; }
  .iv-header-actions { grid-column: 2; grid-row: 1; gap: 6px; }

  .iv-header-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    padding: 8px 0 1px;
    justify-content: flex-start;
    gap: 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    border-top: 1px solid rgba(148, 163, 184, 0.11);
  }
  .iv-header-nav::-webkit-scrollbar { display: none; }
  .iv-header-nav a { flex: 0 0 auto; padding: 7px 9px; font-size: 11px; }
}
@media (max-width: 520px) {
  /* fixed language pill + help button sit bottom-right; keep them off the copy */
  body { padding-bottom: 72px; }

  .iv-public-header .iv-header-shell { padding: 8px 10px; gap: 7px; }
  .iv-wordmark { font-size: 18px; letter-spacing: -0.5px; }
  .iv-brand-badge,
  .iv-auth-signin,
  .iv-region-globe,
  .iv-region-code { display: none !important; }
  .iv-header-actions .btn-cyan { min-height: 36px; padding: 8px 10px; }
  .iv-region-summary { height: 36px; padding: 0 8px; }
  .iv-header-nav { padding-top: 7px; }
}
@media (max-width: 640px) {
  /* the layout-viewport expanders (G50): fixed 3-up pricing grids, unwrappable
     inline-flex CTA rows, wide tables, and margin:auto sections that drop to
     fit-content as flex items — all carry min-content > 390px, which makes
     mobile Chrome lay the whole page out zoomed-out. Stack, wrap, scroll,
     and stretch direct body children to the real viewport. */
  .pricing-grid { grid-template-columns: 1fr !important; }
  div[style*="display:flex"][style*="justify-content:center"],
  div[style*="display: flex"][style*="justify-content: center"] { flex-wrap: wrap !important; }
  table { display: block; overflow-x: auto; max-width: 100%; }
  /* multi-column inline-styled footers and studio control rows stack/wrap */
  div[style*="grid-template-columns:2fr 1fr 1fr 1fr"],
  div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  div[id$="-video-studio"] div[style*="display:flex"],
  div[id$="-video-studio"] div[style*="display: flex"] { flex-wrap: wrap !important; min-width: 0; }
  body > div, body > section, body > main, body > footer { width: 100% !important; min-width: 0; }
  /* fixed floating widgets expand the layout viewport too: the language
     pill's 15-language select and the chat launcher must fit a phone.
     PIXEL caps — 100vw here means the already-expanded viewport (circular) */
  #iv-lang-selector-widget, .ai-chat-launcher { max-width: 350px !important; flex-wrap: wrap !important; }
  #iv-lang-selector-widget select { max-width: 150px !important; }
}

/* ===== Mobile TILLS: the tender buttons must be on the phone, not past it
   (customer-journey wave 2026-08-20). The document reported ZERO horizontal
   overflow on every till while 19 of 28 pushed their Cash/Card buttons 39px to
   608px past the right edge — a parent with hidden overflow meant the cashier
   could not even scroll to reach them. Measure the CONTROL's own box against
   innerWidth, never the document's scrollWidth, or this class stays invisible.
   Every till's split lives in an inline grid-template-columns, so the collapse
   carries !important; desktop is untouched. ===== */
@media (max-width: 460px) {
  /* the two- and three-column till splits: catalogue | ticket | totals */
  .retail-pos-card > div[style*="grid-template-columns"],
  .trade-card > div[style*="grid-template-columns"],
  .repair-grid, .salon-grid, .frontdesk-card, .wholesale-layout, .trades-layout,
  .pos-layout, .split-summary-box > div[style*="grid-template-columns"],
  div[class$="-grid"][style*="grid-template-columns"],
  div[class$="-layout"][style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* every remaining inline 2-up/3-up inside a till card */
  .app-content div[style*="grid-template-columns:1fr 1.5fr"],
  .app-content div[style*="grid-template-columns: 1fr 1.5fr"],
  .app-content div[style*="grid-template-columns:2fr 1fr"],
  .app-content div[style*="grid-template-columns: 2fr 1fr"],
  .app-content div[style*="grid-template-columns:1.1fr 1fr"],
  .app-content div[style*="grid-template-columns: 1.1fr 1fr"],
  .app-content div[style*="grid-template-columns:1.5fr 1fr"],
  .app-content div[style*="grid-template-columns: 1.5fr 1fr"],
  .app-content div[style*="grid-template-columns:1.6fr 1fr"],
  .app-content div[style*="grid-template-columns: 1.6fr 1fr"] { grid-template-columns: 1fr !important; }
  /* some tills put the split on <main> itself, not on an inner div */
  main[style*="grid-template-columns"], .page-container { grid-template-columns: 1fr !important; }
  main > [style*="grid-column: span 2"], main > [style*="grid-column:span 2"] { grid-column: span 1 !important; }
  /* the tender rows themselves: two buttons side by side do not fit 390px */
  .action-btn-row { grid-template-columns: 1fr !important; }
  .timber-calc-box { grid-template-columns: 1fr !important; }
  /* nothing inside a till may reach past the phone */
  .app-content, .app-content * { max-width: 100%; min-width: 0; }
  .app-content img { height: auto; }

  /* And nothing may EXPAND the layout viewport either. A single element whose
     min-content is wider than the phone makes Chrome lay the whole page out
     zoomed-out — the tills came in at 426px-814px on a 390px screen, so every
     "fits the viewport" measurement above was being taken against a viewport
     the page itself had stretched. The known stretchers: the header row, the
     tax-regime toolbar (one long <select> option per country), the injected
     breadcrumb nav, and any <main> holding a fixed-width child. */
  body > header, body > main, body > nav, body > aside { width: 100% !important; min-width: 0; }
  header.app-header > div, header.header > div { min-width: 0; flex-wrap: wrap; }
  #iv-currency-tax-toolbar { min-width: 0 !important; margin: 0 !important; }
  #iv-currency-tax-toolbar select { max-width: 100%; }
  .iv-nav, .iv-crumb { flex-wrap: wrap !important; min-width: 0; }
  main, main > div, main > section { min-width: 0; }
  /* button rows inside a header (price tiers, quick filters) wrap rather than
     stretch the page: three un-wrappable tier buttons alone made 409px */
  header div[style*="display:flex"], header div[style*="display: flex"] { flex-wrap: wrap !important; min-width: 0; }
}

/* CTA anchors never underline (visible once the tutorial stopped hiding sector heroes) */
a.btn-cyan, a.btn-outline { text-decoration: none; }

/* Arabic needs a deliberate type system. Inter has no Arabic glyph set, so an
   unqualified Inter stack makes each browser choose a different fallback. */
html:lang(ar) body,
html:lang(ar) button,
html:lang(ar) input,
html:lang(ar) select,
html:lang(ar) textarea {
  font-family: var(--font-family-arabic);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html:lang(ar) h1,
html:lang(ar) h2,
html:lang(ar) h3,
html:lang(ar) .hero-title {
  font-family: var(--font-family-arabic);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  word-spacing: 0.035em;
}

html:lang(ar) p,
html:lang(ar) .hero-sub {
  line-height: 1.85;
  letter-spacing: 0;
}

html:lang(ar) .iv-header-nav a { font-weight: 600; }
html:lang(ar) .iv-header-actions a { font-weight: 700; }

/* Keep the Latin brand and machine-readable region/currency codes in the
   product's original face while all human-facing Arabic uses the Arabic face. */
html:lang(ar) .iv-wordmark,
html:lang(ar) .iv-region-code,
html:lang(ar) .iv-region-currency,
html:lang(ar) .iv-ltr,
html:lang(ar) [data-ltr] {
  font-family: var(--font-family);
}

/* ============================================================
   RTL PASS — Arabic today, Urdu/Farsi/Hebrew the day they are added.
   Driven by <html dir="rtl">, which the i18n engine sets from each
   language's `dir` field. Under dir=rtl the browser ALREADY mirrors the
   inline axis for free: block text aligns to the right, flex rows flow
   right-to-left, and grid columns fill from the right edge — so the
   header, POS grids and toolbars mirror WITHOUT any row-reverse (adding
   row-reverse would double-flip them straight back to LTR). This pass
   therefore only fixes what does NOT auto-flip: physical border/margin
   sides, fixed-position widgets, and text runs that must STAY left-to-
   right (prices, codes, numeric fields). Side/direction only — no widths,
   no calc(100vw) — so the VIEWPORT LAW (innerWidth <= phone width) is
   never touched. ============================================================ */

/* Physical border side on shared chrome authored for LTR — mirror it so
   the sidebar divider sits on the inline-end (left) edge in RTL. */
[dir="rtl"] .app-sidebar {
  border-right: none;
  border-left: 1px solid var(--border-cyan);
}

/* The floating language pill is pinned to the right by inline styles; in
   RTL it belongs on the left. Override the inline right with !important;
   this is fixed-position, so it changes no layout width. */
[dir="rtl"] #iv-lang-selector-widget {
  right: auto !important;
  left: 18px !important;
}

/* Prices, amounts, SKUs, codes and numeric inputs must NEVER reverse.
   Latin digits already resist bidi, but isolating makes compound money
   strings (e.g. "﷼ 1,234.56 (incl. VAT)") and the text caret reliable.
   .iv-ltr / [data-ltr] is the opt-in hook for any amount span the app or
   the currency engine chooses to mark. */
[dir="rtl"] .iv-ltr,
[dir="rtl"] [data-ltr],
[dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] samp, [dir="rtl"] pre,
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"] {
  direction: ltr;
  unicode-bidi: isolate;
}
/* keep numeric-field digits at the field's start edge (the right, in RTL) */
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"] { text-align: right; }