/* Shared unified header styles for Booking and Dashboard */
.booking-header,
.header-dashboard {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  padding: 0.75rem var(--spacing-xl, 2rem);
  /* Safe area: add padding-top for status bar */
  padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  align-items: center;
}

.booking-header .header-inner,
.header-dashboard .header-inner {
  display: contents;
}

.booking-header .header-left,
.header-dashboard .header-left {
  grid-column: 1;
  display: flex;
  align-items: center;
}

.booking-header .header-center,
.header-dashboard .header-center {
  grid-column: 2;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: center;
  text-align: center;
}

.booking-header .header-right,
.header-dashboard .header-right {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Typography and controls */
.booking-header .logo,
.header-dashboard .logo { display:flex; align-items:center; gap:var(--spacing-sm, .5rem); text-decoration:none; }
.booking-header .logo-icon,
.header-dashboard .logo-icon { font-size:0.95rem; line-height:1; }
.booking-header .logo-text,
.header-dashboard .logo-text { font-size:0.85rem; font-weight:700; color: var(--primary-color); }
.booking-header .garage-name-display,
.header-dashboard .garage-name-display {
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
  letter-spacing:.01em;
  color:#1f2a37;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
.booking-header .sidebar-toggle-btn,
.header-dashboard .sidebar-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 28px;
  min-width: 28px;
  box-sizing: border-box;
  padding: 0.15rem 0.35rem;
  line-height: 1;
  border-radius: .35rem;
  border: 1px solid var(--primary-color, #2563eb);
  background: transparent;
  color: var(--primary-color, #2563eb);
  cursor: pointer;
  box-shadow: none;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.booking-header .sidebar-toggle-btn:hover,
.header-dashboard .sidebar-toggle-btn:hover { background: rgba(37,99,235,0.06); border-color: var(--primary-dark, #1d4ed8); }
.booking-header .sidebar-toggle-btn:focus-visible,
.header-dashboard .sidebar-toggle-btn:focus-visible { outline: 2px solid rgba(37,99,235,0.35); outline-offset: 2px; }

/* SVG icon sizing (uses currentColor) */
.booking-header .sidebar-toggle-btn .icon,
.header-dashboard .sidebar-toggle-btn .icon { width: 14px; height: 14px; display:block; }

/* Popover positioning shared */
.booking-header .header-menu-popover,
.header-dashboard .header-menu-popover { position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid #e5e7eb; box-shadow:0 4px 16px rgba(0,0,0,0.08); border-radius:.5rem; padding:.3rem; min-width:180px; display:none; z-index:220; }
.booking-header .header-menu-popover[aria-hidden="false"],
.header-dashboard .header-menu-popover[aria-hidden="false"] { display:block; }
.booking-header .header-menu-list,
.header-dashboard .header-menu-list { display:flex; flex-direction:column; gap:.15rem; }
.booking-header .header-menu-item,
.header-dashboard .header-menu-item { padding:.38rem .5rem; border:none; background:transparent; font-weight:600; color:#1f2a37; text-align:left; border-radius:.35rem; font-size:.8rem; text-decoration:none; }
.booking-header .header-menu-item:hover,
.header-dashboard .header-menu-item:hover { background:#f1f5f9; color: var(--primary-color); }

/* Mobile/Tablet: Adjust padding */
@media (max-width: 768px) {
  .booking-header, .header-dashboard { padding:0.75rem 1rem; }
}

/* ======================================================
   Dashboard header sync overrides
   Use measured header height (--unified-header-height) from JavaScript
   ====================================================== */

/* Dashboard container needs padding to account for fixed header */
.dashboard-container {
  /* --unified-header-height already includes safe-area from measured header */
  /* Add 1rem to align with sidebar link top padding */
  padding-top: calc(var(--unified-header-height, 57px) + 1rem) !important;
}

.dashboard-main {
  padding-top: 0 !important;
}

/* Sync sticky sidebar to measured header height */
.dashboard-sidebar {
  top: var(--unified-header-height, 57px) !important;
  height: calc(100vh - var(--unified-header-height, 57px)) !important;
}

/* Section titles and headers should not have extra top spacing */
.dashboard-main .overview-header,
.dashboard-main .overview-title-group,
.dashboard-main .section-title,
.dashboard-main .section-header,
.dashboard-main h1,
.dashboard-container .overview-header,
.dashboard-container .overview-title-group,
.dashboard-container .section-title,
.dashboard-container .section-header,
.dashboard-container h1,
.dashboard-section .section-header,
.dashboard-section .section-title,
.dashboard-section h1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Dashboard sections should not add extra padding */
.dashboard-main .dashboard-section,
.dashboard-container > .dashboard-section {
  padding-top: 0 !important;
}

/* Section titles should have no extra margin on top */
.dashboard-container > section:first-child,
.dashboard-container > .overview-header:first-child,
.dashboard-main > section:first-child,
.dashboard-main > .overview-header:first-child,
.dashboard-section:first-of-type {
  margin-top: 0 !important;
}

/* Revenue grid and stats grid at top of content */
.revenue-grid,
.stats-grid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Mobile: adjust padding for potentially taller mobile header */
@media (max-width: 768px) {
  .dashboard-container {
    /* --unified-header-height already includes safe-area from measured header */
    /* Add 1rem to align with sidebar link top padding */
    padding-top: calc(var(--unified-header-height, 72px) + 1rem) !important;
  }

  .dashboard-sidebar {
    top: var(--unified-header-height, 72px) !important;
    height: calc(100vh - var(--unified-header-height, 72px)) !important;
  }
}



/* Safe area for bottom navigation bar (gesture navigation) */
.dashboard-main {
  padding-bottom: calc(var(--spacing-xl, 2rem) + env(safe-area-inset-bottom, 0px)) !important;
}