/* Quantum dark dashboard for advise (Daily Advice) and adviseadmin (Manage
   Matches) pages.

   NOTE: earlier versions of this file styled everything with var(--color-*)
   tokens that this theme never actually defines anywhere (bootscore-child
   only ships --background-color / --accent-color / etc. — see general.css),
   so every rule below silently fell back to browser defaults and rendered
   as a plain white page. This file now DEFINES a real --color-* palette on
   :root (gold-on-charcoal, matching the black/gold QW branding used by the
   nav and the Kelly/Wells modules) instead of only referencing tokens that
   don't exist. It's also loaded on [home-predictions] (via
   qbw_advise_enqueue_assets — see home-predictions.css), so keep both in
   sync when touching shared classes (.advise-table / .advise-badge / .advise-empty). */

:root {
  --color-bg: var(--gx-bg-gradient-bottom, #030616);
  --color-surface: var(--gx-surface-glass, rgba(255,255,255,0.05));
  --color-surface-alt: var(--gx-surface-chip, #283046);
  --color-text: var(--gx-text-body, #aab8c5);
  --color-text-muted: var(--gx-text-muted, #8391a2);
  --color-divider: var(--gx-surface-glass-border, rgba(229,243,255,0.07));

  --color-accent: var(--gx-primary, #6a11cb);
  --color-accent-100: var(--gx-primary-subtle, rgba(106,17,203,0.15));
  --color-accent-200: rgba(106,17,203,0.3);
  --color-accent-600: #5410a3;
  --color-accent-700: #3d0c7a;
  --color-accent-800: #2a0857;

  --color-neutral-200: var(--gx-surface-chip, rgba(255, 255, 255, 0.07));

  --color-success: var(--gx-success, #00c9a7);
  --color-success-bg: var(--gx-success-subtle, rgba(0,201,167,0.15));
  --color-success-border: rgba(0,201,167,0.35);
  --color-success-text: var(--gx-success, #00c9a7);

  --color-danger: var(--gx-danger, #e63946);
  --color-danger-bg: var(--gx-danger-subtle, rgba(230,57,70,0.15));
  --color-danger-border: rgba(230,57,70,0.35);
  --color-danger-text: var(--gx-danger, #e63946);

  --font-heading: 'Outfit', sans-serif;
  --font-heading-weight: 700;
  --shadow-sm: var(--gx-shadow-card, 2px 8px 16px 0 rgba(57,62,80,0.07));
  --radius-md: 2px;
}

#page {
  height: auto !important;
  min-height: 100% !important;
}

.advise-card,
.advise-table thead th,
.advise-table tbody tr,
.advise-daily-table th,
.advise-daily-table td {
  background: var(--color-surface);
}

.advise-card {
  position: relative;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px dashed var(--color-divider);
}

.advise-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), transparent 85%);
  opacity: 0.9;
}

/* Modifier for cards embedded inside another already-chromed panel (e.g. the
   [home] dashboard's "Prediction Performance" panel) — drops the accent line
   so it doesn't read as a nested panel-in-panel. */
.advise-card--no-accent::before {
  display: none;
}

/* Frosted-glass variant: translucent surface instead of a solid opaque
   background, for cards sitting on top of another panel's own background
   rather than directly on the page background. */
.advise-card--glass {
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.advise-card--glass .advise-card__header {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.advise-card__header {
  padding: 14px 18px;
  border-bottom: 1px dashed var(--color-divider);
  background: var(--color-surface-alt);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.advise-card__meta {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.advise-card__title {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.advise-card__title i {
  color: var(--color-accent);
  font-size: 1.05rem;
}

.advise-card__title-tipster {
  margin-left: 0.35rem;
}

.advise-card__body {
  padding: 1.25rem;
}

@keyframes advise-header-flash {
  0%, 100% { background: var(--color-surface-alt); }
  50% { background: var(--color-accent); }
}

.advise-card__header--flash {
  animation: advise-header-flash 0.6s ease-in-out 3;
}

/* Collapsible cards ([adviseadmin]'s Manage Tipsters): a <details> wrapping
   a <summary class="advise-card__header">. Flexing the summary (inherited
   from .advise-card__header) already suppresses the browser's default
   disclosure marker, so a chevron icon stands in for it instead. */
.advise-card--collapsible > summary.advise-card__header {
  cursor: pointer;
  list-style: none;
}

.advise-card--collapsible > summary.advise-card__header::-webkit-details-marker {
  display: none;
}

.advise-card__collapse-icon {
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.advise-card--collapsible[open] > summary.advise-card__header .advise-card__collapse-icon {
  transform: rotate(180deg);
}

/* Page header */
.page-title {
  color: var(--color-text);
  letter-spacing: 0.3px;
}

.advise-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-accent-200);
  background: var(--color-accent-100);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Tables */
.advise-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  color: var(--color-text);
}

.advise-table thead th {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding: 0.75rem 0.6rem;
  border-bottom: 1px solid var(--color-divider);
}

.advise-table tr {
  background-color: transparent !important;
}

.advise-table tbody tr {
  border-bottom: 1px solid var(--color-divider);
  transition: background 0.15s ease;
}

.advise-table tbody tr:hover {
  background: var(--color-surface-alt);
}

.advise-table td {
  padding: 0.75rem 0.6rem;
  vertical-align: middle;
  color: var(--color-text);
}

/* Without this, the bootscore theme's global `body { word-break: break-word }`
   (compiled into main.css — same root cause documented for #nav-main
   .nav-link in bootscore-child/style.css) splits any word that doesn't fit
   its column mid-character — "18/08/2026", "SuperLiga", "CONFIDENCE",
   "Gaetano", "CORRECT" — whenever the table is squeezed, e.g. on 1920x1080 at
   125%+ Windows display scaling. Applies table-wide: every column here holds
   short tokens (dates, names, badge labels) that should wrap at a space or
   not at all, never mid-word. */
.advise-table th,
.advise-table td {
  word-break: normal;
}

/* Date/Time (columns 1-2) are single atomic tokens with no space to wrap
   at, so they must never wrap at all. */
.advise-table td:nth-child(1),
.advise-table td:nth-child(2),
.advise-table th:nth-child(1),
.advise-table th:nth-child(2) {
  white-space: nowrap;
}

.advise-matches-wrap {
  overflow-x: auto;
  /* Lets the @container rule below react to this wrapper's own rendered
     width, not the viewport - correct even when it's squeezed by something
     viewport media queries can't see, like sharing a col-xl-6 half of the
     row with other panels (see home-shortcode.php) or Windows display
     scaling. */
  container-type: inline-size;
}

/* Intermediate breakpoint between the full 8-column desktop table and the
   single-column mobile card stack further below: once the table's actual
   available width drops under ~880px - e.g. the col-xl-6 half-column on the
   [home] page at typical laptop widths, or any width squeezed by Windows
   display scaling above 100% - 8 real columns can no longer fit without
   either the horizontal scroll or the word-breaking this file was patched
   for above. Switch to a compact two-column card instead. Gated to
   viewport >= 769px so it never fights the true small-phone single-column
   stack in the @media block below, which already owns anything narrower. */
@media (min-width: 769px) {
  @container (max-width: 880px) {
    .advise-table thead {
      display: none;
    }

    /* Match + Date read as the card header; League/Time, Prediction/
       Confidence and Status/Tipster follow as body rows. Reordered purely
       visually via grid-template-areas - the underlying <td> DOM order
       (Date, Time, League, Match, Prediction, Confidence, Tipster,
       Status/Outcome, set by home_predictions_render_matches_table() in
       home-predictions-shortcode.php) is untouched. */
    .advise-table tbody tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "match date"
        "league time"
        "prediction confidence"
        "status tipster";
      gap: 0.6rem 1rem;
      padding: 0.75rem 0.85rem;
      margin-bottom: 0.75rem;
      border: 1px solid var(--color-divider);
      border-radius: 2px;
      background: var(--color-surface);
    }

    .advise-table td {
      display: flex;
      flex-direction: column;
      padding: 0;
      border-bottom: 0;
      width: auto;
    }

    .advise-table td::before {
      content: attr(data-label);
      font-size: 0.62rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: 2px;
    }

    .advise-table td:nth-child(1) { grid-area: date; }
    .advise-table td:nth-child(2) { grid-area: time; }
    .advise-table td:nth-child(3) { grid-area: league; }
    .advise-table td:nth-child(4) { grid-area: match; }
    .advise-table td:nth-child(5) { grid-area: prediction; }
    .advise-table td:nth-child(6) { grid-area: confidence; }
    .advise-table td:nth-child(7) { grid-area: tipster; }
    .advise-table td:nth-child(8) { grid-area: status; }

    /* Header row treatment: bigger match text, separated from the body
       rows by a rule under both header cells (same grid row => same
       height => the two borders line up into one continuous rule). */
    .advise-table td:nth-child(1),
    .advise-table td:nth-child(4) {
      padding-bottom: 0.6rem;
      margin-bottom: 0.15rem;
      border-bottom: 1px solid var(--color-divider);
    }

    .advise-table td:nth-child(4) {
      font-size: 1rem;
    }
  }
}

/* Status / outcome badges */
.advise-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 84px;
  padding: 0.3rem 0.7rem;
  border-radius: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
}

.advise-badge--wait {
  background: var(--color-neutral-200);
  border-color: var(--color-divider);
  color: var(--color-text-muted);
}

.advise-badge--win {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

.advise-badge--lose {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

.advise-badge--cancelled {
  background: var(--color-neutral-200);
  border-color: var(--color-divider);
  color: var(--color-text-muted);
}

.advise-log-snapshot {
  margin-top: 0.4rem;
  font-size: 0.8rem;
}

.advise-log-snapshot code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--color-neutral-200);
  border-radius: 0.35rem;
  padding: 0.4rem 0.5rem;
  margin-top: 0.15rem;
}

.advise-alert {
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
  border-radius: 2px;
  border: 1px solid transparent;
}

.advise-alert--success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

.advise-alert--error {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

/* Tipster filter bar */
.advise-tipster-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.advise-tipster-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--color-divider);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.advise-tipster-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
  transform: translateY(-1px);
  box-shadow: 0 0 8px 1px var(--color-accent), 0 0 16px 2px var(--color-accent-200);
}

.advise-tipster-chip.is-active {
  border-color: var(--color-accent);
  /* background: var(--color-accent-100); */
  color: white;
  box-shadow: 0 0 10px 2px var(--color-accent), 0 0 22px 6px var(--color-accent-200);
}

.advise-tipster-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
/*   background: var(--color-neutral-200);
  border: 1px solid var(--color-divider); */
  font-size: 0.85rem;
}

.advise-tipster-chip.is-active .advise-tipster-avatar {
  /* border-color: var(--color-accent); */
}

.advise-tipster-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.advise-tipster-avatar--all {
  /* color: var(--color-accent); */
  font-size: 1rem;
}

.advise-tipster-avatar--fallback {
  color: var(--color-text-muted);
  font-weight: 700;
}

/* Non-admin "locked to your own picks" indicator (replaces the tipster bar) */
.advise-tipster-scope {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.advise-tipster-scope__label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Tipster badge used inside table cells */
.advise-tipster-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--color-text);
}

.advise-tipster-badge .advise-tipster-avatar {
  width: 26px;
  height: 26px;
}

.advise-tipster-badge--unknown {
  color: var(--color-text-muted);
  font-style: italic;
}

.advise-tipster-badge--hidden {
  color: var(--color-text-muted);
}

.advise-tipster-badge--hidden .advise-tipster-avatar--fallback {
  color: var(--color-text-muted);
}

/* Collapsible "show first 10, then expand" match tables (used on
   [home-predictions]; see the [data-action="toggle-matches"] handler in
   home-predictions.js). Hides rows past the 10th while collapsed — works
   the same whether the table is in its normal desktop layout or the
   stacked mobile layout below, since both still render actual <tr> rows. */
.advise-matches-wrap.is-collapsed table tbody tr:nth-child(n+11) {
  display: none;
}

.advise-matches-more {
  display: flex;
  justify-content: center;
  padding-top: 0.85rem;
}

/* Manage Tipsters panel (admin-only, on adviseadmin) */
.advise-subheading {
  margin: 1.5rem 0 1rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: var(--font-heading-weight);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.advise-divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: 1.5rem 0 0;
}

.advise-tipster-manage-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.advise-tipster-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-divider);
  border-radius: 2px;
}

.advise-tipster-row__avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-neutral-200);
  border: 1px solid var(--color-divider);
}

.advise-tipster-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.advise-tipster-row__fields {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex: 1 1 320px;
}

.advise-tipster-row__fields .advise-form-control {
  width: auto;
  flex: 1 1 140px;
}

.advise-tipster-row__username {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.advise-tipster-row__toggles {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex-shrink: 0;
}

.advise-tipster-row__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.advise-tipster-row__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

.advise-button--danger {
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.advise-button--danger:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

.advise-admin-form {
  display: grid;
  gap: 1.25rem;
}

.advise-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.25rem;
}

.advise-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.advise-form-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.advise-form-control {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.advise-form-control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-100);
}

/* Browser autofill forces its own background that background-color can't
   override — without this, autofilled/suggested fields (e.g. League, Match)
   render dark text on a white box that clashes with the dark theme. */
.advise-form-control:-webkit-autofill,
.advise-form-control:-webkit-autofill:hover,
.advise-form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface-alt) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text);
  transition: background-color 5000s ease-in-out 0s;
}

/* Searchable <select> widget (adviseadmin-search-select.js) — the native
   select is kept in the DOM (visually hidden, still posts its value on
   submit) behind a text input + filterable dropdown panel. */
.advise-select-wrap {
  position: relative;
}

.advise-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.advise-select-input {
  width: 100%;
  cursor: text;
}

.advise-select-panel {
  /* position: fixed (not absolute), with top/left/width set in JS from the
     input's getBoundingClientRect() — .advise-card has overflow: hidden for
     its rounded corners/accent line, which would otherwise clip an
     absolutely-positioned panel taller than the remaining card space. */
  display: none;
  position: fixed;
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  padding: 0.35rem;
}

.advise-select-panel.is-open {
  display: block;
}

.advise-select-group-label {
  padding: 0.4rem 0.6rem 0.2rem;
  font-size: 0.68rem;
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.advise-select-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--color-text);
  font-size: 0.9rem;
  cursor: pointer;
}

.advise-select-option:hover,
.advise-select-option:focus {
  background: var(--color-accent-100);
  color: var(--color-accent);
}

.advise-select-option.is-selected {
  color: var(--color-accent);
  font-weight: 700;
}

.advise-select-empty {
  padding: 0.5rem 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.advise-form-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.advise-filter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.advise-filter__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.25rem;
}

.advise-filter__group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.advise-filter__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.advise-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  background: var(--color-surface-alt);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  text-decoration: none;
}

.advise-button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}

.advise-button--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

.advise-button--primary:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: #ffffff;
}

.advise-button--ghost {
  padding: 0.4rem 0.9rem;
  background: transparent;
}

.advise-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.25rem 1.25rem;
  color: var(--color-text-muted);
  text-align: center;
}

.advise-empty i {
  font-size: 1.6rem;
  color: var(--color-accent);
  opacity: 0.85;
}

.advise-stats {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Accuracy ring (Overall Stats) */
.advise-stats--donut {
  grid-template-columns: auto 1fr;
  align-items: center;
}

/* Period card with the daily breakdown table omitted (e.g. [home] dashboard) */
.advise-stats--single-col {
  grid-template-columns: 1fr;
}

.advise-donut__value {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--font-heading-weight);
  fill: var(--color-text);
}

.advise-donut__label {
  font-size: 9px;
  letter-spacing: 1px;
  fill: var(--color-text-muted);
}

.advise-statlist {
  display: grid;
  gap: 0.6rem;
}

.advise-statlist__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--color-text);
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--color-divider);
}

.advise-statlist__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.advise-statlist__item span:last-child {
  font-weight: 800;
  color: var(--color-accent);
}

.advise-daily-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.advise-daily-table th,
.advise-daily-table td {
  padding: 0.65rem;
  text-align: center;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text);
}

.advise-daily-table thead th {
  background: var(--color-surface-alt);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .advise-card__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .advise-table,
  .advise-daily-table {
    font-size: 0.85rem;
  }

  .advise-donut {
    width: 100px;
    height: 100px;
  }

  .advise-stats--donut {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .advise-table thead {
    display: none;
  }

  .advise-table tbody tr {
    display: block;
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-divider);
    border-radius: 2px;
    background: var(--color-surface);
  }

  .advise-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-divider);
    width: 100%;
  }

  .advise-table td:last-child {
    border-bottom: 0;
  }

  .advise-table td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-right: 1rem;
    flex: 0 0 120px;
  }

  .advise-table td > *:last-child {
    margin-left: auto;
  }

  .advise-form-grid {
    grid-template-columns: 1fr;
  }

  .advise-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .advise-button {
    width: 100%;
    justify-content: center;
  }

  .advise-filter__fields {
    grid-template-columns: 1fr;
  }

  .advise-filter__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .advise-tipster-bar {
    gap: 0.45rem;
    padding: 0.75rem;
  }

  .advise-tipster-name {
    display: none;
  }

  .advise-tipster-chip {
    padding: 0.3rem;
  }

  .advise-tipster-chip.is-active {
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
  }

  .advise-tipster-chip.is-active .advise-tipster-name {
    display: inline;
  }

  .advise-tipster-row {
    flex-direction: column;
    align-items: stretch;
  }

  .advise-tipster-row__avatar {
    align-self: center;
  }

  .advise-tipster-row__toggles {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .advise-tipster-row__actions {
    margin-left: 0;
    justify-content: stretch;
  }

  .advise-tipster-row__actions .advise-button {
    flex: 1;
  }
}