to clear the OLD position:fixed #topnav. The new .appbar is in-flow (sticky), so these arbitrary-value Tailwind classes now create unwanted top gap. These arbitrary-value classes were used ONLY for topnav clearance — no other element on the platform uses 84px or 70px margin-top. Safe to zero globally. ============================================================ */ .mt-\[70px\] { margin-top: 0 !important; } @media (min-width: 768px) { .md\:mt-\[84px\] { margin-top: 0 !important; } } /* ============================================================ SIDEBAR — desktop-only The .sidebar-card (profile/avatar block in home.blade.php and any other dashboard page that uses it) is replaced on mobile by the hamburger drawer + bottom tab bar. Hide on small screens so it doesn't consume the entire first viewport. ============================================================ */ @media (max-width: 899px) { .sidebar-card { display: none !important; } } /* ============================================================ GOOGLE TRANSLATE WIDGET (gt-fab) Floating language picker. Desktop: bottom-left as before. Mobile: lifted above the bottom tab bar with breathing room. Tighter padding on mobile so it reads as a compact pill. ============================================================ */ .gt-fab { position: fixed; left: 10px; bottom: 1.25rem; z-index: 50; } .gt-fab__inner { position: relative; display: inline-block; padding: 1rem; background: #fff; border: 1px solid var(--chrome-card-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.05); } @media (max-width: 899px) { .gt-fab { /* Clear the bottom tab bar (76px) + safe-area + 12px breathing room */ bottom: calc(76px + env(safe-area-inset-bottom) + 12px); left: 8px; } .gt-fab__inner { padding: 0.5rem 0.7rem; border-radius: 10px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15); } /* Shrink Google's injected select to fit the compact pill */ .gt-fab__inner .goog-te-gadget-simple { font-size: 0.78rem !important; padding: 2px 6px !important; border: 0 !important; background: transparent !important; } .gt-fab__inner .goog-te-gadget { font-size: 0.72rem !important; } } /* Always hide Google's powered-by branding rail (already hidden inline, re-asserted here so chrome.css owns the full widget styling) */ .gt-fab .VIpgJd-ZVi9od-l4eHX-hSRGPd, .gt-fab .skiptranslate iframe { display: none !important; } /* ============================================================ SIDE-NAV ACTIVE STATE Pairs with `is-current` class added by route check in resources/views/components/side-nav.blade.php Replaces text-slate-400 on the current page's anchor so there's no Tailwind specificity war. ============================================================ */ .sidebar-nav li a.navbar-link { transition: background 0.15s ease, color 0.15s ease; padding-left: 10px; padding-right: 10px; } .sidebar-nav li a.navbar-link:hover:not(.is-current) { background: rgba(0, 0, 0, 0.03); } .sidebar-nav li a.navbar-link.is-current { background: rgba(249, 115, 22, 0.12); color: #f97316; font-weight: 600; } .sidebar-nav li a.navbar-link.is-current h6 { color: #f97316; font-weight: 600; } .sidebar-nav li a.navbar-link.is-current svg, .sidebar-nav li a.navbar-link.is-current i[data-feather] { color: #f97316; stroke: #f97316; } /* Drawer icons (added by senior-frontend pass) */ .mobile-drawer__link { display: flex; align-items: center; gap: 14px; } .drawer-ico { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted); transition: color var(--transition-fast); } .mobile-drawer__link:hover .drawer-ico, .mobile-drawer__link.is-current .drawer-ico { color: var(--orange); } .drawer-label { flex: 1; }