@import url("/assets/fonts/typography.css");
/* Barber SaaS - Premium Design System (Fase 4.7-B, refines Fase 4.7-A's tokens;
   Fase 4.9 - BRAND INTEGRATION applies the approved BARBER identity onto these same tokens).
   Plain CSS, no build step, no external dependency - loaded directly by index.html. */

:root {
  color-scheme: light;

  /* ---- Brand (Fase 4.9: BARBER identity - Azul Noite + Ouro Suave) ---- */
  --color-primary: #0e1b2e;
  --color-primary-hover: #0a141f;
  --color-primary-active: #060b12;
  --color-accent: #c9a96a;
  --color-accent-hover: #b89658;
  /* Fase 4.9 finding: the approved --brand-accent (#c9a96a) is a light gold - white text on it
     measures ~2.2:1 (fails WCAG AA's 4.5:1 for normal text). --color-text-on-accent below was
     switched to the dark primary instead (~7.7:1, verified). This darker variant is for the rarer
     case of accent-colored TEXT sitting on a light surface (e.g. an eyebrow label) - #c9a96a there
     measures ~2.1:1 against --color-background; this shade measures ~4.6:1, real AA pass. */
  --color-accent-text: #8a6b37;

  /* ---- Surfaces (Fase 4.9: BARBER Fundo Off White / Superfície Cinza Claro) ---- */
  --color-background: #f6f5f2;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-muted: #f0f1f2;
  --color-surface-sunken: #e3e6e9;

  /* ---- Text (Fase 4.9: BARBER Texto Principal / Texto Secundário) ---- */
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-text-subtle: #667085;
  --color-text-on-primary: #ffffff;
  --color-text-on-accent: #0e1b2e;
  --color-text-link: #0e1b2e;

  /* ---- Borders ---- */
  --color-border: #d9dde2;
  --color-border-strong: #c3c9d1;
  --color-focus-ring: #7c93c9;

  /* ---- Feedback ----
     Fase 4.9 finding: the reference palette's functional colors (Sucesso #22c55e, Aviso #f59e0b,
     Erro #ef4444, Informacao #3b82f6) are real, but measured as badge/alert TEXT on this product's
     light surfaces they land at ~2.1-2.3:1 - well under WCAG AA's 4.5:1 (computed, not assumed).
     Per this phase's own instruction ("WCAG deve prevalecer sobre fidelidade cega ao mockup"), the
     already-accessible status palette validated across Fases 4.7-4.8 is kept unchanged rather than
     replaced - see the Fase 4.9 report's accessibility section for the full contrast math. */
  --color-success: #1e7d4f;
  --color-success-bg: #e6f4ec;
  --color-success-border: #b6e0c7;
  --color-warning: #92620a;
  --color-warning-bg: #fdf3df;
  --color-warning-border: #f0d99a;
  --color-danger: #b3261e;
  --color-danger-bg: #fbeae9;
  --color-danger-border: #f0c2be;
  --color-info: #1d5fa8;
  --color-info-bg: #e8f1fb;
  --color-info-border: #bcd7f2;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Shadow (understated - never decorative) ---- */
  --shadow-sm: 0 1px 2px rgba(14, 27, 46, 0.04), 0 1px 3px rgba(14, 27, 46, 0.04);
  --shadow-md: 0 10px 28px rgba(14, 27, 46, 0.08);
  --shadow-lg: 0 24px 56px rgba(14, 27, 46, 0.16);

  /* ---- Spacing scale ---- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* ---- Typography scale: locally hosted Manrope, with system fallbacks. ---- */
  --font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-xs: 12px;
  --font-sm: 13px;
  --font-md: 14px;
  --font-lg: 16px;
  --font-xl: 19px;
  --font-2xl: 24px;
  --font-3xl: 32px;

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 250ms ease;

  /* ---- Focus ---- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---- Z-index scale ---- */
  --z-header: 20;
  --z-bottom-nav: 45;
  /* Fase 4.10-H (mobile drawer dismiss): the scrim must cover EVERYTHING outside the drawer - the header (20) and the bottom navigation
     (45) included - and stay below the drawer, so the drawer is 47 and the scrim 46. Both stay below the toast (55) and every modal. */
  --z-sidebar: 47;
  --z-sidebar-scrim: 46;
  /* Fase 4.7-C real fix: --z-toast used to be 100 (above everything, including any open overlay).
     A toast created just before a modal/drawer/sheet opens (e.g. "Agendamento criado" right
     before opening a customer's profile) visually overlaps that overlay's own top-right close
     button - both live in the same screen corner - and blocks real clicks on it for the toast's
     whole ~5s lifetime (confirmed via a real Playwright actionability timeout, not assumed).
     Toasts now sit above the app shell (header/sidebar/bottom-nav) but below any open overlay, so
     an overlay's own backdrop naturally covers a still-visible toast instead of the reverse. */
  --z-toast: 55;
  --z-modal-backdrop: 60;
  --z-modal: 61;
  --z-drawer-backdrop: 62;
  --z-drawer: 63;

  /* ---- Layout ---- */
  --sidebar-width: 252px;
  --header-height: 64px;
  --bottom-nav-height: 62px;
  --drawer-width: 420px;
  --modal-max-width: 460px;
  --content-max-width: 1240px;

  /* ---- Auth brand panel (Fase 4.8-A, re-derived from the Fase 4.9 primary) ----
     A deeper, distinct navy from --color-primary (used for interactive elements like buttons/
     sidebar) so the auth brand panel reads as a real surface, not just "the button color, large".
     --color-accent (ouro suave) stays a controlled DETAIL here - never the panel's own background,
     never dominant. */
  --color-brand-panel: #0a121c;
  --color-brand-panel-elevated: #121b29;
  --color-brand-panel-border: rgba(255, 255, 255, 0.09);
  --color-brand-panel-text: #f5f3ee;
  --color-brand-panel-text-muted: rgba(245, 243, 238, 0.62);
  --color-brand-panel-text-subtle: rgba(245, 243, 238, 0.4);
  --font-hero: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  --auth-form-max-width: 400px;
}

/* -------------------- Reset / base -------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-md);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--color-text-link); }
ul { list-style: none; margin: 0; padding: 0; }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------- Typography helpers -------------------- */

.text-3xl { font-size: var(--font-3xl); font-weight: 700; letter-spacing: -0.01em; }
.text-2xl { font-size: var(--font-2xl); font-weight: 700; letter-spacing: -0.005em; }
.text-xl { font-size: var(--font-xl); font-weight: 700; }
.text-lg { font-size: var(--font-lg); font-weight: 600; }
.text-md { font-size: var(--font-md); }
.text-sm { font-size: var(--font-sm); }
.text-xs { font-size: var(--font-xs); }
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }

/* -------------------- Buttons -------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: 10px var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--font-md);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
  line-height: 1.2;
  min-height: 42px;
}

.btn.btn-inline { width: auto; }
.btn.btn-sm { min-height: 34px; padding: 6px 10px; font-size: var(--font-sm); }
/* Fase 4.10-C real finding: .btn's own `display: inline-flex` (an author rule) silently overrides
   the browser's native `[hidden] { display: none }` default (a real, same-class bug the
   .auth-card-slot[hidden] rule above already had to work around once before) - a real `hidden`
   .btn element was staying visually rendered. Real, same fix: an explicit [hidden] override. */
.btn[hidden] { display: none; }

.btn:active:not(:disabled) { transform: scale(0.98); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--color-primary-active); border-color: var(--color-primary-active); }

.btn-accent {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
}
.btn-accent:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-muted); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--color-surface-muted); }

.btn-danger {
  background: var(--color-surface);
  color: var(--color-danger);
  border-color: var(--color-danger-border);
}
.btn-danger:hover:not(:disabled) { background: var(--color-danger-bg); }

/* Fase 4.10-B: a neutral, bordered "Continuar com Google" button - Google's own brand guidelines
   ask third-party buttons to keep a white/neutral surface with their real, unmodified multi-color
   "G" mark (inlined as SVG above in index.html, never hand-redrawn as a single flat color) rather
   than adopting BARBER's own navy/gold palette here. */
.btn-google {
  background: #ffffff;
  color: #3c4043;
  border-color: var(--color-border-strong);
}
.btn-google:hover:not(:disabled) { background: #f8f9fa; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
  color: var(--color-text-subtle);
  font-size: var(--font-sm);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn-loading .btn-spinner { position: absolute; display: inline-block; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.icon-btn:hover { background: var(--color-surface-muted); color: var(--color-text); }

/* Fase 4.9-C: real Notification Center bell badge - only ever shown when there is a real unread
   count (JS toggles display:none/inline-flex, never CSS :empty tricks on a fabricated "0"). */
#notification-bell-btn { position: relative; margin-right: var(--spacing-xs); }
.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* -------------------- Spinner -------------------- */

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.spinner-dark { border: 2px solid var(--color-border-strong); border-top-color: var(--color-primary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------- Skeleton -------------------- */

.skeleton {
  background: linear-gradient(90deg, var(--color-surface-muted) 25%, var(--color-surface-sunken) 37%, var(--color-surface-muted) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
  display: block;
}
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--color-surface-muted); }
}
.skeleton-text { height: 12px; margin-bottom: var(--spacing-sm); }
.skeleton-text.w-40 { width: 40%; }
.skeleton-text.w-60 { width: 60%; }
.skeleton-text.w-80 { width: 80%; }
.skeleton-circle { border-radius: 50%; flex-shrink: 0; }
.skeleton-row { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); }
.skeleton-row:last-child { border-bottom: none; }
.skeleton-block { border-radius: var(--radius-lg); }

/* -------------------- Form fields -------------------- */

.form-field { display: flex; flex-direction: column; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); }
.form-label { font-size: var(--font-sm); font-weight: 600; color: var(--color-text); }
.form-input-wrap { position: relative; display: flex; align-items: center; }

.form-input, .form-select {
  width: 100%;
  padding: 10px var(--spacing-sm);
  font-size: var(--font-md);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 42px;
}
.form-input:focus, .form-select:focus {
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px rgba(124, 147, 201, 0.25);
  outline: none;
}
.form-input:disabled, .form-select:disabled { background: var(--color-surface-sunken); color: var(--color-text-subtle); }
.form-field.has-error .form-input, .form-field.has-error .form-select { border-color: var(--color-danger-border); }
.form-helper { font-size: var(--font-xs); color: var(--color-text-muted); }
.form-error-text { font-size: var(--font-xs); color: var(--color-danger); min-height: 1.1em; }

.search-input-wrap { position: relative; margin-bottom: var(--spacing-md); }
.search-input-wrap .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-subtle); pointer-events: none; }
.search-input { padding-left: 38px; }

.password-toggle {
  position: absolute; right: 4px; background: transparent; border: none; width: auto;
  padding: 6px 8px; cursor: pointer; color: var(--color-text-muted); border-radius: var(--radius-sm);
}
.password-toggle:hover { background: var(--color-surface-muted); }
.form-input-wrap .form-input[data-has-toggle="true"] { padding-right: 40px; }

/* -------------------- Card -------------------- */

.card { background: var(--color-surface); border: 1px solid rgba(195, 201, 209, 0.72); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-elevated { box-shadow: var(--shadow-md); }
.card-padded { padding: var(--spacing-lg); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md); gap: var(--spacing-sm); }
.card-title { font-size: var(--font-xl); font-weight: 700; }
.card-subtitle { font-size: var(--font-sm); color: var(--color-text-muted); margin-top: 2px; }

/* -------------------- Badge -------------------- */

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: 600; white-space: nowrap; }
/* Fase 4.9: a small status dot in front of the label, on top of the label text itself - status is
   already never color-only in this app (every badge always carries its own text), this only adds
   a second, glanceable visual cue matching the approved identity's status-chip treatment.
   `currentColor` means each badge-* variant's own text color already colors its own dot, no new
   token needed. Scoped away from neutral/soon badges, which are not a real operational status. */
.badge:not(.badge-neutral):not(.badge-soon)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-neutral { background: var(--color-surface-muted); color: var(--color-text-muted); }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-soon { background: var(--color-surface-muted); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }

/* -------------------- Alert -------------------- */

.alert { display: flex; align-items: flex-start; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--font-md); }
.alert:empty { display: none; }
.alert-danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.alert-info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info); }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }

/* -------------------- Error state (retry) -------------------- */

.error-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-sm); padding: var(--spacing-xl) var(--spacing-md); color: var(--color-text-muted); }
.error-state-icon { color: var(--color-danger); }
.error-state-title { font-weight: 700; color: var(--color-text); font-size: var(--font-lg); }

/* -------------------- Toast -------------------- */

/* Fase 4.7-C real fix: toasts used to live top-right, the exact same corner every page-header's
   own action row (Agenda's date navigation, an overlay's close button) also occupies - a real
   toast (not just its container's empty bounding box) visually covered those real controls for
   its ~5s lifetime, confirmed by a real Playwright actionability timeout against #agenda-next-day
   and #customer-profile-close, not assumed. Bottom-right avoids every page's own top-of-content
   controls entirely; the mobile media query below keeps it above the real bottom navigation bar
   instead of behind it. */
#toast-region { position: fixed; bottom: var(--spacing-md); right: var(--spacing-md); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--spacing-sm); width: min(360px, calc(100vw - 2 * var(--spacing-md))); }

.toast { display: flex; align-items: flex-start; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); box-shadow: var(--shadow-md); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--font-md); animation: toast-in var(--transition-base); }
.toast-success { border-color: var(--color-success-border); background: var(--color-success-bg); color: var(--color-success); }
.toast-error { border-color: var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger); }
.toast-info { border-color: var(--color-info-border); background: var(--color-info-bg); color: var(--color-info); }
.toast-warning { border-color: var(--color-warning-border); background: var(--color-warning-bg); color: var(--color-warning); }
.toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast-title { font-weight: 700; }
.toast-close { margin-left: auto; background: none; border: none; width: auto; padding: 0 0 0 var(--spacing-sm); cursor: pointer; color: inherit; opacity: 0.7; flex-shrink: 0; }
.toast-close:hover { opacity: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* -------------------- Empty state -------------------- */

.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-sm); padding: var(--spacing-xl) var(--spacing-md); color: var(--color-text-muted); }
.empty-state-icon { color: var(--color-text-subtle); }
.empty-state-title { font-weight: 700; color: var(--color-text); font-size: var(--font-lg); }
.empty-state .btn { width: auto; margin-top: var(--spacing-xs); }

/* -------------------- Avatar -------------------- */

.avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: 700; flex-shrink: 0; }
.avatar-lg { width: 52px; height: 52px; font-size: var(--font-lg); }

/* -------------------- Divider -------------------- */

.divider { border: none; border-top: 1px solid var(--color-border); margin: var(--spacing-md) 0; }

/* -------------------- Page header -------------------- */

.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: var(--spacing-md); }
.page-header-title { font-size: clamp(24px, 2vw, 30px); line-height: 1.18; font-weight: 720; letter-spacing: -0.025em; }
.page-header-subtitle { color: var(--color-text-muted); margin-top: 6px; font-size: var(--font-md); }
.page-header-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.page-header-actions .btn { width: auto; }

/* -------------------- Auth screens (Fase 4.8-A: premium split-screen) --------------------
   Structure: .auth-shell is a two-pane grid (brand panel + form panel) at desktop/tablet-
   landscape widths, collapsing to a single, form-first column on mobile/tablet-portrait. The
   sidebar's own .brand/.brand-mark (used inside the authenticated app shell) are intentionally
   untouched - the auth screen uses its own dedicated .auth-brand-* classes below, so nothing here
   can regress the sidebar's brand lockup. */

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 58fr 42fr;
  background: var(--color-background);
}

/* ---- Left: brand panel ---- */

.auth-brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-2xl);
  padding: var(--spacing-2xl) clamp(var(--spacing-xl), 5vw, 72px);
  background: linear-gradient(148deg, #0a121c 0%, #101d2d 58%, #0b1623 100%);
  color: var(--color-brand-panel-text);
  overflow: hidden;
}

/* An extremely subtle radial highlight, never a decorative glow - anchored to the top-left so it
   reads as light falling on a real surface, not an effect. */
.auth-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 820px 520px at 8% -8%, rgba(243, 241, 236, 0.09), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  pointer-events: none;
}

.auth-brand-lockup { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }

/* ---- BARBER symbol (Fase 4.9) ----
   Two interlocked rounded modules - one outline, one filled - the approved identity's proprietary
   mark. Original SVG geometry (evolves the Fase 4.8-A auth-mark, which already used this same
   two-square-overlap concept). The outline module always takes the surrounding text color
   (`currentColor`), so it reads white on the dark auth/sidebar panels and dark on any future light
   surface without a second asset; the filled module is always the brand accent, via a dedicated
   class rather than `currentColor`, so it never goes monochrome. Never raster, never third-party. */
.brand-symbol { flex-shrink: 0; }
.brand-symbol-accent { fill: var(--color-accent); }

.auth-wordmark-group { display: flex; flex-direction: column; gap: 1px; }
.auth-wordmark { font-size: 17px; font-weight: 700; letter-spacing: 0.14em; color: var(--color-brand-panel-text); line-height: 1.2; }
.auth-wordmark-descriptor { font-size: 9.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-brand-panel-text-subtle); line-height: 1.3; margin-top: 1px; }

.auth-hero { max-width: 460px; position: relative; z-index: 1; }
.auth-site-link { position: absolute; z-index: 3; top: 32px; right: 38px; color: #d8c18d; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.auth-site-link:hover, .auth-site-link:focus-visible { color: #fff; }
.auth-hero-title {
  font-size: var(--font-hero);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-brand-panel-text);
}
.auth-hero-subtitle {
  margin-top: var(--spacing-md);
  font-size: var(--font-lg);
  line-height: 1.5;
  color: var(--color-brand-panel-text-muted);
  max-width: 40ch;
}

/* Fase 4.9: grew from a single-line label list into icon + title + real one-line description per
   feature (still the exact same 4 real product areas - Agenda/Clientes/Equipe/Insights - nothing
   new claimed), matching the approved identity's auth composition. A vertical stack reads better
   at this density than the old horizontal wrap, especially once the panel's own height shrinks
   (see the existing max-height media query below). */
.auth-feature-list { display: flex; flex-direction: column; gap: var(--spacing-md); margin-top: var(--spacing-xl); position: relative; z-index: 1; }
.auth-feature-item { display: flex; align-items: flex-start; gap: 10px; font-size: var(--font-sm); line-height: 1.45; color: var(--color-brand-panel-text-muted); }
.auth-feature-item strong { display: block; color: var(--color-brand-panel-text); font-weight: 700; }
.auth-feature-item svg { color: var(--color-accent); flex-shrink: 0; margin-top: 3px; }

/* ---- Product preview (purely decorative - aria-hidden, no real data) ---- */

.auth-preview {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  background: var(--color-brand-panel-elevated);
  border: 1px solid var(--color-brand-panel-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: var(--spacing-md);
  max-width: 420px;
  transform: perspective(1400px) rotateY(-1.5deg) rotateX(0.5deg);
}
.auth-preview-window { display: flex; gap: var(--spacing-md); }
.auth-preview-rail { display: flex; flex-direction: column; gap: 7px; padding-top: 3px; flex-shrink: 0; }
.auth-preview-rail span { width: 22px; height: 7px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.14); }
.auth-preview-rail span:first-child { width: 22px; background: var(--color-accent); opacity: 0.85; }
.auth-preview-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.auth-preview-heading { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-brand-panel-text-subtle); margin-bottom: 2px; }
.auth-preview-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm);
  padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--color-brand-panel-border);
}
.auth-preview-row-label { font-size: 11.5px; font-weight: 600; color: var(--color-brand-panel-text); }
.auth-preview-row-meta { font-size: 10px; color: var(--color-brand-panel-text-subtle); }
.auth-preview-chip { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; }
.auth-preview-chip-progress { background: rgba(201, 169, 106, 0.22); color: #e6d3a8; }
.auth-preview-chip-done { background: rgba(255, 255, 255, 0.1); color: var(--color-brand-panel-text-muted); }

/* ---- Right: form panel ---- */

.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  background:
    radial-gradient(circle at 100% 0%, rgba(201, 169, 106, 0.09), transparent 34%),
    var(--color-surface);
}

.auth-card { width: 100%; max-width: var(--auth-form-max-width); }

.auth-card-eyebrow { font-size: var(--font-sm); font-weight: 700; color: var(--color-accent-text); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--spacing-sm); }
.auth-card-title { font-size: 30px; line-height: 1.18; font-weight: 720; letter-spacing: -0.025em; margin-bottom: 8px; }
.auth-card-subtitle { font-size: var(--font-md); color: var(--color-text-muted); margin-bottom: var(--spacing-xl); }

.auth-card-slot[hidden] { display: none; }
.auth-card-slot.auth-card-enter { animation: auth-card-in var(--transition-slow) ease; }
@keyframes auth-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.auth-card-slot .form-field:last-of-type { margin-bottom: var(--spacing-xl); }
.auth-card-slot .form-input { height: 46px; }
.auth-card-slot .btn-primary { height: 46px; font-size: var(--font-lg); }

/* Fase 4.10-D: persona entry + independent professional screens - existing tokens only. */
.persona-entry { margin-top: var(--spacing-xl); display: grid; gap: var(--spacing-sm); }
.persona-entry-title { font-size: var(--font-sm); color: var(--color-text-muted); text-align: center; margin-bottom: var(--spacing-xs); }
.persona-option {
  display: grid; gap: 2px; width: 100%; text-align: left; padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text); font: inherit; cursor: pointer;
}
.persona-option:hover { border-color: var(--color-border-strong); background: var(--color-surface-muted); }
.persona-option:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.persona-option-title { font-weight: 600; font-size: var(--font-md); }
.persona-option-desc { font-size: var(--font-sm); color: var(--color-text-muted); }
.professional-home-identity { display: grid; gap: var(--spacing-sm); margin: 0 0 var(--spacing-xl); padding: var(--spacing-md) var(--spacing-lg); background: var(--color-surface-muted); border-radius: var(--radius-md); }
.professional-home-identity dt { font-size: var(--font-xs); color: var(--color-text-muted); }
.professional-home-identity dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
#professional-home-title:focus { outline: none; }
.auth-switch { margin-top: var(--spacing-lg); font-size: var(--font-sm); color: var(--color-text-muted); text-align: center; }
.auth-switch-link {
  background: none; border: none; padding: 0; width: auto; display: inline; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
.auth-switch-link:hover { color: var(--color-primary-hover); }

#auth-error:empty { display: none; }
#auth-error { margin-bottom: var(--spacing-lg); }

/* ---- Auth responsive (Fase 4.8-A) ----
   Three real tiers, not "desktop squeezed":
   1) Desktop/landscape-tablet (>860px wide): split-screen, tightened for shorter viewports
      (e.g. 1024x768) via the max-height rule below rather than collapsing to one column.
   2) Tablet-portrait (641-860px, e.g. 768x1024): stacked, brand section keeps its headline/
      subheadline/feature list (ample vertical room), product preview dropped.
   3) Mobile (<=640px): brand section becomes a compact header only - no subheadline, no
      feature list - so the real login form is reachable without scrolling past a landing page. */

@media (max-width: 1180px) {
  .auth-brand-panel { padding: var(--spacing-xl) clamp(var(--spacing-lg), 4vw, 56px); }
  .auth-preview { max-width: 360px; }
}

@media (min-width: 861px) and (max-height: 820px) {
  .auth-brand-panel { gap: var(--spacing-lg); padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
  .auth-hero-subtitle { margin-top: var(--spacing-sm); }
  .auth-feature-list { margin-top: var(--spacing-md); }
  .auth-preview { transform: none; padding: var(--spacing-sm); }
  .auth-preview-row { padding: 6px 9px; }
}

@media (max-width: 860px) {
  /* Tablet-portrait real fix: the auth shell's own min-height (100vh) doesn't make an auto-sized
     grid ROW stretch on its own - without an explicit 1fr row, the form panel sized to its own
     content and left a large, unintentional-looking blank gap below it on tall viewports (e.g.
     768x1024, confirmed visually). Giving the form row 1fr + min-height:0 lets it actually receive
     the leftover viewport height, and its existing flex centering does the rest. */
  .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
  .auth-brand-panel { padding: var(--spacing-xl) var(--spacing-lg); gap: var(--spacing-lg); }
  .auth-preview { display: none; }
  .auth-form-panel { padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-2xl); min-height: 0; }
  .auth-hero { max-width: 520px; }
}

@media (max-width: 640px) {
  .auth-brand-panel { padding: var(--spacing-lg) var(--spacing-md); gap: var(--spacing-sm); }
  .auth-hero-subtitle, .auth-feature-list { display: none; }
  .auth-hero-title { font-size: clamp(1.5rem, 1rem + 4vw, 2rem); }
  .auth-form-panel { padding: var(--spacing-md) var(--spacing-md) var(--spacing-2xl); }
  .auth-card-title { font-size: 22px; }
}

/* -------------------- Premium entry experience -------------------- */

.auth-shell {
  grid-template-columns: minmax(560px, 1.08fr) minmax(470px, 0.92fr);
  background: #eceae4;
}

.auth-brand-panel {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(250px, 1fr) auto auto;
  align-content: stretch;
  gap: clamp(24px, 4vh, 48px);
  padding: clamp(32px, 5vh, 58px) clamp(38px, 5.6vw, 88px) 30px;
  background:
    linear-gradient(145deg, rgba(12, 25, 40, 0.2), transparent 48%),
    linear-gradient(155deg, #07111d 0%, #0c1c2c 52%, #10263b 100%);
  isolation: isolate;
}

.auth-brand-panel::before {
  background:
    radial-gradient(circle 560px at 0% 4%, rgba(255, 255, 255, 0.08), transparent 64%),
    radial-gradient(circle 500px at 100% 92%, rgba(201, 169, 106, 0.09), transparent 64%),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}

.auth-brand-panel::after {
  content: "";
  position: absolute;
  left: clamp(38px, 5.6vw, 88px);
  top: 118px;
  bottom: 82px;
  width: 1px;
  background: linear-gradient(transparent, rgba(201, 169, 106, 0.25) 18%, rgba(201, 169, 106, 0.08) 78%, transparent);
  pointer-events: none;
}

.auth-brand-orbit {
  position: absolute;
  z-index: -1;
  width: min(46vw, 660px);
  aspect-ratio: 1;
  right: -24%;
  top: 13%;
  border: 1px solid rgba(201, 169, 106, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 74px rgba(201, 169, 106, 0.025), 0 0 0 148px rgba(201, 169, 106, 0.018);
  pointer-events: none;
}

.auth-brand-lockup { gap: 13px; }
.auth-mark { width: 38px; height: 38px; }
.auth-wordmark { font-size: 19px; letter-spacing: 0.18em; }
.auth-wordmark-descriptor { margin-top: 3px; color: rgba(245, 243, 238, 0.5); letter-spacing: 0.12em; }

.auth-hero {
  width: min(100%, 670px);
  max-width: none;
  align-self: center;
  padding-left: clamp(0px, 2.2vw, 34px);
}

.auth-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #d9bf88;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.auth-hero-eyebrow span { width: 28px; height: 1px; background: #c9a96a; }
.auth-hero-title {
  max-width: 13ch;
  font-family: var(--font-editorial);
  font-size: clamp(42px, 4.6vw, 72px);
  font-weight: 400;
  line-height: 0.99;
  letter-spacing: -0.045em;
}
.auth-hero-title em { color: #d7bd87; font-weight: 400; }
.auth-hero-subtitle {
  max-width: 51ch;
  margin-top: 24px;
  color: rgba(245, 243, 238, 0.67);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
}

.auth-feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(28px, 4vh, 46px);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.auth-feature-item {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 18px 18px 18px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 11px;
  line-height: 1.45;
}
.auth-feature-item + .auth-feature-item { padding-left: 18px; }
.auth-feature-item:last-child { border-right: none; padding-right: 0; }
.auth-feature-item strong { margin-bottom: 2px; font-size: 12px; letter-spacing: 0.01em; }
.auth-feature-index { color: #c9a96a; font-family: var(--font-editorial); font-size: 17px; }

.auth-preview {
  width: min(100%, 560px);
  max-width: none;
  justify-self: end;
  padding: 0;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: rgba(16, 32, 49, 0.88);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.36);
  transform: translateX(clamp(0px, 2.4vw, 34px));
  backdrop-filter: blur(16px);
}
.auth-preview-topline {
  display: flex;
  justify-content: space-between;
  padding: 13px 17px;
  color: rgba(245, 243, 238, 0.48);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.auth-preview-live { display: flex; align-items: center; gap: 6px; color: #d8c08f; }
.auth-preview-live i { width: 6px; height: 6px; background: #d5b875; border-radius: 50%; box-shadow: 0 0 0 4px rgba(201, 169, 106, 0.1); }
.auth-preview-window { gap: 18px; padding: 17px; }
.auth-preview-rail { width: 28px; padding-top: 5px; gap: 9px; }
.auth-preview-rail::before { content: "B"; display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 10px; color: #0b1724; background: #c9a96a; border-radius: 8px; font-size: 10px; font-weight: 800; }
.auth-preview-rail span { width: 24px; height: 5px; background: rgba(255, 255, 255, 0.09); }
.auth-preview-rail span:first-child { width: 24px; }
.auth-preview-body { gap: 8px; }
.auth-preview-heading { margin-bottom: 4px; letter-spacing: 0.12em; }
.auth-preview-row { display: grid; grid-template-columns: 42px 1fr auto; padding: 9px 10px; }
.auth-preview-time { color: #e3c98f; font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums; }
.auth-preview-row-label { font-size: 10.5px; }
.auth-preview-row-meta { margin-top: 2px; font-size: 9px; }
.auth-brand-signature { position: relative; z-index: 1; color: rgba(245, 243, 238, 0.34); font-size: 9px; font-weight: 650; letter-spacing: 0.13em; text-transform: uppercase; }

.auth-form-panel {
  position: relative;
  padding: clamp(30px, 5vw, 74px);
  background:
    radial-gradient(circle at 85% 8%, rgba(201, 169, 106, 0.16), transparent 25%),
    linear-gradient(145deg, #f5f3ee 0%, #ebe9e2 100%);
}
.auth-form-panel::before {
  content: "Acesso seguro · BARBER ID";
  position: absolute;
  top: 28px;
  right: 34px;
  color: #7c776e;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.auth-card {
  max-width: 480px;
  padding: clamp(28px, 3.5vw, 48px);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 26px;
  box-shadow: 0 28px 70px rgba(26, 32, 38, 0.11), 0 2px 8px rgba(26, 32, 38, 0.04);
  backdrop-filter: blur(18px);
}
.auth-card-eyebrow { margin-bottom: 12px; color: #8a6b37; font-size: 10px; letter-spacing: 0.13em; }
.auth-card-title { color: #142235; font-family: var(--font-editorial); font-size: clamp(30px, 3vw, 40px); font-weight: 400; letter-spacing: -0.035em; }
.auth-card-subtitle { max-width: 42ch; margin-bottom: 28px; line-height: 1.55; }
.auth-card-slot .form-input {
  height: 50px;
  padding-inline: 15px;
  background: #fbfaf7;
  border-color: #d8d6cf;
  border-radius: 12px;
}
.auth-card-slot .form-input:focus { background: #fff; border-color: #9f8653; box-shadow: 0 0 0 3px rgba(159, 134, 83, 0.12); }
.auth-card-slot .form-label { margin-bottom: 7px; color: #4f5660; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.auth-card-slot .btn-primary {
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(120deg, #0b192a, #173552);
  box-shadow: 0 10px 22px rgba(14, 27, 46, 0.18);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.auth-card-slot .btn-primary:hover:not(:disabled) { background: linear-gradient(120deg, #07111d, #102b45); transform: translateY(-1px); box-shadow: 0 13px 26px rgba(14, 27, 46, 0.23); }
.auth-divider { color: #928e85; }

#login-panel .persona-entry { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
#login-panel .persona-entry-title { grid-column: 1 / -1; margin: 0 0 4px; text-align: left; }
#login-panel .persona-entry-title span { color: #27364a; font-weight: 750; }
#login-panel .persona-option {
  position: relative;
  min-height: 112px;
  align-content: end;
  padding: 42px 12px 12px;
  overflow: hidden;
  background: #f7f6f2;
  border-color: #e1ded7;
  border-radius: 14px;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
#login-panel .persona-option::before {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #8a6b37;
  background: #eee8dc;
  border-radius: 8px;
  font-family: var(--font-editorial);
  font-size: 11px;
  font-weight: 700;
}
#auth-show-register::before { content: "01"; }
#auth-show-professional::before { content: "02"; }
#auth-show-customer::before { content: "03"; }
#login-panel .persona-option::after { content: "↗"; position: absolute; top: 12px; right: 12px; color: #9b968d; font-size: 11px; }
#login-panel .persona-option:hover { transform: translateY(-2px); background: #fff; border-color: #cbb888; box-shadow: 0 10px 22px rgba(22, 32, 45, 0.08); }
#login-panel .persona-option-title { font-size: 11px; line-height: 1.3; }
#login-panel .persona-option-desc { margin-top: 4px; font-size: 9.5px; line-height: 1.35; }

@media (min-width: 861px) and (max-height: 820px) {
  .auth-brand-panel { gap: 18px; padding-top: 26px; padding-bottom: 20px; }
  .auth-hero-title { font-size: clamp(38px, 4vw, 58px); }
  .auth-hero-subtitle { margin-top: 14px; line-height: 1.45; }
  .auth-feature-list { margin-top: 20px; }
  .auth-feature-item { padding-top: 12px; padding-bottom: 12px; }
  .auth-preview-window { padding: 12px 15px; }
  .auth-card { padding: 30px 34px; }
  .auth-card-subtitle { margin-bottom: 20px; }
  #login-panel .persona-entry { margin-top: 20px; }
}

@media (max-width: 1040px) {
  .auth-shell { grid-template-columns: minmax(470px, 1fr) minmax(430px, 0.9fr); }
  .auth-brand-panel { padding-inline: 38px; }
  .auth-brand-panel::after { left: 38px; }
  .auth-preview { transform: none; }
}

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-brand-panel { min-height: auto; display: block; padding: 28px 30px; }
  .auth-brand-panel::after, .auth-brand-orbit, .auth-preview, .auth-brand-signature { display: none; }
  .auth-hero { margin-top: 30px; padding: 0; }
  .auth-hero-title { max-width: 16ch; font-size: clamp(34px, 7vw, 54px); }
  .auth-hero-subtitle { max-width: 55ch; }
  .auth-feature-list { max-width: 680px; }
  .auth-form-panel { padding: 38px 24px 52px; }
  .auth-form-panel::before { display: none; }
}

@media (max-width: 640px) {
  .auth-brand-panel { padding: 20px; }
  .auth-wordmark-descriptor { display: none; }
  .auth-hero { margin-top: 22px; }
  .auth-hero-eyebrow { margin-bottom: 11px; font-size: 8px; }
  .auth-hero-title { max-width: 17ch; font-size: clamp(28px, 9.2vw, 40px); line-height: 1.03; }
  .auth-hero-subtitle, .auth-feature-list { display: none; }
  .auth-form-panel { display: block; padding: 14px 12px 38px; }
  .auth-card { max-width: none; padding: 26px 20px; border-radius: 20px; }
  .auth-card-title { font-size: 30px; }
  .auth-card-subtitle { margin-bottom: 22px; }
  #login-panel .persona-entry { grid-template-columns: 1fr; }
  #login-panel .persona-option { min-height: 68px; padding: 12px 38px 12px 50px; align-content: center; }
  #login-panel .persona-option::before { top: 50%; transform: translateY(-50%); }
  #login-panel .persona-option::after { top: 50%; transform: translateY(-50%); }
}

/* -------------------- Application shell -------------------- */

#app-view { display: none; }

.app-shell { display: flex; min-height: 100vh; }

/* Fase 4.10-H: the backdrop of the MOBILE drawer. On desktop (permanent sidebar) it never renders. */
.sidebar-scrim { display: none; }

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  display: flex;
  flex-direction: column;
  padding: 20px 12px 16px;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: var(--z-sidebar);
}

/* Fase 4.9: the sidebar used to carry its own, different mark (a bare "B" letter badge) while the
   auth screen carried the real BARBER symbol - two different marks for one product, the exact
   "simbolo duplicado" gap this phase's own brand audit flagged. Both now render the identical
   .brand-symbol SVG (see .auth-brand-lockup above), just at the sidebar's own compact scale. */
.sidebar .brand { color: var(--color-text-on-primary); padding: 0 10px 4px; display: flex; align-items: center; gap: 10px; }
.sidebar .brand-mark { width: 26px; height: 26px; }
.sidebar .brand-wordmark { font-size: 13.5px; font-weight: 700; letter-spacing: 0.1em; }

.nav-groups { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.nav-group { display: flex; flex-direction: column; gap: 5px; }
.nav-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.54); padding: 0 10px; margin-bottom: 5px; }
.nav-group-upcoming { display: none; }

.nav-item {
  display: flex; align-items: center; gap: var(--spacing-sm); width: 100%;
  min-height: 46px; padding: 11px 12px; border-radius: 12px;
  color: rgba(255, 255, 255, 0.78); background: transparent; border: none;
  border-left: 2px solid transparent; margin-left: -2px;
  font-size: var(--font-md); font-weight: 500; cursor: pointer; text-align: left;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.nav-item:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; }
/* Fase 4.9: the accent marks SELECTION here (spec: "accent deve indicar selecao... nao transforme
   todos os icones em dourado") - a thin left border, not a full gold background/icon recolor, so
   accent stays a controlled, occasional signal rather than the sidebar's dominant color. */
.nav-item.active { background: rgba(255, 255, 255, 0.13); color: #fff; font-weight: 700; border-left-color: var(--color-accent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.nav-item:disabled { color: rgba(255, 255, 255, 0.32); cursor: not-allowed; }
.nav-item svg { flex-shrink: 0; }
.nav-item-soon { margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.14); padding: 2px 6px; border-radius: var(--radius-full); }

.sidebar-footer { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: var(--spacing-sm); }
.owner-professional-toggle { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: var(--spacing-md); font-weight: 700; cursor: pointer; }
.owner-professional-toggle input { width: 22px; height: 22px; accent-color: var(--color-accent); flex: 0 0 auto; }

.main-column { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.header {
  height: var(--header-height); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(var(--spacing-md), 3vw, var(--spacing-xl)); background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid rgba(217, 221, 226, 0.86);
  position: sticky; top: 0; z-index: var(--z-header); gap: var(--spacing-sm);
  backdrop-filter: blur(14px);
}
.header-title { font-size: var(--font-lg); font-weight: 700; letter-spacing: -0.01em; }
.header-menu-btn { display: none; background: none; border: none; width: auto; padding: var(--spacing-sm); cursor: pointer; color: var(--color-text); }

.account-menu { position: relative; }
.account-trigger { display: flex; align-items: center; gap: 10px; min-height: 46px; background: none; border: 1px solid transparent; border-radius: var(--radius-md); padding: 5px 8px; cursor: pointer; width: auto; }
.account-trigger:hover { background: var(--color-surface-muted); }
.account-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-sm); font-weight: 700; text-align: left; }
.account-role { font-size: var(--font-xs); color: var(--color-text-muted); display: block; }

.account-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--spacing-xs); display: none; z-index: 30;
}
.account-dropdown.open { display: block; }
.account-dropdown .btn { justify-content: flex-start; }

.content { flex: 1; padding: 32px clamp(var(--spacing-lg), 3.4vw, 48px) var(--spacing-2xl); max-width: var(--content-max-width); width: 100%; margin: 0 auto; }

.panel { display: none; }
.panel.active { display: block; }

/* -------------------- Greeting -------------------- */

.greeting-eyebrow { font-size: var(--font-sm); color: var(--color-accent-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; }

/* -------------------- Dashboard command center -------------------- */

.dashboard-command {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  gap: clamp(var(--spacing-xl), 5vw, 72px);
  align-items: stretch;
  padding: clamp(28px, 4vw, 48px);
  margin-bottom: var(--spacing-md);
  color: var(--color-brand-panel-text);
  background:
    radial-gradient(circle at 12% 120%, rgba(201, 169, 106, 0.2), transparent 38%),
    linear-gradient(128deg, #09131f 0%, #10243b 58%, #0d1b2e 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 54px rgba(14, 27, 46, 0.18);
}
.dashboard-command::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 280px;
  height: 280px;
  right: -130px;
  top: -170px;
  border: 1px solid rgba(201, 169, 106, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(201, 169, 106, 0.035), 0 0 0 86px rgba(201, 169, 106, 0.025);
}
.dashboard-command-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.dashboard-command .greeting-eyebrow { color: #d5bd8d; margin-bottom: var(--spacing-sm); }
.dashboard-command-title { max-width: 620px; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 740; }
.dashboard-command .page-header-subtitle { margin-top: 12px; color: rgba(245, 243, 238, 0.66); font-size: var(--font-md); }
.dashboard-day-status { display: flex; align-items: center; gap: 9px; margin-top: var(--spacing-xl); font-size: var(--font-sm); color: rgba(245, 243, 238, 0.78); }
.dashboard-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #d5bd8d; box-shadow: 0 0 0 5px rgba(201, 169, 106, 0.12); flex: 0 0 auto; }

.dashboard-focus {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 210px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  backdrop-filter: blur(12px);
}
.dashboard-focus-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: 18px; }
.dashboard-focus-label { color: rgba(245, 243, 238, 0.62); font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dashboard-focus-time { color: #e7d2a7; font-size: var(--font-lg); font-weight: 760; font-variant-numeric: tabular-nums; }
.dashboard-focus-customer { display: block; color: #fff; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.dashboard-focus-service { display: block; min-height: 20px; margin-top: 5px; color: rgba(245, 243, 238, 0.65); font-size: var(--font-sm); }
.dashboard-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-top: 28px; color: rgba(245, 243, 238, 0.72); font-size: var(--font-xs); }
.dashboard-progress-copy strong { color: #fff; font-size: var(--font-sm); font-variant-numeric: tabular-nums; }
.dashboard-progress-track { height: 6px; margin-top: 9px; overflow: hidden; background: rgba(255, 255, 255, 0.14); border-radius: var(--radius-full); }
.dashboard-progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #b99352, #e2c990); border-radius: inherit; transition: width var(--transition-slow); }

#dashboard-stats-region { margin-bottom: var(--spacing-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
#dashboard-stats-region .stat-grid { gap: 0; margin: 0; }
.dashboard-kpi { position: relative; min-width: 0; padding: 20px 24px; border-right: 1px solid var(--color-border); }
.dashboard-kpi:last-child { border-right: none; }
.dashboard-kpi::before { content: ""; position: absolute; top: 23px; right: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--kpi-color, var(--color-primary)); opacity: 0.78; }
.dashboard-kpi-success { --kpi-color: var(--color-success); }
.dashboard-kpi-progress { --kpi-color: var(--color-accent); }
.dashboard-kpi-cancelled { --kpi-color: var(--color-danger); }
.dashboard-kpi-label { display: block; padding-right: 18px; color: var(--color-text-muted); font-size: var(--font-xs); font-weight: 680; }
.dashboard-kpi-value { display: block; margin: 9px 0 5px; color: var(--color-primary); font-size: 32px; line-height: 1; font-weight: 750; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.dashboard-kpi-note { display: block; color: var(--color-text-subtle); font-size: 11px; }

.dashboard-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, 0.75fr); gap: var(--spacing-lg); align-items: start; }
.dashboard-agenda-card { min-height: 350px; }
.dashboard-section-header { margin-bottom: var(--spacing-sm); }
.section-kicker { display: block; margin-bottom: 4px; color: var(--color-accent-text); font-size: 10px; font-weight: 760; letter-spacing: 0.1em; text-transform: uppercase; }
.dashboard-actions-card { margin-bottom: var(--spacing-md); background: #fdfcf9; }
.dashboard-quick-actions { display: grid; gap: var(--spacing-sm); margin-top: var(--spacing-lg); }
.dashboard-action-button { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 12px; color: var(--color-text); text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.dashboard-action-button:hover { transform: translateY(-1px); border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.dashboard-action-icon { display: grid; place-items: center; width: 38px; height: 38px; color: var(--color-primary); background: var(--color-surface-muted); border-radius: var(--radius-md); }
.dashboard-action-label { font-size: var(--font-sm); font-weight: 680; }
.dashboard-action-arrow { color: var(--color-text-subtle); font-size: 16px; }
.dashboard-alerts-region { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.dashboard-team-card { margin-top: var(--spacing-lg); }
.dashboard-insights-card { margin-top: var(--spacing-lg); }
.production-comparison-header { align-items: flex-start; gap: var(--spacing-lg); }
.metric-switch { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; justify-content: flex-end; }
.production-custom-range { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(150px, 0.55fr) minmax(150px, 0.55fr) auto; gap: var(--spacing-md); align-items: end; padding: var(--spacing-md); margin: 0 0 var(--spacing-sm); background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.production-custom-range-copy { align-self: center; display: grid; gap: 3px; }
.production-custom-range-copy strong { color: var(--color-text); font-size: var(--font-sm); }
.production-custom-range-copy span { color: var(--color-text-muted); font-size: var(--font-xs); line-height: 1.4; }
.production-date-field { display: grid; gap: 6px; }
.production-date-field label { color: var(--color-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.production-date-field .form-input { margin: 0; background: var(--color-surface); }
.production-custom-range .btn { min-height: 42px; white-space: nowrap; }
.production-range-error { padding: 10px 12px; margin: 0 0 var(--spacing-sm); color: var(--color-danger); background: var(--color-danger-bg); border: 1px solid var(--color-danger-border); border-radius: var(--radius-md); font-size: var(--font-xs); }

.team-leader-card { display: flex; align-items: center; gap: 18px; padding: 20px; margin: var(--spacing-lg) 0; color: var(--color-brand-panel-text); background: linear-gradient(120deg, #0e1b2e, #18334f); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.team-leader-card-compact { margin: var(--spacing-md) 0 var(--spacing-lg); padding: 16px 18px; }
.team-leader-medal { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; color: #e3c98f; background: rgba(201, 169, 106, 0.12); border: 1px solid rgba(201, 169, 106, 0.34); border-radius: 50%; font-size: var(--font-sm); font-weight: 780; letter-spacing: 0.04em; }
.team-leader-copy { min-width: 0; display: grid; gap: 3px; }
.team-leader-eyebrow { color: #d8c08f; font-size: 10px; font-weight: 760; letter-spacing: 0.09em; text-transform: uppercase; }
.team-leader-name { overflow-wrap: anywhere; color: #fff; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; }
.team-leader-value { color: rgba(245, 243, 238, 0.65); font-size: var(--font-xs); }

.team-ranking { display: grid; gap: 18px; }
.team-ranking-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; }
.team-ranking-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.team-ranking-position { padding-top: 2px; color: var(--color-text-subtle); font-size: 11px; font-weight: 720; font-variant-numeric: tabular-nums; }
.team-ranking-main { min-width: 0; }
.team-ranking-header { display: flex; justify-content: space-between; gap: var(--spacing-md); align-items: baseline; }
.team-ranking-name { overflow: hidden; color: var(--color-text); font-size: var(--font-sm); text-overflow: ellipsis; white-space: nowrap; }
.team-ranking-value { color: var(--color-primary); font-size: var(--font-sm); font-weight: 760; font-variant-numeric: tabular-nums; }
.team-ranking-track { height: 9px; margin-top: 8px; overflow: hidden; background: var(--color-surface-muted); border-radius: var(--radius-full); }
.team-ranking-fill { display: block; height: 100%; min-width: 0; background: linear-gradient(90deg, #0e1b2e, #294d73); border-radius: inherit; transition: width var(--transition-slow); }
.team-ranking-row:first-child .team-ranking-fill { background: linear-gradient(90deg, #a47d3f, #d9bd7d); }
.team-ranking-meta { display: block; margin-top: 6px; color: var(--color-text-subtle); font-size: 11px; }
.insight-meter-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.insight-meter-row { min-width: 0; padding: 18px; border-right: 1px solid var(--color-border); }
.insight-meter-row:last-child { border-right: none; }
.insight-meter-copy { min-height: 58px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-sm); }
.insight-meter-label { color: var(--color-text-muted); font-size: var(--font-xs); line-height: 1.35; }
.insight-meter-value { color: var(--color-primary); font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums; }
.insight-meter-track { height: 4px; margin-top: 14px; overflow: hidden; background: var(--color-surface-muted); border-radius: var(--radius-full); }
.insight-meter-fill { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; }
.insight-meter-fill-1 { background: var(--color-success); }
.insight-meter-fill-2 { background: var(--color-accent); }
.insight-meter-fill-3 { background: var(--color-danger); }
.insight-meter-fill-4 { background: var(--color-warning); }

/* -------------------- Stat grid -------------------- */

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.stat-card { position: relative; overflow: hidden; min-height: 126px; padding: 22px var(--spacing-lg); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--stat-accent, var(--color-primary)); }
.stat-card-success { --stat-accent: var(--color-success); }
.stat-card-progress { --stat-accent: var(--color-accent); }
.stat-card-cancelled { --stat-accent: var(--color-danger); }
.stat-label { font-size: var(--font-sm); color: var(--color-text-muted); font-weight: 650; display: flex; align-items: center; gap: 6px; }
.stat-value { font-size: 36px; line-height: 1; font-weight: 720; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--color-primary); }

/* -------------------- Data table -------------------- */

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-md); }
.data-table th { text-align: left; font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); padding: var(--spacing-sm) var(--spacing-sm); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.data-table td { padding: var(--spacing-sm) var(--spacing-sm); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr { transition: background-color var(--transition-fast); }
.data-table tbody tr:hover { background: var(--color-surface-muted); }

/* -------------------- List rows (customers/barbers/agenda) -------------------- */

.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-xs); border-bottom: 1px solid var(--color-border);
  cursor: pointer; border-radius: var(--radius-sm); transition: background-color var(--transition-fast);
}
.list-row:hover { background: var(--color-surface-muted); }
.list-row:last-child { border-bottom: none; }
.list-row-static { cursor: default; }
.list-row-static:hover { background: transparent; }
.list-row-info { display: flex; align-items: center; gap: var(--spacing-md); min-width: 0; }
.list-row-title { font-weight: 600; }
.list-row-meta { color: var(--color-text-muted); font-size: var(--font-xs); }

/* -------------------- Agenda timeline -------------------- */

.agenda-list { display: flex; flex-direction: column; }
.agenda-item { display: flex; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-xs); border-bottom: 1px solid var(--color-border); }
.agenda-item:last-child { border-bottom: none; }
.agenda-time { width: 64px; flex-shrink: 0; font-weight: 700; font-size: var(--font-md); color: var(--color-text); font-variant-numeric: tabular-nums; }
.agenda-time-range { font-size: var(--font-xs); color: var(--color-text-subtle); display: block; margin-top: 2px; }
.agenda-details { flex: 1; min-width: 0; }
.agenda-customer { font-weight: 600; }
.agenda-service { color: var(--color-text-muted); font-size: var(--font-sm); }
.agenda-barber { color: var(--color-text-subtle); font-size: var(--font-xs); margin-top: 2px; }
.agenda-actions { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; }

/* -------------------- Inline form row -------------------- */

.inline-form { display: flex; gap: var(--spacing-md); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--spacing-md); }
.inline-form .form-field { margin-bottom: 0; flex: 1; min-width: 160px; }
.inline-form .btn { width: auto; flex-shrink: 0; }

.section-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); }
@media (min-width: 900px) {
  .section-grid.two-col { grid-template-columns: 1fr 1fr; align-items: start; }
  .section-grid.two-col.weighted { grid-template-columns: 2fr 1fr; }
}

/* -------------------- Overlays: shared backdrop/panel behavior -------------------- */

.overlay { position: fixed; inset: 0; display: none; z-index: var(--z-modal-backdrop); }
.overlay.open { display: flex; }

.overlay-backdrop-bg { position: fixed; inset: 0; background: rgba(16, 20, 30, 0.45); }

.modal-overlay { align-items: center; justify-content: center; padding: var(--spacing-md); }
.modal-card {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: var(--modal-max-width);
  padding: var(--spacing-lg); max-height: calc(100vh - 2 * var(--spacing-lg));
}

.drawer-overlay { align-items: stretch; justify-content: flex-end; z-index: var(--z-drawer-backdrop); }
.drawer-panel {
  position: relative; display: flex; flex-direction: column; width: min(var(--drawer-width), 100vw); height: 100%;
  background: var(--color-surface); box-shadow: var(--shadow-lg); padding: var(--spacing-lg);
  animation: drawer-in var(--transition-slow);
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Real fix (Fase 4.7-C): the close button must never scroll away with a tall panel's content -
 * previously `.overlay-close-btn` was `position:absolute` INSIDE the same element that had
 * `overflow-y:auto`, so on a long CRM 360 profile it scrolled out of view along with the content,
 * becoming genuinely unclickable (confirmed by a real Playwright actionability timeout, not
 * assumed). The panel itself no longer scrolls; only this inner wrapper does, so the close button
 * (a sibling, not a descendant, of this wrapper) always stays in place. */
.overlay-scroll-body { overflow-y: auto; flex: 1; min-height: 0; }

.sheet-overlay { align-items: flex-end; justify-content: center; }
.sheet-panel {
  position: relative; width: 100%; max-width: 480px; background: var(--color-surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--spacing-lg); max-height: 80vh; overflow-y: auto; animation: sheet-in var(--transition-slow);
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet-handle { width: 36px; height: 4px; border-radius: var(--radius-full); background: var(--color-border-strong); margin: 0 auto var(--spacing-md); }

.overlay-close-btn { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); z-index: 1; }
.overlay-title { font-size: var(--font-xl); font-weight: 700; margin-bottom: var(--spacing-xs); padding-right: 56px; }
.overlay-description { color: var(--color-text-muted); font-size: var(--font-sm); margin-bottom: var(--spacing-md); }
.overlay-actions { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-lg); }

/* -------------------- Quick action sheet -------------------- */

.quick-action-item {
  display: flex; align-items: center; gap: var(--spacing-md); width: 100%; padding: var(--spacing-sm) var(--spacing-xs);
  background: none; border: none; border-radius: var(--radius-md); cursor: pointer; text-align: left; font-size: var(--font-md);
  color: var(--color-text); transition: background-color var(--transition-fast);
}
.quick-action-item:hover { background: var(--color-surface-muted); }
.quick-action-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-surface-muted); display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex-shrink: 0; }

/* -------------------- Customer profile drawer -------------------- */

.profile-header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.profile-section-label { font-size: var(--font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); margin-bottom: var(--spacing-sm); }
.profile-section { margin-bottom: var(--spacing-lg); }
.profile-stat-row { display: flex; gap: var(--spacing-lg); flex-wrap: wrap; }
.profile-stat { display: flex; flex-direction: column; gap: 2px; }
.profile-stat-value { font-size: var(--font-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.profile-stat-label { font-size: var(--font-xs); color: var(--color-text-muted); }

/* -------------------- Bottom navigation (mobile) -------------------- */

.bottom-nav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottom-nav-height);
  background: var(--color-surface); border-top: 1px solid var(--color-border); z-index: var(--z-bottom-nav);
  align-items: stretch; justify-content: space-around; padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 12px rgba(20, 23, 31, 0.06);
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1;
  background: none; border: none; color: var(--color-text-muted); font-size: 10px; font-weight: 600; cursor: pointer;
}
.bottom-nav-item.active { color: var(--color-primary); }
.bottom-nav-fab {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-text-on-primary); margin: -14px auto 0; box-shadow: var(--shadow-md);
}

/* -------------------- Weekly hours row (Fase 4.9-A: business hours / barber schedule) -------------------- */

.hours-row { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.hours-row:last-child { border-bottom: none; }
.hours-day-label { min-width: 110px; font-weight: 600; font-size: var(--font-sm); }
.hours-toggle { display: flex; align-items: center; gap: 6px; font-size: var(--font-sm); color: var(--color-text-muted); min-width: 84px; flex-shrink: 0; }
.hours-time-group { display: flex; align-items: center; gap: var(--spacing-xs); flex-wrap: nowrap; }
.hours-time-input { width: auto; min-width: 0; }
.hours-time-sep { color: var(--color-text-subtle); font-size: var(--font-sm); flex-shrink: 0; }

/* -------------------- Responsive -------------------- */

@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; height: 100dvh; max-height: 100dvh; padding-bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-100%); transition: transform var(--transition-base); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  /* Fase 4.10-H - MOBILE DRAWER DISMISS. A real backdrop (a sibling BEFORE the drawer, never an ancestor: a tap inside the drawer cannot
     reach it) covering the whole viewport: a tap/click on it closes the drawer (app.js). Closed, it is visibility:hidden AND
     pointer-events:none, so an invisible element can never intercept a tap. The background page does not scroll while the drawer is
     open, and the drawer keeps its own scroll without chaining it to the page. */
  .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: var(--z-sidebar-scrim); background: rgba(15, 23, 42, 0.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-base), visibility 0s linear var(--transition-base); }
  .sidebar-scrim.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--transition-base), visibility 0s; }
  .sidebar { overscroll-behavior: contain; }
  .sidebar-footer { position: sticky; bottom: 0; flex: 0 0 auto; margin-top: auto; background: var(--color-primary); padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  body.sidebar-open { overflow: hidden; }
  .header-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .account-name { display: none; }
  .bottom-nav { display: flex; }
  .content { padding-bottom: calc(var(--bottom-nav-height) + var(--spacing-lg)); }
  #toast-region { bottom: calc(var(--bottom-nav-height) + var(--spacing-md)); }
}

@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboard-stats-region .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .insight-meter-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insight-meter-row:nth-child(3) { border-right: none; }
  .insight-meter-row:nth-child(n + 4) { border-top: 1px solid var(--color-border); }
}

@media (max-width: 640px) {
  .content { padding: var(--spacing-md); padding-bottom: calc(var(--bottom-nav-height) + var(--spacing-md)); }
  .header { padding: 0 var(--spacing-md); }
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form .btn { width: 100%; }
  .list-row { flex-direction: column; align-items: stretch; }
  .drawer-panel { padding: var(--spacing-md); }
  .agenda-item { flex-direction: column; gap: var(--spacing-xs); }
  .agenda-time { width: auto; }
  .page-header { margin-bottom: var(--spacing-lg); }
  .page-header-title { font-size: 24px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-sm); }
  .stat-card { min-height: 108px; padding: var(--spacing-md); }
  .stat-value { font-size: 30px; }
  .dashboard-command { grid-template-columns: 1fr; gap: var(--spacing-lg); padding: 24px 20px; border-radius: var(--radius-lg); }
  .dashboard-command-title { font-size: 32px; }
  .dashboard-day-status { margin-top: var(--spacing-lg); }
  .dashboard-focus { min-height: 0; padding: 20px; }
  #dashboard-stats-region .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-kpi { padding: 18px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
  .dashboard-kpi:nth-child(2n) { border-right: none; }
  .dashboard-kpi:nth-last-child(-n + 2) { border-bottom: none; }
  .dashboard-kpi-value { font-size: 28px; }
  .dashboard-workspace-grid { grid-template-columns: 1fr; }
  .dashboard-section-header { align-items: flex-start; }
  #dashboard-open-agenda { width: auto; }
  #dashboard-open-production { width: auto; }
  .production-comparison-header { flex-direction: column; }
  .production-custom-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .production-custom-range-copy { grid-column: 1 / -1; }
  .production-custom-range .btn { grid-column: 1 / -1; width: 100%; }
  .metric-switch { width: 100%; justify-content: flex-start; }
  .metric-switch .btn { flex: 1; }
  .team-ranking-compact { grid-template-columns: 1fr; }
  .team-leader-card { align-items: flex-start; }
  .insight-meter-list { grid-template-columns: 1fr; }
  .insight-meter-row, .insight-meter-row:nth-child(3) { border-right: none; border-top: 1px solid var(--color-border); }
  .insight-meter-row:first-child { border-top: none; }
  .insight-meter-copy { min-height: 0; flex-direction: row; align-items: center; }
}

/* Fase 4.10-E - PROFESSIONAL INVITATIONS (owner team area + the invitee's invitation panel). Reuses the
   existing tokens/components (.card, .alert, .badge, .list-row, .btn); only layout glue lives here. */
.invite-actions { display: grid; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.invite-actions .btn { width: 100%; }
.invite-link-box { margin-top: var(--spacing-md); display: grid; gap: var(--spacing-sm); }
.invite-link-box .form-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--font-xs); }
.invite-link-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.invitation-row-meta { overflow-wrap: anywhere; }
#invite-create-error:not(:empty), #invite-error:not(:empty) { margin-top: var(--spacing-sm); }
#invite-dismiss-btn { margin-top: var(--spacing-sm); }
/* `display:grid` above would otherwise override the `hidden` attribute (author CSS beats the UA [hidden] rule) */
.invite-actions[hidden], .invite-link-box[hidden], #invite-details[hidden] { display: none; }

/* Fase 4.10-G (ADR-069) - customer <-> BARBER ID connections */
.customer-links { margin: 0 0 var(--spacing-xl); display: grid; gap: var(--spacing-md); }
.customer-links-title { font-size: var(--font-md); font-weight: 700; margin: 0; }
.customer-links-subtitle { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-muted); margin: 0; }
.customer-link-request { display: grid; gap: var(--spacing-sm); padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); }
.customer-link-request:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.customer-link-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.customer-link-code-box { display: grid; gap: var(--spacing-sm); margin: var(--spacing-sm) 0; }
.customer-link-code-box .form-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--font-xs); }
#customer-link-list { display: grid; gap: var(--spacing-sm); list-style: none; padding: 0; margin: 0; }
.customer-link-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); flex-wrap: wrap; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.customer-link-row-name { font-weight: 600; overflow-wrap: anywhere; }
.customer-link-row-meta { font-size: var(--font-xs); color: var(--color-text-muted); }
/* author `display` rules above must never override the `hidden` attribute (see the invitations' contract test) */
.customer-link-request[hidden] { display: none; }

/* Fase 4.10-H (ADR-070) - persona & context selector. The current profile is marked with TEXT (the "Atual" badge) and a heavier
   border, never by color alone. The list scrolls on its own when a person has many barbershops (375px safe). */
.experience-list { list-style: none; padding: 0; margin: 0 0 var(--spacing-lg); display: grid; gap: var(--spacing-sm); max-height: 60vh; overflow-y: auto; }
.experience-option { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); width: 100%; min-height: 56px; padding: var(--spacing-sm) var(--spacing-md); text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; color: inherit; font: inherit; }
.experience-option:hover { border-color: var(--color-border-strong); background: var(--color-surface-muted); }
.experience-option:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.experience-option[aria-current="true"] { border: 2px solid var(--color-text); background: var(--color-surface-muted); }
.experience-option:disabled { opacity: 0.6; cursor: progress; }
.experience-option-text { display: grid; gap: 2px; min-width: 0; }
.experience-option-title { font-weight: 600; overflow-wrap: anywhere; }
.experience-option-desc { font-size: var(--font-sm); color: var(--color-text-muted); }
.experience-badge { flex: none; font-size: var(--font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px var(--spacing-sm); border: 1px solid var(--color-text); border-radius: var(--radius-md); }
.experience-current { font-size: var(--font-sm); color: var(--color-text-muted); margin: 0 0 var(--spacing-sm); }
.experience-current:empty { display: none; }
.account-context { font-size: var(--font-xs); color: var(--color-text-muted); margin: 0; padding: var(--spacing-sm) var(--spacing-md); overflow-wrap: anywhere; }
.account-context:empty { display: none; }

/* Fase 4.11-A (ADR-071) - owner "Perfil publico" card (Configuracoes). Presentation only. */
.pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); flex-wrap: wrap; }
.pp-head-text { flex: 1 1 220px; min-width: 0; }
.pp-slug-row { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
.pp-slug-prefix { font-size: var(--font-md); color: var(--color-text-muted); font-weight: 600; }
.pp-slug-row .form-input { flex: 1 1 160px; min-width: 0; width: auto; }
.pp-location-row { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }
.pp-city-field { flex: 1 1 200px; min-width: 0; }
.pp-state-field { flex: 0 1 140px; min-width: 120px; }
.pp-services-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-md); margin: 0 0 var(--spacing-md); min-width: 0; }
.pp-services { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.pp-service-option { display: flex; align-items: flex-start; gap: var(--spacing-sm); font-size: var(--font-md); cursor: pointer; }
.pp-service-option input { margin-top: 3px; flex-shrink: 0; }
.pp-service-option-text { min-width: 0; overflow-wrap: anywhere; }
.pp-readiness { margin-bottom: var(--spacing-xs); }
.pp-link-line { font-size: var(--font-sm); color: var(--color-text-muted); overflow-wrap: anywhere; margin-bottom: var(--spacing-md); }
.pp-actions { flex-wrap: wrap; }
/* Fase GOOGLE AUTH UX (ADR-072) - dev-only note, and the "Entrar com Google" link card. Presentation only. */
.google-dev-hint { margin-bottom: var(--spacing-sm); font-style: italic; }
.google-link-slot:empty { display: none; }
.google-link-card { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); min-width: 0; }
.google-link-title { font-size: var(--font-lg); font-weight: 700; color: var(--color-text); }
.google-link-status { font-size: var(--font-md); font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }
.google-link-button-slot { min-height: 0; max-width: 100%; overflow: hidden; }

/* ---- Fase 4.11-B2-B (ADR-076): the Customer booking experience - review, result and "Meus agendamentos". Touch targets >= 44px, nothing wider than the card,
        long names wrap, no inline style anywhere. ---- */
.booking-slot { max-width: 100%; min-width: 0; }
.booking-slot .alert { margin-bottom: var(--spacing-md); }
.booking-summary { display: grid; margin: var(--spacing-md) 0; padding: 0; }
.booking-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-md); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-border); }
.booking-summary dt { flex: 0 0 auto; font-size: var(--font-sm); color: var(--color-text-muted); }
.booking-summary dd { margin: 0; min-width: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.booking-actions { display: grid; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.booking-actions .btn, .booking-choice .btn, .customer-my-bookings .btn { width: 100%; min-height: 46px; }
.booking-choice { display: grid; gap: var(--spacing-sm); margin: var(--spacing-md) 0; padding: var(--spacing-md); border: 1px solid var(--color-accent); border-radius: var(--radius-lg); background: var(--color-surface); }
/* display:grid above would otherwise override the hidden attribute (the project's recorded bug class): the choice and the detail exist only while shown */
.booking-choice[hidden], .booking-detail[hidden] { display: none; }
.badge[hidden] { display: none; }
/* Fase 4.11-B2-C (ADR-077): who ended the booking and what the barbershop told her; the notification cards. */
.booking-closure { margin: var(--spacing-sm) 0; padding: var(--spacing-md); border-radius: var(--radius-lg); background: var(--color-surface-muted, var(--color-surface)); overflow-wrap: anywhere; }
.booking-item-new { align-self: flex-start; }
/* Fase 4.11-B3 (ADR-078): the Customer home. Cards and sections only - no redesign of anything else. */
.home-section { margin: var(--spacing-lg) 0; }
.home-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-sm); }
.home-card { display: grid; gap: var(--spacing-xs, 4px); padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow-wrap: anywhere; }
.home-card-title { font-weight: 600; }
.home-card-meta { font-size: var(--font-sm); color: var(--color-text-muted); }
.home-card-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
.home-card-actions .btn, .home-card-actions a.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.home-details { margin: var(--spacing-md) 0; border-top: 1px solid var(--color-border); padding-top: var(--spacing-sm); }
.home-details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.home-empty { display: grid; gap: var(--spacing-sm); padding: var(--spacing-md); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); overflow-wrap: anywhere; }
.booking-item-text { overflow-wrap: anywhere; }
.booking-choice .form-helper { margin: 0; }
.customer-my-bookings { display: grid; gap: var(--spacing-sm); margin: 0 0 var(--spacing-xl); }
.booking-group { margin: 0 0 var(--spacing-lg); }
.booking-group .customer-links-title { margin-bottom: var(--spacing-sm); }
.booking-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-sm); }
.booking-item { display: grid; justify-items: start; gap: 2px; width: 100%; min-height: 44px; padding: var(--spacing-md); text-align: left; font: inherit; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.booking-item:hover { background: var(--color-surface-muted); }
.booking-item .badge { margin-top: var(--spacing-xs); }
.booking-item-shop { font-weight: 700; overflow-wrap: anywhere; }
.booking-item-line { font-size: var(--font-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.booking-detail { margin: 0 0 var(--spacing-md); }
.booking-detail:focus { outline: none; }
.booking-detail .btn { width: 100%; min-height: 46px; margin-top: var(--spacing-sm); }
/* B3: a very long barbershop name reached from the Home must wrap inside the chooser, never widen the page. */
#booking-shop-title { overflow-wrap: anywhere; }

/* -------------------- Premium agenda workspace -------------------- */

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.agenda-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(240px, auto);
  align-items: center;
  gap: clamp(22px, 4vw, 54px);
  min-height: 190px;
  padding: clamp(26px, 4vw, 44px);
  margin-bottom: var(--spacing-lg);
  color: #f7f5ef;
  background:
    radial-gradient(circle 340px at 92% -30%, rgba(201, 169, 106, 0.18), transparent 70%),
    linear-gradient(118deg, #0a1727 0%, #102b45 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  box-shadow: 0 22px 48px rgba(14, 27, 46, 0.16);
  overflow: hidden;
}
.agenda-command .section-kicker { color: #d8be87; }
.agenda-command-title { margin-top: 5px; color: #fff; font-family: var(--font-editorial); font-size: clamp(35px, 4vw, 52px); font-weight: 400; line-height: 1; letter-spacing: -0.035em; }
.agenda-command-subtitle { max-width: 39ch; margin-top: 10px; color: rgba(245, 243, 238, 0.61); font-size: var(--font-sm); line-height: 1.5; }
.agenda-date-focus { display: flex; align-items: center; gap: 15px; padding: 0 clamp(22px, 3vw, 38px); border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); }
.agenda-date-number { color: #e1c78f; font-family: var(--font-editorial); font-size: 62px; line-height: 0.9; font-variant-numeric: tabular-nums; }
.agenda-date-copy { display: grid; gap: 4px; min-width: 110px; }
.agenda-date-copy strong { color: #fff; font-size: 13px; font-weight: 720; text-transform: capitalize; }
.agenda-date-copy span { color: rgba(245, 243, 238, 0.5); font-size: 11px; text-transform: capitalize; }
.agenda-date-controls { display: grid; gap: 10px; }
.agenda-day-navigation { display: grid; grid-template-columns: 42px 1fr 42px; gap: 7px; }
.agenda-day-navigation .btn { min-width: 0; color: #f7f5ef; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.13); }
.agenda-day-navigation .btn:hover { background: rgba(255, 255, 255, 0.12); }
.agenda-day-navigation #agenda-today-btn.btn-primary { color: #0e1b2e; background: #d8be87; border-color: #d8be87; }
#agenda-date { width: 100%; min-width: 0; color: #f7f5ef; color-scheme: dark; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.13); }

.agenda-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--spacing-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.agenda-summary-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); min-height: 76px; padding: 16px 20px; border-right: 1px solid var(--color-border); }
.agenda-summary-item:last-child { border-right: none; }
.agenda-summary-item::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--agenda-summary-tone, var(--color-primary)); border-radius: 0 3px 3px 0; }
.agenda-summary-item span { color: var(--color-text-muted); font-size: var(--font-xs); font-weight: 650; }
.agenda-summary-item strong { color: var(--color-primary); font-size: 25px; font-variant-numeric: tabular-nums; }
.agenda-summary-scheduled { --agenda-summary-tone: var(--color-info); }
.agenda-summary-progress { --agenda-summary-tone: var(--color-accent); }
.agenda-summary-completed { --agenda-summary-tone: var(--color-success); }

.agenda-workspace { display: grid; grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.5fr); gap: var(--spacing-lg); align-items: start; }
.agenda-create-card { position: sticky; top: calc(var(--header-height) + var(--spacing-lg)); background: linear-gradient(160deg, #fff, #fbfaf7); }
.agenda-create-helper { margin: 7px 0 var(--spacing-lg); line-height: 1.5; }
#panel-agenda .agenda-create-card .inline-form { display: grid; grid-template-columns: 1fr; gap: 13px; margin: 0; }
#panel-agenda .agenda-create-card .inline-form .form-field { min-width: 0; }
#panel-agenda .agenda-create-card .inline-form .btn { width: 100%; min-height: 46px; margin-top: 4px; }
#panel-agenda .agenda-create-card .form-input,
#panel-agenda .agenda-create-card .form-select { background-color: #fff; }
#panel-agenda #appt-add-service-btn { width: 100%; min-height: 40px; }

.agenda-schedule-card { min-width: 0; }
.agenda-schedule-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); margin-bottom: 18px; }
.agenda-schedule-header #agenda-barber-filter { width: min(220px, 48%); }
.agenda-status-filter { display: flex; gap: 6px; padding-bottom: 16px; margin-bottom: 4px; overflow-x: auto; border-bottom: 1px solid var(--color-border); scrollbar-width: none; }
.agenda-status-filter::-webkit-scrollbar { display: none; }
.agenda-status-filter .btn { flex: 0 0 auto; }
#panel-agenda .agenda-list { position: relative; display: grid; gap: 10px; padding-top: 10px; }
#panel-agenda .agenda-item {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 14px 16px 18px;
  background: #fbfaf7;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--agenda-item-tone, var(--color-border-strong));
  border-radius: 13px;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#panel-agenda .agenda-item:last-child { border-bottom: 1px solid var(--color-border); }
#panel-agenda .agenda-item:hover { transform: translateY(-1px); border-top-color: var(--color-border-strong); border-right-color: var(--color-border-strong); border-bottom-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
#panel-agenda .agenda-item-scheduled { --agenda-item-tone: var(--color-info); }
#panel-agenda .agenda-item-in_progress { --agenda-item-tone: var(--color-accent); background: #fdfaf3; }
#panel-agenda .agenda-item-completed { --agenda-item-tone: var(--color-success); }
#panel-agenda .agenda-item-cancelled { --agenda-item-tone: var(--color-danger); opacity: 0.72; }
#panel-agenda .agenda-time { width: auto; padding-right: 14px; color: var(--color-primary); border-right: 1px solid var(--color-border); font-size: 16px; }
#panel-agenda .agenda-time-range { font-size: 10px; font-weight: 500; }
#panel-agenda .agenda-customer { color: var(--color-primary); font-size: 14px; font-weight: 720; }
#panel-agenda .agenda-service { margin-top: 3px; font-size: 12px; }
#panel-agenda .agenda-barber { margin-top: 5px; color: var(--color-accent-text); font-size: 10px; font-weight: 680; text-transform: uppercase; letter-spacing: 0.04em; }
#panel-agenda .agenda-actions { justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 1080px) {
  .agenda-command { grid-template-columns: 1fr auto; }
  .agenda-date-focus { border-right: none; }
  .agenda-date-controls { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .agenda-workspace { grid-template-columns: 1fr; }
  .agenda-create-card { position: static; }
  #panel-agenda .agenda-create-card .inline-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-agenda .agenda-create-card .inline-form .btn { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .agenda-command { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 24px 20px; }
  .agenda-command-title { font-size: 38px; }
  .agenda-date-focus { justify-content: flex-start; padding: 18px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .agenda-date-number { font-size: 52px; }
  .agenda-date-controls { grid-column: auto; grid-template-columns: 1fr; }
  .agenda-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-summary-item { min-height: 66px; padding: 13px 15px; border-bottom: 1px solid var(--color-border); }
  .agenda-summary-item:nth-child(2n) { border-right: none; }
  .agenda-summary-item:nth-last-child(-n + 2) { border-bottom: none; }
  .agenda-summary-item strong { font-size: 22px; }
  #panel-agenda .agenda-create-card .inline-form { grid-template-columns: 1fr; }
  .agenda-schedule-header { display: grid; }
  .agenda-schedule-header #agenda-barber-filter { width: 100%; }
  #panel-agenda .agenda-item { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 14px 12px; }
  #panel-agenda .agenda-time { padding-right: 10px; font-size: 14px; }
  #panel-agenda .agenda-actions { grid-column: 2; justify-content: flex-start; margin-top: 4px; }
}

/* ==================== CLIENTES / CRM 360 (premium) ====================
   Presentation only: the list, the summary and the drawer are rendered from the data the API already returns. Same visual language as the Agenda and the Dashboard. */
.customers-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 4vw, 54px);
  min-height: 170px;
  padding: clamp(26px, 4vw, 42px);
  margin-bottom: var(--spacing-lg);
  color: #f7f5ef;
  background:
    radial-gradient(circle 320px at 94% -34%, rgba(201, 169, 106, 0.2), transparent 70%),
    linear-gradient(118deg, #0a1727 0%, #102b45 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  box-shadow: 0 22px 48px rgba(14, 27, 46, 0.16);
  overflow: hidden;
}
.customers-command-copy { min-width: 0; }
.customers-command .section-kicker { color: #d8be87; }
.customers-command-title { margin-top: 5px; color: #fff; font-family: var(--font-editorial); font-size: clamp(35px, 4vw, 52px); font-weight: 400; line-height: 1; letter-spacing: -0.035em; }
.customers-command-subtitle { max-width: 46ch; margin-top: 10px; color: rgba(245, 243, 238, 0.62); font-size: var(--font-sm); line-height: 1.5; }
.customers-count-focus { display: flex; align-items: center; gap: 15px; padding: 0 clamp(8px, 2vw, 26px) 0 clamp(22px, 3vw, 38px); border-left: 1px solid rgba(255, 255, 255, 0.1); }
.customers-count-number { color: #e1c78f; font-family: var(--font-editorial); font-size: 62px; line-height: 0.9; font-variant-numeric: tabular-nums; }
.customers-count-copy { display: grid; gap: 4px; min-width: 96px; }
.customers-count-copy strong { color: #fff; font-size: 13px; font-weight: 720; text-transform: capitalize; }
.customers-count-copy span { color: rgba(245, 243, 238, 0.5); font-size: 11px; }

.customers-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--spacing-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.customers-summary-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); min-height: 76px; padding: 16px 20px; border-right: 1px solid var(--color-border); }
.customers-summary-item:last-child { border-right: none; }
.customers-summary-item::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--customers-summary-tone, var(--color-primary)); border-radius: 0 3px 3px 0; }
.customers-summary-item span { color: var(--color-text-muted); font-size: var(--font-xs); font-weight: 650; }
.customers-summary-item strong { color: var(--color-primary); font-size: 25px; font-variant-numeric: tabular-nums; }
.customers-summary-contact { --customers-summary-tone: var(--color-success); }
.customers-summary-missing { --customers-summary-tone: var(--color-accent); }
.customers-summary-shown { --customers-summary-tone: var(--color-info); }

.customers-workspace { display: grid; grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.5fr); gap: var(--spacing-lg); align-items: start; }

.recontacts-command { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--spacing-xl); padding:clamp(24px,4vw,48px); margin-bottom:var(--spacing-lg); color:#fff; background:radial-gradient(circle at 90% 10%,rgba(210,171,94,.24),transparent 38%),linear-gradient(135deg,#0b1a2b,#173653); border-radius:24px; box-shadow:0 22px 50px rgba(8,25,43,.18); }
.recontacts-title { margin:6px 0 8px; max-width:720px; font-family:var(--font-editorial); font-size:clamp(2rem,4vw,3.45rem); line-height:1.02; font-weight:500; }
.recontacts-subtitle { max-width:680px; color:rgba(255,255,255,.72); }
.recontacts-command-metric { display:grid; min-width:190px; padding-left:var(--spacing-xl); border-left:1px solid rgba(255,255,255,.16); }
.recontacts-command-metric strong { color:#e1c78f; font-family:var(--font-editorial); font-size:3.5rem; line-height:1; }
.recontacts-command-metric span { color:rgba(255,255,255,.76); font-size:.82rem; }
.recontacts-filter-bar { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; scrollbar-width:thin; }
.recontacts-filter-bar .btn { flex:0 0 auto; min-height:40px; }
.recontacts-filter-bar .active { color:#fff; background:var(--color-navy); border-color:var(--color-navy); }
.recontacts-explainer { margin:0 0 var(--spacing-lg); color:var(--color-text-muted); font-size:.875rem; }
.recontacts-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--spacing-lg); }
.recontact-card { display:flex; flex-direction:column; gap:var(--spacing-md); border-color:rgba(19,52,80,.14); box-shadow:0 12px 30px rgba(8,25,43,.07); }
.recontact-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--spacing-md); }
.recontact-date { padding:12px 14px; border-radius:12px; color:var(--color-navy); background:rgba(210,171,94,.13); font-size:.85rem; font-weight:600; }
.recontact-cycle { display:grid; grid-template-columns:minmax(0,1fr) 84px auto; align-items:end; gap:8px; }
.recontact-cycle .form-label { grid-column:1/-1; margin:0; }
.recontact-message { min-height:92px; resize:vertical; line-height:1.5; }
.recontact-actions { display:flex; gap:8px; flex-wrap:wrap; }
.recontact-actions .btn-primary { flex:1 1 210px; }
.recontact-history { display:grid; gap:8px; padding-top:12px; border-top:1px solid var(--color-border); }
.recontact-history-item { padding:12px; border-radius:10px; background:var(--color-surface-muted); }
.recontact-history-item strong { display:block; margin-bottom:4px; font-size:.78rem; color:var(--color-text-muted); }
.recontact-history-item p { white-space:pre-wrap; font-size:.85rem; }

@media (max-width: 900px) {
  .recontacts-list { grid-template-columns:1fr; }
  .recontacts-command { align-items:flex-start; flex-direction:column; }
  .recontacts-command-metric { min-width:0; padding:0; border:0; }
}
@media (max-width: 520px) {
  .recontacts-command { border-radius:18px; }
  .recontact-cycle { grid-template-columns:1fr auto; }
  .recontact-cycle .form-label { grid-column:1/-1; }
}
.customers-create-card { position: sticky; top: calc(var(--header-height) + var(--spacing-lg)); background: linear-gradient(160deg, #fff, #fbfaf7); }
.customers-create-helper { margin: 7px 0 var(--spacing-lg); line-height: 1.5; }
#panel-customers .customers-create-card .inline-form { display: grid; grid-template-columns: 1fr; gap: 13px; margin: 0; }
#panel-customers .customers-create-card .inline-form .form-field { min-width: 0; }
#panel-customers .customers-create-card .inline-form .btn { width: 100%; min-height: 46px; margin-top: 4px; }
.customers-list-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }

/* the list */
#customer-list { margin: 0; padding: 0; list-style: none; }
.customer-row { position: relative; gap: var(--spacing-md); padding: 14px 14px 14px 16px; border-radius: 12px; }
.customer-row::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--color-accent); border-radius: 0 3px 3px 0; opacity: 0; transition: opacity var(--transition-fast); }
.customer-row:hover, .customer-row:focus-visible { background: #faf8f3; }
.customer-row:hover::before, .customer-row:focus-visible::before { opacity: 1; }
.customer-row .list-row-info { flex: 1; gap: 14px; }
.customer-avatar { flex: 0 0 auto; width: 42px; height: 42px; color: #fff; font-size: 14px; font-weight: 720; letter-spacing: 0.02em; box-shadow: 0 6px 14px rgba(14, 27, 46, 0.14); }
.customer-avatar.avatar-lg { width: 58px; height: 58px; font-size: 19px; }
.customer-avatar-tone-0 { background: linear-gradient(135deg, #0e1b2e, #2a4668); }
.customer-avatar-tone-1 { background: linear-gradient(135deg, #8a6b37, #6b5028); }
.customer-avatar-tone-2 { background: linear-gradient(135deg, #1d5f66, #154349); }
.customer-avatar-tone-3 { background: linear-gradient(135deg, #5b3556, #3e2339); }
.customer-avatar-tone-4 { background: linear-gradient(135deg, #2c6a4a, #1d4a33); }
.customer-row-text { min-width: 0; }
.customer-row .list-row-title { color: var(--color-primary); font-size: 15px; font-weight: 720; overflow-wrap: anywhere; }
.customer-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 3px; color: var(--color-text-muted); font-size: var(--font-xs); }
.customer-row-phone { font-variant-numeric: tabular-nums; }
.customer-row-phone-missing { color: var(--color-text-subtle); font-style: italic; }
.customer-row-since { color: var(--color-accent-text); font-weight: 650; }
.customer-row-actions { display: flex; align-items: center; flex: 0 0 auto; gap: var(--spacing-md); }
.customer-row-open { color: var(--color-accent-text); font-size: var(--font-xs); font-weight: 720; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0; transform: translateX(-4px); transition: opacity var(--transition-fast), transform var(--transition-fast); }
.customer-row-open::after { content: " ›"; }
.customer-row:hover .customer-row-open, .customer-row:focus-visible .customer-row-open { opacity: 1; transform: none; }

/* the CRM 360 drawer */
.customer-profile-header { gap: var(--spacing-md); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); }
.customer-profile-header .profile-identity { min-width: 0; padding-right: 36px; }
.customer-profile-header .overlay-title { font-family: var(--font-editorial); font-size: 25px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; color: var(--color-primary); }
.customer-profile-since { margin-top: 5px; color: var(--color-accent-text); font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.03em; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.profile-stat-grid .profile-stat { position: relative; justify-content: space-between; gap: 6px; min-height: 76px; padding: 13px 14px 12px; background: linear-gradient(160deg, #fff, #fbfaf7); border: 1px solid var(--color-border); border-radius: 12px; }
.profile-stat-grid .profile-stat::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--color-accent); border-radius: 0 3px 3px 0; }
.profile-stat-grid .profile-stat-value { color: var(--color-primary); font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.profile-stat-grid .profile-stat-label { font-size: 11px; font-weight: 650; }
.profile-next-card { background: linear-gradient(120deg, #0a1727, #102b45); border-color: transparent; color: #f7f5ef; box-shadow: 0 14px 30px rgba(14, 27, 46, 0.16); }
.profile-next-card .list-row-title { color: #fff; font-size: 17px; }
.profile-next-card .list-row-meta { color: rgba(245, 243, 238, 0.66); }
.profile-next-card .badge { color: #0e1b2e; background: #d8be87; border-color: #d8be87; }
.profile-inprogress-card { background: var(--color-warning-bg, var(--color-info-bg)); }
.profile-timeline { position: relative; margin: 0; padding: 0 0 0 20px; list-style: none; }
.profile-timeline::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 1px; background: var(--color-border-strong); }
.profile-timeline-item { position: relative; padding: 11px 0 11px 6px; border-bottom: none; }
.profile-timeline-item::before { content: ""; position: absolute; left: -19px; top: 19px; width: 9px; height: 9px; background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: 50%; }
.profile-timeline-item .list-row-title { overflow-wrap: anywhere; }

@media (max-width: 1080px) {
  .customers-workspace { grid-template-columns: 1fr; }
  .customers-create-card { position: static; }
  #panel-customers .customers-create-card .inline-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  #panel-customers .customers-create-card .inline-form .btn { width: auto; min-width: 180px; margin-top: 0; }
}

@media (max-width: 700px) {
  .customers-command { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 24px 20px; }
  .customers-command-title { font-size: 38px; }
  .customers-count-focus { justify-content: flex-start; padding: 18px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .customers-count-number { font-size: 52px; }
  .customers-summary-item { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 70px; padding: 12px 12px 12px 16px; }
  .customers-summary-item strong { font-size: 22px; }
  #panel-customers .customers-create-card .inline-form { grid-template-columns: 1fr; }
  #panel-customers .customers-create-card .inline-form .btn { width: 100%; min-width: 0; margin-top: 4px; }
  .customers-create-helper { display: none; }
  #panel-customers .customers-create-card .card-title { margin-bottom: var(--spacing-md); }
  .customers-list-card .search-input { min-height: 44px; }
  .customer-row { padding: 12px 8px 12px 12px; }
  .customer-row-open { display: none; }
  .customer-row-actions .btn { min-height: 44px; }
  .customer-avatar { width: 40px; height: 40px; }
  .profile-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .customer-row::before, .customer-row-open { transition: none; }
}

/* ==================== SERVIÇOS (premium) ====================
   Presentation only: the summary and the catalog are rendered from the services the API already returns. Same visual language as the Agenda, the Dashboard and Clientes.
   Everything is scoped to #panel-services or to classes that only exist in this panel. */
.services-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 4vw, 54px);
  min-height: 170px;
  padding: clamp(26px, 4vw, 42px);
  margin-bottom: var(--spacing-lg);
  color: #f7f5ef;
  background:
    radial-gradient(circle 320px at 94% -34%, rgba(201, 169, 106, 0.2), transparent 70%),
    linear-gradient(118deg, #0a1727 0%, #102b45 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  box-shadow: 0 22px 48px rgba(14, 27, 46, 0.16);
  overflow: hidden;
}
.services-command-copy { min-width: 0; }
.services-command .section-kicker { color: #d8be87; }
.services-command-title { margin-top: 5px; color: #fff; font-family: var(--font-editorial); font-size: clamp(35px, 4vw, 52px); font-weight: 400; line-height: 1; letter-spacing: -0.035em; }
.services-command-subtitle { max-width: 48ch; margin-top: 10px; color: rgba(245, 243, 238, 0.62); font-size: var(--font-sm); line-height: 1.5; }
.services-count-focus { display: flex; align-items: center; gap: 15px; padding: 0 clamp(8px, 2vw, 26px) 0 clamp(22px, 3vw, 38px); border-left: 1px solid rgba(255, 255, 255, 0.1); }
.services-count-number { color: #e1c78f; font-family: var(--font-editorial); font-size: 62px; line-height: 0.9; font-variant-numeric: tabular-nums; }
.services-count-copy { display: grid; gap: 4px; min-width: 96px; }
.services-count-copy strong { color: #fff; font-size: 13px; font-weight: 720; text-transform: capitalize; }
.services-count-copy span { color: rgba(245, 243, 238, 0.5); font-size: 11px; }

.services-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--spacing-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.services-summary-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); min-height: 76px; padding: 16px 20px; border-right: 1px solid var(--color-border); }
.services-summary-item:last-child { border-right: none; }
.services-summary-item::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--services-summary-tone, var(--color-primary)); border-radius: 0 3px 3px 0; }
.services-summary-item span { color: var(--color-text-muted); font-size: var(--font-xs); font-weight: 650; }
.services-summary-item strong { color: var(--color-primary); font-size: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.services-summary-duration { --services-summary-tone: var(--color-info); }
.services-summary-price { --services-summary-tone: var(--color-accent); }
.services-summary-shown { --services-summary-tone: var(--color-success); }

.services-workspace { display: grid; grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1.5fr); gap: var(--spacing-lg); align-items: start; }
.services-create-card { position: sticky; top: calc(var(--header-height) + var(--spacing-lg)); background: linear-gradient(160deg, #fff, #fbfaf7); }
.services-create-helper { margin: 7px 0 var(--spacing-lg); line-height: 1.5; }
#panel-services .services-create-card .inline-form { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; margin: 0; }
#panel-services .services-create-card .inline-form .form-field { min-width: 0; margin-bottom: 0; }
#panel-services .services-create-card .inline-form .btn { width: 100%; min-height: 46px; margin-top: 2px; }
.services-create-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.services-affix-wrap { position: relative; }
.services-affix { position: absolute; top: 50%; transform: translateY(-50%); color: var(--color-text-subtle); font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.03em; pointer-events: none; }
.services-affix-prefix { left: 13px; }
.services-affix-suffix { right: 13px; }
.services-input-prefix { padding-left: 38px; }
.services-input-suffix { padding-right: 46px; }
#panel-services .form-input[aria-invalid="true"] { border-color: var(--color-danger-border); }
#panel-services .form-field .form-error-text { min-height: 0; }
.services-form-error { color: var(--color-danger); font-weight: 650; }
.services-form-error:empty { display: none; }
.services-list-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }

/* the catalog */
.service-rows-head, .service-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 128px 82px; align-items: center; gap: var(--spacing-md); }
.service-rows-head { padding: 4px 16px 9px; color: var(--color-text-subtle); font-size: 10px; font-weight: 760; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--color-border-strong); }
.service-rows-head-price { text-align: right; }
.service-rows { margin: 0; padding: 0; list-style: none; }
.service-edit-button { min-height: 44px; }
.service-row-editing { grid-template-columns: minmax(160px, 1fr) 110px 128px auto; align-items: start; padding-block: 12px; }
.service-row-actions { display: flex; gap: 8px; }
.service-row-actions .btn { min-height: 44px; }
.service-edit-error { grid-column: 1 / -1; margin: 0; }
.service-row { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--color-border); border-radius: 10px; transition: background-color var(--transition-fast); }
.service-row:last-child { border-bottom: none; }
.service-row::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--color-accent); border-radius: 0 3px 3px 0; opacity: 0; transition: opacity var(--transition-fast); }
.service-row:hover { background: #faf8f3; }
.service-row:hover::before { opacity: 1; }
.service-row-name { min-width: 0; color: var(--color-primary); font-size: 15px; font-weight: 720; line-height: 1.35; overflow-wrap: anywhere; }
.service-duration-chip { display: inline-block; padding: 3px 10px; color: var(--color-primary); background: #eef2f7; border: 1px solid #dde4ed; border-radius: 999px; font-size: var(--font-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.service-row-price { color: var(--color-primary); font-size: 16px; font-weight: 760; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.service-row-new { animation: service-row-flash 2.6s ease-out 1; }
.service-row-new::before { animation: service-row-bar 2.6s ease-out 1; }
@keyframes service-row-flash { 0% { background: #f6ecd2; } 100% { background: transparent; } }
@keyframes service-row-bar { 0%, 65% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 1080px) {
  .services-workspace { grid-template-columns: 1fr; }
  .services-create-card { position: static; }
  #panel-services .services-create-card .inline-form { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .services-create-pair { display: contents; }
  #panel-services .services-create-card .inline-form .btn { width: auto; min-width: 180px; margin-top: 0; align-self: end; }
  .services-form-error { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .services-command { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 24px 20px; }
  .services-command-title { font-size: 38px; }
  .services-count-focus { justify-content: flex-start; padding: 18px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .services-count-number { font-size: 52px; }
  .services-summary-item { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 70px; padding: 12px 10px 12px 16px; }
  .services-summary-item strong { font-size: 18px; }
  .services-create-helper { display: none; }
  #panel-services .services-create-card .card-title { margin-bottom: var(--spacing-md); }
  #panel-services .services-create-card .inline-form { grid-template-columns: 1fr; }
  .services-create-pair { display: grid; }
  #panel-services .services-create-card .inline-form .btn { width: 100%; min-width: 0; margin-top: 2px; }
  #panel-services .services-create-card .form-input, .services-list-card .search-input { min-height: 44px; }
  .service-rows-head { display: none; }
  .service-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name action" "duration price"; gap: 8px 12px; padding: 14px 10px 14px 14px; }
  .service-row-name { grid-area: name; }
  .service-row-duration { grid-area: duration; }
  .service-row-price { grid-area: price; }
  .service-edit-button { grid-area: action; }
  .service-row-editing { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "name name" "duration price" "action action" "error error"; }
  .service-row-editing > :nth-child(1) { grid-area: name; }
  .service-row-editing > :nth-child(2) { grid-area: duration; }
  .service-row-editing > :nth-child(3) { grid-area: price; }
  .service-row-editing .service-row-actions { grid-area: action; }
  .service-row-editing .service-edit-error { grid-area: error; }
}

@media (prefers-reduced-motion: reduce) {
  .service-row, .service-row::before { transition: none; }
  .service-row-new { animation: none; background: #f9f1dc; }
  .service-row-new::before { animation: none; opacity: 1; }
}

/* ==================== EQUIPE / BARBEIROS (premium) ====================
   Presentation only: the cards, the counters and the drawer groups are rendered from what the API already returns (GET /barbers, GET /invitations, the per-professional reads).
   Same visual language as the Agenda, the Dashboard, Clientes and Serviços. Everything is scoped to #panel-barbers, to #barber-schedule-panel, or to classes that only exist here. */
.team-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 4vw, 54px);
  min-height: 170px;
  padding: clamp(26px, 4vw, 42px);
  margin-bottom: var(--spacing-lg);
  color: #f7f5ef;
  background:
    radial-gradient(circle 320px at 94% -34%, rgba(201, 169, 106, 0.2), transparent 70%),
    linear-gradient(118deg, #0a1727 0%, #102b45 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  box-shadow: 0 22px 48px rgba(14, 27, 46, 0.16);
  overflow: hidden;
}
.team-command-copy { min-width: 0; }
.team-command .section-kicker { color: #d8be87; }
.team-command-title { margin-top: 5px; color: #fff; font-family: var(--font-editorial); font-size: clamp(35px, 4vw, 52px); font-weight: 400; line-height: 1; letter-spacing: -0.035em; }
.team-command-subtitle { max-width: 46ch; margin-top: 10px; color: rgba(245, 243, 238, 0.62); font-size: var(--font-sm); line-height: 1.5; }
.team-command-action { width: auto; min-height: 44px; margin-top: 18px; padding: 0 20px; color: #0e1b2e; background: #d8be87; border-color: #d8be87; font-weight: 720; }
.team-command-action:hover { background: #e3cb98; border-color: #e3cb98; }
.team-count-focus { display: flex; align-items: center; gap: 15px; padding: 0 clamp(8px, 2vw, 26px) 0 clamp(22px, 3vw, 38px); border-left: 1px solid rgba(255, 255, 255, 0.1); }
.team-count-number { color: #e1c78f; font-family: var(--font-editorial); font-size: 62px; line-height: 0.9; font-variant-numeric: tabular-nums; }
.team-count-copy { display: grid; gap: 4px; min-width: 96px; }
.team-count-copy strong { color: #fff; font-size: 13px; font-weight: 720; text-transform: capitalize; }
.team-count-copy span { color: rgba(245, 243, 238, 0.5); font-size: 11px; }

.team-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--spacing-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.team-summary-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); min-height: 76px; padding: 16px 20px; border-right: 1px solid var(--color-border); }
.team-summary-item:last-child { border-right: none; }
.team-summary-item::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--team-summary-tone, var(--color-primary)); border-radius: 0 3px 3px 0; }
.team-summary-item span { color: var(--color-text-muted); font-size: var(--font-xs); font-weight: 650; }
.team-summary-item strong { color: var(--color-primary); font-size: 25px; font-variant-numeric: tabular-nums; }
.team-summary-pending { --team-summary-tone: var(--color-accent); }
.team-summary-accepted { --team-summary-tone: var(--color-success); }
.team-summary-closed { --team-summary-tone: var(--color-border-strong); }

/* the forms are on the LEFT (like Clientes and Serviços) and come first in the document; the fixed toasts live in the bottom-right corner and must not cover the main action */
.team-workspace { display: grid; grid-template-columns: minmax(310px, 0.8fr) minmax(0, 1.5fr); gap: var(--spacing-lg); align-items: start; }
.team-main, .team-aside { display: grid; gap: var(--spacing-lg); min-width: 0; }
.team-card-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }

/* the roster */
.team-roster { margin: 0; padding: 0; list-style: none; }
.team-member { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--color-border); border-radius: 12px; transition: background-color var(--transition-fast); }
.team-member:last-child { border-bottom: none; }
.team-member::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--color-accent); border-radius: 0 3px 3px 0; opacity: 0; transition: opacity var(--transition-fast); }
.team-member:hover { background: #faf8f3; }
.team-member:hover::before { opacity: 1; }
.team-member-text { min-width: 0; }
.team-member-name { color: var(--color-primary); font-size: 15px; font-weight: 720; line-height: 1.3; overflow-wrap: anywhere; }
.team-member-email { margin-top: 2px; color: var(--color-text-muted); font-size: var(--font-xs); overflow-wrap: anywhere; }
.team-member-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 7px; }
.team-role-chip { display: inline-block; padding: 2px 10px; color: var(--color-primary); background: #eef2f7; border: 1px solid #dde4ed; border-radius: 999px; font-size: 11px; font-weight: 720; }
.team-member-since { color: var(--color-accent-text); font-size: var(--font-xs); font-weight: 650; }
.team-member-new { animation: team-member-flash 2.6s ease-out 1; }
.team-member-new::before { animation: team-member-bar 2.6s ease-out 1; }
@keyframes team-member-flash { 0% { background: #f6ecd2; } 100% { background: transparent; } }
@keyframes team-member-bar { 0%, 65% { opacity: 1; } 100% { opacity: 0; } }

/* the invitations */
#invitations-card .invitation-list { margin: 0; padding: 0; list-style: none; }
#invitations-card .invitation-row { flex-wrap: wrap; gap: 10px 14px; padding: 12px 8px; }
#invitations-card .invitation-row .list-row-info { flex: 1 1 220px; min-width: 0; }

/* two ways to add someone: the invitation is the recommended one, the direct registration is the alternative */
.team-path-card { position: relative; }
.team-path-badge { display: inline-block; margin-bottom: 8px; padding: 3px 10px; color: #6f531f; background: #f4ebd3; border: 1px solid #e8d9ae; border-radius: 999px; font-size: 10px; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; }
.team-path-badge-muted { color: var(--color-text-muted); background: var(--color-surface-muted); border-color: var(--color-border); }
.team-invite-card { background: linear-gradient(160deg, #fff, #fbf8f0); border-color: #e8d9ae; box-shadow: 0 10px 26px rgba(14, 27, 46, 0.07); }
.team-direct-card { background: #fbfaf7; }
.team-path-card .btn:not(.btn-inline) { width: 100%; min-height: 46px; margin-top: 4px; }
.team-invite-card .invite-link-box { padding: 14px; background: #faf6ea; border: 1px solid #eadfc2; border-radius: 12px; }
#panel-barbers .form-input[aria-invalid="true"] { border-color: var(--color-danger-border); }
#panel-barbers .form-field .form-error-text { min-height: 0; }
.team-form-error { color: var(--color-danger); font-weight: 650; }
.team-form-error:empty { display: none; }

/* the professional drawer: header, section tabs, and the three groups (Horários, Serviços, Remuneração) */
.team-drawer-header { display: flex; align-items: center; gap: var(--spacing-md); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); }
.team-drawer-identity { min-width: 0; padding-right: 36px; }
.team-drawer-title { margin: 0 0 4px; padding: 0; color: var(--color-accent-text); font-size: 10px; font-weight: 760; letter-spacing: 0.1em; text-transform: uppercase; }
.team-drawer-name { color: var(--color-primary); font-family: var(--font-editorial); font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.team-drawer-email { margin-top: 4px; color: var(--color-text-muted); font-size: var(--font-xs); overflow-wrap: anywhere; }
.team-drawer-nav { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 52px 12px 0; margin-bottom: var(--spacing-sm); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
/* the close button stays ABOVE the sticky tab bar (and the bar leaves its corner free): it must always be clickable, whatever the scroll position */
#barber-schedule-panel .overlay-close-btn { z-index: 3; }
.team-drawer-tab { min-height: 40px; padding: 0 16px; color: var(--color-primary); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 999px; font: inherit; font-size: var(--font-xs); font-weight: 720; cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.team-drawer-tab:hover { background: #faf8f3; border-color: var(--color-accent); }
.team-drawer-group { margin-top: 26px; scroll-margin-top: 66px; }
.team-drawer-group:focus { outline: none; }
.team-drawer-group:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 6px; border-radius: 12px; }
.team-drawer-group-header { margin-bottom: var(--spacing-md); }
.team-drawer-group-failed > :not(.team-drawer-group-header):not(.form-error-text):not(#barber-compensation-retry) { display: none; }
.team-drawer-group-title { color: var(--color-primary); font-family: var(--font-editorial); font-size: 21px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; }
.team-drawer-group-header .text-muted { margin-top: 6px; line-height: 1.5; }
.team-drawer-subtitle { margin: 22px 0 8px; color: var(--color-text-subtle); font-size: 11px; font-weight: 760; letter-spacing: 0.09em; text-transform: uppercase; }
.team-drawer-group .divider { margin: 22px 0 18px; }
#barber-schedule-panel .hours-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 0; }
#barber-schedule-panel .hours-day-label { min-width: 0; color: var(--color-primary); font-weight: 700; }
#barber-schedule-panel .hours-time-group { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
#barber-schedule-panel .hours-time-input { width: 100%; }
#barber-schedule-panel .overlay-actions { margin-top: var(--spacing-md); }

/* the rows of the drawer: services performed (+ own duration) and the commission per service. These classes replace the inline widths these rows used to carry,
   so the Meus Serviços panel (which shares the service row) looks as it did. */
.barber-service-input { width: 100px; }
.barber-service-override { display: flex; align-items: center; gap: var(--spacing-xs); }
.barber-commission-select { width: 150px; }
.barber-commission-input { width: 110px; }
#barber-schedule-panel .barber-service-row { gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--color-border); }
#barber-schedule-panel .barber-service-row:last-child { border-bottom: none; }
#barber-schedule-panel .barber-service-row .list-row-title { overflow-wrap: anywhere; }

@media (max-width: 1080px) {
  .team-workspace { grid-template-columns: 1fr; }
  .team-main { order: -1; } /* single column: the team comes first, the forms below it (the hero shortcut jumps to the invitation field) */
}

@media (max-width: 700px) {
  .team-command { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 24px 20px; }
  .team-command-title { font-size: 38px; }
  .team-command-action { width: 100%; }
  .team-count-focus { justify-content: flex-start; padding: 18px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .team-count-number { font-size: 52px; }
  .team-summary-item { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 70px; padding: 12px 8px 12px 14px; }
  .team-summary-item span { font-size: 11px; }
  .team-summary-item strong { font-size: 22px; }
  .team-member { grid-template-columns: auto minmax(0, 1fr); padding: 14px 8px 14px 12px; }
  .team-member > .btn { grid-column: 1 / -1; justify-self: start; min-height: 44px; }
  #invitations-card .invitation-row .btn { min-height: 44px; }
  .team-path-card .form-input { min-height: 44px; }
  .team-drawer-tab { min-height: 44px; }
  .team-drawer-name { font-size: 21px; }
  #barber-schedule-panel .barber-service-row { flex-wrap: wrap; }
  #barber-schedule-panel .barber-service-row .barber-service-override { flex: 1 1 100%; }
  #barber-schedule-panel .barber-service-override .form-input, #barber-schedule-panel .barber-service-override .form-select { min-height: 44px; }
  #barber-schedule-panel .barber-service-input { width: 110px; }
  #barber-schedule-panel .barber-commission-select { flex: 1 1 150px; width: auto; }
  #barber-schedule-panel .overlay-actions .btn { width: 100%; min-height: 46px; }
  #barber-schedule-panel .form-input, #barber-schedule-panel .form-select { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .team-member, .team-member::before, .team-drawer-tab { transition: none; }
  .team-member-new { animation: none; background: #f9f1dc; }
  .team-member-new::before { animation: none; opacity: 1; }
}

/* ==================== JORNADA DO CLIENTE (premium) ====================
   Login keeps its institutional split screen. Once the person enters the customer journey, this becomes a real product shell with its own navigation,
   full-width workspace and purpose-built Home and Booking surfaces. Everything remains presentation-only and scoped to the mode set by setAuthMode. */

#auth-view[data-journey="customer"] { display: block; min-height: 100vh; background: #f3f1ec; }
#auth-view[data-journey="customer"] .auth-brand-panel { display: none; }
#auth-view[data-journey="customer"] .auth-form-panel { display: block; width: 100%; min-width: 0; min-height: 100vh; padding: 0 0 64px 246px; background: radial-gradient(circle at 92% 4%, rgba(201, 165, 91, 0.13), transparent 24rem), #f3f1ec; }
#auth-view[data-journey="customer"] .customer-app-header { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; flex-direction: column; align-items: stretch; gap: 30px; width: 246px; min-height: 100vh; padding: 24px 14px; color: #f8f3e8; background: #081726; border-right: 1px solid rgba(214, 177, 99, 0.24); box-shadow: 12px 0 32px rgba(8, 23, 38, 0.1); }
#auth-view[data-journey="customer"] .customer-app-header[hidden],
#auth-view[data-journey="customer"] .customer-app-nav-link[hidden] { display: none; }
#auth-view[data-journey="customer"] .customer-app-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
#auth-view[data-journey="customer"] .customer-app-brand:disabled { cursor: default; }
#auth-view[data-journey="customer"] .customer-app-brand > span { display: grid; gap: 1px; }
#auth-view[data-journey="customer"] .customer-app-brand strong { font-family: var(--font-editorial); font-size: 18px; letter-spacing: 0.14em; }
#auth-view[data-journey="customer"] .customer-app-brand small { color: #b8c1ca; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
#auth-view[data-journey="customer"] .customer-app-nav { display: grid; align-items: stretch; gap: 6px; }
#auth-view[data-journey="customer"] .customer-app-nav-link { min-height: 44px; padding: 0 14px; color: #d9dfe5; font-size: 13px; font-weight: 650; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 12px; cursor: pointer; }
#auth-view[data-journey="customer"] .customer-app-nav-link:hover { color: #fff; background: rgba(255,255,255,0.07); }
#auth-view[data-journey="customer"] .customer-app-nav-link[aria-current="page"] { color: #f2d28e; background: rgba(214,177,99,0.12); border-color: rgba(214,177,99,0.24); }
#auth-view[data-journey="customer"] .customer-app-exit { margin-top: 18px; color: #b8c1ca; }
#auth-view[data-journey="customer"] .auth-card { width: min(1180px, calc(100% - 40px)); max-width: none; margin: 42px auto 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
#auth-view[data-journey="customer"] .auth-card-slot:not([hidden]) { padding: clamp(24px, 4vw, 48px); background: rgba(255,255,255,0.92); border: 1px solid rgba(20,34,53,0.08); border-radius: 28px; box-shadow: 0 24px 64px rgba(20,34,53,0.09); }
#auth-view[data-journey="customer"] .auth-card-title { color: #142235; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; margin-bottom: 8px; }
#auth-view[data-journey="customer"] .auth-card-subtitle { max-width: 62ch; margin-bottom: 28px; font-size: 15px; }
#auth-view[data-screen="customer-home"] #customer-home-panel:not([hidden]) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 28px; }
#auth-view[data-screen="customer-home"] :is(#customer-home-title, #customer-home-status) { grid-column: 1 / -1; }
#auth-view[data-screen="customer-home"] .home-section { padding: 24px; background: #faf9f6; border: 1px solid #e5e1d8; border-radius: 20px; }
#auth-view[data-screen="customer-home"] #customer-home-panel[data-active-section="home"] .home-section[data-customer-section="home"] { grid-column: span 6; }
#auth-view[data-screen="customer-home"] #customer-home-panel[data-active-section="plans"] .home-section[data-customer-section="plans"] { grid-column: 1 / -1; }
#auth-view[data-screen="customer-home"] .home-details { grid-column: span 6; }
#auth-view[data-screen="customer-home"] .customer-dedicated-details:not([hidden]) { display: block; grid-column: 1 / -1; padding: 24px; background: #faf9f6; border: 1px solid #e5e1d8; border-radius: 20px; }
#auth-view[data-screen="customer-home"] .customer-dedicated-details > summary { display: none; }
#auth-view[data-screen="customer-home"] .customer-profile-actions { display: grid; grid-column: 1 / -1; gap: 12px; }
#auth-view[data-screen="customer-home"] :is(.experience-current, #customer-switch-btn, #customer-back-btn, #customer-logout-btn) { grid-column: 1 / -1; }
#auth-view[data-screen="customer-home"] #customer-logout-btn { display: none; }
#auth-view[data-screen="booking-shop"] .auth-card,
#auth-view[data-screen="booking"] .auth-card { width: min(940px, calc(100% - 40px)); }
#auth-view[data-screen="booking-shop"] .booking-slot:not([hidden]),
#auth-view[data-screen="booking"] .booking-slot:not([hidden]) { border-top: 4px solid #d6b163; }
#auth-view[data-journey="customer"] .home-card-unavailable { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; color: #6b6253; font-size: 12px; font-weight: 650; background: #f2ede3; border-radius: 10px; }
@media (max-width: 760px) {
  #auth-view[data-journey="customer"] .auth-form-panel { padding-left: 0; padding-top: 118px; }
  #auth-view[data-journey="customer"] .customer-app-header { inset: 0 0 auto; width: 100%; min-height: 0; height: 118px; padding: 10px 16px; gap: 6px; border-right: 0; border-bottom: 1px solid rgba(214, 177, 99, 0.24); }
  #auth-view[data-journey="customer"] .customer-app-brand small { display: none; }
  #auth-view[data-journey="customer"] .customer-app-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  #auth-view[data-journey="customer"] .customer-app-nav-link { flex: 0 0 auto; padding: 0 9px; font-size: 12px; text-align: center; }
  #auth-view[data-journey="customer"] .customer-app-exit { display: none; }
  #auth-view[data-journey="customer"] .auth-card { width: calc(100% - 24px); margin-top: 18px; }
  #auth-view[data-journey="customer"] .auth-card-slot:not([hidden]) { padding: 22px 18px; border-radius: 20px; }
  #auth-view[data-journey="customer"] .auth-card-title { font-size: 30px; }
  #auth-view[data-screen="customer-home"] #customer-home-panel:not([hidden]) { display: block; }
  #auth-view[data-screen="customer-home"] .home-section { margin: 16px 0; padding: 18px; }
  #auth-view[data-screen="customer-home"] #customer-logout-btn { display: block; }
}

/* review, result and the way back to a barbershop: three stages, a status badge that says what the SERVER said, nothing that reads as a payment */
.pb-stepper.booking-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--spacing-md); }
.booking-result { margin: 0 0 var(--spacing-sm); }
.booking-result .badge { font-size: var(--font-md); padding: 6px 12px; }
.home-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-xs) var(--spacing-md); margin-top: var(--spacing-sm); }
.home-more .btn { width: auto; min-height: 44px; }
#my-bookings-shop-actions:empty { display: none; }
#my-bookings-shop-actions a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ==================== PLANOS E ASSINATURAS ==================== */
.subscription-manager { overflow: hidden; background: linear-gradient(145deg, #fff 0%, #fbfaf7 100%); }
.subscription-manager-head, .subscription-section-title, .subscription-plan-card-head, .home-subscription-head, .home-subscription-main { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); }
.subscription-plan-layout { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(320px, 1.18fr); gap: clamp(24px, 4vw, 52px); margin-top: var(--spacing-xl); }
.subscription-plan-form { padding: var(--spacing-lg); background: #f7f4ed; border: 1px solid #e4ded0; border-radius: 18px; }
.subscription-plan-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.platform-unlimited-note { grid-column: 1 / -1; display: grid; gap: 4px; padding: 14px; color: #19324a; background: #edf4f1; border: 1px solid #d2e4dc; border-radius: 12px; }
.platform-unlimited-note span { color: var(--color-text-muted); font-size: var(--font-xs); }
.platform-coupon-list { display: grid; gap: 12px; }
.platform-coupon-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; background: #fff; border: 1px solid #e1ddd4; border-radius: 16px; box-shadow: 0 8px 22px rgba(20,34,53,.05); }
.platform-coupon-card p { margin: 5px 0 0; }
.platform-coupon-code { display: inline-flex; padding: 6px 10px; color: #705018; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 16px; font-weight: 800; letter-spacing: .08em; background: #faf1d9; border: 1px dashed #d3ae57; border-radius: 9px; }
.platform-coupon-actions { display: grid; justify-items: end; gap: 10px; }
.platform-owner-subscription { margin-bottom: var(--spacing-xl); overflow: hidden; background: linear-gradient(145deg,#fff,#faf7ef); border-top: 4px solid #d2aa55; }
.billing-locked-hidden { display: none !important; }
.platform-owner-plans { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.platform-owner-plan { display: grid; align-content: space-between; gap: 22px; min-height: 250px; padding: 20px; background: #fff; border: 1px solid #ded8cc; border-radius: 18px; box-shadow: 0 10px 26px rgba(20,34,53,.06); }
.platform-owner-plan.selected { border-color: #c69a42; box-shadow: 0 0 0 2px rgba(198,154,66,.16),0 12px 28px rgba(20,34,53,.08); }
.platform-owner-plan strong { color:#142235; font-family:var(--font-family); font-size:23px; font-weight:700; letter-spacing:-.035em; line-height:1.2; }
.platform-owner-plan p { margin:8px 0 0; }
.platform-plan-limit { color:#77571d; font-size:12px; font-weight:700; }
.platform-plan-buy { display:grid; gap:12px; }
.platform-plan-buy > strong { color:#142235; font-size:25px; font-variant-numeric:tabular-nums; }
.platform-redeem-form { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:14px; padding:18px; background:#f4efe3; border:1px solid #e3d8c1; border-radius:16px; }
.platform-redeem-form .form-field { margin:0; }
.platform-billing-actions { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e3d8c1; }
.platform-billing-actions p { margin: 0 0 12px; }
.payment-method-settings { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin:18px 0; }
.payment-method-settings label { display:flex; align-items:center; gap:10px; min-height:48px; padding:12px 14px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); font-weight:600; }
.payment-method-settings input { width:18px; height:18px; accent-color:var(--color-primary); }
.platform-redeem-form .form-error-text { grid-column:1 / -1; margin:0; }
.platform-customer-plans-heading { margin-top:42px; }
#platform-customer-plans-heading[hidden] { display:none; }
.subscription-services-fieldset { padding: 0; margin: 0 0 var(--spacing-lg); border: 0; }
.subscription-services-list { display: grid; gap: 8px; margin-top: var(--spacing-sm); }
.subscription-service-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 12px; background: #fff; border: 1px solid #dcd6c9; border-radius: 12px; }
.subscription-service-option:has(input:checked) { border-color: #b89040; box-shadow: 0 0 0 2px rgba(184,144,64,.12); }
.subscription-service-choice { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.subscription-service-choice > input { width: 18px; height: 18px; accent-color: #ad8130; }
.subscription-service-option span { display: grid; gap: 2px; }
.subscription-service-option small { color: var(--color-text-muted); }
.subscription-service-discount-field { display: flex; align-items: center; gap: 6px; font-size: var(--font-xs); color: var(--color-text-muted); }
.subscription-service-discount { width: 72px; min-height: 40px; padding: 8px; }
.subscription-plans-grid { display: grid; gap: 12px; }
.subscription-plan-card { padding: 24px; background: #fff; border: 1px solid #e1ddd4; border-radius: 18px; box-shadow: 0 4px 16px rgba(20,34,53,.035); }
.subscription-plan-card-head p { margin: 4px 0 0; }
.subscription-plan-price { margin: 18px 0 4px; color: #142235; font-family: var(--font-editorial); font-size: 25px; }
.subscription-plans-empty { padding: 28px; text-align: center; background: #f8f6f1; border: 1px dashed #d7d0c1; border-radius: 16px; }
.subscription-current-card { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; padding: 18px; background: linear-gradient(135deg, #10263d, #183b5a); color: #fff; border-radius: 16px; box-shadow: 0 14px 28px rgba(11,31,49,.15); }
.subscription-current-name { display: block; font-family: var(--font-editorial); font-size: 21px; }
.subscription-current-card .text-muted { color: #c2ccd5; margin-top: 4px; }
.subscription-current-price { color: #e4c276; white-space: nowrap; }
.subscription-usage { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font-weight: 650; }
.subscription-profile-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; margin-top: 12px; }
.home-subscription { display: grid; gap: 9px; margin-top: 14px; padding: 16px; color: #ebf0f4; background: linear-gradient(135deg, #10263d, #183b5a); border-radius: 15px; }
.home-subscription-kicker { color: #dcb966; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.home-subscription-name { font-family: var(--font-editorial); font-size: 21px; }
.home-subscription-price { color: #e5c77d; font-size: 13px; font-weight: 750; }
.home-subscription .home-card-meta { color: #c3ced7; }
.home-subscription-usage { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; color: #dbe2e8; font-size: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.home-subscription-empty { color: #5e584d; background: #f4f0e7; border: 1px solid #e6dfd0; }
.home-subscription-empty .home-subscription-kicker { color: #8b6a2d; }
@media (max-width: 760px) {
  .subscription-plan-layout, .subscription-plan-fields { grid-template-columns: 1fr; }
  .subscription-profile-actions { grid-template-columns: 1fr; }
  .home-subscription-usage { display: grid; }
  .platform-coupon-card { align-items: flex-start; flex-direction: column; }
  .platform-coupon-actions { width: 100%; grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
  .platform-owner-plans,.platform-redeem-form { grid-template-columns:1fr; }
}
.media-editor{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}.media-editor-preview{width:88px;height:88px;border-radius:20px;object-fit:cover;background:#eef2f5;border:1px solid var(--border-color)}.media-editor-compact{margin:12px 0}.media-editor-compact .media-editor-preview{width:64px;height:64px;border-radius:50%}.media-editor-actions{display:flex;gap:8px;flex-wrap:wrap}.team-member-photo{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 6px 14px rgba(15,31,48,.16)}
#nav-platform[hidden],.platform-admin-nav[hidden]{display:none}.platform-hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding:32px;margin-bottom:24px;color:#fff;background:linear-gradient(135deg,#0b1d31,#173955);border-radius:24px;box-shadow:0 18px 42px rgba(11,29,49,.18)}.platform-hero h2{margin:4px 0 8px;font-family:var(--font-editorial);font-size:clamp(30px,4vw,48px)}.platform-hero p{margin:0;color:#c8d2dc}.platform-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}.platform-metric{padding:20px;background:#fff;border:1px solid var(--color-border);border-radius:16px}.platform-metric span{display:block;color:var(--color-text-muted);font-size:12px}.platform-metric strong{display:block;margin-top:7px;color:#10263d;font-family:var(--font-editorial);font-size:32px}.platform-directory{padding:24px}.table-scroll{overflow-x:auto}.platform-table{width:100%;border-collapse:collapse}.platform-table th,.platform-table td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--color-border);white-space:nowrap}.platform-table th{color:var(--color-text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.platform-table td strong{display:block}.platform-table td small{color:var(--color-text-muted)}@media(max-width:760px){.platform-hero{padding:22px;flex-direction:column}.platform-metrics{grid-template-columns:1fr 1fr}.platform-directory{padding:16px}}
.platform-admin-identity{min-width:230px;padding:16px 18px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.07)}.platform-admin-identity strong,.platform-admin-identity span{display:block}.platform-admin-identity strong{margin-top:12px;font-size:16px}.platform-admin-identity span:last-child{margin-top:3px;color:#c8d2dc;font-size:12px}.platform-shop-drawer{width:min(620px,100%)}.platform-detail-card{margin-top:16px;padding:20px;border:1px solid var(--color-border);border-radius:16px;background:#fff}.platform-detail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.platform-detail-heading strong{font:700 22px var(--font-editorial);color:#10263d}.platform-detail-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.platform-detail-stats div{padding:14px;border-radius:12px;background:#f4f6f8}.platform-detail-stats strong,.platform-detail-stats span{display:block}.platform-detail-stats strong{font-size:24px;color:#10263d}.platform-detail-stats span{font-size:11px;color:var(--color-text-muted)}.platform-team-person{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--color-border)}.platform-team-person:last-child{border-bottom:0}.platform-team-person strong,.platform-team-person span,.platform-team-person small{display:block}.platform-team-person>div:last-child{text-align:right}.platform-team-person small{margin-top:5px;color:#8a6725}@media(max-width:760px){.platform-admin-identity{width:100%}.platform-detail-stats{grid-template-columns:1fr 1fr}.platform-team-person{align-items:flex-start;flex-direction:column}.platform-team-person>div:last-child{text-align:left}}
.platform-page-heading{margin-bottom:24px}.platform-page-heading h2{margin:4px 0 8px;color:#10263d;font:700 clamp(30px,4vw,44px) var(--font-editorial)}.platform-page-heading p:last-child{color:var(--color-text-muted)}.platform-profile-header{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.platform-profile-header .badge{margin-left:auto}.platform-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}.platform-profile-item{padding:18px;border:1px solid var(--color-border);border-radius:14px;background:#f8f7f3}.platform-profile-item span,.platform-profile-item strong{display:block}.platform-profile-item span{color:var(--color-text-muted);font-size:12px}.platform-profile-item strong{margin:6px 0;color:#10263d;font-size:20px}.platform-profile-item p{margin:0;color:var(--color-text-muted);font-size:13px;line-height:1.5}@media(max-width:760px){.platform-profile-grid{grid-template-columns:1fr}.platform-profile-header .badge{margin-left:0}}
.booking-review{margin:18px 0;padding:18px;border:1px solid #e2d8c6;border-radius:16px;background:#fbf8f2}.rating-stars{display:flex;gap:6px;margin:10px 0}.rating-star{min-width:44px;min-height:44px;border:1px solid #d3c39f;border-radius:12px;background:#fff;color:#9a6a12;font-size:22px}.rating-star.selected{background:#d6b568;color:#0d1e31}.team-rating{color:#9a6a12;font-weight:700}

/* A reload restores the session from the server (HttpOnly cookie) before anything is shown, so a signed-in person never sees a flash of the sign-in screen. The attribute is removed by
   app.js when the restore attempt ends; the animation is the safety net (the page is never left blank if a script fails). */
body[data-restoring] #auth-view, body[data-restoring] #app-view { visibility: hidden; animation: restore-reveal 0s 4s forwards; }
@keyframes restore-reveal { to { visibility: visible; } }
.legal-consent{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;color:var(--muted,#687386);font-size:12px;line-height:1.45}.legal-consent input{width:18px;height:18px;margin:1px 0 0;accent-color:#aa7932;flex:0 0 auto}.legal-consent a{color:#8a611d;text-decoration:underline;font-weight:700}
.privacy-controls{margin-top:18px;padding:18px;border:1px solid #ddd8cf;border-radius:14px;background:#faf8f3}.privacy-controls h3{margin:0 0 6px}.privacy-controls .button-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* Shared application finish. Keep visibility, role gates and overlay layers intact. */
.content { --color-text-muted: #586578; }
.content .page-header { margin-bottom: 28px; }
.content .page-header-title { letter-spacing: -.035em; line-height: 1.2; }
.content .page-header-title { font-size: clamp(28px, 2.8vw, 36px); font-weight: 650; }
.content .text-sm, .content .card-subtitle { font-size: 14px; line-height: 1.7; }
.content .platform-owner-plan > div:first-child > strong { display: block; font-family: var(--font-editorial); font-size: 34px; font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.content .platform-plan-buy > strong { font-family: var(--font-sans); font-size: 26px; font-weight: 650; letter-spacing: -.045em; }
.content .platform-owner-plan p { margin-top: 12px; }
.content .platform-plan-limit { font-weight: 600; }
.header-title, .account-name, .nav-item { font-family: var(--font-sans); }
.nav-item { letter-spacing: -.015em; }
.content .card-padded { padding: clamp(20px, 2.8vw, 32px); }
.content .card { border-color: #dce1e6; box-shadow: 0 3px 14px rgba(16, 35, 55, .035); }
.content .card-title { font-family: var(--font-family); font-weight: 700; letter-spacing: -.025em; line-height: 1.3; }
.content .card-subtitle { line-height: 1.65; margin-top: 7px; }
.content .panel > .card + .card { margin-top: 20px; }
.content .section-kicker { font-family: var(--font-family); font-size: 11px; font-weight: 700; letter-spacing: .11em; line-height: 1.5; margin-bottom: 9px; }
.content .form-label { font-size: 13px; font-weight: 600; line-height: 1.5; margin-bottom: 7px; }
.content .form-input, .content .form-select { min-height: 46px; border-radius: 10px; border-color: #c8d1dc; background-color: #fff; font-size: 14px; }
.content textarea.form-input { min-height: 104px; line-height: 1.6; }
.content .btn { min-height: 44px; border-radius: 10px; font-weight: 650; line-height: 1.4; }
.content .btn-secondary { border-color: #c8d1dc; }
.content .btn:disabled { opacity: 1; background: #edf0f3; border-color: #dce1e6; color: #596577; box-shadow: none; }
.nav-group-label { color: #a6b4c5; font-family: var(--font-family); font-size: 10px; letter-spacing: .12em; margin-bottom: 8px; }
.sidebar .brand { padding-bottom: 12px; }
.nav-item { font-size: 14px; }
.nav-item.active { background: #24364b; box-shadow: inset 0 0 0 1px #425167; }
.header-title { font-size: 15px; letter-spacing: -.02em; }
.subscription-manager { background: #fff; }
.subscription-plan-form { align-self: start; padding: 24px; background: #f5f7f9; border-color: #dce1e6; }
#platform-plans-list { display: grid; gap: 16px; min-width: 0; }
#platform-plans-list .subscription-plan-card { display: grid; gap: 12px; }
#platform-plans-list .subscription-plan-card > div:first-child > strong { font-size: 19px; letter-spacing: -.025em; margin-right: 10px; }
#platform-plans-list .subscription-plan-card p { margin: 0; line-height: 1.6; }
#platform-plans-list .subscription-plan-card > p:first-of-type { color: #142235; font-size: 23px; font-weight: 700; letter-spacing: -.03em; }
#platform-plans-list .subscription-plan-card .btn { margin-top: 4px; }
.content .platform-owner-subscription { background: #fff; border-top: 3px solid #c9a96a; }
.platform-owner-plans { gap: 18px; margin: 28px 0; }
.platform-owner-plan { padding: 24px; gap: 28px; border-color: #dce1e6; border-radius: 16px; box-shadow: 0 3px 14px rgba(16,35,55,.035); min-width: 0; }
.platform-owner-plan.selected { border-color: #b38c43; box-shadow: 0 0 0 1px #b38c43, 0 5px 18px rgba(16,35,55,.06); }
.platform-owner-plan p { line-height: 1.65; }
.platform-plan-limit { font-family: var(--font-family); color: #6c5428; font-size: 13px; line-height: 1.6; }
.platform-plan-buy { padding-top: 20px; border-top: 1px solid #e7ebef; }
.platform-redeem-form { padding: 22px; background: #f5f7f9; border-color: #dce1e6; }
.subscription-plan-price, .subscription-current-name, .home-subscription-name { font-family: var(--font-family); font-weight: 700; letter-spacing: -.03em; }
.payment-method-settings label { border-color: #d6dde5; min-height: 54px; }
.payment-method-settings label:has(input:checked) { background: #f2f6f8; border-color: #899bad; }
@media (max-width: 1100px) and (min-width: 761px) {
  .platform-owner-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-redeem-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .platform-redeem-form > .btn { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .content .card-padded { padding: 20px; }
  .platform-owner-plan { padding: 22px; gap: 22px; }
  .platform-redeem-form { padding: 18px; }
  .subscription-manager-head { flex-wrap: wrap; }
  .content .form-input, .content .form-select { font-size: 16px; }
}