/* office-sidebar.css: the Office Dashboard side menu and phone top bar (copied from office.html), for
   FieldHub sections that live on their own pages (Inventory). Keep in step with office.html. */
.fh-office { display: flex; height: 100vh; overflow: hidden; margin: 0; }
.fh-office .sidebar { width: 220px; min-width: 220px; background: #0f172a; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; flex-shrink: 0; z-index: 50;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.fh-office .sidebar-brand { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 11px; }
.fh-office .sidebar-brand a { display: flex; }
.fh-office .sidebar-brand img { width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0; }
.fh-office .sidebar-brand-text { line-height: 1.2; }
.fh-office .sidebar-brand-name { font-size: 12px; font-weight: 800; color: #fff; letter-spacing: .03em; text-transform: uppercase; }
.fh-office .sidebar-brand-sub { font-size: 10px; color: #F47920; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 1px; }
.fh-office .sidebar-hub { display: flex; align-items: center; margin: 10px 10px 0; padding: 9px 14px; min-height: 40px; border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; box-sizing: border-box; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.fh-office .sidebar-hub:hover { background: rgba(255,255,255,.07); }
.fh-office .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; flex: 1; }
.fh-office .sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-radius: 8px; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.55); text-decoration: none; white-space: nowrap; }
.fh-office .sidebar-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.fh-office .sidebar-nav a.active { background: rgba(244,121,32,.18); color: #F47920; }
/* Badges: the same as office.html's .sb-badge */
.fh-office .sb-badge { margin-left: auto; min-width: 18px; height: 18px; background: #e53e3e; color: #fff; font-size: 9px; font-weight: 800; border-radius: 9px;
  display: none; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; box-sizing: border-box; }
.fh-office .sidebar-sub { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; }
.fh-office .sidebar-nav .sidebar-sub a { padding-left: 30px; font-size: 13px; color: rgba(255,255,255,.5); }
.fh-office .sidebar-nav .sidebar-sub a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }
.fh-office .sidebar-divider { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 6px 10px; }
.fh-office .sidebar-bottom { padding: 10px 10px 16px; }
.fh-office .sidebar-bottom a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.4); text-decoration: none; }
.fh-office .sidebar-bottom a:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); }
.fh-office .main-content { flex: 1; overflow-y: auto; min-width: 0; }
.fh-office .office-topbar { display: none; }
.fh-office .sidebar-toggle { display: none; position: fixed; top: 6px; right: 12px; z-index: 200; background: #1e293b; color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px; padding: 0 14px; min-height: 44px; min-width: 72px; font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer; }
.fh-office .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; }
@media (max-width: 768px) {
  .fh-office .sidebar { position: fixed; left: -220px; top: 0; transition: left .25s; z-index: 100; }
  .fh-office .sidebar.open { left: 0; }
  .fh-office .sidebar-overlay.visible { display: block; }
  .fh-office .sidebar-toggle { display: block; }
  .fh-office .office-topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; background: #0f172a;
    padding: 6px 96px 6px 12px; min-height: 56px; box-sizing: border-box; }
  .fh-office .office-topbar-logo { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; flex-shrink: 0; }
  .fh-office .office-topbar-logo img { width: 36px; height: 36px; border-radius: 8px; display: block; }
  .fh-office .office-topbar-title { flex: 1; min-width: 0; color: #fff; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fh-office .sidebar-hub { min-height: 44px; }
  .fh-office .sidebar-nav a, .fh-office .sidebar-bottom a { min-height: 44px; box-sizing: border-box; }
}
/* Older pages that scroll the window (Team, Settings, Worksites; mount({ windowScroll: true })): the menu is fixed at the
   left and the page scrolls as before, so window.scrollY and the pages' own sticky bars keep working. */
.fh-office.fh-office-win { display: block; height: auto; overflow: visible; }
.fh-office.fh-office-win .sidebar { position: fixed; left: 0; top: 0; height: 100vh; }
.fh-office.fh-office-win .main-content { margin-left: 220px; overflow: visible; }
@media (max-width: 768px) {
  .fh-office.fh-office-win .sidebar { left: -220px; }
  .fh-office.fh-office-win .sidebar.open { left: 0; }
  .fh-office.fh-office-win .main-content { margin-left: 0; }
}
/* Field users (no Office Dashboard): FieldHub's phone top bar only, logo back to Home. */
.fh-field .office-topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; background: #0f172a; padding: 6px 12px; min-height: 56px; box-sizing: border-box; }
.fh-field .office-topbar-logo { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.fh-field .office-topbar-logo img { width: 36px; height: 36px; border-radius: 8px; display: block; }
.fh-field .office-topbar-title { flex: 1; color: #fff; font-size: 15px; font-weight: 800; }
.fh-field .office-topbar-home { color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; min-height: 44px; display: flex; align-items: center; padding: 0 14px; font-weight: 800; text-decoration: none; }