/**
 * Bicial — estructura visual (fons, vores, cantons). Els colors venen de themes/theme-palettes.css.
 */

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

  --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;

  /* Header i botoneres: mateixa tipografia i icones */
  --bicial-toolbar-font: 0.68rem;
  --bicial-header-icon-size: 36px;
  --bicial-header-icon-bg: rgba(255, 255, 255, 0.96);
  --bicial-header-icon-color: var(--primary-dark, #2563eb);
  --bicial-header-icon-border: rgba(255, 255, 255, 0.9);
  --bicial-header-icon-shadow: 0 1px 5px rgba(15, 23, 42, 0.12);
  --bicial-header-section-icon-gap: 1rem;
}

html[data-theme-palette="5"] {
  --bicial-popup-bg: #1e232b;
}

html[data-theme-palette="5"],
html[data-theme-palette="5"] body {
  background: var(--bg-app) !important;
  color: var(--text-main);
}

html:not([data-theme-palette="5"]),
html:not([data-theme-palette="5"]) 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, var(--playtomic-nav-gradient-start, #d6ebff) 85%, #ffffff) 0%,
    color-mix(in srgb, var(--playtomic-nav-gradient-end, #7eb8f0) 75%, #ffffff) 100%
  ) !important;
  border-bottom: var(--bicial-border) !important;
  box-shadow: none !important;
}

/* Contenidors sense fons de color (excepte cerca del header: ha de ser visible) */
.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;
}

.navbar .header-search-wrap {
  display: flex !important;
  grid-column: 2;
  justify-self: center;
  width: 100%;
  min-width: 0;
  max-width: 420px;
}

.navbar .navbar-brand-link,
.navbar .navbar-brand-link.navbar-brand-link--current {
  flex: 0 0 auto;
  flex-shrink: 0;
}

.navbar .search-bar {
  display: flex !important;
  visibility: visible !important;
  border-radius: var(--radius-pill) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--border-strong, rgba(15, 23, 42, 0.14)) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
}

.navbar .search-bar i {
  color: var(--bicial-header-icon-color, var(--text-muted, #64748b)) !important;
  font-size: calc(var(--bicial-toolbar-font, 0.68rem) * 1.12);
  flex-shrink: 0;
}

.navbar .search-bar input {
  color: var(--text-main, #0f172a) !important;
}

.navbar .search-bar input::placeholder {
  color: var(--text-muted, #64748b) !important;
}

.navbar .header-search-dropdown {
  display: block;
  background: #ffffff !important;
  border: 1px solid var(--border-strong, rgba(15, 23, 42, 0.14)) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
  z-index: 1600;
}

.navbar .header-search-dropdown[hidden] {
  display: none !important;
}

.navbar .header-search-status,
.navbar .header-search-link-title,
.navbar .header-search-link-sub,
.navbar .header-search-group-label {
  color: var(--text-main, #0f172a) !important;
}

.navbar .header-search-group-label,
.navbar .header-search-link-sub {
  color: var(--text-muted, #64748b) !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;
}

/* Header: format unificat (cercle blanc + icona blava, text compacte) */
.navbar .feed-page-quick-icon-circle,
.navbar .btn-circle {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  width: var(--bicial-header-icon-size, 36px) !important;
  height: var(--bicial-header-icon-size, 36px) !important;
  min-width: var(--bicial-header-icon-size, 36px) !important;
  min-height: var(--bicial-header-icon-size, 36px) !important;
  background: var(--bicial-header-icon-bg) !important;
  color: var(--bicial-header-icon-color) !important;
  border: 1px solid var(--bicial-header-icon-border) !important;
  box-shadow: var(--bicial-header-icon-shadow) !important;
  font-size: calc(var(--bicial-toolbar-font, 0.68rem) * 1.12) !important;
}

.navbar .btn-circle i,
.navbar .feed-page-quick-icon-circle i {
  display: block;
  line-height: 1;
}

.navbar .feed-page-quick-icons--header .feed-page-quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.navbar .feed-page-quick-icon--plus {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.navbar .feed-page-quick-icon--plus:focus-visible {
  outline: 2px solid rgba(29, 155, 240, 0.55);
  outline-offset: 2px;
  border-radius: 50%;
}

.navbar--section-nav {
  --navbar-icon-band-height: var(--bicial-header-icon-size, 36px);
}

.navbar--section-nav .nav-left,
.navbar--section-nav .nav-right {
  align-items: center;
  min-height: var(--navbar-icon-band-height);
}

@media (max-width: 860px) {
  .navbar--section-nav .nav-left,
  .navbar--section-nav .nav-right {
    align-self: center;
    height: auto;
    max-height: none;
  }
}

.navbar--section-nav .nav-left .navbar-brand-link {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.navbar .nav-right {
  width: max-content;
  max-width: none;
  flex: 0 0 auto;
  justify-self: end;
}

.navbar--section-nav .nav-right {
  margin-inline-start: 0;
}

.navbar:not(.navbar--section-nav) .nav-right {
  margin-inline-start: auto;
}

.navbar .feed-page-quick-icon:hover .feed-page-quick-icon-circle,
.navbar .btn-circle:hover {
  background: #fff !important;
  color: var(--playtomic-nav-gradient-start, #2f63ff) !important;
  border-color: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14) !important;
}

.navbar .feed-page-quick-icon.is-active .feed-page-quick-icon-circle {
  background: var(--quick-icon-bg-active, #dbeafe) !important;
  color: var(--primary-dark, #1d4ed8) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--bicial-header-icon-color) 40%, transparent) !important;
}

.navbar .profile-link .avatar-small {
  width: var(--bicial-header-icon-size, 36px) !important;
  height: var(--bicial-header-icon-size, 36px) !important;
}

.navbar .search-bar input,
.navbar .search-bar input::placeholder,
.navbar .header-profile-link__name,
.navbar .header-profile-menu-btn__name,
.navbar .header-search-status,
.navbar .header-search-link-title,
.navbar .header-more-dropdown .dropdown-item {
  font-size: var(--bicial-toolbar-font, 0.68rem);
}

.navbar .header-search-link-sub,
.navbar .header-search-group-label {
  font-size: calc(var(--bicial-toolbar-font, 0.68rem) * 0.94);
}

@media (max-width: 860px) {
  :root {
    --bicial-header-icon-size: 30px;
    --navbar-icon-band-height: var(--bicial-header-icon-size);
  }

  .navbar {
    align-items: start;
  }

  .navbar--section-nav {
    align-items: center;
  }

  .navbar .nav-left,
  .navbar .nav-right {
    align-self: start;
    align-items: center;
    height: var(--navbar-icon-band-height);
    min-height: var(--navbar-icon-band-height);
    max-height: var(--navbar-icon-band-height);
  }

  .navbar .nav-left .navbar-brand-link {
    display: inline-flex;
    align-items: center;
    height: 100%;
    line-height: 1;
  }

  .navbar .search-bar {
    padding: 6px 10px;
  }
}

.comunitat-hub-quick-icons:not(.feed-page-quick-icons--header) {
    justify-content: center;
    gap: 16px;
}

.comunitat-hub-quick-icons--four:not(.feed-page-quick-icons--header) {
    justify-content: center;
    gap: 16px;
}

.comunitat-hub-quick-icons--four:not(.feed-page-quick-icons--header) .feed-page-quick-icon {
    flex: 0 1 auto;
}

@media (max-width: 860px) {
    .comunitat-hub-quick-icons--four:not(.feed-page-quick-icons--header) {
        gap: 8px;
    }
}

.comunitat-hub-quick-icons:not(.feed-page-quick-icons--header) .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;
  }
}