/* =====================================================================
   ScoutMe web app: one look. Loaded last, after the older layers.
   - one palette: navy surfaces, ScoutMe blue, sky; red only for errors
   - one font (Inter) with one type scale; nothing below 12px
   - quiet labels without coloured dots; white text and icons on coloured circles
   - feed posts laid out like chat messages (face beside a bubble, name in that person's colour)
   - states: focus ring, hover, pressed, disabled; long names end in an ellipsis; numbers keep their width
   ===================================================================== */

:root .product-app {
  --brand: #2468eb; --brand-strong: #1f5bd0; --sky: #4fb0e8; --sky-soft: #a5ceff;
  --bubble: #16253a; --bubble-line: #22354d;
  /* "Needs your attention" was amber/brown; it is a deeper blue from the same family now. */
  --amber-500: #2f5a92;
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Type: one family, one scale -------------------------------------- */
.product-app, .product-app :is(h1, h2, h3, h4, h5, h6, .logo, button, input, select, textarea) { font-family: var(--font-body); }
.product-app :is(h1, h2, h3, h4) { font-weight: 700; letter-spacing: -.015em; }
.product-app :is(b, strong) { font-weight: 600; }
.product-app :is(small, .small, summary) { font-size: 13px; }
.product-app :is(.badge, .count, .moment-tag, .self-profile-link, .delta, .post-age, .media-chips span, .contact-status, .account-pill, th, .kpi span, .chat-sub) { font-size: 12px; }
.product-app th { letter-spacing: .02em; }

/* ---- Numbers that change while you look keep their width ---------------- */
.product-app :is(.kpi b, .count, .badge, .post-age, .react b, [data-video-views], .ig-stats b, .media-time, .shell-nav .count, td) { font-variant-numeric: tabular-nums; }

/* ---- Circles: white initials and white icons ---------------------------- */
.product-app .avatar { color: #fff !important; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.product-app .avatar.sm { font-size: 12px; }
.product-app .kpi .ic, .product-app .role-card .ic { border-radius: 50% !important; background: var(--brand) !important; color: #fff !important; }
/* Something waiting for you is still blue, with a soft ring instead of brown. */
.product-app .kpi .ic.amber { box-shadow: 0 0 0 4px #2468eb38; }
.product-app .verified-tick { background: var(--brand) !important; color: #fff !important; }

/* ---- Labels: quiet, no dots, palette colours only ----------------------- */
:root .product-app :is(.badge, .contact-status, .hero-tags > span) {
  display: inline-flex !important; align-items: center; gap: 6px; height: 24px; padding: 0 10px !important;
  border: 1px solid var(--line) !important; border-radius: 999px !important; background: transparent !important;
  color: var(--ink-2) !important; font-weight: 600 !important; line-height: 1; letter-spacing: 0; white-space: nowrap;
}
:root .product-app :is(.badge.blue, .badge.green, .contact-status.is-open) { border-color: #2c4f7c !important; color: var(--sky-soft) !important; }
:root .product-app :is(.badge.amber, .badge.violet) { color: var(--muted) !important; }
:root .product-app :is(.badge.red, .contact-status.is-warn) { border-color: #5c2a36 !important; color: #ffb4ba !important; }
.product-app :is(.badge .dot, .contact-status i, .contact-status::before, .account-dot) { display: none !important; }

/* ---- Brown and amber accents become palette blue ------------------------ */
:root .product-app .alert.warn { background: #15284a !important; border-color: #2c4f7c !important; color: var(--ink) !important; }
:root .product-app .alert.warn svg { color: var(--sky-soft); }
:root .product-app :is(.card.attention, .card.needs-review, .admin-attention) { border-color: #2c4f7c !important; }
:root .product-app .btn-success { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
:root .product-app .btn-success:hover { background: var(--brand-strong) !important; }

/* ---- States --------------------------------------------------------------- */
.product-app :is(a, button, [role=button], input, select, textarea, summary):focus-visible { outline: 2px solid var(--sky-soft); outline-offset: 2px; }
.product-app :is(.btn, .chip, .react, .follow-chip, .scout-chip, .share-chip):active:not(:disabled) { transform: translateY(1px); }
.product-app :is(.btn, button, .chip):disabled, .product-app .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.product-app .btn.is-loading, .product-app button[aria-busy=true] { cursor: progress; opacity: .8; }

/* ---- Posting: type first, then the video, then Post or Highlight with its rule in plain words ---- */
.product-app .composer { display: grid; gap: 14px; }
.product-app .composer .textarea { min-height: 112px; font-size: 16px; line-height: 1.5; resize: vertical; }
.product-app .compose-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.product-app .compose-kind-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; }
.product-app .compose-kind-btn svg { width: 18px; height: 18px; }
.product-app .compose-kind-btn:hover { color: var(--ink); }
.product-app .compose-kind-btn.on { background: var(--brand); color: #fff; }
.product-app .compose-hint { margin: -4px 2px 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.product-app .composer.is-dragging { outline: 2px dashed var(--sky-300); outline-offset: 6px; border-radius: 14px; }
.product-app .composer.is-dragging .compose-drop { border-color: var(--sky-300); background: var(--sky-50); }

/* ---- Speler van de maand: the announced player in palette blue (no olive or brown) ---- */
:root .product-app .potm-entry.winner { background: #15284a !important; border: 1px solid #2c4f7c !important; color: var(--ink) !important; }
:root .product-app .potm-entry.winner b { color: #fff; }
:root .product-app .potm-card, :root .product-app .potm-card.has-voted { background: var(--surface) !important; border-color: var(--line) !important; }
/* ---- Speler van de maand: Beheer picks a player ------------------------------ */
.product-app .potm-results { display: grid; gap: 6px; margin-top: 8px; }
.product-app .potm-results .list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.product-app .potm-results .list-item:hover { border-color: var(--sky-300); background: var(--sky-50); }
.product-app .potm-results .list-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Long names never push things off screen ---------------------------- */
.product-app :is(.chat-name, .chat-sub, .conv .txt b, .conv .txt span, .post-who b, .post-who span, .verify-who b, .account-name, .self-identity b) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   Feed posts as chat messages
   ===================================================================== */
:root .product-app .post.chat-post {
  padding: 0 !important; margin: 0 !important; width: 100% !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; overflow: visible !important; color: var(--ink);
}
.product-app .chat-post :is(.pinned-label, .repost-attribution) { display: flex; align-items: center; gap: 6px; margin: 0 0 6px 50px; font-size: 12px; font-weight: 600; color: var(--muted); }
.product-app .chat-post .pinned-label svg { width: 13px; height: 13px; fill: currentColor; }
.product-app .chat-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; }
.product-app .chat-face { padding-top: 2px; }
.product-app .chat-face .avatar { width: 40px; height: 40px; font-size: 14px; }

.product-app .chat-bubble {
  position: relative; justify-self: start; width: fit-content; min-width: min(100%, 300px); max-width: 100%;
  padding: 8px 12px 4px; background: var(--bubble); border: 1px solid var(--bubble-line); border-radius: 4px 16px 16px 16px;
}
/* The little tail at the top left, pointing at the face. */
.product-app .chat-bubble::before { content: ''; position: absolute; top: -1px; left: -9px; width: 10px; height: 13px; background: var(--bubble-line); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.product-app .chat-bubble::after { content: ''; position: absolute; top: 0; left: -7px; width: 8px; height: 11px; background: var(--bubble); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.product-app .post-pinned .chat-bubble { border-color: #2c4f7c; }
.product-app .post-pinned .chat-bubble::before { background: #2c4f7c; }

/* Name on top, position and club underneath, buttons on the right. */
.product-app .chat-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-width: 0; margin-bottom: 6px; }
.product-app .chat-head > a, .product-app .chat-head > button { grid-column: 1; grid-row: 1; min-width: 0; max-width: 100%; color: inherit; text-decoration: none; }
.product-app .chat-name { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 14px; line-height: 1.35; color: color-mix(in srgb, var(--author, var(--brand)) 40%, #ffffff); }
.product-app .chat-sub { grid-column: 1; grid-row: 2; line-height: 1.35; color: var(--muted); }
.product-app .chat-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 6px; }
.product-app .chat-actions :is(.follow-chip, .scout-chip) { min-height: 30px !important; padding: 0 12px !important; font-size: 12px !important; }
.product-app .chat-actions .post-del { width: 32px; height: 32px; margin: 0; }

.product-app .chat-bubble .post-body { margin: 2px 0 2px; font-size: 15px; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.product-app .chat-bubble .post-match-label { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.product-app .chat-bubble .vac-link { margin-top: 8px; border-radius: 12px; }
.product-app .chat-bubble .post-a { margin: 4px -6px 0; }
.product-app .chat-bubble .post-age { margin-left: auto; color: var(--muted); }

/* A video message: the clip fills the bubble with a thin frame, like a photo in a chat. */
.product-app .chat-post.post-media .chat-bubble { width: min(100%, max(280px, calc((100svh - 240px) * var(--ratio, .8)))); padding: 4px 4px 2px; }
.product-app .chat-post.post-media .chat-head { padding: 4px 8px 2px; }
.product-app .chat-post .media-stage { position: relative; display: block; width: 100%; aspect-ratio: var(--ratio, .8); max-height: calc(100svh - 170px); border-radius: 12px; overflow: hidden; background: #0b1523; }
.product-app .chat-post .media-foot { padding: 8px 8px 2px; }
.product-app .chat-post .media-caption { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.product-app .chat-post .media-foot .react { color: var(--ink); }

@media (max-width: 540px) {
  .product-app .chat-row { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
  .product-app .chat-face .avatar { width: 32px; height: 32px; font-size: 12px; }
  .product-app .chat-post :is(.pinned-label, .repost-attribution) { margin-left: 40px; }
  .product-app .chat-bubble { min-width: 0; }
  .product-app .chat-post.post-media .chat-bubble { width: 100%; }
  .product-app .chat-post .media-stage { max-height: none; }
}

.product-app .chat-head > .post-author { grid-column: 1; grid-row: 1; }
.product-app .chat-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.product-app .chat-name .seal { flex-shrink: 0; }
.product-app .chat-bubble .post-photo { width: min(100%, 480px); max-height: 72vh; object-fit: contain; object-position: left; border-radius: 6px; }
.product-app :is(.feed-filter-short, .feed-contest-link) { display: none; }

@media (max-width: 760px) {
  :root .product-app .feed-filter-row .seg { gap: clamp(8px, 3vw, 22px); }
  .product-app #feedContest { scroll-margin-top: 76px; }
  .product-app .feed-contest-link {
    display: block; justify-self: start; min-height: 44px; padding: 0 6px;
    border: 0; background: transparent; color: var(--feed-accent);
    font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
  }
}

@media (max-width: 460px) {
  :root .product-app .feed-filter-row .seg button { font-size: 13px; }
  .product-app .feed-filter-long { display: none; }
  .product-app .feed-filter-short { display: inline; }
}
.product-app .compose-preview img { max-width: 100%; max-height: 44vh; object-fit: contain; }

/* What's new pop-up: a short list with a blue dot per line. */
.product-app .whats-new { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.product-app .whats-new li { position: relative; padding-left: 20px; line-height: 1.45; }
.product-app .whats-new li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand, #1f5fd6); }