/* === FAB-menu (mobile bottom-right) ===
   Compact glassy diamond — square rotated 45° with a soft 22% corner
   radius. Translucent dark-orange wash with backdrop-blur so the page
   shows through and the button reads as a piece of frosted glass.
   Single soft glow (no animated multi-layer shadow) so opening the
   menu doesn't hitch on mid-tier phones. Tap opens the drawer; while
   the drawer is open the diamond rotates back to a circle and shows
   an upright ×. Hidden on desktop. */
.fab-menu {
  position: fixed;
  right: 0.9rem;
  bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
  z-index: 410;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 22%;
  border: 1px solid rgba(255, 220, 180, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  /* Translucent dark orange — burnt orange core + brighter peach
     highlight at the top-left for the glass-bead look. */
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 200, 140, 0.55), transparent 55%),
    linear-gradient(135deg, rgba(194, 65, 12, 0.78) 0%,
                            rgba(124, 45, 18, 0.78) 100%);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    0 6px 18px rgba(124, 45, 18, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transform: rotate(45deg);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1),
              border-radius 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
  /* Cheap opacity-based pulse on the halo only — no box-shadow
     animation (which forces paint on every frame). */
}
.fab-menu:hover  { transform: rotate(45deg) scale(1.05); }
.fab-menu:active { transform: rotate(45deg) scale(0.92); }
/* Counter-rotate the icon so the glyph stays upright. */
.fab-menu i {
  line-height: 1;
  display: inline-block;
  transform: rotate(-45deg);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
  text-shadow: 0 1px 2px rgba(60, 20, 0, 0.4);
}
/* Subtle warm halo — opacity-only pulse, GPU-friendly. */
.fab-menu::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 22%;
  border: 1px solid rgba(255, 138, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  animation: fab-menu-halo 2.6s ease-out infinite;
  will-change: opacity, transform;
}
@keyframes fab-menu-halo {
  0%   { transform: scale(0.92); opacity: 0.45; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fab-menu::after { animation: none; }
}

/* While the drawer is open, the diamond morphs into a small dark
   circle with an upright × so the same button closes the menu. */
body.sidebar-open .fab-menu {
  background:
    linear-gradient(135deg, rgba(31, 41, 55, 0.80) 0%, rgba(11, 18, 32, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  transform: rotate(0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.sidebar-open .fab-menu:active { transform: rotate(0) scale(0.92); }
body.sidebar-open .fab-menu::after { display: none; }
body.sidebar-open .fab-menu i { opacity: 0; transform: rotate(0); }
body.sidebar-open .fab-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg,  transparent 46%, #fff 46%, #fff 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%);
  -webkit-mask: radial-gradient(circle at center, #000 28%, transparent 28%);
          mask: radial-gradient(circle at center, #000 28%, transparent 28%);
  border-radius: 50%;
}

/* In-drawer × close button — visible on mobile only (drawer is desktop-static). */
.sidebar-close-btn {
  display: none;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  font-size: 1.05rem;
  cursor: pointer;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-close-btn:active { transform: scale(0.92); background: rgba(255,255,255,0.10); }
@media (max-width: 1023px) {
  .sidebar-close-btn { display: flex; }
}

/* === Quick Links — sticky-bottom thumb-zone tiles (mobile) ===
   On mobile the entire .sidebar element is the scroll container, and
   .sidebar-footer uses display:contents so its children become flex
   siblings of .sidebar (with `order` controlling vertical position).
   We give the quick-links a high `order` so they land at the very
   bottom of flex flow, then `position: sticky; bottom: 0` so they
   stay glued to the visible bottom of the drawer regardless of how
   far the user scrolls. The menu above scrolls; this row stays put. */
.nav-quick-links {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.625rem 0.625rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  margin: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  /* Frosted bar so the cards don't show through the sticky overlay. */
  background: rgba(11, 14, 24, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
@media (max-width: 1023px) {
  .nav-quick-links {
    order: 200;             /* land below user-wrap (50) + notif-row (100) */
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.45);
  }
  /* Hide the primary card grid on mobile — its top entries duplicate
     the sticky Quick Links below. The leftover items (Customers /
     Schedule / Invoices) are surfaced via .nav-chips-primary-mobile. */
  .nav-primary-grid { display: none !important; }
}
@media (min-width: 1024px) {
  /* Drawer is the desktop sidebar at >=1024px and includes its own
     command bar / nav — the mobile quick-links section is redundant. */
  .nav-quick-links { display: none; }
}

/* Mobile-only chip strip that surfaces the .nav-primary-grid items
   (Customers, Schedule, Invoices, etc.) which would otherwise vanish
   when the primary grid is hidden. Hidden on desktop because the
   primary-grid renders normally there. */
.nav-chips-primary-mobile { display: none; }
@media (max-width: 1023px) {
  .nav-chips-primary-mobile { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
}
.nav-quick-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.nav-quick-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
}
.nav-quick-card:active { transform: scale(0.97); }
.nav-quick-card.active {
  background: linear-gradient(135deg, rgba(20,184,166,0.22), rgba(20,184,166,0.08));
  border-color: rgba(20,184,166,0.40);
  color: #fff;
}
.nav-quick-ico {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  background: rgba(20,184,166,0.14);
  color: var(--brand-light, #2dd4bf);
}
.nav-quick-card.active .nav-quick-ico {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.nav-quick-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  /* Drawer is the desktop sidebar at >=1024px and includes its own
     command bar / nav — the mobile quick-links section is redundant. */
  .nav-quick-links { display: none; }
}

/* === FAB (Floating Action Button) === */
.fab {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 400;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  box-shadow: 0 4px 20px var(--brand-glow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.fab:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 30px var(--brand-glow);
}
.fab:active {
  transform: scale(0.9);
  box-shadow: 0 2px 10px var(--brand-glow);
}
.fab.open {
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.2);
  transform: rotate(45deg);
}

/* On mobile viobar, FAB is inline */
@media (max-width: 640px) {
  .fab {
    position: static;
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
    box-shadow: none;
    bottom: auto;
    right: auto;
  }
  .fab:hover { transform: scale(1.05); }
}

/* Always-on round white FAB living in the viobar centre.
   Elevates it above the viobar itself so the slide-up panel can slide from
   behind the viobar without hiding the button. */
.fab--white {
  background: #fff !important;
  color: #0f1220 !important;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28), 0 0 0 4px rgba(255,255,255,0.06);
  position: relative;
  z-index: 310;
}
.fab--white:hover,
.fab--white:active {
  background: #fff !important;
  color: #0f1220 !important;
}
/* When the panel is open the FAB becomes a close button. Hide the
   original bootstrap-icon glyph and draw a crisp × via pseudo-elements
   so every FAB variant (plus / calendar / wrench …) gets the same
   close affordance without JS swapping icon classes. */
.fab.open > i { opacity: 0; }
.fab.open { position: relative; }
.fab.open::before,
.fab.open::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 52%; height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
}
.fab.open::before { transform: translate(-50%, -50%) rotate( 45deg); }
.fab.open::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.fab--white.open {
  background: #fff !important;
  color: #0B1220 !important;
  border: 1px solid rgba(0,0,0,0.08);
}
@media (max-width: 640px) {
  .fab--white {
    width: 3.25rem;
    height: 3.25rem;
    /* Bump icon size so bi-plus (thin-stroke) is legible inside the white
       circle; was 1.35rem, which read as a tiny dot on mid-DPI phones. */
    font-size: 1.6rem;
    /* Lift the button so it floats over the viobar edge */
    margin-top: -1.25rem;
  }
  .fab--white i { font-weight: 700; line-height: 1; }
}

/* FAB count badge (multi-select mode) */
.fab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f97316;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}
.fab-count.visible { display: flex; }

/* === VIO PANEL (slide-up action sheet) ===
   Sits BEHIND the viobar (viobar is z-index 300) so the panel appears to
   slide up from underneath the bottom nav, with the viobar remaining
   visible over its top edge. */
.vio-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 270;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background 0.25s;
}
.vio-panel-backdrop.active {
  background: rgba(0,0,0,0.5);
  pointer-events: all;
  backdrop-filter: blur(4px);
}

.vio-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 280;
  background: rgba(15,18,30,0.97);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-top: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px 20px 0 0;
  /* Pad the bottom by the viobar height (60px) so interactive content
     doesn't end up hidden behind the always-visible mobile nav. */
  padding: 0 1rem calc(2rem + 60px);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  max-height: 70vh;
  overflow-y: auto;
}
.vio-panel.open { transform: translateY(0); }
@media (min-width: 641px) {
  /* On desktop there is no viobar, so no bottom padding is needed. */
  .vio-panel { padding: 0 1rem 2rem; }
}

/* Handle removed — the panel slides up with a smooth rounded top
   that matches the card styling; no grabber bar needed. Keep a small
   top padding so the first row isn't flush with the panel edge. */
.vio-panel-handle {
  display: block;
  height: 0.75rem;
}
.vio-panel-handle::after { content: none; }

.vio-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vio-panel-select-btn {
  background: var(--brand-tint-bg);
  border: 1px solid var(--brand-tint-border);
  color: var(--brand-light);
  padding: 0.3rem 0.875rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.vio-panel-select-btn:active {
  transform: scale(0.92);
  opacity: 0.7;
}

/* 2-col action grid */
.vio-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}
.vio-panel-action {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  /* Glass tile — translucent over the panel backdrop, so tiles read as
     elevated surfaces rather than brand-color buttons. The icon chip
     carries the accent color instead. */
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.vio-panel-action:hover  {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}
.vio-panel-action:active { transform: scale(0.97); }
.vio-panel-action i {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  /* Default glyph chip — teal tint to match the brand without flooding
     the whole tile. Per-tile color variants override below. */
  background: rgba(20,184,166,0.14);
  color: var(--brand-light, #2dd4bf);
}
.vio-panel-action.color-orange i { background: rgba(249,115,22,0.16); color: #fb923c; }
.vio-panel-action.color-red i    { background: rgba(239,68,68,0.16);   color: #f87171; }
.vio-panel-action.color-default i { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }

/* Context object preview (top of VIO panel) */
.vio-context {
  padding: 0.75rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
}
.vio-context-title {
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.125rem;
}

/* Bulk action bar (shown when items selected) */
.bulk-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 450;
  background: rgba(15,18,30,0.97);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.bulk-bar.open { transform: translateY(0); }
.bulk-bar-count {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand-light);
  margin-right: 0.25rem;
}

/* === DESKTOP RIGHT-CLICK CONTEXT MENU === */
.vio-context-menu {
  position: fixed;
  z-index: 600;
  min-width: 220px;
  background: rgba(15,18,30,0.95);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 0.375rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  transform-origin: top left;
  animation: ctx-appear 0.12s cubic-bezier(0.2,0,0,1);
  user-select: none;
}
@keyframes ctx-appear {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.vio-context-menu-header {
  padding: 0.375rem 0.625rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0.25rem;
}
.vio-context-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: 9px;
  border: none;
  background: none;
  font-family: 'Public Sans', 'Public Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: background 0.1s;
  text-decoration: none;
  text-align: left;
}
.vio-context-menu-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.vio-context-menu-item:active { transform: scale(0.97); opacity: 0.7; }
.vio-context-menu-item i {
  width: 1.375rem;
  height: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.vio-context-menu-item.color-brand i  { background: var(--brand-tint-bg);      color: var(--brand-light); }
.vio-context-menu-item.color-orange i { background: rgba(249,115,22,0.12);     color: #f97316; }
.vio-context-menu-item.color-red      { color: #fca5a5; }
.vio-context-menu-item.color-red i    { background: rgba(239,68,68,0.12);      color: #ef4444; }
.vio-context-menu-item.color-default i{ background: rgba(255,255,255,0.06);    color: rgba(255,255,255,0.6); }
.vio-context-menu-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 0.25rem 0; }

/* ============================================================
   MOBILE DRAWER — LIGHT GLASS RE-SKIN (Linq Locksmith palette)
   ============================================================
   The slide-up sidebar drawer flips to the locksmith mobile design's
   off-white frosted look on ≤1023px viewports. Desktop sidebar styling
   in nav.css is untouched. The bottom-right FAB is also untouched —
   only the drawer body and the surfaces inside it change.

   Palette (from /tmp/design/platform/project/locksmith-mobile.jsx M):
     bg          #fafaf9   panel       #ffffff   panelAlt    #f6f6f4
     border      #eceae6   borderStrong #d9d6d0
     text        #16161a   textMute    #6b6962   textFaint   #9b988f
     brand       #0d9488   brandSoft   #ccfbf1
     hot         #ea580c   warn        #d97706   bad         #dc2626
*/
@media (max-width: 1023px) {
  /* ── Drawer body ──────────────────────────────────────────── */
  .sidebar {
    background: rgba(250, 250, 249, 0.78) !important;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-top: 1px solid rgba(217, 214, 208, 0.55) !important;
    color: #16161a;
    box-shadow: 0 -24px 48px -16px rgba(20, 20, 20, 0.18);
  }

  /* ── Brand wordmark inside the drawer ─────────────────────── */
  .sidebar .sidebar-logo-text .field-part { color: #16161a; }
  .sidebar .brand-linq { color: #16161a; }

  /* ── Search command bar at the top of the drawer ──────────── */
  .sidebar .sidebar-cmdbar { background: transparent; }
  .sidebar .cmdbar-search-wrap {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid #eceae6;
    border-radius: 10px;
  }
  .sidebar .cmdbar-search,
  .sidebar .cmdbar-search:focus {
    color: #16161a;
    background: transparent;
    border: none;
  }
  .sidebar .cmdbar-search::placeholder { color: #9b988f; }
  .sidebar .cmdbar-search-icon { color: #6b6962; }
  .sidebar .cmdbar-kbd {
    background: #f6f6f4;
    border: 1px solid #eceae6;
    color: #6b6962;
  }

  /* Search results popover ---------------------------------- */
  .sidebar .cmdbar-results {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid #eceae6;
    box-shadow: 0 12px 32px -8px rgba(20, 20, 20, 0.18);
  }
  .sidebar .cmdbar-result-item { color: #16161a; }
  .sidebar .cmdbar-result-item:hover { background: #f6f6f4; }
  .sidebar .cmdbar-result-item i {
    background: #f6f6f4;
    color: #0d9488;
  }
  .sidebar .cmdbar-result-item .result-title { color: #16161a; }
  .sidebar .cmdbar-result-item .result-subtitle { color: #6b6962; }
  .sidebar .cmdbar-results-empty { color: #9b988f; }

  /* ── Section labels & nav text ────────────────────────────── */
  .sidebar .sidebar-nav { color: #16161a; }
  .sidebar .sidebar-nav .nav-section-label { color: #6b6962; }

  /* ── Favorites row (dot + label) ──────────────────────────── */
  .sidebar .sidebar-nav .nav-fav-row { color: #16161a; }
  .sidebar .sidebar-nav .nav-fav-row:hover {
    background: rgba(255, 255, 255, 0.65);
    color: #0d9488;
  }
  .sidebar .sidebar-nav .nav-fav-row.active {
    background: rgba(204, 251, 241, 0.55);
    color: #0d9488;
  }
  /* Dots stay vivid — they're the legend for color-coded favorites. */

  /* ── Nav chips (Zone 3 + the mobile primary chip strip) ───── */
  .sidebar .sidebar-nav .nav-chip,
  .sidebar .nav-chips-primary-mobile .nav-chip {
    color: #16161a;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid #eceae6;
    border-radius: 10px;
    padding: .5rem .65rem;
  }
  .sidebar .sidebar-nav .nav-chip i,
  .sidebar .nav-chips-primary-mobile .nav-chip i {
    color: #6b6962;
    opacity: 1;
  }
  .sidebar .sidebar-nav .nav-chip:hover,
  .sidebar .nav-chips-primary-mobile .nav-chip:hover {
    background: rgba(255, 255, 255, 0.85);
    color: #0d9488;
  }
  .sidebar .sidebar-nav .nav-chip:hover i,
  .sidebar .nav-chips-primary-mobile .nav-chip:hover i { color: #0d9488; }
  .sidebar .sidebar-nav .nav-chip.active,
  .sidebar .nav-chips-primary-mobile .nav-chip.active {
    background: rgba(204, 251, 241, 0.55);
    color: #0d9488;
    border-color: rgba(13, 148, 136, 0.35);
    font-weight: 600;
  }
  .sidebar .sidebar-nav .nav-chip.active i,
  .sidebar .nav-chips-primary-mobile .nav-chip.active i { color: #0d9488; }

  /* "More" drawer summary inside chips (legacy) */
  .sidebar .nav-more-summary { color: #6b6962; }

  /* ── Sticky Notifications row (footer) ────────────────────── */
  .sidebar .sidebar-notif-row {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid #eceae6 !important;
    color: #16161a !important;
  }
  .sidebar .sidebar-notif-row i { color: #6b6962; }
  .sidebar .sidebar-notif-row:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0d9488 !important;
  }
  .sidebar .sidebar-notif-row.active {
    background: rgba(204, 251, 241, 0.55) !important;
    color: #0d9488 !important;
    border-color: rgba(13, 148, 136, 0.35) !important;
  }
  /* The notif badge keeps its orange (.sidebar-notif-badge in nav.css). */

  /* ── User profile button + dropdown ──────────────────────── */
  .sidebar .sidebar-user {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid #eceae6;
    color: #16161a;
  }
  .sidebar .sidebar-user:hover { background: rgba(255, 255, 255, 0.85); }
  .sidebar .sidebar-user-avatar {
    background: #0d9488;
    color: #ffffff;
  }
  .sidebar .sidebar-user-name { color: #16161a; }
  .sidebar .sidebar-user-role { color: #6b6962; }
  .sidebar .sidebar-user-chevron { color: #9b988f; }

  .sidebar .sidebar-dropdown {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid #eceae6;
    box-shadow: 0 -8px 28px -8px rgba(20, 20, 20, 0.20);
  }
  .sidebar .sidebar-dropdown-item { color: #16161a; }
  .sidebar .sidebar-dropdown-item i { color: #6b6962; }
  .sidebar .sidebar-dropdown-item:hover {
    background: #f6f6f4;
    color: #0d9488;
  }
  .sidebar .sidebar-dropdown-item:hover i { color: #0d9488; }
  .sidebar .sidebar-dropdown-divider {
    background: #eceae6;
  }
  .sidebar .sidebar-dropdown-label { color: #9b988f; }
  .sidebar .sidebar-dropdown-danger { color: #dc2626; }
  .sidebar .sidebar-dropdown-danger:hover {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
  }
  .sidebar .sidebar-dropdown-danger:hover i { color: #dc2626; }

  /* ── In-drawer × close button ─────────────────────────────── */
  .sidebar .sidebar-close-btn {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #eceae6;
    color: #16161a;
  }
  .sidebar .sidebar-close-btn:active { background: #f6f6f4; }

  /* ── Sticky bottom Quick Links row ────────────────────────── */
  .nav-quick-links {
    background: rgba(250, 250, 249, 0.85);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid #eceae6;
    box-shadow: 0 -10px 24px -10px rgba(20, 20, 20, 0.18);
  }
  .nav-quick-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #eceae6;
    color: #16161a;
  }
  .nav-quick-card:hover {
    background: #ffffff;
    border-color: #d9d6d0;
    color: #0d9488;
  }
  .nav-quick-ico {
    background: rgba(204, 251, 241, 0.45);
    color: #0d9488;
  }
  .nav-quick-card.active {
    background: linear-gradient(135deg, rgba(204, 251, 241, 0.65), rgba(204, 251, 241, 0.35));
    border-color: rgba(13, 148, 136, 0.4);
    color: #0d9488;
  }
  .nav-quick-card.active .nav-quick-ico {
    background: #0d9488;
    color: #ffffff;
  }
  /* Notifications badge keeps the brand orange (defined above .nav-quick-badge). */
}

/* ============================================================
   FAVOURITES 3×3 GRID (.nav-favs)
   --------------------------------------------------------------
   Sticky-bottom, per-user customisable shortcuts. Replaces the
   2×2 .nav-quick-links. 9 tiles; persisted in localStorage
   (`fv_sidebar_favs_v1::<user_id>`). The full menu (favourites,
   chips, primary cards) is collapsed inside a <details> above so
   the drawer opens fast — operator reveals the rest by tapping
   the "Full menu" chevron.
   ============================================================ */
.nav-favs { display: none; }
.nav-favs-picker[hidden] { display: none !important; }

@media (max-width: 1023px) {
  .nav-favs {
    display: block;
    flex-shrink: 0;
    /* Sit between user-wrap (50) and the quick-create row (95) so the
       favourites grid is the first thing under the user block and the
       3 New Lead / New Invoice / New Job cards land directly below it.
       No longer sticky-bottom — drawer scrolls naturally. */
    order: 60;
    z-index: 5;
    padding: 8px 10px;
    background: transparent;
    /* backdrop-filter dropped — was a perf cost on every drawer-open
       repaint and unnecessary now that the favs aren't sticky over
       scrolling content. */
    border-top: none;
    box-shadow: none;
  }
  .nav-favs-h {
    display: flex; align-items: center; gap: 8px;
    padding: 0 4px 6px;
  }
  .nav-favs-title {
    flex: 1;
    font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
  }
  .nav-favs-edit-btn,
  .nav-favs-done-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.78);
    border-radius: 7px;
    padding: 4px 8px;
    font: 600 11px/1 'Public Sans', 'Public Sans', system-ui, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-favs-edit-btn { width: 28px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .nav-favs-done-btn { display: none; background: rgba(20,184,166,0.18); color: #2dd4bf; border-color: rgba(20,184,166,0.35); }
  .nav-favs.is-editing .nav-favs-edit-btn { display: none; }
  .nav-favs.is-editing .nav-favs-done-btn { display: inline-block; }

  .nav-favs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .nav-fav {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    aspect-ratio: 1.05;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: rgba(255,255,255,0.92);
    text-decoration: none;
    font-size: 10.5px; font-weight: 600;
    text-align: center; padding: 0 4px;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    transition: background .12s, border-color .12s, transform .1s;
  }
  .nav-fav:hover  { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
  .nav-fav:active { transform: scale(0.97); }
  .nav-fav.active {
    background: linear-gradient(135deg, rgba(20,184,166,0.22), rgba(20,184,166,0.08));
    border-color: rgba(20,184,166,0.40);
  }
  .nav-fav-ico {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    font-size: 1.05rem;
    background: rgba(255,255,255,0.06);
    color: var(--brand-light, #2dd4bf);
  }
  .nav-fav-ico .linq-ico { width: 20px; height: 20px; }
  .nav-fav.active .nav-fav-ico { background: rgba(255,255,255,0.18); color: #fff; }
  .nav-fav-label {
    line-height: 1.1; max-height: 2.2em;
    overflow: hidden; text-overflow: ellipsis;
    word-break: break-word;
  }
  .nav-fav-empty {
    background: rgba(255,255,255,0.025);
    border-style: dashed;
    color: rgba(255,255,255,0.35);
  }
  .nav-fav-empty .nav-fav-ico {
    background: transparent;
    color: rgba(255,255,255,0.35);
  }

  /* Edit-mode wobble + remove × */
  .nav-favs.is-editing .nav-fav {
    cursor: pointer;
    animation: nav-fav-wobble .35s ease-in-out 2;
  }
  .nav-fav-remove {
    position: absolute; top: 3px; right: 3px;
    width: 18px; height: 18px; border-radius: 9px;
    border: none; padding: 0;
    background: #dc2626; color: #fff;
    font-size: 11px; line-height: 1;
    display: none; align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-favs.is-editing .nav-fav:not(.nav-fav-empty) .nav-fav-remove { display: flex; }
  @keyframes nav-fav-wobble {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-1.2deg); }
    75% { transform: rotate(1.2deg); }
  }

  /* Picker bottom sheet for adding routes */
  .nav-favs-picker {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    max-height: 60vh;
    overflow-y: auto;
    background: rgba(15, 18, 30, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -16px 48px -8px rgba(0,0,0,0.55);
    padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .nav-favs-picker-h {
    position: sticky; top: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 4px 10px;
    background: linear-gradient(180deg, rgba(15,18,30,1), rgba(15,18,30,0.92));
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
  }
  .nav-favs-picker-h button {
    background: none; border: none; color: rgba(255,255,255,0.6);
    cursor: pointer; padding: 6px;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-favs-picker-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 12px; }
  .nav-favs-picker-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 9px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 12.5px; font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-favs-picker-row:active { background: rgba(255,255,255,0.08); }
  .nav-favs-picker-row.is-current { opacity: 0.45; pointer-events: none; }
  .nav-favs-picker-row i {
    color: var(--brand-light, #2dd4bf);
    font-size: 0.95rem;
  }
  .nav-favs-picker-row .linq-ico { width: 18px; height: 18px; flex: 0 0 18px; }

  /* Full-menu collapse: drawer opens with the menu hidden so the
     favourites land instantly. Operator taps the chevron to reveal
     favourites/chips/primary-cards above. */
  details.sidebar-full-menu { margin: 0 0 8px; }
  details.sidebar-full-menu > summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    margin: 4px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: rgba(255,255,255,0.78);
    font-size: 12px; font-weight: 700; letter-spacing: 0.10em;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }
  details.sidebar-full-menu > summary::-webkit-details-marker { display: none; }
  details.sidebar-full-menu[open] > summary .sidebar-full-menu-toggle-icon {
    transform: rotate(180deg);
  }
  details.sidebar-full-menu .sidebar-full-menu-toggle-icon {
    transition: transform .2s;
    color: rgba(255,255,255,0.5);
  }
}
@media (min-width: 1024px) {
  /* Desktop: the flat nav (`.sidebar-nav-flat`) owns the sidebar.
     The mobile slide-up drawer's contents — the 2-col primary card
     grid, the dot-labelled favourites list, the chips, the More
     drawer, and the 6-tile .nav-favs grid — are all redundant on
     desktop because the flat nav already lists every route. Hide
     them entirely instead of inlining via `display: contents`,
     which previously leaked the mobile zones onto the desktop sheet
     underneath the flat nav. */
  .nav-favs { display: none !important; }
  details.sidebar-full-menu,
  .sidebar-full-menu { display: none !important; }
  .sidebar-toolbar .sidebar-full-menu-toggle { display: none !important; }
  /* Sheet toolbar is only meaningful on mobile — desktop puts the
     cmdbar back in flow as a column item. */
  .sidebar-toolbar { display: contents; }
}

/* ============================================================
   STEP 15 — Full-menu drawer light re-skin (linq Brand Kit)
   --------------------------------------------------------------
   Scoped to the mobile drawer only (≤1023px). Flips the drawer
   from the legacy dark glass to Bone (#F2EBDF) + Panel (#FAF6EE)
   tiles with Ink text and 1px Ink-12% borders. Also collapses
   favourite-tile heights to ~88px, restyles the in-drawer × close
   button, hides the bottom-right FAB while open, and bumps the
   drawer above any leaking native tooltips.
   Selectors here are deliberately drawer-scoped — no broad rules.
   ============================================================ */
@media (max-width: 1023px) {
  /* 1. Drawer body: Bone surface, ink text. Overrides the earlier
        `rgba(250, 250, 249, 0.78)` glass set further up in this file. */
  .sidebar.sidebar,
  aside.sidebar {
    background: #F2EBDF !important;
    color: #0F1623 !important;
    border-top: 1px solid rgba(15,22,35, 0.12) !important;
    /* 5. Bump drawer above the modal layer so any leaking popovers
          (and stale `title=""` browser tooltips) sit underneath. */
    z-index: 9999 !important;
  }

  /* 2a. Hide the bottom-right close FAB while the drawer is open —
         the in-drawer × (top-right) is now the only close affordance.
         The FAB markup is owned by another stream so we just visually
         suppress it; layout is unaffected (fixed position). */
  body.sidebar-open .fab-menu {
    display: none !important;
  }

  /* 2b. Top-right × close button — restyle to the new icon-button
         vocabulary: Bone bg, 1px Ink-12% outline, Ink × glyph.
         This overrides the .sidebar .sidebar-close-btn rule above. */
  .sidebar .sidebar-close-btn {
    background: #F2EBDF !important;
    border: 1px solid rgba(15,22,35, 0.12) !important;
    color: #0F1623 !important;
    border-radius: 12px !important;
  }
  .sidebar .sidebar-close-btn:active {
    background: #EAE2CE !important;
  }

  /* 4. "FAVOURITES" header (.nav-favs-title) and "FULL MENU" header
        (details.sidebar-full-menu > summary) — Ink text, IBM Plex
        Mono, 11px, letter-spacing 0.14em, uppercase. */
  .sidebar .nav-favs .nav-favs-title {
    color: #0F1623;
    font-family: 'Archivo Narrow', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .sidebar details.sidebar-full-menu > summary {
    color: #0F1623;
    background: #FAF6EE;
    border: 1px solid rgba(15,22,35, 0.12);
    font-family: 'Archivo Narrow', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .sidebar details.sidebar-full-menu > summary .sidebar-full-menu-toggle-icon {
    color: rgba(15,22,35, 0.62);
  }

  /* 1+3. Favourites strip: light Bone background, Panel category
          cards with Ink-12% border + 12px radius, fixed 88px rows. */
  .sidebar .nav-favs {
    background: #F2EBDF;
    border-top: 1px solid rgba(15,22,35, 0.12);
    box-shadow: 0 -8px 24px -12px rgba(15,22,35, 0.18);
  }
  .sidebar .nav-favs .nav-favs-edit-btn,
  .sidebar .nav-favs .nav-favs-done-btn {
    background: #FAF6EE;
    border: 1px solid rgba(15,22,35, 0.12);
    color: #0F1623;
    border-radius: 8px;
  }
  .sidebar .nav-favs .nav-favs-done-btn {
    background: #EA6A2C;
    border-color: #EA6A2C;
    color: #FFFFFF;
  }

  /* 3. 9-tile grid: 3 cols × 3 rows on phone, 4 cols × 3 rows on
        tablet. Fixed 88px rows so 9 tiles always fit without scroll
        (88 × 3 + 6gap × 2 + 32 header ≈ 320px — well inside the
        75vh drawer cap on a 375px-tall phone). */
  .sidebar .nav-favs .nav-favs-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 88px;
    gap: 6px;
  }
  .sidebar .nav-favs .nav-fav {
    /* Override aspect-ratio (which made tiles ~3-4× too tall). */
    aspect-ratio: auto;
    height: 88px;
    padding: 12px 8px;
    background: #FAF6EE;
    border: 1px solid rgba(15,22,35, 0.12);
    border-radius: 12px;
    color: #0F1623;
    font-size: 14px;
    font-weight: 600;
    gap: 6px;
  }
  .sidebar .nav-favs .nav-fav:hover {
    background: #FFFFFF;
    border-color: rgba(15,22,35, 0.22);
  }
  .sidebar .nav-favs .nav-fav.active {
    background: linear-gradient(135deg, rgba(234,106,44, 0.12), rgba(234,106,44, 0.04));
    border-color: rgba(234,106,44, 0.40);
    color: #0F1623;
  }
  .sidebar .nav-favs .nav-fav-ico {
    width: 32px;
    height: 32px;
    background: rgba(15,22,35, 0.06);
    color: #EA6A2C;
    border-radius: 8px;
    font-size: 1rem;
  }
  .sidebar .nav-favs .nav-fav.active .nav-fav-ico {
    background: #EA6A2C;
    color: #FFFFFF;
  }
  .sidebar .nav-favs .nav-fav-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    color: #0F1623;
    max-height: 2.2em;
  }
  .sidebar .nav-favs .nav-fav-empty {
    background: rgba(15,22,35, 0.02);
    border-style: dashed;
    border-color: rgba(15,22,35, 0.22);
    color: rgba(15,22,35, 0.42);
  }
  .sidebar .nav-favs .nav-fav-empty .nav-fav-ico {
    background: transparent;
    color: rgba(15,22,35, 0.42);
  }

  /* 6. Command bar (search + phone/msg/bell + create) — was styled
        for the legacy dark sidebar (white-on-translucent-white). On
        the new bone drawer it rendered invisible. Re-skin to ink-on-
        bone with Panel tiles so icons + placeholder are readable. */
  .sidebar .sidebar-cmdbar .cmdbar-search {
    background: #FAF6EE;
    border: 1px solid rgba(15,22,35, 0.12);
    color: #0F1623;
  }
  .sidebar .sidebar-cmdbar .cmdbar-search::placeholder {
    color: rgba(15,22,35, 0.45);
  }
  .sidebar .sidebar-cmdbar .cmdbar-search:focus {
    background: #FFFFFF;
    border-color: rgba(15,22,35, 0.32);
  }
  .sidebar .sidebar-cmdbar .cmdbar-search-icon {
    color: rgba(15,22,35, 0.55);
  }
  .sidebar .sidebar-cmdbar .cmdbar-util-btn,
  .sidebar .sidebar-cmdbar .cmdbar-create-btn {
    background: #FAF6EE;
    border: 1px solid rgba(15,22,35, 0.12);
    color: #0F1623;
  }
  .sidebar .sidebar-cmdbar .cmdbar-util-btn:hover,
  .sidebar .sidebar-cmdbar .cmdbar-create-btn:hover {
    background: #F7F3EA;
    border-color: rgba(15,22,35, 0.22);
    color: #0F1623;
  }

  /* 7. Legacy nav-chips row (Inventory/Finance/Customers…) — same
        dark-sidebar treatment carried over. Re-skin to Panel tile +
        Ink text + Ink-12% border so the chips read on bone. */
  .sidebar .nav-chips .nav-chip {
    background: #FAF6EE;
    border: 1px solid rgba(15,22,35, 0.12);
    color: #0F1623;
  }
  .sidebar .nav-chips .nav-chip i,
  .sidebar .nav-chips .nav-chip .nav-chip-label {
    color: #0F1623;
  }
  .sidebar .nav-chips .nav-chip.active {
    background: #EA6A2C;
    border-color: #EA6A2C;
    color: #FFFFFF;
  }
  .sidebar .nav-chips .nav-chip.active i,
  .sidebar .nav-chips .nav-chip.active .nav-chip-label {
    color: #FFFFFF;
  }

  /* 8. Legacy nav-fav-row (the FULL MENU coloured-dot rows —
        Inventory / Finance / Customers / Schedule / Invoices) was
        also styled `color: rgba(255,255,255,0.78)` for the dark
        sidebar. Re-skin to ink so the labels read on bone. The
        coloured dot stays untouched (it sets its own bg colour). */
  .sidebar .sidebar-nav .nav-fav-row,
  .sidebar .sidebar-nav .nav-fav-row .nav-fav-label {
    color: #0F1623;
  }
  .sidebar .sidebar-nav .nav-fav-row:hover {
    background: #F7F3EA;
    color: #0F1623;
  }
  .sidebar .sidebar-nav .nav-fav-row.active {
    background: rgba(234,106,44, 0.12);
    color: #0F1623;
  }

  /* 9. User profile button (Saman Sepehripour / Masteradmin) was
        white-on-dark from nav.css. Override to ink-on-bone for the
        mobile drawer so name + role are legible. The avatar block
        keeps its branded gradient + white initials. */
  .sidebar .sidebar-user-name { color: #0F1623; }
  .sidebar .sidebar-user-role { color: rgba(15,22,35, 0.62); }
  .sidebar .sidebar-user-chevron { color: rgba(15,22,35, 0.42); }

  /* 10. Search field placeholder — `.cmdbar-search::placeholder` is
         set globally (not media-scoped), so the override at #6 above
         needs the higher-specificity twin in this block. Bumping the
         placeholder contrast from 0.45 → 0.55 so "Search or Ask"
         actually reads on the Panel tile. */
  .sidebar .sidebar-cmdbar .cmdbar-search::placeholder {
    color: rgba(15,22,35, 0.55);
    opacity: 1;
  }

  /* 11. Hide the redundant standalone Notifications row in the
         drawer footer — the cmdbar at the top of the drawer already
         carries the bell, so the row was duplicate chrome. The bell
         icon at the top stays. Per user request. */
  .sidebar .sidebar-notif-row { display: none; }

  /* 12. ma_active_company subtitle on the user button (e.g.
         "Therapy Sound" when masteradmin is impersonating) — used to
         carry an inline `style="color:#2dd4bf"` that read teal on the
         dark drawer and almost-white on the new bone drawer. The
         inline style was deleted in base.html and replaced with the
         `.sidebar-user-role--co` modifier; here we render it as ink-
         62% so it sits one tier below the username, with the building
         icon picked out in Ocean as a brand cue. */
  .sidebar .sidebar-user-role--co {
    color: rgba(15,22,35, 0.62);
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .sidebar .sidebar-user-role--co i {
    font-size: 0.6rem;
    color: #3B5BDB;
  }
}

/* Tablet: 4 cols × 3 rows so the 9 tiles spread out. */
@media (min-width: 600px) and (max-width: 1023px) {
  .sidebar .nav-favs .nav-favs-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 88px;
  }
}

/* ============================================================
   Step 14 — FAB-menu re-skin to .linq-action--tab
   --------------------------------------------------------------
   The legacy `.fab-menu` rules above paint a rotated 45° orange
   diamond. The button now also carries `.linq-action--lg
   .linq-action--tab` (see locksmith.css), so we reset the legacy
   aesthetics here without deleting them — the diamond rules stay
   intact for any consumer still relying on them, and this block
   simply wins via specificity (`.fab-menu.linq-action`).

   The new look: Panel tile + 1px Ink-12% hairline + Ink hamburger
   glyph + 8×8 Signal corner tab (drawn by `.linq-action--tab::after`).
   No rotation, no gradient, no blur. Light-mode only — confirmed
   the app is light-only. ============================================ */
.fab-menu.linq-action {
  /* Re-assert fixed positioning. `.linq-action` (locksmith.css) sets
     `position: relative` and loads AFTER fab.css, so without this
     re-declare the button fell out of the viewport corner and
     rendered inline at the bottom of the page (mirrored next to the
     Crew dock at left). Same anchor as the legacy diamond. */
  position: fixed;
  right: 0.9rem;
  bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
  z-index: 410;
  width: 56px;
  height: 56px;
  /* Mainly-orange Signal tile so the menu stands out against the cream
     dashboard. Brand v1.0 reserves orange for primary CTAs and the
     menu IS the primary navigation entry on mobile, so it earns the
     accent. White hamburger glyph for contrast. */
  transform: none;
  background: var(--linq-orange, #EA6A2C);
  border: 1px solid var(--linq-orange-dk, #C9551F);
  border-radius: 14px;
  color: #FFFFFF;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 6px 18px -4px rgba(234, 106, 44, 0.45),
    0 2px 6px rgba(15, 22, 35, 0.18);
}
.fab-menu.linq-action:hover  { transform: none; background: var(--linq-orange-dk, #C9551F); }
.fab-menu.linq-action:active { transform: translateY(1px); background: var(--linq-orange-dk, #C9551F); }
.fab-menu.linq-action::after {
  /* Drop both the legacy warm halo AND the .linq-action--tab corner
     square — the orange tile already IS the Signal accent, so a second
     orange corner tab on top of it would be invisible / redundant. */
  animation: none;
  display: none;
}
.fab-menu.linq-action svg { transform: none; }

/* While the drawer is open, keep the same orange tile but swap the
   glyph to a white × so the same button closes the menu. We hide the
   inline hamburger SVG and draw the × via ::before. */
body.sidebar-open .fab-menu.linq-action {
  background: var(--linq-orange-dk, #C9551F);
  border: 1px solid var(--linq-orange-dk, #C9551F);
  border-radius: 14px;
  transform: none;
  color: #FFFFFF;
  box-shadow:
    0 6px 18px -4px rgba(234, 106, 44, 0.45),
    0 2px 6px rgba(15, 22, 35, 0.18);
}
body.sidebar-open .fab-menu.linq-action svg { display: none; }
body.sidebar-open .fab-menu.linq-action::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg,  transparent 46%, #FFFFFF 46%, #FFFFFF 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #FFFFFF 46%, #FFFFFF 54%, transparent 54%);
  -webkit-mask: radial-gradient(circle at center, #000 24%, transparent 24%);
          mask: radial-gradient(circle at center, #000 24%, transparent 24%);
  border-radius: 14px;
  pointer-events: none;
}