/**
 * Pampered Paws — Full-width responsive layouts for embedded portals
 */

/* ── Break out of theme/Elementor boxed columns → full viewport width (desktop) ── */
.pp-staff-dashboard-embed,
#pp-staff-dashboard-root,
#pp-customer-dashboard-root,
.pp-calendar-embed,
.pp-portal-embed,
.entry-content > .pp-staff-dashboard-embed,
.entry-content > #pp-staff-dashboard-root,
.entry-content > #pp-customer-dashboard-root,
.elementor-widget-shortcode .pp-staff-dashboard-embed,
.elementor-widget-shortcode #pp-staff-dashboard-root,
.elementor-widget-shortcode #pp-customer-dashboard-root,
.wp-block-shortcode .pp-staff-dashboard-embed,
.wp-block-shortcode #pp-staff-dashboard-root {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: visible;
  box-sizing: border-box;
}

/* Phone + iPad: avoid 100vw horizontal scroll jitter on iOS Safari */
@media (max-width: 1024px) {
  .pp-staff-dashboard-embed,
  #pp-staff-dashboard-root,
  #pp-customer-dashboard-root,
  .entry-content > .pp-staff-dashboard-embed,
  .entry-content > #pp-staff-dashboard-root,
  .entry-content > #pp-customer-dashboard-root,
  .elementor-widget-shortcode .pp-staff-dashboard-embed,
  .elementor-widget-shortcode #pp-staff-dashboard-root,
  .elementor-widget-shortcode #pp-customer-dashboard-root,
  .wp-block-shortcode .pp-staff-dashboard-embed,
  .wp-block-shortcode #pp-staff-dashboard-root {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow-x: visible;
  }
}

/* Clip horizontal overflow on inner content only — keeps fixed FAB/nav on viewport */
.pp-staff-dashboard-embed .staff-dashboard,
#pp-staff-dashboard-root .staff-dashboard,
#pp-customer-dashboard-root .dashboard-wrapper,
.pp-calendar-embed .calendar-container {
  overflow-x: visible;
}

/* Inner portal content fills the shell */
.pp-staff-dashboard-embed .staff-dashboard,
#pp-staff-dashboard-root .staff-dashboard,
#pp-customer-dashboard-root .dashboard-wrapper,
.pp-calendar-embed .calendar-container {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Standalone full-page portals (no embed wrapper) */
body > .staff-dashboard,
body > .dashboard-wrapper {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ── Equal-width metric rows (3 / 4 / 5 columns) ── */
.pp-metrics-3,
.totals-grid.pp-metrics-3,
.stats-grid.pp-metrics-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 16px);
  width: 100%;
}

.pp-metrics-4,
.stats-grid.pp-metrics-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 16px);
  width: 100%;
}

.pp-metrics-5,
.service-pills.pp-metrics-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1.5vw, 10px);
  width: 100%;
}

.service-pills.pp-metrics-row > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  text-align: center;
  min-width: 0;
}

/* ── Customer dashboard grids ── */
.pp-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(12px, 2.5vw, 24px);
  width: 100%;
}

.pp-svc-tiles-responsive {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 12px);
  width: 100%;
}

/* ── Booking form root ── */
.pp-booking-root {
  width: 100%;
  max-width: min(980px, 100%);
  margin: 0 auto;
  padding: clamp(12px, 3vw, 24px);
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  .pp-metrics-4,
  .stats-grid.pp-metrics-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pp-metrics-5,
  .service-pills.pp-metrics-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Phone ── */
@media (max-width: 640px) {
  .pp-metrics-3,
  .totals-grid.pp-metrics-3,
  .stats-grid.pp-metrics-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .pp-metrics-4,
  .stats-grid.pp-metrics-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pp-metrics-5,
  .service-pills.pp-metrics-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pp-svc-tiles-responsive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-value,
  .total-value {
    font-size: clamp(1.25rem, 5vw, 2rem) !important;
  }

  .stat-card,
  .total-card {
    padding: clamp(10px, 2.5vw, 16px) !important;
  }

  .stat-label,
  .total-label {
    font-size: clamp(0.65rem, 2.5vw, 0.8rem) !important;
  }
}

@media (max-width: 400px) {
  .pp-metrics-3,
  .totals-grid.pp-metrics-3 {
    grid-template-columns: 1fr;
  }

  .pp-svc-tiles-responsive {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Staff glass shell: hero + stats responsive ── */
.pp-v4.pp-glass-shell .stats-grid.pp-v42-metrics,
.pp-v4 .pp-glass-shell .stats-grid.pp-v42-metrics {
  width: 100%;
}

@media (max-width: 767px) {
  .pp-v4.pp-glass-shell.staff-dashboard,
  .pp-v4 .pp-glass-shell.staff-dashboard,
  .pp-staff-dashboard-embed .pp-v4.pp-glass-shell.staff-dashboard,
  .pp-staff-dashboard-embed .pp-v4 .pp-glass-shell.staff-dashboard {
    padding-left: clamp(8px, 2.5vw, 12px);
    padding-right: clamp(8px, 2.5vw, 12px);
  }

  .pp-v4.pp-glass-shell .stats-grid.pp-v42-metrics,
  .pp-v4 .pp-glass-shell .stats-grid.pp-v42-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: var(--pp-space-3);
  }

  .pp-v4.pp-glass-shell .stats-grid.pp-v42-metrics .stat-change,
  .pp-v4 .pp-glass-shell .stats-grid.pp-v42-metrics .stat-change,
  .pp-v4.pp-glass-shell .stats-grid.pp-v42-metrics .stat-icon,
  .pp-v4 .pp-glass-shell .stats-grid.pp-v42-metrics .stat-icon {
    display: none !important;
  }

  .pp-v4.pp-glass-shell .top-bar,
  .pp-v4 .pp-glass-shell .top-bar {
    gap: var(--pp-space-3);
  }

  .pp-v4.pp-glass-shell .top-bar-actions,
  .pp-v4 .pp-glass-shell .top-bar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pp-space-2);
    width: 100%;
  }

  .pp-v4.pp-glass-shell .top-bar-actions .logout-btn,
  .pp-v4 .pp-glass-shell .top-bar-actions .logout-btn {
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 44px;
  }

  .pp-v4.pp-glass-shell .top-bar-actions .realtime-indicator,
  .pp-v4 .pp-glass-shell .top-bar-actions .realtime-indicator,
  .pp-v4.pp-glass-shell .top-bar-actions .branch-selector,
  .pp-v4 .pp-glass-shell .top-bar-actions .branch-selector,
  .pp-v4.pp-glass-shell .top-bar-actions .branch-badge,
  .pp-v4 .pp-glass-shell .top-bar-actions .branch-badge {
    min-height: 44px;
    align-items: center;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .pp-v4.pp-glass-shell .stats-grid.pp-v42-metrics,
  .pp-v4 .pp-glass-shell .stats-grid.pp-v42-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 16px);
  }

  .pp-v4.pp-glass-shell .pp-v42-dashboard-shell,
  .pp-v4 .pp-glass-shell .pp-v42-dashboard-shell {
    gap: var(--pp-space-5);
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .pp-v4.pp-glass-shell .stats-grid.pp-v42-metrics,
  .pp-v4 .pp-glass-shell .stats-grid.pp-v42-metrics {
    margin-bottom: var(--pp-space-5);
  }
}

@media (max-width: 767px) and (orientation: landscape),
       (max-height: 500px) and (orientation: landscape) {
  .pp-v4.pp-glass-shell .pp-action-grid,
  .pp-v4 .pp-glass-shell .pp-action-grid {
    display: grid !important;
  }
}