/*
 * Playon UI — tema visual compartilhado
 * Referência: player-arenas.html, player-profile.html e arena.html.
 * Este arquivo contém somente apresentação; nenhuma regra de negócio é alterada.
 */

:root {
  --playon-primary: #1769e0;
  --playon-primary-dark: #0d5be1;
  --playon-primary-soft: #eaf3ff;
  --playon-text: #0f172a;
  --playon-text-soft: #475569;
  --playon-muted: #64748b;
  --playon-border: #e5eaf1;
  --playon-border-strong: #d7e1ec;
  --playon-surface: #ffffff;
  --playon-surface-soft: #f8fbff;
  --playon-success: #15803d;
  --playon-warning: #b45309;
  --playon-danger: #be123c;
  --playon-radius-sm: 13px;
  --playon-radius-md: 18px;
  --playon-radius-lg: 20px;
  --playon-radius-xl: 24px;
  --playon-shadow-sm: 0 6px 22px rgba(15, 23, 42, 0.045);
  --playon-shadow-header: 0 8px 28px rgba(15, 23, 42, 0.07);
  --playon-shadow-modal: 0 28px 72px rgba(15, 23, 42, 0.2);

  /* Compatibilidade com os nomes usados nas telas existentes. */
  --primary: var(--playon-primary);
  --primary-dark: var(--playon-primary-dark);
  --blue: var(--playon-primary);
  --blue2: #2685ef;
  --bg: #ffffff;
  --card: #ffffff;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --card-soft: var(--playon-surface-soft);
  --text: var(--playon-text);
  --text-soft: var(--playon-text-soft);
  --muted: var(--playon-muted);
  --text-muted: var(--playon-muted);
  --border: var(--playon-border);
  --line: var(--playon-border);
}

html {
  color-scheme: light;
  background: #ffffff;
  -webkit-text-size-adjust: 100%;
}

body.playon-ui {
  min-height: 100vh;
  color: var(--playon-text);
  background: #ffffff !important;
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.playon-ui *,
body.playon-ui *::before,
body.playon-ui *::after {
  box-sizing: border-box;
}

body.playon-ui :is(button, input, select, textarea) {
  font-family: inherit;
}

body.playon-ui :is(button, a, summary, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}

body.playon-ui :is(.container, .page-shell, .app-shell) {
  width: min(100%, 1480px);
  margin-inline: auto;
}

/* Cabeçalho padrão do aplicativo */
body.playon-ui .topbar {
  position: sticky;
  top: 12px;
  z-index: 100;
  padding: 14px 18px;
  border: 1px solid var(--playon-border) !important;
  border-radius: var(--playon-radius-lg) !important;
  color: var(--playon-text);
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: var(--playon-shadow-header) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.playon-ui .brand {
  gap: 12px;
}

body.playon-ui :is(.brand h1, .brand-text h1) {
  color: var(--playon-text);
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.45px;
}

body.playon-ui :is(.brand p, .brand-text p) {
  color: var(--playon-muted);
  font-size: 12px;
}

body.playon-ui :is(.logo, .brand-logo, .brand-mark) {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid #e8edf4 !important;
  border-radius: 14px !important;
  color: transparent;
  background: #ffffff url("/playon-logo.png") center / contain no-repeat !important;
  box-shadow: none !important;
}

body.playon-ui :is(.logo, .brand-logo, .brand-mark) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Superfícies e cartões */
body.playon-ui :is(
  .card,
  .panel,
  .section-card,
  .item-card,
  .quick-card,
  .metric-card,
  .stats-card,
  .request-item,
  .notification-card,
  .channel-card,
  .profile-card,
  .arena-card,
  .user-card,
  .selector
) {
  border-color: var(--playon-border) !important;
  border-radius: var(--playon-radius-lg) !important;
  background-color: #ffffff !important;
  box-shadow: var(--playon-shadow-sm) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.playon-ui .hero {
  border-color: var(--playon-border) !important;
  border-radius: var(--playon-radius-lg) !important;
  box-shadow: var(--playon-shadow-sm) !important;
}

body.playon-ui .receipt-head {
  border-radius: var(--playon-radius-lg) !important;
  background: linear-gradient(145deg, #0f62d5, #2685ef);
  box-shadow: none !important;
}

body.playon-ui :is(.card-header, .panel-header) {
  border-color: var(--playon-border);
}

body.playon-ui :is(.card-title, .panel-header h2, .item-title, .request-title) {
  color: var(--playon-text);
  letter-spacing: -0.25px;
}

body.playon-ui :is(.card-subtitle, .item-meta, .muted, .small-muted) {
  color: var(--playon-muted);
}

body.playon-ui :is(.empty-state, .info-box, .helper-box, .photo-uploader) {
  border-color: var(--playon-border) !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.playon-ui :is(.meta-chip, .chip, .info-pill, .feature-chip, .trust-chip) {
  border-color: var(--playon-border) !important;
  color: var(--playon-text-soft);
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Botões */
body.playon-ui :is(
  .btn,
  .primary-button,
  .ghost-button,
  .pill-button,
  .quick-button,
  .nav-btn,
  .close-button,
  .close-btn
) {
  min-height: 42px;
  border-radius: var(--playon-radius-sm) !important;
  font-weight: 800;
  box-shadow: none !important;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

body.playon-ui :is(.btn-primary, .primary-button) {
  border-color: var(--playon-primary) !important;
  color: #ffffff !important;
  background: var(--playon-primary) !important;
}

body.playon-ui :is(.btn-secondary, .ghost-button, .pill-button, .quick-button) {
  border-color: var(--playon-border-strong) !important;
  color: #174f9c !important;
  background: #ffffff !important;
}

body.playon-ui :is(.btn-danger, .danger-button) {
  border-color: #fecdd3 !important;
  color: var(--playon-danger) !important;
  background: #fff1f2 !important;
}

body.playon-ui :is(.btn-success, .btn-green) {
  border-color: #bbf7d0 !important;
  color: var(--playon-success) !important;
  background: #ecfdf5 !important;
}

body.playon-ui :is(.btn, .primary-button, .ghost-button, .pill-button, .quick-button):not(:disabled):hover {
  transform: translateY(-1px);
}

body.playon-ui :is(.btn, .primary-button, .ghost-button, .pill-button, .quick-button):disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

/* Formulários */
body.playon-ui :is(
  .input,
  .select,
  .textarea,
  .search-input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
) {
  min-height: 46px;
  border: 1px solid var(--playon-border-strong) !important;
  border-radius: var(--playon-radius-sm) !important;
  color: var(--playon-text);
  background: #ffffff !important;
  box-shadow: none !important;
  outline: none;
}

body.playon-ui textarea {
  min-height: 104px;
}

body.playon-ui :is(input, select, textarea):focus {
  border-color: var(--playon-primary) !important;
  box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.13) !important;
}

body.playon-ui :is(input, select, textarea)::placeholder {
  color: #94a3b8;
}

body.playon-ui .field label {
  color: var(--playon-text-soft);
  font-weight: 800;
}

/* Tabelas, listas e modais */
body.playon-ui :is(.item, .detail, .summary-line, .history-item, .slot, .court-card) {
  border-color: var(--playon-border) !important;
}

body.playon-ui :is(.table-wrap, table) {
  border-color: var(--playon-border) !important;
  border-radius: var(--playon-radius-md);
}

body.playon-ui table th {
  color: var(--playon-text-soft);
  background: var(--playon-surface-soft);
}

body.playon-ui table :is(th, td) {
  border-color: var(--playon-border);
}

body.playon-ui .modal-backdrop {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

body.playon-ui .modal {
  border: 1px solid var(--playon-border) !important;
  border-radius: var(--playon-radius-xl) !important;
  background: #ffffff !important;
  box-shadow: var(--playon-shadow-modal) !important;
}

body.playon-ui :is(.modal-header, .modal-actions) {
  border-color: var(--playon-border) !important;
}

/* Estados e indicadores */
body.playon-ui :is(.tag.blue, .badge.blue, .pill.blue) {
  border-color: #d4e6ff !important;
  color: #0b63e5 !important;
  background: var(--playon-primary-soft) !important;
}

body.playon-ui :is(.tag.green, .badge.green, .pill.green) {
  border-color: #caefd5 !important;
  color: var(--playon-success) !important;
  background: #eafbf0 !important;
}

body.playon-ui :is(.tag.orange, .badge.orange, .pill.orange) {
  border-color: #fde4bc !important;
  color: var(--playon-warning) !important;
  background: #fff7e6 !important;
}

body.playon-ui :is(.tag.red, .badge.red, .pill.red) {
  border-color: #fecdd3 !important;
  color: var(--playon-danger) !important;
  background: #fff1f2 !important;
}

body.playon-ui :focus-visible {
  outline: 3px solid rgba(23, 105, 224, 0.3);
  outline-offset: 2px;
}

/* Navegação móvel já existente nas telas principais. */
body.playon-ui :is(.mobile-player-nav, .mobile-app-nav) {
  border-color: #e1e7ef !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.14) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.playon-ui :is(.mobile-player-nav, .mobile-app-nav) button {
  border-radius: var(--playon-radius-sm) !important;
}

body.playon-ui :is(.mobile-player-nav, .mobile-app-nav) button.active {
  color: #ffffff !important;
  background: var(--playon-primary) !important;
}

@media (max-width: 768px) {
  body.playon-ui {
    padding-inline: 10px !important;
  }

  body.playon-ui :is(.container, .page-shell, .app-shell) {
    padding-inline: 0;
  }

  body.playon-ui .topbar {
    top: 8px;
    padding: 11px 12px;
    border-radius: 17px !important;
  }

  body.playon-ui :is(.brand p, .brand-text p) {
    display: none;
  }

  body.playon-ui :is(.logo, .brand-logo, .brand-mark) {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 13px !important;
  }

  body.playon-ui :is(.card, .panel, .hero, .section-card, .profile-card) {
    border-radius: 18px !important;
  }

  body.playon-ui :is(.card-header, .card-body, .panel-header, .panel-body) {
    padding-inline: 17px;
  }

  body.playon-ui :is(.btn, .primary-button, .ghost-button, .pill-button, .quick-button) {
    min-height: 44px;
  }
}

@media (max-width: 520px) {
  body.playon-ui :is(.top-actions, .topbar-actions, .actions, .toolbar) {
    gap: 7px;
  }

  body.playon-ui :is(.hero-title, .hero h1, .hero h2) {
    font-size: clamp(1.75rem, 8vw, 2.1rem);
    letter-spacing: -0.8px;
  }
}

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