/**
 * Bicial — pastel taronja, fons web blanc, contenidors sense fons, cantons minimitzats.
 */

:root,
html[data-theme-palette] {
  --bg-app: #ffffff;
  --bg-app-2: #ffffff;
  --surface: transparent;
  --surface-solid: transparent;
  --surface-soft: transparent;
  --surface-hover: #fff4e8;

  --border: #fde0c4;
  --border-strong: #f5c9a0;
  --text-main: #4a3428;
  --text-soft: #7a5c48;
  --text-muted: #9a7358;
  --text-faint: #b8957a;

  --primary: #f4a261;
  --primary-dark: #e76f51;
  --accent: #f9c784;
  --danger: #e07a7a;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-pill: 6px;

  --shop-shadow-sm: none;
  --shop-shadow-md: none;
  --playtomic-header-dropdown-shadow: none;
  --playtomic-card-shadow: none;

  --brand: #f4a261;
  --brand-strong: #e76f51;
  --brand-soft: transparent;

  --bicial-border: 1px solid var(--border-strong);
  --bicial-container-bg: transparent;
  --bicial-popup-bg: #ffffff;

  /* Quick icons (botons circulars) */
  --quick-icon-bg: #ffedd8;
  --quick-icon-bg-hover: #fde8c8;
  --quick-icon-bg-active: #fcd9b8;
  --quick-icon-color: #c45a2c;
  --quick-icon-ring: #e76f51;
}

html[data-theme-palette="2"] {
  --playtomic-shell-bg: #ffffff;
  --playtomic-nav-gradient-start: #fcd9b8;
  --playtomic-nav-gradient-end: #f4a261;
  --playtomic-nav-title: #fffaf5;
  --playtomic-bottom-chrome-bg: #ffffff;
  --playtomic-bottom-border-top: #fde0c4;
  --playtomic-muted: #9a7358;
  --playtomic-link: #e76f51;
  --playtomic-link-bg: transparent;
  --playtomic-header-dropdown-border: #f5c9a0;
  --playtomic-card-border: #fde0c4;
}

html,
body {
  background: #ffffff !important;
  background-image: none !important;
}

/* Navbar i barres: blanc / transparent, vora suau */
.navbar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px);
  border-bottom: var(--bicial-border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.page-feed.feed-theme-playtomic .navbar {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #fcd9b8 85%, #ffffff) 0%,
    color-mix(in srgb, #f4a261 75%, #ffffff) 100%
  ) !important;
  border-bottom: var(--bicial-border) !important;
  box-shadow: none !important;
}

/* Contenidors sense fons de color */
.search-bar,
.feed-post-card,
.feed-card,
.feed-discover-item,
.route-card,
.config-shell section,
.config-card,
.shop-card,
.shop-highlight,
.shop-hero,
.comunitat-membre-card,
.left-panel,
.right-panel,
.alert,
.landing-card,
.calendari-event-card,
.events-card,
.main-container > aside,
.main-container > article {
  background: var(--bicial-container-bg) !important;
  box-shadow: none !important;
  border: var(--bicial-border);
  border-radius: var(--radius-md) !important;
}

.feed-post-card:hover,
.route-card:hover,
.config-shell section:hover,
.shop-card:hover {
  background: transparent !important;
  border-color: var(--primary) !important;
}

/* Columna central: contenidor principal sense vora (totes les pàgines) */
.center-column,
.config-shell,
.feed-container,
.page-feed .feed-post {
  border: none !important;
  box-shadow: none !important;
}

.page-portada .feed-year-stats,
.page-feed.page-portada .feed-year-stats {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Portada: contenidor central sense ombra (mòbil i escriptori) */
body.page-feed.page-portada .center-column,
body.page-feed.page-portada.feed-theme-playtomic .center-column,
body.page-feed.page-portada .feed-container {
  box-shadow: none !important;
  outline: none !important;
}

.page-club-portada .config-shell,
.page-club-portada .club-portada-shell,
.page-club-portada .config-shell .config-section,
.page-club-portada .config-shell section,
.page-club-portada .club-portada-bloc,
.page-club-portada .club-portada-hero,
.page-club-portada .club-portada-links,
.page-club-portada .club-portada-sortides {
  border: none !important;
  box-shadow: none !important;
}

.page-club-portada .config-shell section:hover,
.page-club-portada .config-section:hover {
  border: none !important;
}

/* Cantons minimitzats (sobreescriu valors grans 16–30px) */
.bottom-nav-bar,
.bottom-nav-bar::before,
.bottom-nav-icon,
.bottom-nav-plus-btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn,
.btn-circle,
.perfil-btn-config,
.feed-publish-btn,
.route-join-btn,
.chat-back-btn,
.chat-new-conv-btn,
.landing-nav .btn,
.auth-form input,
.modal-content button,
.header-more-dropdown button,
.header-more-dropdown a,
.config-shell button,
.config-shell .btn,
.feed-composer textarea,
.feed-composer button {
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

.search-bar {
  border-radius: var(--radius-pill) !important;
}

/* Botons primaris pastel taronja */
.btn-primary,
.perfil-btn-config,
.feed-publish-btn,
.route-join-btn--join,
.landing-nav .btn-primary {
  background: color-mix(in srgb, var(--primary) 22%, #ffffff) !important;
  color: var(--text-main) !important;
  border: 1px solid color-mix(in srgb, var(--primary-dark) 50%, var(--border-strong)) !important;
}

.btn-primary:hover,
.perfil-btn-config:hover {
  background: color-mix(in srgb, var(--primary) 35%, #ffffff) !important;
}

/* Botó Afegir (rutes actives / passades) — pastel taronja com la subnav */
.route-page-proposal .route-toolbar-join-btn.route-toolbar-join-btn--afegir {
  background: var(--quick-icon-bg) !important;
  color: var(--quick-icon-color) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
}

.route-page-proposal .route-toolbar-join-btn.route-toolbar-join-btn--afegir:hover {
  background: var(--quick-icon-bg-hover) !important;
  color: var(--primary-dark) !important;
  border-color: var(--quick-icon-ring) !important;
  box-shadow: none !important;
}

.route-page-proposal .route-toolbar-join-btn.route-toolbar-join-btn--afegir:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, #ffffff);
  outline-offset: 2px;
}

/* Icona guardar ruta — pastel taronja */
.route-page-proposal .route-toolbar-save-btn {
  background: var(--quick-icon-bg) !important;
  color: var(--quick-icon-color) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
}

.route-page-proposal .route-toolbar-save-btn:hover {
  background: var(--quick-icon-bg-hover) !important;
  color: var(--primary-dark) !important;
  border-color: var(--quick-icon-ring) !important;
  box-shadow: none !important;
}

.route-page-proposal .route-toolbar-save-btn--on,
.route-page-proposal .route-toolbar-save-btn--on:hover {
  background: var(--quick-icon-bg-active) !important;
  color: var(--primary-dark) !important;
  border-color: var(--quick-icon-ring) !important;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--quick-icon-ring) 35%, transparent) !important;
}

.route-page-proposal .route-toolbar-save-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, #ffffff);
  outline-offset: 2px;
}

/* Barra inferior: sempre fons blanc sòlid */
.bottom-nav-bar {
  background: #ffffff !important;
  border-top: 1px solid var(--border-strong) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.page-feed.feed-theme-playtomic .bottom-nav-bar {
  background: #ffffff !important;
  border-top: 1px solid var(--border-strong) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.page-feed.feed-theme-playtomic .bottom-nav-bar::before {
  display: none;
}

/* Menús desplegables i emergents: fons blanc */
.bottom-dropdown,
.header-more-dropdown,
#header-more-options-menu,
.bottom-modal .modal-content,
.bottom-modal.show .modal-content,
#afegir-modal .modal-content,
.new-post-content,
.auth-modal-content,
.auth-modal .modal-content,
.route-modal-panel,
.route-modal-content,
.route-detail-panel,
.route-participants-dropdown,
.modal-overlay .modal-content,
#route-detail-modal .modal-content {
  background: var(--bicial-popup-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: var(--bicial-border) !important;
  box-shadow: none !important;
}

body.page-feed.feed-theme-playtomic .header-more-dropdown,
body.page-feed.feed-theme-playtomic .header-more-dropdown.show {
  background: #ffffff !important;
}

.dropdown-item:hover,
.header-more-dropdown .dropdown-item:hover,
.bottom-dropdown .dropdown-item:hover {
  background: var(--surface-hover) !important;
}

/* Landing */
.landing-nav {
  background: #ffffff !important;
  border-bottom: var(--bicial-border);
  box-shadow: none !important;
}

.landing-logo {
  color: var(--primary-dark) !important;
}

/* Quick icons: sense vora al contenidor; només el cercle amb color pastel */
.center-column .feed-page-quick-icon,
.feed-page-quick-icons--icons-only .feed-page-quick-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.feed-page-quick-icon:hover {
  border: none !important;
  transform: translateY(-1px);
}

.feed-page-quick-icon-circle {
  background: var(--quick-icon-bg) !important;
  color: var(--quick-icon-color) !important;
  box-shadow: none !important;
}

.feed-page-quick-icon:hover .feed-page-quick-icon-circle {
  background: var(--quick-icon-bg-hover) !important;
  color: var(--primary-dark) !important;
}

.feed-page-quick-icon.is-active {
  border: none !important;
}

.feed-page-quick-icon.is-active .feed-page-quick-icon-circle {
  background: var(--quick-icon-bg-active) !important;
  color: var(--primary-dark) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--quick-icon-ring) 45%, transparent) !important;
}

.feed-page-quick-icons--icons-only .feed-page-quick-icon.is-active .feed-page-quick-icon-circle {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--quick-icon-ring) 40%, transparent) !important;
}

.comunitat-hub-quick-icons .feed-page-quick-icon-circle {
  background: var(--quick-icon-bg) !important;
  color: var(--quick-icon-color) !important;
}

/* Rutes: pestanyes Club / Públiques / Guardades (mateixes classes que nivell) */
body.page-rutes a.nivell-ranking-period__tab,
body.page-rutes a.nivell-ranking-period__tab:visited {
  background: #fff !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

body.page-rutes a.nivell-ranking-period__tab:hover {
  background: var(--quick-icon-bg) !important;
  color: var(--primary-dark) !important;
  border-color: var(--border-strong) !important;
}

body.page-rutes a.nivell-ranking-period__tab.is-active,
body.page-rutes a.nivell-ranking-period__tab.is-active:visited,
body.page-rutes a.nivell-ranking-period__tab.is-active:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Submenú club (amistats / calendari / normativa) */
a.club-portada-subnav__btn,
a.club-portada-subnav__btn:visited {
  background: var(--quick-icon-bg) !important;
  color: var(--quick-icon-color) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

a.club-portada-subnav__btn:hover {
  background: var(--quick-icon-bg-hover) !important;
  color: var(--primary-dark) !important;
  border-color: var(--quick-icon-ring) !important;
}

a.club-portada-subnav__btn.is-active,
a.club-portada-subnav__btn.is-active:hover {
  background: var(--quick-icon-bg-active) !important;
  color: var(--primary-dark) !important;
  border-color: var(--quick-icon-ring) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--quick-icon-ring) 40%, transparent) !important;
}

a.club-portada-subnav__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, #ffffff);
  outline-offset: 2px;
}

/* Avatars: mantenen forma rodona */
img.avatar-small,
.profile-link img,
.chat-sidebar-avatar img,
.chat-main-avatar img,
.feed-page-quick-icon-circle,
.config-avatar img,
.comunitat-avatar img {
  border-radius: 50% !important;
}

.navbar button.profile-link {
  border-radius: var(--radius-sm) !important;
}

*:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, #ffffff);
  outline-offset: 2px;
  box-shadow: none !important;
}

/* Converses: panells centrals sense vora */
.page-converses .feed-container,
.page-converses .messenger-in-feed,
.page-converses .chat-page-wrapper,
.page-converses .chat-sidebar,
.page-converses .chat-main,
.page-converses .chat-feed,
.page-converses .chat-create-group-box {
  border: none !important;
  box-shadow: none !important;
}

.page-converses .chat-sidebar,
.page-converses .chat-main,
.page-converses .chat-feed {
  background: transparent !important;
  backdrop-filter: none !important;
}

@media (max-width: 860px) {
  .chat-sidebar,
  .chat-main,
  .chat-feed {
    border-radius: var(--radius-md) !important;
  }

  .page-converses .chat-sidebar,
  .page-converses .chat-main,
  .page-converses .chat-feed {
    border: none !important;
  }
}