/* ============================================================================
   Autnyx — tenant panel shell (shell revamp, 2026-10-18)
   Purple top bar with the Autnyx logo · the customer's brand at the top of the
   left menu · a white menu surface with a border · purple active marker ·
   dividers between groups when the menu is folded to icons · top-bar status.
   Loaded on the tenant panel only (App\Support\Shell\Shell::head). Filament's
   own styles sit in cascade layers, so these unlayered rules win without
   !important.
   ========================================================================== */

:root {
  --ax-shell-bar: #531FA5;          /* the Autnyx icon field */
  --ax-shell-bar-ink: #FFFFFF;
  --ax-shell-bar-muted: rgba(255, 255, 255, .80);
  --ax-shell-bar-soft: rgba(255, 255, 255, .12);
  --ax-shell-bar-soft-2: rgba(255, 255, 255, .20);
  --ax-shell-bar-line: rgba(255, 255, 255, .24);
  --ax-shell-bar-ring: #DDD6FE;
  --ax-shell-amber: #F2B705;
  --ax-shell-amber-ink: #1F1500;
  --ax-shell-side: #FFFFFF;
  --ax-shell-side-line: var(--gray-200, #E5E7EB);
  --ax-shell-brand-ink: var(--gray-950, #030712);
  --ax-shell-active-bg: var(--primary-50, #F5F3FF);
  --ax-shell-active-bar: var(--primary-600, #7C3AED);
}

:root.dark {
  --ax-shell-bar: #2A1259;          /* deeper violet: no glare in dark mode */
  --ax-shell-side: var(--gray-900, #111827);
  --ax-shell-side-line: rgba(255, 255, 255, .10);
  --ax-shell-brand-ink: #FFFFFF;
  --ax-shell-active-bg: color-mix(in oklab, var(--primary-500, #8B5CF6) 18%, transparent);
  --ax-shell-active-bar: var(--primary-400, #A78BFA);
}

/* ── Autnyx logo: which lockup shows where ──────────────────────────────── */
.ax-autnyx-logo { display: inline-flex; align-items: center; height: 100%; }
.ax-autnyx-logo img { display: block; height: 100%; width: auto; }
.ax-autnyx-logo-onlight,
.ax-autnyx-logo-mark { display: none !important; }

/* Sign-in and other simple pages: colour lockup on light, white on dark. */
.fi-simple-layout .ax-autnyx-logo-onbrand { display: none !important; }
.fi-simple-layout .ax-autnyx-logo-onlight { display: block !important; }
:root.dark .fi-simple-layout .ax-autnyx-logo-onbrand { display: block !important; }
:root.dark .fi-simple-layout .ax-autnyx-logo-onlight { display: none !important; }

/* ── Purple top bar ─────────────────────────────────────────────────────── */
.fi-topbar {
  background-color: var(--ax-shell-bar);
  color: var(--ax-shell-bar-ink);
  --tw-ring-color: transparent;
  --tw-shadow: 0 1px 0 0 rgba(0, 0, 0, .14);
}

/* Bar buttons (menu, collapse, notifications) — not the ones inside menus,
   search results or modals that open from the bar. */
.fi-topbar .fi-icon-btn:not(:is(.fi-dropdown-panel, .fi-global-search-results-ctn, .fi-modal) *) {
  color: var(--ax-shell-bar-muted);
}
.fi-topbar .fi-icon-btn:not(:is(.fi-dropdown-panel, .fi-global-search-results-ctn, .fi-modal) *):hover,
.fi-topbar .fi-icon-btn:not(:is(.fi-dropdown-panel, .fi-global-search-results-ctn, .fi-modal) *):focus-visible {
  color: var(--ax-shell-bar-ink);
  background-color: var(--ax-shell-bar-soft);
  --tw-ring-color: var(--ax-shell-bar-ring);
}

/* Notification count: amber on purple, so it is seen. */
.fi-topbar .fi-topbar-database-notifications-btn .fi-badge {
  background-color: var(--ax-shell-amber);
  color: var(--ax-shell-amber-ink);
  --tw-ring-color: var(--ax-shell-bar);
}

/* Global search field. */
.fi-topbar .fi-global-search-field .fi-input-wrp {
  background-color: var(--ax-shell-bar-soft);
  --tw-ring-color: var(--ax-shell-bar-line);
  --tw-shadow: 0 0 #0000;
}
.fi-topbar .fi-global-search-field .fi-input-wrp:focus-within {
  background-color: var(--ax-shell-bar-soft-2);
  --tw-ring-color: var(--ax-shell-bar-ring);
}
.fi-topbar .fi-global-search-field input.fi-input { color: var(--ax-shell-bar-ink); }
.fi-topbar .fi-global-search-field input.fi-input::placeholder { color: var(--ax-shell-bar-muted); opacity: 1; }
.fi-topbar .fi-global-search-field .fi-input-wrp-prefix .fi-icon,
.fi-topbar .fi-global-search-field .fi-input-wrp-suffix,
.fi-topbar .fi-global-search-field .fi-input-wrp-suffix * { color: var(--ax-shell-bar-muted); }

/* User avatar: a light ring so it lifts off the purple. */
.fi-topbar .fi-user-menu-trigger .fi-avatar { box-shadow: 0 0 0 2px var(--ax-shell-bar-line); }

/* Guide switch (autnyx-guide.css) on the bar. */
.fi-topbar .ax-guide-toggle {
  background: var(--ax-shell-bar-soft);
  border-color: var(--ax-shell-bar-line);
  color: var(--ax-shell-bar-ink);
}
.fi-topbar .ax-guide-toggle:hover { background: var(--ax-shell-bar-soft-2); border-color: var(--ax-shell-bar-ring); color: var(--ax-shell-bar-ink); }
.fi-topbar .ax-guide-toggle .ax-guide-toggle-state { background: var(--ax-shell-bar-soft-2); color: var(--ax-shell-bar-ink); }
.fi-topbar .ax-guide-toggle.is-on { background: #FFFFFF; border-color: #FFFFFF; color: #3B1478; }
.fi-topbar .ax-guide-toggle.is-on .ax-guide-toggle-state { background: var(--ax-shell-bar); color: #FFFFFF; }

/* Focus on the bar: a light ring (the accent ring would vanish on purple). */
.fi-topbar a:focus-visible,
.fi-topbar button:focus-visible:not(:is(.fi-dropdown-panel, .fi-global-search-results-ctn, .fi-modal) *) {
  outline: 2px solid var(--ax-shell-bar-ring);
  outline-offset: 2px;
}

/* Phones and tablets: the logo shows next to the menu button. */
@media (max-width: 63.999rem) {
  .fi-topbar-start { display: flex; flex-shrink: 0; margin-inline-end: .5rem; }
  .fi-topbar-collapse-sidebar-btn-ctn { display: none; }
  .fi-topbar-start .fi-logo { margin-inline-start: .75rem; }
  .fi-body-has-topbar .fi-sidebar-header { background-color: var(--ax-shell-bar); --tw-ring-color: transparent; }
  .fi-body-has-topbar .fi-sidebar-header .fi-icon-btn { color: var(--ax-shell-bar-muted); }
}
@media (max-width: 39.999rem) {
  .fi-topbar .ax-autnyx-logo-onbrand { display: none !important; }
  .fi-topbar .ax-autnyx-logo-mark { display: block !important; }
}

/* Menu folded to icons (desktop): the mark only. */
@media (min-width: 64rem) {
  .fi-body-has-sidebar-collapsible-on-desktop:has(.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar .ax-autnyx-logo-onbrand { display: none !important; }
  .fi-body-has-sidebar-collapsible-on-desktop:has(.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar .ax-autnyx-logo-mark { display: block !important; }
}

/* ── Top-bar status: data freshness chip + demo badge ───────────────────── */
.ax-shell-status { display: flex; align-items: center; gap: .5rem; }
.ax-shell-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2rem; padding: 0 .75rem; border-radius: 9999px;
  background: var(--ax-shell-bar-soft); color: var(--ax-shell-bar-ink);
  font-size: .8125rem; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
}
a.ax-shell-chip:hover { background: var(--ax-shell-bar-soft-2); color: var(--ax-shell-bar-ink); }
.ax-shell-chip-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: #D1D5DB; flex: 0 0 .5rem; }
.ax-shell-chip--success .ax-shell-chip-dot { background: #4ADE80; }
.ax-shell-chip--warning .ax-shell-chip-dot { background: var(--ax-shell-amber); }
.ax-shell-chip--danger  .ax-shell-chip-dot { background: #F87171; }
.ax-shell-demo {
  display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .5rem; border-radius: .375rem;
  background: var(--ax-shell-amber); color: var(--ax-shell-amber-ink);
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 79.999rem) { .ax-shell-chip-label { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 47.999rem) { .ax-shell-chip { display: none; } }
@media (max-width: 39.999rem) { .ax-shell-demo { display: none; } }

/* ── Left menu surface ──────────────────────────────────────────────────── */
.fi-main-sidebar .fi-sidebar-header-ctn { order: -1; }   /* phones: the purple header first */

@media (min-width: 64rem) {
  .fi-main-sidebar {
    background-color: var(--ax-shell-side);
    border-inline-end: 1px solid var(--ax-shell-side-line);
  }
}

/* Active screen: tint + purple marker on the leading edge. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-group.fi-active > .fi-dropdown .fi-sidebar-group-dropdown-trigger-btn {
  background-color: var(--ax-shell-active-bg);
  box-shadow: inset 3px 0 0 var(--ax-shell-active-bar);
}
[dir="rtl"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
[dir="rtl"] .fi-sidebar-group.fi-active > .fi-dropdown .fi-sidebar-group-dropdown-trigger-btn {
  box-shadow: inset -3px 0 0 var(--ax-shell-active-bar);
}

/* Folded menu: the group labels disappear, so a thin rule keeps the groups apart. */
@media (min-width: 64rem) {
  .fi-body-has-sidebar-collapsible-on-desktop .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups { row-gap: 0; }
  .fi-body-has-sidebar-collapsible-on-desktop .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups > .fi-sidebar-group + .fi-sidebar-group {
    border-top: 1px solid var(--ax-shell-side-line);
    margin-top: .75rem;
    padding-top: .75rem;
  }
}

/* ── The customer's brand (top of the left menu) ────────────────────────── */
.ax-brand { flex-shrink: 0; border-bottom: 1px solid var(--ax-shell-side-line); }
.ax-brand-link {
  display: flex; align-items: center; min-height: 4rem; padding: .75rem 1.5rem; min-width: 0;
  color: var(--ax-shell-brand-ink); text-decoration: none; outline: none;
}
.ax-brand-link:focus-visible { box-shadow: inset 0 0 0 2px var(--primary-500, #8B5CF6); border-radius: .5rem; }
.ax-brand-full { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.ax-brand-compact { display: none; align-items: center; justify-content: center; }
.ax-brand-logo { display: block; max-height: 2.25rem; max-width: 100%; width: auto; object-fit: contain; }
.ax-brand-logo--dark-only { display: none; }
:root.dark .ax-brand-logo--light-only { display: none; }
:root.dark .ax-brand-logo--dark-only { display: block; }
:root.dark .ax-brand-logo--plated { background: #FFFFFF; padding: .25rem .5rem; border-radius: .5rem; }
.ax-brand-icon { width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: .5rem; object-fit: contain; }
.ax-brand-initials {
  width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--ax-brand-color, #531FA5); color: var(--ax-brand-on, #FFFFFF);
  font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
}
.ax-brand-name { font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-brand-name--solo { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }

@media (min-width: 64rem) {
  .fi-main-sidebar:not(.fi-sidebar-open) .ax-brand-full { display: none; }
  .fi-main-sidebar:not(.fi-sidebar-open) .ax-brand-compact { display: flex; }
  .fi-main-sidebar:not(.fi-sidebar-open) .ax-brand-link { justify-content: center; padding-inline: 0; }
}

/* ── Settings › Branding preview ────────────────────────────────────────── */
.ax-brand-preview { border: 1px solid var(--ax-shell-side-line); border-radius: .75rem; overflow: hidden; }
.ax-brand-preview-bar { height: 2.75rem; display: flex; align-items: center; padding: 0 1rem; background: var(--ax-shell-bar); }
.ax-brand-preview-bar img { height: 1.375rem; width: auto; display: block; }
.ax-brand-preview-body { display: flex; gap: 1rem; padding-inline-end: 1rem; background: var(--gray-50, #F9FAFB); min-height: 12rem; }
:root.dark .ax-brand-preview-body { background: var(--gray-950, #030712); }
.ax-brand-preview-menu { display: flex; flex-direction: column; gap: .5rem; padding-bottom: 1rem; background: var(--ax-shell-side); border-inline-end: 1px solid var(--ax-shell-side-line); }
.ax-brand-preview-menu--open { flex: 1 1 15rem; min-width: 0; max-width: 16rem; }
.ax-brand-preview-menu--folded { flex: 0 0 4.5rem; align-items: center; }
.ax-brand-preview-menu--folded .ax-brand { width: 100%; }
.ax-brand-preview-menu--folded .ax-brand-full { display: none; }
.ax-brand-preview-menu--folded .ax-brand-compact { display: flex; }
.ax-brand-preview-menu--folded .ax-brand-link { justify-content: center; padding-inline: 0; }
.ax-brand-preview-menu--open .ax-brand-full { display: flex; }
.ax-brand-preview-menu--open .ax-brand-link { padding-inline: 1rem; }
.ax-brand-preview-menu--open .ax-brand-compact { display: none; }
.ax-brand-preview-line { height: .625rem; margin: .5rem 1.25rem 0; border-radius: .3125rem; background: var(--gray-200, #E5E7EB); width: 60%; }
.ax-brand-preview-line--short { width: 40%; }
.ax-brand-preview-line--active { height: 2rem; width: auto; margin: .75rem .75rem 0; border-radius: .5rem; background: var(--ax-shell-active-bg); box-shadow: inset 3px 0 0 var(--ax-shell-active-bar); }
.ax-brand-preview-dot { width: 2.25rem; height: 2rem; border-radius: .5rem; background: var(--gray-200, #E5E7EB); margin-top: .5rem; }
.ax-brand-preview-dot--active { background: var(--ax-shell-active-bg); box-shadow: inset 3px 0 0 var(--ax-shell-active-bar); margin-top: .75rem; }
.ax-brand-preview-rule { width: 2.25rem; height: 1px; background: var(--ax-shell-side-line); margin-top: .5rem; }
:root.dark .ax-brand-preview-line, :root.dark .ax-brand-preview-dot { background: rgba(255, 255, 255, .10); }