/* ============================================================
   Tamrur — shared shell: unified top bar + page base
   Design v2 (tamrur-design-v2/TopBar.dc.html). Used by home / dashboard /
   chat. Built on the design-system tokens (_ds/.../tokens/*.css must load
   first). The chat can still switch to dark; the bar follows it via
   [data-theme="dark"].
   ============================================================ */

/* Hide protected pages until the auth state is known (TamrurAuth.requireUser). */
html.auth-pending body { visibility: hidden; }
.shell-fatal {
  font-family: var(--font-sans); color: var(--danger);
  text-align: center; padding: 64px 16px; direction: rtl;
}

/* ── Page base (home / dashboard) ── */
.page {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: #F7F9FB; color: var(--gray-900);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.page button { font-family: inherit; }

/* ── Site footer (home; the dashboard lays the same line over Power BI's bar) ── */
.site-foot {
  margin-top: auto; min-height: 56px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 32px; background: #F7F9FB; border-top: 1px solid #DFE5EB;
  font-family: var(--font-sans); font-size: var(--text-xs); color: #56687A;
}
.site-foot a { direction: ltr; color: #56687A; text-decoration: none; border-radius: var(--radius-xs); }
.site-foot a b { font-weight: var(--weight-semibold); color: #131F2E; }
.site-foot a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (hover: hover) and (pointer: fine) { .site-foot a:hover, .site-foot a:hover b { color: var(--blue-700); } }
@media (max-width: 560px) { .site-foot { padding: 12px 16px; justify-content: center; text-align: center; } }

/* ── Top bar ── */
.tbar {
  --tbar-h: 72px;
  --tbar-bg: #FFFFFF;
  --tbar-border: #DFE5EB;
  --tbar-text: #131F2E;
  --tbar-tab: #4E5E6F;
  --tbar-muted: #56687A;
  --tbar-active: #003C7C;
  --tbar-avatar-bg: #003C7C;
  --tbar-avatar-fg: #FFFFFF;
  --tbar-hover: #EEF2F6;

  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--tbar-h); box-sizing: border-box;
  display: flex; align-items: center; gap: 28px;
  padding: 0 32px;
  background: var(--tbar-bg);
  border-bottom: 1px solid var(--tbar-border);
  box-shadow: 0 1px 2px rgba(0, 31, 64, 0.04);
  font-family: var(--font-sans); color: var(--tbar-text);
  direction: rtl;
}
.tbar *, .tbar *::before, .tbar *::after { box-sizing: border-box; }
[data-theme="dark"] .tbar {
  --tbar-bg: #0F1A2A;
  --tbar-border: rgba(255, 255, 255, 0.09);
  --tbar-text: #EEF3F9;
  --tbar-tab: #8B9BAC;
  --tbar-muted: #8B9BAC;
  --tbar-active: #74A4DA;
  --tbar-avatar-bg: #3E80C8;
  --tbar-hover: rgba(62, 128, 200, 0.14);
}

.tbar a { color: inherit; text-decoration: none; }
.tbar button { font-family: inherit; }
.tbar a:focus-visible, .tbar button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(62, 128, 200, .55); }
.tbar [hidden] { display: none !important; }

.tbar-brand { display: flex; flex: none; border-radius: var(--radius-xs); }
.tbar-logo { height: 44px; width: auto; display: block; }
.tbar-logo--inverse { display: none; }
[data-theme="dark"] .tbar-logo { display: none; }
[data-theme="dark"] .tbar-logo--inverse { display: block; }

.tbar-sep { width: 1px; height: 28px; flex: none; background: var(--tbar-border); }

/* nav — text tabs with a growing underline */
.tbar-nav { display: flex; align-self: stretch; }
.tbar-tab {
  position: relative; display: inline-flex; align-items: center;
  padding: 0 14px;
  font-size: 15px; font-weight: var(--weight-semibold); color: var(--tbar-tab) !important;
  transition: color 150ms ease-out;
}
.tbar-tab[aria-current="page"] { color: var(--tbar-active) !important; }
.tbar-tab-bar {
  position: absolute; bottom: -1px; inset-inline: 14px; height: 2px;
  background: var(--tbar-active);
  transform: scaleX(0); transition: transform 220ms cubic-bezier(.23, 1, .32, 1);
}
.tbar-tab[aria-current="page"] .tbar-tab-bar { transform: scaleX(1); }

.tbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; flex: none; min-width: 0; }
.tbar-actions { display: flex; align-items: center; gap: 4px; }
.tbar-actions:empty { display: none; }

.tbar-ext {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: var(--weight-semibold); color: var(--tbar-muted) !important;
  border-radius: var(--radius-xs); transition: color 150ms ease-out;
}
.tbar-ext svg { width: 13px; height: 13px; }

/* Interface-language switch (shell/i18n.js) — a small segmented control. */
.tbar-lang {
  display: inline-flex; align-items: center; padding: 2px; gap: 2px;
  border: 1px solid var(--tbar-border); border-radius: 999px;
}
.tbar-lang-opt {
  min-width: 34px; height: 26px; padding: 0 8px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: var(--weight-semibold); color: var(--tbar-muted);
  transition: background 150ms ease-out, color 150ms ease-out;
}
.tbar-lang-opt[aria-pressed="true"] { background: var(--tbar-active); color: var(--tbar-bg); }
.tbar-lang-opt:focus-visible { outline: 2px solid var(--tbar-active); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .tbar-lang-opt:not([aria-pressed="true"]):hover { color: var(--tbar-text); background: var(--tbar-hover); }
}
@media (max-width: 760px) { .tbar-lang-opt { min-width: 30px; height: 30px; padding: 0 6px; } }

.tbar-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tbar-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--tbar-avatar-bg); color: var(--tbar-avatar-fg);
  font-weight: var(--weight-bold); font-size: 14px;
}
.tbar-name {
  font-size: 14px; font-weight: var(--weight-semibold); color: var(--tbar-text);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tbar-icon {
  width: 40px; height: 40px; padding: 0; flex: none;
  display: grid; place-items: center;
  background: transparent; color: var(--tbar-muted);
  border: 0; border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.tbar-icon svg { width: 18px; height: 18px; }
.tbar-icon:active { transform: scale(.94); }

/* visitor: DS primary button, size md */
.tbar-login {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 9px 18px;
  background: var(--blue-700); color: #FFFFFF !important;
  border-radius: var(--radius-sm);
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  transition: background var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .tbar-tab:hover { color: var(--tbar-text) !important; }
  .tbar-tab:hover .tbar-tab-bar { transform: scaleX(1); opacity: .25; }
  .tbar-tab[aria-current="page"]:hover .tbar-tab-bar { opacity: 1; }
  .tbar-ext:hover { color: var(--tbar-active) !important; }
  .tbar-logout:hover { background: #F8E6E3; color: #B5352A; }
  .tbar-icon--action:hover { background: var(--tbar-hover); color: var(--tbar-active); }
  .tbar-login:hover { background: var(--blue-800); }
}

.tbar-tab-short { display: none; }

@media (max-width: 900px) {
  .tbar-ext, .tbar-sep--end, .tbar-name { display: none; }
}
/* Phone: logo + user on a 60px row, the two tabs on a 46px row beneath. */
@media (max-width: 760px) {
  .tbar {
    height: auto; flex-wrap: wrap; gap: 0 12px;
    padding: 0; padding-inline: 14px 8px;
  }
  .tbar-brand { height: 60px; align-items: center; }
  .tbar-logo { height: 36px; }
  .tbar-sep--brand { display: none; }
  .tbar-end { gap: 4px; }
  .tbar-avatar { width: 32px; height: 32px; font-size: 13px; }
  .tbar-icon { width: 44px; height: 44px; }
  .tbar-login { min-height: 36px; padding: 6px 14px; font-size: var(--text-sm); }
  .tbar-nav {
    order: 10; flex: 0 0 auto; width: calc(100% + 22px); margin-inline: -14px -8px;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    height: 46px; border-top: 1px solid var(--tbar-border);
  }
  .tbar-tab { justify-content: center; padding: 0 4px; font-size: 14px; white-space: nowrap; }
  .tbar-tab-bar { inset-inline: 16px; }
  .tbar-tab-full { display: none; }
  .tbar-tab-short { display: inline; }
  /* home already offers both destinations as its two panels */
  .tbar--home .tbar-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tbar-tab-bar { transition: none; }
  .tbar-icon:active { transform: none; }
}

/* Phones: iOS zooms into any field under 16px when it gets focus — keep all
   text inputs at 16px on narrow screens (every app page loads this file). */
@media (max-width: 760px) {
  input[type="text"], input[type="search"], input[type="email"], input[type="password"],
  input:not([type]), textarea, select { font-size: 16px !important; }
}