/* match-card.css — styles CSVE organisés par responsabilité. */

.match-card {
  border-left: 1px solid var(--surface-content-border);
  background-color: var(--surface-content);
  background-image: var(--surface-content-image);
}

.events > .card.detail.match-card:not(.agenda-event-row) {
  position: relative;
  overflow: hidden;
  color: var(--event-content-primary);
  font: inherit;
  font-family: var(--font-ui);
  appearance: none;
  -webkit-appearance: none;
  -webkit-text-fill-color: currentColor;
  container-type: inline-size;
  border-left-width: 1px;
  border-radius: 16px;
  border-color: var(--surface-content-border);
  background-color: var(--surface-content);
  background-image: var(--surface-content-image);
  box-shadow: var(--surface-content-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.events > .card.detail.match-card:not(.agenda-event-row)::after {
  display: none;
}

.events > .card.detail.match-card .title,
.events > .card.detail.match-card .meta,
.events > .card.detail.match-card .coach-summary {
  position: relative;
  z-index: 1;
}

.events > .card.detail.match-card .home-match-meeting .event-line-text {
  font-family: var(--font-ui);
}

.events > .card.detail.match-card .event-line-text {
  display: inline-block;
  position: relative;
}

.events > .card.detail.match-card .event-line-icon {
  position: absolute;
  right: 100%;
  margin-right: .25rem;
}

.events > .card.detail.match-card .home-match-logistics,
.events > .card.detail.match-card .home-match-logistics .event-line-text {
  font-family: var(--font-ui);
  font-size: .76rem;
  font-weight: 500;
}

.match-badge {
  background: var(--soft);
  color: var(--deep);
}

.match-score-details { position: fixed; inset: 0; z-index: 1210; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); isolation: isolate; }

.match-score-details[hidden] { display: none; }

#app:has(.match-score-details:not([hidden])) { z-index: 1210; }
body:has(#app .match-score-details:not([hidden])) > .bottom { z-index: 1211; }

.match-score-details-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 24rem);
  max-height: min(80dvh, 32rem, calc(100dvh - max(1rem, env(safe-area-inset-top, 0px)) - max(1rem, env(safe-area-inset-bottom, 0px))));
  overflow: auto;
  padding: 1.1rem;
  border: 1px solid #87998c;
  border-radius: 18px;
  background-color: #f5f2ea;
  background-image:
    linear-gradient(132deg, rgba(41, 76, 59, .08) 0 29%, transparent 29% 64%, rgba(255, 255, 255, .5) 64% 82%, transparent 82%),
    linear-gradient(42deg, transparent 0 48%, rgba(41, 76, 59, .055) 48% 67%, transparent 67%);
  color: #252a27;
  box-shadow: 0 18px 38px rgba(4, 35, 27, .18);
}

@media (max-width: 1023px) {
  .match-score-details {
    padding-bottom: max(1rem, var(--bottom-nav-space));
  }

  .match-score-details-panel {
    max-height: min(80dvh, 32rem, calc(100dvh - max(1rem, env(safe-area-inset-top, 0px)) - max(1rem, var(--bottom-nav-space))));
  }
}

.match-score-details:not([hidden]) .match-score-details-panel { animation: match-score-pop-in .24s cubic-bezier(.22,.72,.22,1) both; }

@media (prefers-reduced-motion: reduce) {
  .match-score-details:not([hidden]) .match-score-details-panel { animation: none; }
}

.match-score-details-panel h2 { margin: .2rem 3rem 1rem 0; color: #252a27; font-size: 1rem; line-height: 1.3; text-transform: uppercase; }

.match-score-details-panel > .eyebrow { color: #5f6c61; }

.match-score-details-panel ul { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }

.match-score-details-panel li { display: flex; align-items: flex-start; gap: .3rem; min-height: 42px; padding: .35rem .5rem; border: 1px solid #d7ddd4; border-radius: 10px; background: #fffdf7; }

.match-score-details-panel li > span { flex: 0 0 auto; font-size: .95rem; line-height: 1.2; }

.match-score-details-panel li div { display: grid; gap: .1rem; min-width: 0; }

.match-score-details-panel li strong { min-width: 0; color: #252a27; font-size: .85rem; line-height: 1.2; overflow-wrap: anywhere; }

.match-score-details-panel li small { color: #5f6c61; font-size: .72rem; line-height: 1.2; overflow-wrap: anywhere; }

.match-score-details-panel .match-result-close {
  top: .55rem;
  right: .55rem;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #d7ddd4;
  background: #e9ede7;
  color: #294c3b;
}

.match-score-details-panel .match-result-close:focus-visible {
  outline: 2px solid #294c3b;
  outline-offset: 2px;
}

#app:has(.match-result-modal) { z-index: 1200; }

.match-result-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); }

.match-result-backdrop { position: absolute; inset: 0; border: 0; background: rgba(4, 35, 27, .46); }

.match-score-details .match-result-backdrop,
.match-score-details .match-result-backdrop:hover,
.match-score-details .match-result-backdrop:focus,
.match-score-details .match-result-backdrop:active {
  background: transparent;
  z-index: 0;
  pointer-events: auto;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.match-result-panel {
  --match-form-bg: #f5f2ea;
  --match-form-field: #fffdf7;
  --match-form-ink: #252a27;
  --match-form-muted: #5f6c61;
  --match-form-border: #c8d0c7;
  --match-form-border-strong: #87998c;
  --match-form-action: #294c3b;
  --match-form-action-ink: #f7f3e8;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 32rem);
  max-height: min(92dvh, 48rem, calc(100dvh - max(1rem, env(safe-area-inset-top, 0px)) - max(1rem, env(safe-area-inset-bottom, 0px))));
  overflow: hidden;
  padding: 1.1rem;
  border: 1px solid var(--match-form-border-strong);
  border-radius: 20px;
  background-color: var(--match-form-bg);
  background-image:
    linear-gradient(143deg, rgba(77, 116, 91, .08) 0 22%, transparent 22% 66%, rgba(77, 116, 91, .055) 66% 100%),
    linear-gradient(32deg, transparent 0 56%, rgba(255, 255, 255, .5) 56% 72%, transparent 72%);
  color: var(--match-form-ink);
  box-shadow: 0 4px 14px rgba(49, 58, 51, .12);
}

.match-result-panel form {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 4.5rem;
  padding: .1rem .1rem 0;
}

.match-result-close { position: absolute; top: .65rem; right: .65rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--paper-strong); color: var(--deep); font-size: 1.25rem; line-height: 1; cursor: pointer; }

.match-result-panel > .eyebrow { color: var(--match-form-muted); }
.match-result-panel h2 { margin: .1rem 2.4rem .9rem 0; color: var(--match-form-ink); text-transform: uppercase; }
.match-result-panel .match-result-close { min-width: 44px; min-height: 44px; border: 1px solid var(--match-form-border); background: #e9ede7; color: var(--match-form-action); }

.match-result-panel > h2 { display: none; }

.match-result-field { display: grid; gap: .16rem; margin-top: .3rem; }

.match-result-field span { color: var(--match-form-muted); font-size: .6rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; }

.match-result-panel select,
.match-result-panel input { width: 100%; min-height: 36px; appearance: none; border: 1px solid var(--match-form-border); border-radius: 8px; background: var(--match-form-field); color: var(--match-form-ink); color-scheme: light; font: inherit; padding: .3rem .45rem; }

.match-result-panel select { min-height: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--match-form-muted) 50%), linear-gradient(135deg, var(--match-form-muted) 50%, transparent 50%); background-position: calc(100% - .75rem) .95rem, calc(100% - .53rem) .95rem; background-size: .22rem .22rem, .22rem .22rem; background-repeat: no-repeat; padding: .3rem 1.45rem .3rem .45rem; }

.match-result-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: .65rem; margin: .25rem 0 .15rem; }

.match-result-score label { display: grid; justify-items: center; gap: .35rem; min-width: 0; color: var(--match-form-ink); font-size: .78rem; font-weight: 800; text-align: center; text-transform: uppercase; }

.match-result-score input { width: 3rem; min-height: 3rem; padding: .2rem; text-align: center; font-size: 1.35rem; font-weight: 900; }

.match-result-score > b { padding-bottom: .75rem; color: var(--match-form-muted); font-size: 1.2rem; }

.match-goal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .4rem; margin-top: .35rem; padding: .35rem .45rem .4rem; border: 1px solid rgba(31, 93, 61, .1); border-radius: 10px; background: var(--match-form-field); }

.match-goal > b { grid-column: 1 / -1; color: var(--match-form-ink); font-size: .6rem; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }

.match-result-panel .actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 1rem -.1rem 0;
  padding: .65rem .1rem .1rem;
  background: linear-gradient(180deg, transparent, var(--match-form-bg) 28%);
}

.match-result-panel .actions .primary { width: 100%; min-height: max(44px, 2.8rem); border-color: var(--match-form-action); border-radius: 12px; background: var(--match-form-action); color: var(--match-form-action-ink); }

.match-result-panel :is(input, select, button):focus-visible { outline: 2px solid var(--match-form-action); outline-offset: 2px; }

@media (max-width: 440px) {
  .match-result-modal { padding-inline: max(.65rem, env(safe-area-inset-left, 0px)) max(.65rem, env(safe-area-inset-right, 0px)); }
  .match-result-panel { padding: .95rem; border-radius: 18px; }
  .match-result-score { gap: .45rem; }
  .match-result-score label { font-size: .65rem; }
}

@media (max-width: 359px) {
  .match-goal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .match-goal > b { grid-column: 1 / -1; }
}

.events > .card.detail.match-card > .title {
  display: block;
  text-align: center;
}

.events > .card.detail.match-card > .title > .status {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: .2rem .38rem;
  border-radius: 999px;
  font-size: .61rem;
  line-height: 1.1;
  white-space: nowrap;
}

.events > .card.detail.match-card > .title > .status.published {
  background: var(--soft);
  color: var(--green);
}

.events > .card.detail.match-card > .title > div {
  width: 100%;
}

.events > .card.detail.match-card > .title {
  position: static;
}

.coach-match-panel .coach-panel-date,
.coach-match-panel .coach-panel-teams > strong,
.coach-match-panel .coach-panel-teams > div > b,
.coach-match-panel .coach-panel-teams > div > span,
.coach-match-panel .home-match-meeting .event-line-text {
  font-family: var(--font-ui);
}

.coach-match-panel .coach-panel-date,
.coach-match-panel .coach-panel-teams > strong,
.coach-match-panel .coach-panel-teams > div > b {
  color: var(--composition-ink, var(--ink));
}

.coach-match-panel .coach-panel-teams > div > span {
  color: var(--composition-muted, var(--muted));
}