/* ============================================================
   ERPForce Design System v2.0 — App Shell · Command Palette ·
   Toast · Company Switcher  (gap-audit 2.1 / 2.2 / 2.3 / 2.4)
   ────────────────────────────────────────────────────────────
   The canonical shell the three hand-rolled product shells
   (dashboard/ · invoicing/ · ag-ui/) collapse into. This is also
   where the orphaned brand navy is SPENT (7.2): the rail and the
   ⌘K palette chrome carry --brand-navy. Mobile = bottom-nav +
   drawer, with ⌘K as the primary mobile nav/search surface (D2).
   ============================================================ */

:root {
  --rail-w:        232px;
  --shell-topbar-h: 52px;
  --botnav-h:       58px;

  /* Navy shell chrome (tier-2 brand indirection — a white-label theme
     overrides --shell-bg without touching the shell components). */
  --shell-bg:         var(--brand-navy);
  --shell-bg-deep:    #00103F;
  --shell-fg:         #AEB9DC;
  --shell-fg-strong:  #FFFFFF;
  --shell-hover:      rgba(255,255,255,.08);
  --shell-active:     rgba(255,255,255,.14);
  --shell-border:     rgba(255,255,255,.10);
}
.dark {
  --shell-bg:      #0A0E1F;
  --shell-bg-deep: #05070F;
  --shell-border:  rgba(255,255,255,.07);
}

/* ─────────── Layout ─────────── */
.ef-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: var(--shell-topbar-h) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  background: var(--surface-canvas);
  overflow: hidden;
}
.ef-rail   { grid-row: 1 / -1; }
.ef-topbar { grid-column: 2; }
.ef-main   { grid-column: 2; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }

/* ─────────── Rail (navy) ─────────── */
.ef-rail {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--shell-bg);
  color: var(--shell-fg);
  border-inline-end: 1px solid var(--shell-border);
}
/* Dark-scoped repaint with a literal (not a var) — sidesteps an engine
   quirk where overriding a var-of-a-var (--shell-bg: var(--brand-navy))
   via inheritance doesn't always repaint the dependent background. */
.dark .ef-rail { background: #0A0E1F; }
.ef-rail-head { padding: var(--s-5) var(--s-5) var(--s-4); }

/* Company / tenant switcher */
.ef-company {
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--shell-hover);
  border: 1px solid var(--shell-border);
  color: var(--shell-fg-strong);
  text-align: start;
}
.ef-company:hover { background: var(--shell-active); }
.ef-company .efc-logo {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--brand-green); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: -.02em;
}
.ef-company .efc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ef-company .efc-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--shell-fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-company .efc-sub  { font-size: var(--text-2xs); color: var(--shell-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-company .efc-chev { width: 14px; height: 14px; color: var(--shell-fg); flex-shrink: 0; }

.ef-company-menu {
  position: absolute; z-index: var(--z-dropdown);
  margin-top: var(--s-3); width: 264px;
  background: var(--surface-raised); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; padding: var(--s-3);
}
.ef-company-menu .efm-label { font-size: var(--text-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-quaternary); padding: var(--s-3) var(--s-4) var(--s-2); }
.ef-company-item { display: flex; align-items: center; gap: var(--s-4); width: 100%; padding: var(--s-4); border-radius: var(--r-md); text-align: start; }
.ef-company-item:hover { background: var(--surface-hover); }
.ef-company-item .efi-logo { width: 24px; height: 24px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; font-size: var(--text-xs); font-weight: var(--fw-bold); color: #fff; }
.ef-company-item .efi-meta { flex: 1; min-width: 0; }
.ef-company-item .efi-name { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-primary); }
.ef-company-item .efi-sub { font-size: var(--text-2xs); color: var(--text-tertiary); }
.ef-company-item .efi-check { width: 15px; height: 15px; color: var(--text-brand); flex-shrink: 0; }
.ef-company-item--add { color: var(--text-brand-strong); font-weight: var(--fw-medium); font-size: var(--text-sm); border-top: 1px solid var(--border-subtle); border-radius: 0; margin-top: var(--s-3); padding-top: var(--s-5); }

/* Rail nav */
.ef-rail-nav { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 1px; }
.ef-rail-sec { font-size: var(--text-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--shell-fg); opacity: .62; padding: var(--s-5) var(--s-4) var(--s-2); }
.ef-rail-item {
  display: flex; align-items: center; gap: var(--s-5);
  width: 100%; height: 34px; padding: 0 var(--s-4);
  border-radius: var(--r-md); color: var(--shell-fg);
  font-size: var(--text-md); text-align: start; position: relative;
}
.ef-rail-item:hover { background: var(--shell-hover); color: var(--shell-fg-strong); }
.ef-rail-item .ri-ic { width: 16px; height: 16px; flex-shrink: 0; opacity: .82; }
.ef-rail-item .ri-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-rail-item .ri-badge { font-size: var(--text-2xs); font-weight: var(--fw-bold); min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--r-full); background: var(--shell-active); color: var(--shell-fg-strong); display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
/* Active nav = a RESERVED brand-green moment (foundations §8.1) */
.ef-rail-item.is-active { background: var(--shell-active); color: var(--shell-fg-strong); font-weight: var(--fw-medium); }
.ef-rail-item.is-active .ri-ic { color: var(--brand-green); opacity: 1; }
.ef-rail-item.is-active::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; translate: 0 -50%; width: 3px; height: 18px; border-radius: var(--r-full); background: var(--brand-green); }
.ef-rail-item .ri-badge--ai { background: var(--ai-fg); color: #fff; }

.ef-rail-foot { padding: var(--s-4); border-top: 1px solid var(--shell-border); display: flex; flex-direction: column; gap: 1px; }
.ef-rail-user { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); }
.ef-rail-user:hover { background: var(--shell-hover); }
.ef-rail-user .ru-av { width: 28px; height: 28px; border-radius: 50%; background: var(--shell-active); color: var(--shell-fg-strong); display: grid; place-items: center; font-size: var(--text-xs); font-weight: var(--fw-semibold); flex-shrink: 0; }
.ef-rail-user .ru-meta { flex: 1; min-width: 0; }
.ef-rail-user .ru-n { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--shell-fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-rail-user .ru-r { font-size: var(--text-2xs); color: var(--shell-fg); }

/* ─────────── Topbar ─────────── */
.ef-topbar {
  display: flex; align-items: center; gap: var(--s-5);
  padding: 0 var(--s-8);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-default);
}
.ef-menu-btn { display: none; width: 34px; height: 34px; border-radius: var(--r-md); align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; }
.ef-menu-btn:hover { background: var(--surface-hover); }
.ef-menu-btn svg { width: 18px; height: 18px; }
.ef-crumb { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-sm); color: var(--text-tertiary); min-width: 0; }
.ef-crumb b { color: var(--text-primary); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-crumb svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Bidi correctness for user-data proper nouns (5.5): company / tenant names,
   menu entries, and the signed-in user resolve by their own first-strong
   character, so a Latin name's trailing punctuation ("Al Batin Trading Est.")
   stays at the end instead of jumping to the visual start under dir="rtl".
   `plaintext` is identical to the default in LTR, so this is safe both ways. */
.efc-name, .efc-sub,
.efi-name, .efi-sub,
.ru-n, .ru-r { unicode-bidi: plaintext; }

/* ⌘K trigger — looks like search, opens the palette */
.ef-cmdk-trigger {
  display: flex; align-items: center; gap: var(--s-4);
  margin-inline-start: auto;
  width: min(340px, 38vw); height: 32px; padding: 0 var(--s-5);
  background: var(--surface-muted); border: 1px solid var(--border-default);
  border-radius: var(--r-md); color: var(--text-quaternary);
  font-size: var(--text-sm);
}
.ef-cmdk-trigger:hover { border-color: var(--border-strong); background: var(--surface-raised); }
.ef-cmdk-trigger svg { width: 14px; height: 14px; color: var(--text-tertiary); flex-shrink: 0; }
.ef-cmdk-trigger .ct-lbl { flex: 1; text-align: start; }
.ef-cmdk-trigger .kbd { margin-inline-start: auto; }

.ef-topbar-actions { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.ef-tb-btn { width: 32px; height: 32px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); position: relative; }
.ef-tb-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.ef-tb-btn svg { width: 17px; height: 17px; }
.ef-tb-btn .tb-dot { position: absolute; top: 6px; inset-inline-end: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 1.5px solid var(--surface-raised); }
.ef-tb-av { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-navy); color: #fff; display: grid; place-items: center; font-size: var(--text-xs); font-weight: var(--fw-semibold); flex-shrink: 0; }

/* ─────────── Command palette (⌘K) ─────────── */
.cmdk-scrim {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--surface-overlay-strong);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 11vh var(--s-6) var(--s-6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: cmdk-fade var(--dur-fast) var(--ease-out);
}
@keyframes cmdk-fade { from { opacity: 0; } }
.cmdk {
  width: min(640px, 100%); max-height: 78vh; display: flex; flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-top: 3px solid var(--brand-navy);   /* navy chrome (7.2) */
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl); overflow: hidden;
  animation: cmdk-pop var(--dur-base) var(--ease-emphasized);
}
@keyframes cmdk-pop { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.cmdk-input-wrap { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-6) var(--s-8); border-bottom: 1px solid var(--border-subtle); }
.cmdk-input-wrap > svg { width: 18px; height: 18px; color: var(--text-tertiary); flex-shrink: 0; }
.cmdk-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: var(--text-lg); color: var(--text-primary); }
.cmdk-input::placeholder { color: var(--text-quaternary); }
.cmdk-input-wrap .kbd { flex-shrink: 0; }
.cmdk-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-4); }
.cmdk-group-label { font-size: var(--text-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-quaternary); padding: var(--s-5) var(--s-4) var(--s-2); }
.cmdk-item { display: flex; align-items: center; gap: var(--s-5); width: 100%; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); text-align: start; color: var(--text-secondary); scroll-margin: var(--s-6); }
.cmdk-item .ck-ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-tertiary); }
.cmdk-item .ck-lbl { flex: 1; min-width: 0; font-size: var(--text-md); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .ck-cat { font-size: var(--text-xs); color: var(--text-quaternary); flex-shrink: 0; }
.cmdk-item.is-active { background: var(--surface-hover); }
.cmdk-item.is-active .ck-ic { color: var(--text-secondary); }
.cmdk-item--ai { color: var(--ai-fg); }
.cmdk-item--ai .ck-ic, .cmdk-item--ai .ck-lbl { color: var(--ai-fg); }
.cmdk-item--ai.is-active { background: var(--ai-bg); }
.cmdk-empty { padding: var(--s-16) var(--s-8); text-align: center; color: var(--text-tertiary); font-size: var(--text-sm); }
.cmdk-foot { display: flex; align-items: center; gap: var(--s-6); padding: var(--s-4) var(--s-8); border-top: 1px solid var(--border-subtle); background: var(--surface-sunken); font-size: var(--text-xs); color: var(--text-tertiary); }
.cmdk-foot .ck-hint { display: inline-flex; align-items: center; gap: var(--s-3); }
.cmdk-foot .ck-hint .kbd { height: 15px; }

/* ─────────── Toast ─────────── */
.toast-region {
  position: fixed; z-index: var(--z-toast);
  inset-block-end: var(--s-8); inset-inline-end: var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-4);
  max-width: min(400px, calc(100vw - var(--s-12)));
}
.toast {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: var(--surface-inverse); color: var(--text-on-inverse);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  animation: toast-in var(--dur-base) var(--ease-decelerate);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
.toast.is-leaving { animation: toast-out var(--dur-base) var(--ease-out) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
.toast-ic { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; }
.toast-ic svg { width: 18px; height: 18px; }
.toast--success .toast-ic { color: var(--success); }
.toast--info    .toast-ic { color: var(--info); }
.toast--danger  .toast-ic { color: var(--danger); }
.toast--ai      .toast-ic { color: var(--ai-fg); }
.toast-msg { flex: 1; min-width: 0; font-size: var(--text-sm); line-height: var(--leading-snug); }
.toast-msg b { font-weight: var(--fw-semibold); }
.toast-action { flex-shrink: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: #fff; text-decoration: underline; text-underline-offset: 2px; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }
.toast-action:hover { background: rgba(255,255,255,.12); }
.toast-close { flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--text-on-inverse); opacity: .6; }
.toast-close:hover { opacity: 1; background: rgba(255,255,255,.12); }
.toast-close svg { width: 13px; height: 13px; }
/* Undo countdown ring/bar */
.toast-timer { position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 2px; width: 100%; background: rgba(255,255,255,.5); border-radius: var(--r-full); }
@keyframes toast-countdown { from { width: 100%; } to { width: 0; } }
.toast { position: relative; overflow: hidden; }

/* ─────────── Drawer scrim (mobile rail) ─────────── */
.ef-rail-scrim { display: none; }

/* ─────────── Mobile bottom nav ─────────── */
.ef-botnav { display: none; }

@media (max-width: 860px) {
  :root { --rail-w: 200px; }
  .ef-cmdk-trigger { width: min(260px, 34vw); }
}

@media (max-width: 640px) {
  .ef-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--shell-topbar-h) minmax(0, 1fr) var(--botnav-h);
  }
  .ef-topbar { grid-column: 1; }
  .ef-main { grid-column: 1; padding-bottom: var(--s-6); }

  /* Rail becomes an off-canvas drawer */
  .ef-rail {
    position: fixed; z-index: var(--z-drawer);
    inset-block: 0; inset-inline-start: 0; width: min(82vw, 300px);
    transform: translateX(-102%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-xl);
  }
  [dir="rtl"] .ef-rail { transform: translateX(102%); }
  .ef-rail.is-open { transform: translateX(0); }
  .ef-rail-scrim.is-open {
    display: block; position: fixed; inset: 0; z-index: var(--z-modal-scrim);
    background: var(--surface-overlay);
  }
  .ef-menu-btn { display: inline-flex; }
  .ef-cmdk-trigger .ct-lbl, .ef-cmdk-trigger .kbd { display: none; }
  .ef-cmdk-trigger { width: 32px; padding: 0; justify-content: center; }

  /* Bottom nav — primary modules + ⌘K as the primary nav surface (D2) */
  .ef-botnav {
    grid-column: 1; display: flex; align-items: stretch;
    background: var(--surface-raised); border-top: 1px solid var(--border-default);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ef-botnav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; color: var(--text-tertiary); font-size: var(--text-2xs); font-weight: var(--fw-medium);
    min-height: var(--touch-min);
  }
  .ef-botnav-item svg { width: 20px; height: 20px; }
  .ef-botnav-item.is-active { color: var(--text-brand-strong); }
  .ef-botnav-item.is-active svg { color: var(--brand-green); }
  .ef-botnav-item--cmdk svg { color: var(--brand-navy); }
  .dark .ef-botnav-item--cmdk svg { color: var(--text-secondary); }

  .toast-region { inset-block-end: calc(var(--botnav-h) + var(--s-4)); inset-inline: var(--s-5); max-width: none; }
  .cmdk-scrim { padding-top: 8vh; align-items: flex-start; }
}