/* ======================================================================
   DELIVERY JURUTI — PANEL PRO V20
   Benchmark visual: patch React/Tailwind enviado em 30/08/2026.
   Estratégia: camada puramente visual sobre o frontend Flask existente.
   Não altera API, banco, autenticação, pedidos, financeiro ou SSE.
   ====================================================================== */

:root {
  --dj-pro-bg: #f3eee8;
  --dj-pro-surface: #fffbf8;
  --dj-pro-surface-2: #f7f1ec;
  --dj-pro-fg: #1a1413;
  --dj-pro-muted: #6f6462;
  --dj-pro-subtle: #948886;
  --dj-pro-primary: #7a1822;
  --dj-pro-primary-strong: #5f111a;
  --dj-pro-primary-soft: #f6e8e9;
  --dj-pro-border: #e4d8d4;
  --dj-pro-border-strong: #d2bfba;
  --dj-pro-success: #1f7a45;
  --dj-pro-success-soft: #e8f6ee;
  --dj-pro-warning: #9a6414;
  --dj-pro-warning-soft: #f8eedc;
  --dj-pro-danger: #b4232f;
  --dj-pro-danger-soft: #fbecee;
  --dj-pro-radius-sm: 10px;
  --dj-pro-radius-md: 14px;
  --dj-pro-radius-lg: 20px;
  --dj-pro-radius-xl: 28px;
  --dj-pro-shadow: 0 1px 0 rgba(55, 24, 28, .04), 0 14px 34px rgba(55, 24, 28, .045);
  --dj-pro-font: "Aptos", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Escopo dos dois painéis ------------------------------------------------ */
#view-owner,
#view-admin {
  width: min(1120px, calc(100% - 32px)) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
  padding: 18px 0 56px !important;
  color: var(--dj-pro-fg) !important;
  font-family: var(--dj-pro-font) !important;
  background: transparent !important;
}

#view-owner *,
#view-admin * {
  box-sizing: border-box;
}

#view-owner h1,
#view-owner h2,
#view-owner h3,
#view-admin h1,
#view-admin h2,
#view-admin h3 {
  color: var(--dj-pro-fg) !important;
  letter-spacing: -.025em !important;
}

#view-owner p,
#view-owner small,
#view-admin p,
#view-admin small {
  color: var(--dj-pro-muted) !important;
}

#view-owner .eyebrow,
#view-admin .eyebrow,
.dj-pro-eyebrow {
  display: inline-block !important;
  margin-bottom: 4px !important;
  color: var(--dj-pro-primary) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* Cabeçalho do estabelecimento ----------------------------------------- */
#view-owner .owner-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  min-height: 94px !important;
  margin: 0 !important;
  padding: 12px 0 18px !important;
  color: var(--dj-pro-fg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#view-owner .owner-identity {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 16px !important;
  align-items: center !important;
  min-width: 0 !important;
}

#view-owner .owner-identity > img {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 16px !important;
  background: var(--dj-pro-surface-2) !important;
  box-shadow: none !important;
}

#view-owner .owner-identity .eyebrow,
#view-owner .owner-identity .dj-pro-eyebrow,
#view-owner .owner-identity h1,
#view-owner .owner-identity p {
  grid-column: 2 !important;
}

#view-owner .owner-identity h1 {
  margin: 0 !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
}

#view-owner .owner-identity p {
  margin: 4px 0 0 !important;
  font-size: 14px !important;
}

#view-owner .owner-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#view-owner .store-state,
#view-owner .status-button.store-state {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  box-shadow: none !important;
}

#view-owner .store-state.open,
#view-owner .status-button.store-state.open {
  color: var(--dj-pro-success) !important;
  border-color: transparent !important;
  background: var(--dj-pro-success-soft) !important;
}

#view-owner .store-state.closed,
#view-owner .status-button.store-state.closed {
  color: var(--dj-pro-danger) !important;
  border-color: transparent !important;
  background: var(--dj-pro-danger-soft) !important;
}

#view-owner .courier-sound-toggle {
  min-height: 40px !important;
  padding: 0 13px !important;
  color: var(--dj-pro-muted) !important;
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 12px !important;
  background: var(--dj-pro-surface) !important;
}

/* Cabeçalho do gestor --------------------------------------------------- */
#view-admin .admin-hero {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  min-height: 100px !important;
  margin: 0 !important;
  padding: 12px 0 18px !important;
  color: var(--dj-pro-fg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#view-admin .admin-hero h1 {
  margin: 2px 0 4px !important;
  font-size: clamp(24px, 3.2vw, 30px) !important;
  font-weight: 850 !important;
  line-height: 1.02 !important;
}

#view-admin .admin-hero p {
  margin: 0 !important;
  max-width: 650px !important;
  font-size: 14px !important;
}

#view-admin .admin-hero-actions {
  display: flex !important;
  align-items: end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

#view-admin .admin-city-switcher {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
}

#view-admin .admin-city-switcher > span {
  color: var(--dj-pro-subtle) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#view-admin #admin-city-select {
  min-width: 152px !important;
  height: 42px !important;
  padding: 0 38px 0 13px !important;
  color: var(--dj-pro-fg) !important;
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 14px !important;
  background: var(--dj-pro-surface-2) !important;
  box-shadow: none !important;
}

#view-admin .admin-live-state {
  min-height: 42px !important;
  padding: 0 14px !important;
  gap: 8px !important;
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 999px !important;
  background: var(--dj-pro-surface) !important;
  box-shadow: none !important;
}

#view-admin .admin-live-state.connected,
#view-admin .admin-live-state:has(.realtime-dot) {
  color: var(--dj-pro-success) !important;
}

#view-admin .realtime-dot {
  width: 8px !important;
  height: 8px !important;
  background: var(--dj-pro-success) !important;
  box-shadow: 0 0 0 4px rgba(31, 122, 69, .10) !important;
}

/* Abas em pílulas — benchmark direto do protótipo ---------------------- */
#view-owner .owner-tabs,
#view-admin .admin-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 0 12px !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain !important;
  scrollbar-width: none !important;
  color: var(--dj-pro-muted) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dj-pro-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

#view-owner .owner-tabs::-webkit-scrollbar,
#view-admin .admin-tabs::-webkit-scrollbar {
  display: none !important;
}

#view-owner .owner-tabs button,
#view-admin .admin-tabs button {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  color: var(--dj-pro-muted) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: color .15s ease, background-color .15s ease !important;
}

#view-owner .owner-tabs button:hover,
#view-admin .admin-tabs button:hover {
  color: var(--dj-pro-fg) !important;
  background: var(--dj-pro-surface-2) !important;
}

#view-owner .owner-tabs button.active,
#view-admin .admin-tabs button.active {
  color: #fffaf7 !important;
  background: var(--dj-pro-primary) !important;
  box-shadow: none !important;
}

.dj-pro-tab-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  color: currentColor !important;
}

.dj-pro-tab-icon svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.dj-pro-tab-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: var(--dj-pro-primary) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

#view-owner .owner-tabs button.active .dj-pro-tab-badge,
#view-admin .admin-tabs button.active .dj-pro-tab-badge {
  color: var(--dj-pro-primary) !important;
  background: #fffaf7 !important;
}

/* Painéis e títulos ----------------------------------------------------- */
#view-owner .owner-panel,
#view-admin .admin-panel {
  color: var(--dj-pro-fg) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#view-owner .owner-section-heading,
#view-owner .finance-section-heading,
#view-admin .admin-section-heading {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 30px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
}

#view-owner .owner-section-heading h2,
#view-owner .finance-section-heading h2,
#view-admin .admin-section-heading h2 {
  margin: 0 !important;
  font-size: clamp(21px, 2.5vw, 26px) !important;
  font-weight: 850 !important;
}

/* Métricas -------------------------------------------------------------- */
#view-owner .metric-grid,
#view-admin .metric-grid,
#view-admin .admin-metric-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

#view-owner .metric-card,
#view-admin .metric-card {
  display: flex !important;
  min-width: 0 !important;
  min-height: 110px !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 16px !important;
  color: var(--dj-pro-fg) !important;
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 18px !important;
  background: var(--dj-pro-surface) !important;
  box-shadow: var(--dj-pro-shadow) !important;
  transition: border-color .15s ease !important;
}

#view-owner .metric-card:hover,
#view-admin .metric-card:hover {
  border-color: var(--dj-pro-border-strong) !important;
  box-shadow: var(--dj-pro-shadow) !important;
  transform: none !important;
}

#view-owner .metric-card > span,
#view-admin .metric-card > span {
  color: var(--dj-pro-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}

#view-owner .metric-card > strong,
#view-admin .metric-card > strong {
  margin-top: 10px !important;
  color: var(--dj-pro-fg) !important;
  font-size: clamp(22px, 2.5vw, 27px) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

#view-owner .metric-card > small,
#view-admin .metric-card > small {
  margin-top: 8px !important;
  color: var(--dj-pro-subtle) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

/* Visão geral do estabelecimento: pedidos como lista limpa ------------- */
#view-owner .owner-recent-list {
  overflow: hidden !important;
  display: grid !important;
  gap: 0 !important;
  color: var(--dj-pro-fg) !important;
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 18px !important;
  background: var(--dj-pro-surface) !important;
  box-shadow: none !important;
}

#view-owner .owner-recent-order {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  color: var(--dj-pro-fg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dj-pro-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#view-owner .owner-recent-order:last-child {
  border-bottom: 0 !important;
}

#view-owner .owner-recent-order:hover {
  background: var(--dj-pro-surface-2) !important;
  box-shadow: none !important;
  transform: none !important;
}

#view-owner .owner-recent-order strong {
  color: var(--dj-pro-fg) !important;
  font-size: 14px !important;
}

#view-owner .owner-recent-order span,
#view-owner .owner-recent-order small {
  color: var(--dj-pro-subtle) !important;
  font-size: 11px !important;
}

/* Pedidos detalhados ---------------------------------------------------- */
#view-owner .owner-orders-list {
  display: grid !important;
  gap: 12px !important;
}

#view-owner .owner-order-card,
#view-owner .finance-delivery-card,
#view-owner .payment-method-card,
#view-owner .payment-method-management,
#view-owner .category-order-card,
#view-owner .menu-admin-card,
#view-admin .manager-partner-card,
#view-admin .admin-banner-row,
#view-admin .detailed-invoice-card,
#view-admin .admin-invoice-form,
#view-admin .highlight-manager-selected,
#view-admin .highlight-manager-catalog {
  color: var(--dj-pro-fg) !important;
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 18px !important;
  background: var(--dj-pro-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

#view-owner .owner-order-card,
#view-owner .finance-delivery-card,
#view-admin .manager-partner-card,
#view-admin .detailed-invoice-card {
  padding: 18px !important;
}

#view-owner .owner-order-card:hover,
#view-owner .menu-admin-card:hover,
#view-admin .manager-partner-card:hover,
#view-admin .admin-banner-row:hover {
  border-color: var(--dj-pro-border-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

#view-owner .owner-order-address,
#view-owner .owner-order-items,
#view-owner .order-notes-box,
#view-owner .delivery-dispatch-status {
  color: var(--dj-pro-fg) !important;
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 13px !important;
  background: var(--dj-pro-surface-2) !important;
  background-image: none !important;
}

/* Chips / status -------------------------------------------------------- */
#view-owner .status,
#view-owner .finance-state,
#view-admin .status,
#view-admin .registration-status,
#view-admin .invoice-status {
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

#view-owner .status:not(.status-delivered):not(.status-cancelled),
#view-owner .finance-state.finance-pending,
#view-admin .status.pending,
#view-admin .registration-status.pending {
  color: var(--dj-pro-warning) !important;
  border-color: transparent !important;
  background: var(--dj-pro-warning-soft) !important;
}

#view-owner .status.status-delivered,
#view-owner .finance-state.finance-ok,
#view-admin .status.active,
#view-admin .registration-status.active {
  color: var(--dj-pro-success) !important;
  border-color: transparent !important;
  background: var(--dj-pro-success-soft) !important;
}

#view-owner .status.status-cancelled,
#view-admin .status.rejected,
#view-admin .registration-status.rejected {
  color: var(--dj-pro-danger) !important;
  border-color: transparent !important;
  background: var(--dj-pro-danger-soft) !important;
}

#view-owner .finance-state.finance-neutral {
  color: var(--dj-pro-muted) !important;
  border-color: var(--dj-pro-border) !important;
  background: var(--dj-pro-surface-2) !important;
}

/* Auditoria como tabela/lista ------------------------------------------ */
#view-admin .admin-activity-list {
  overflow: hidden !important;
  display: grid !important;
  gap: 0 !important;
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 18px !important;
  background: var(--dj-pro-surface) !important;
}

#view-admin .admin-activity-list > article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 3px 16px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  color: var(--dj-pro-fg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dj-pro-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#view-admin .admin-activity-list > article:last-child {
  border-bottom: 0 !important;
}

#view-admin .admin-activity-list strong {
  color: var(--dj-pro-fg) !important;
  font-size: 13px !important;
}

#view-admin .admin-activity-list span,
#view-admin .admin-activity-list p,
#view-admin .admin-activity-list small {
  color: var(--dj-pro-muted) !important;
  font-size: 11px !important;
}

#view-admin .admin-activity-list small {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  align-self: start !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Queridinhos / banners ------------------------------------------------ */
#view-admin .highlight-manager-grid {
  gap: 14px !important;
}

#view-admin .highlight-manager-list article,
#view-admin .highlight-manager-candidate {
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 14px !important;
  background: var(--dj-pro-surface) !important;
  box-shadow: none !important;
}

#view-admin .admin-banner-list {
  display: grid !important;
  gap: 12px !important;
}

#view-admin .admin-banner-row {
  padding: 12px !important;
}

#view-admin .admin-banner-row > img {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--dj-pro-surface-2) !important;
}

/* Cardápio -------------------------------------------------------------- */
#view-owner .menu-admin-grid {
  gap: 14px !important;
}

#view-owner .menu-admin-card {
  overflow: hidden !important;
  padding: 0 !important;
}

#view-owner .menu-admin-card > img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--dj-pro-surface-2) !important;
}

#view-owner .menu-admin-content {
  padding: 15px !important;
}

#view-owner .menu-admin-content strong {
  color: var(--dj-pro-fg) !important;
}

#view-owner .menu-admin-content p {
  color: var(--dj-pro-muted) !important;
}

/* Formulários ----------------------------------------------------------- */
#view-owner input,
#view-owner textarea,
#view-owner select,
#view-admin input,
#view-admin textarea,
#view-admin select,
#view-owner .restaurant-settings-form input,
#view-owner .restaurant-settings-form textarea,
#view-admin .admin-invoice-form input,
#view-admin .admin-invoice-form select {
  color: var(--dj-pro-fg) !important;
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 12px !important;
  background: var(--dj-pro-surface-2) !important;
  box-shadow: none !important;
}

#view-owner input:focus,
#view-owner textarea:focus,
#view-owner select:focus,
#view-admin input:focus,
#view-admin textarea:focus,
#view-admin select:focus {
  border-color: var(--dj-pro-primary) !important;
  background: var(--dj-pro-surface) !important;
  box-shadow: 0 0 0 3px rgba(122, 24, 34, .10) !important;
}

#view-owner .primary-button,
#view-admin .primary-button {
  color: #fffaf7 !important;
  border-color: var(--dj-pro-primary) !important;
  border-radius: 12px !important;
  background: var(--dj-pro-primary) !important;
  background-image: none !important;
  box-shadow: none !important;
}

#view-owner .primary-button:hover:not(:disabled),
#view-admin .primary-button:hover:not(:disabled) {
  color: #fffaf7 !important;
  border-color: var(--dj-pro-primary-strong) !important;
  background: var(--dj-pro-primary-strong) !important;
  transform: none !important;
  box-shadow: none !important;
}

#view-owner .secondary-button,
#view-admin .secondary-button,
#view-owner .icon-action:not(.danger),
#view-admin .icon-action:not(.danger) {
  color: var(--dj-pro-fg) !important;
  border-color: var(--dj-pro-border) !important;
  border-radius: 12px !important;
  background: var(--dj-pro-surface) !important;
  box-shadow: none !important;
}

#view-owner .secondary-button:hover:not(:disabled),
#view-admin .secondary-button:hover:not(:disabled) {
  color: var(--dj-pro-primary) !important;
  border-color: var(--dj-pro-primary) !important;
  background: var(--dj-pro-primary-soft) !important;
}

#view-owner .danger-button,
#view-admin .danger-button,
#view-owner .danger-outline,
#view-admin .danger-outline,
#view-owner .icon-action.danger,
#view-admin .icon-action.danger {
  color: var(--dj-pro-danger) !important;
  border-color: #efc8cc !important;
  background: var(--dj-pro-danger-soft) !important;
  box-shadow: none !important;
}

/* Estados vazios / loading --------------------------------------------- */
#view-owner .empty-state,
#view-owner .compact-empty,
#view-admin .empty-state,
#view-admin .compact-empty {
  color: var(--dj-pro-muted) !important;
  border: 1px dashed var(--dj-pro-border-strong) !important;
  border-radius: 18px !important;
  background: rgba(255, 251, 248, .72) !important;
  box-shadow: none !important;
}

#view-owner .loading,
#view-admin .loading {
  min-height: 96px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--dj-pro-muted) !important;
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 18px !important;
  background: var(--dj-pro-surface) !important;
}

/* Dialogs ligados aos painéis ------------------------------------------ */
.banner-editor-dialog .dialog-form,
#dispatch-dialog .dialog-card,
.app-dialog .dialog-card,
.app-dialog .dialog-form {
  color: var(--dj-pro-fg) !important;
  border-color: var(--dj-pro-border) !important;
  border-radius: 20px !important;
  background: var(--dj-pro-surface) !important;
  box-shadow: 0 24px 70px rgba(55, 24, 28, .16) !important;
}

/* Responsividade -------------------------------------------------------- */
@media (max-width: 960px) {
  #view-owner .metric-grid,
  #view-admin .metric-grid,
  #view-admin .admin-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #view-admin .admin-invoice-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  #view-owner,
  #view-admin {
    width: min(100% - 24px, 1120px) !important;
    padding-top: 10px !important;
    padding-bottom: 38px !important;
  }

  #view-owner .owner-header,
  #view-admin .admin-hero {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
  }

  #view-owner .owner-header-actions,
  #view-admin .admin-hero-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  #view-admin .admin-city-switcher {
    flex: 1 1 150px !important;
  }

  #view-admin #admin-city-select {
    width: 100% !important;
  }

  #view-owner .owner-tabs,
  #view-admin .admin-tabs {
    margin-inline: -12px !important;
    width: calc(100% + 24px) !important;
    padding: 2px 12px 12px !important;
  }

  #view-owner .owner-tabs button,
  #view-admin .admin-tabs button {
    min-height: 42px !important;
    padding-inline: 13px !important;
    font-size: 13px !important;
  }

  #view-owner .owner-section-heading,
  #view-owner .finance-section-heading,
  #view-admin .admin-section-heading {
    margin-top: 24px !important;
  }

  #view-owner .owner-order-card,
  #view-owner .finance-delivery-card,
  #view-admin .manager-partner-card,
  #view-admin .detailed-invoice-card {
    padding: 15px !important;
  }

  #view-admin .admin-activity-list > article {
    grid-template-columns: 1fr !important;
  }

  #view-admin .admin-activity-list small {
    grid-column: 1 !important;
    grid-row: auto !important;
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  #view-owner .owner-identity {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  #view-owner .owner-identity > img {
    width: 58px !important;
    height: 58px !important;
    border-radius: 15px !important;
  }

  #view-owner .metric-grid,
  #view-admin .metric-grid,
  #view-admin .admin-metric-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  #view-owner .metric-card,
  #view-admin .metric-card {
    min-height: 104px !important;
    padding: 13px !important;
    border-radius: 16px !important;
  }

  #view-owner .metric-card > strong,
  #view-admin .metric-card > strong {
    font-size: 21px !important;
  }

  #view-owner .owner-recent-order {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-owner *,
  #view-admin * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* PANEL PRO V20.1 OWNER LABEL FIX */

/* PANEL PRO V20.3 NOTIFICATION TOGGLE START */
#view-owner .courier-sound-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 7px 14px 7px 9px !important;
  color: var(--dj-pro-fg) !important;
  border: 1px solid var(--dj-pro-border) !important;
  border-radius: 999px !important;
  background: var(--dj-pro-surface) !important;
  box-shadow: 0 1px 2px rgba(32, 33, 36, .04) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  cursor: pointer !important;
  user-select: none !important;
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    color .16s ease !important;
}

#view-owner .courier-sound-toggle:hover {
  color: var(--dj-pro-primary) !important;
  border-color: rgba(142, 31, 43, .30) !important;
  background: #fffafb !important;
  box-shadow: 0 3px 10px rgba(67, 48, 51, .06) !important;
}

#view-owner .courier-sound-toggle:focus-within {
  border-color: var(--dj-pro-primary) !important;
  box-shadow: 0 0 0 3px rgba(142, 31, 43, .10) !important;
}

#view-owner .courier-sound-toggle input[type="checkbox"] {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  outline: none !important;
  background: #d9d4d5 !important;
  box-shadow: inset 0 0 0 1px rgba(73, 63, 65, .08) !important;
  cursor: pointer !important;
  transition: background .18s ease, box-shadow .18s ease !important;
}

#view-owner .courier-sound-toggle input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(32, 33, 36, .20) !important;
  transition: transform .18s ease !important;
}

#view-owner .courier-sound-toggle input[type="checkbox"]:checked {
  background: var(--dj-pro-primary) !important;
  box-shadow: inset 0 0 0 1px var(--dj-pro-primary) !important;
}

#view-owner .courier-sound-toggle input[type="checkbox"]:checked::after {
  transform: translateX(14px) !important;
}

#view-owner .courier-sound-toggle:has(input[type="checkbox"]:checked) {
  color: var(--dj-pro-primary) !important;
  border-color: rgba(142, 31, 43, .20) !important;
  background: #fff7f8 !important;
}

#view-owner .dj-pro-notification-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--dj-pro-primary) !important;
  flex: 0 0 18px !important;
}

#view-owner .dj-pro-notification-icon svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@media (max-width: 640px) {
  #view-owner .courier-sound-toggle {
    min-height: 40px !important;
    padding-right: 12px !important;
    gap: 8px !important;
    font-size: 12.5px !important;
  }

  #view-owner .courier-sound-toggle input[type="checkbox"] {
    width: 34px !important;
    height: 21px !important;
  }

  #view-owner .courier-sound-toggle input[type="checkbox"]::after {
    width: 15px !important;
    height: 15px !important;
  }

  #view-owner .courier-sound-toggle input[type="checkbox"]:checked::after {
    transform: translateX(13px) !important;
  }
}
/* PANEL PRO V20.3 NOTIFICATION TOGGLE END */

/* PANEL PRO V20.4 PROFESSIONAL DESKTOP HEADER START */
@media (min-width: 901px) {
  .app-header {
    min-height: 76px !important;
    padding: 10px clamp(18px, 2.7vw, 42px) !important;
    gap: 18px !important;
    color: #202124 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #e8e1e2 !important;
    background: rgba(255,255,255,.97) !important;
    background-image: none !important;
    box-shadow: 0 3px 14px rgba(45,34,37,.035) !important;
    backdrop-filter: blur(14px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
  }

  .app-header .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    color: #202124 !important;
    text-decoration: none !important;
  }

  .app-header .brand-logo,
  .app-header .brand-mark {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .app-header .brand-wordmark { display:grid !important; gap:1px !important; line-height:1 !important; }
  .app-header .brand-wordmark strong {
    color:#202124 !important; font-size:20px !important; font-weight:850 !important;
    line-height:1.04 !important; letter-spacing:-.025em !important; white-space:nowrap !important;
  }
  .app-header .brand-wordmark small {
    display:block !important; margin-top:3px !important; color:#8e1f2b !important;
    font-size:8.5px !important; font-weight:800 !important; line-height:1 !important;
    letter-spacing:.13em !important; text-transform:uppercase !important; white-space:nowrap !important;
  }

  .app-header .delivery-address {
    position:relative !important; display:grid !important; align-content:center !important; gap:2px !important;
    min-width:138px !important; min-height:48px !important; margin-left:2px !important;
    padding:7px 15px 7px 43px !important; color:#202124 !important;
    border:1px solid #e7dfe0 !important; border-radius:14px !important;
    background:#fbf9f8 !important; box-shadow:none !important;
  }
  .app-header .delivery-address::before {
    content:"" !important; position:absolute !important; left:13px !important; top:50% !important;
    width:18px !important; height:18px !important; transform:translateY(-50%) !important;
    background-color:#8e1f2b !important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }
  .app-header .delivery-address > span,
  .app-header .delivery-address > small { color:#777073 !important; font-size:10.5px !important; font-weight:650 !important; line-height:1 !important; }
  .app-header .delivery-address > strong,
  .app-header .delivery-address > b { color:#202124 !important; font-size:14px !important; font-weight:800 !important; line-height:1.08 !important; }

  .app-header .desktop-nav {
    display:flex !important; align-items:center !important; justify-content:flex-end !important;
    gap:4px !important; margin-left:auto !important;
  }
  .app-header .desktop-nav a,
  .app-header .desktop-nav button {
    position:relative !important; display:inline-flex; align-items:center !important; justify-content:center !important;
    min-height:42px !important; padding:0 14px !important; color:#4f4a4c !important;
    border:0 !important; border-radius:12px !important; background:transparent !important; box-shadow:none !important;
    font:inherit !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important;
    letter-spacing:-.01em !important; text-decoration:none !important; cursor:pointer !important;
    transition:color .16s ease, background .16s ease !important;
  }
  .app-header .desktop-nav a:hover,
  .app-header .desktop-nav button:hover { color:#8e1f2b !important; background:#faf1f2 !important; }
  .app-header .desktop-nav a.active,
  .app-header .desktop-nav button.active { color:#761020 !important; background:#f7e8ea !important; }

  .app-header #auth-button {
    position:relative !important; display:inline-flex; align-items:center !important; justify-content:center !important;
    min-height:44px !important; margin-left:8px !important; padding:0 14px 0 42px !important;
    color:#202124 !important; border:1px solid #e4d8da !important; border-radius:14px !important;
    background:#fff !important; box-shadow:0 1px 2px rgba(32,33,36,.025) !important;
    font-size:13.5px !important; font-weight:800 !important; white-space:nowrap !important;
    transition:color .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease !important;
  }
  .app-header #auth-button::before {
    content:"" !important; position:absolute !important; left:12px !important; top:50% !important;
    width:20px !important; height:20px !important; transform:translateY(-50%) !important;
    background-color:#8e1f2b !important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }
  .app-header #auth-button:hover { color:#761020 !important; border-color:#d7b9be !important; background:#fff8f9 !important; box-shadow:0 3px 10px rgba(91,47,54,.055) !important; }

  .app-header #header-cart,
  .app-header .cart-button {
    min-width:44px !important; min-height:44px !important; margin-left:4px !important; padding:0 !important;
    color:#8e1f2b !important; border:1px solid #eadbdd !important; border-radius:14px !important;
    background:#fff7f8 !important; box-shadow:none !important;
  }
  .app-header #header-cart:hover,
  .app-header .cart-button:hover { color:#761020 !important; border-color:#d9bcc1 !important; background:#f9ecee !important; }

  @media (max-width:1120px) {
    .app-header { gap:10px !important; padding-left:16px !important; padding-right:16px !important; }
    .app-header .brand-wordmark strong { font-size:18px !important; }
    .app-header .delivery-address { min-width:120px !important; padding-right:10px !important; }
    .app-header .desktop-nav a,
    .app-header .desktop-nav button { padding-left:10px !important; padding-right:10px !important; font-size:13px !important; }
    .app-header #auth-button { margin-left:2px !important; padding-right:10px !important; }
  }
}
/* PANEL PRO V20.4 PROFESSIONAL DESKTOP HEADER END */


/* PANEL PRO V20.4.1 ROLE VISIBILITY FIX */
/*
  O app.js é a fonte de verdade para quais opções aparecem:
  - restaurante -> Painel do estabelecimento
  - entregador  -> Painel do entregador
  - gestor      -> Central de gestão
  - cliente     -> opções do cliente
  Elementos com `hidden` nunca devem ser revelados pelo CSS visual.
*/
.app-header .desktop-nav button[hidden],
.app-header .desktop-nav a[hidden],
.app-header #owner-nav-button[hidden],
.app-header #courier-nav-button[hidden],
.app-header #admin-nav-button[hidden],
.app-header #header-cart[hidden],
.app-header [data-customer-nav][hidden],
.bottom-nav[hidden],
.bottom-nav [hidden] {
  display: none !important;
}

/* PANEL PRO V20.4.3 HIDE DUPLICATE PROFILE START */
/*
  No desktop, "Perfil" e o botão "Olá, NOME" levam à mesma área.
  Mantemos somente o botão moderno de usuário.
  O perfil da navegação móvel permanece inalterado.
*/
@media (min-width: 901px) {
  .app-header .desktop-nav [data-route="profile"] {
    display: none !important;
  }
}
/* PANEL PRO V20.4.3 HIDE DUPLICATE PROFILE END */

/* PANEL PRO V20.4.4 ADMIN ONLINE DOT START */
/*
  Mantém somente o .realtime-dot real existente no HTML.
  Neutraliza indicadores decorativos/pseudo-elementos antigos que podem
  gerar a segunda bolinha verde no status do gestor.
*/
#view-admin .admin-live-state::before,
#view-admin .admin-live-state::after,
#view-admin #admin-realtime-label::before,
#view-admin #admin-realtime-label::after {
  content: none !important;
  display: none !important;
}

#view-admin .admin-live-state {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}

#view-admin .admin-live-state .realtime-dot {
  display: inline-block !important;
  flex: 0 0 10px !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;
  background: #1f9d62 !important;
  box-shadow: none !important;
}

#view-admin .admin-live-state .realtime-dot.connected {
  background: #1f9d62 !important;
  box-shadow: 0 0 0 4px rgba(31, 157, 98, .10) !important;
}

#view-admin #admin-realtime-label {
  display: inline !important;
  margin: 0 !important;
  color: #18794e !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
/* PANEL PRO V20.4.4 ADMIN ONLINE DOT END */