/* Fixture congestion (assets/rest-days.js): a day-by-day calendar per club.
   Inside the studio layer, with !important where kft-matchroom.css forces its
   own button and table looks (see assets/kft-controls.css). */
@layer kft-studio {
  #restDays {
    --rest-club: 156px;
    --rest-day: 38px;
    --rest-row: 36px;
    /* Solid steps, so each band reads on its own: red (1–2 days), amber (3), green (4, 5+). */
    --rest-r1: #b8323f;
    --rest-r2: #8f3a3f;
    --rest-r3: #8a6a2c;
    --rest-r4: #2f6b4c;
    --rest-r5: #1f8a5b;
    max-width: 1180px;
    margin: 0 auto;
    font-family: var(--kft-body, Manrope, sans-serif);
    font-variant-numeric: tabular-nums;
  }
  #restDays .kft-rest-controls { margin-bottom: 14px; }
  #restDays .kft-rest-controls .kft-field { flex: 1 1 160px !important; min-width: 0 !important; max-width: 240px; }

  #restDays .kft-rest-caption { margin: 0 0 10px !important; }
  #restDays .kft-rest-wrap {
    overflow-x: auto;
    border: 1px solid var(--kft-match-line, #313736);
    border-radius: 12px;
    background: var(--kft-stand, #191c1c);
  }
  #restDays .kft-rest-grid { display: grid; min-width: max-content; }
  #restDays .kft-rest-row {
    display: grid;
    align-items: center;
    min-height: var(--rest-row);
    border-top: 1px solid var(--kft-match-line, #313736);
  }
  #restDays .kft-rest-row > * { grid-row: 1; }
  #restDays .kft-rest-row.is-bands, #restDays .kft-rest-row.is-days { border-top: 0; background: var(--kft-night, #111313); }
  #restDays .kft-rest-row.is-bands { min-height: 32px; padding-top: 6px; }
  #restDays .kft-rest-row.is-days { min-height: 40px; }

  /* The club column stays put while the days scroll. */
  #restDays .kft-rest-club, #restDays .kft-rest-corner {
    grid-column: 1;
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    min-height: inherit;
    padding: 0 10px 0 12px;
    background: var(--kft-stand, #191c1c);
    border-right: 1px solid var(--kft-match-line, #313736);
  }
  #restDays .kft-rest-corner { background: var(--kft-night, #111313); color: var(--kft-muted-strong, #c4cbc6); font: 700 10px/1.2 var(--kft-data, 'Cascadia Mono', Consolas, monospace); letter-spacing: 0.065em; text-transform: uppercase; }
  #restDays .kft-rest-kit { display: inline-flex; flex: 0 0 22px; }
  #restDays .kft-rest-kit svg { display: block; width: 22px; height: auto; }
  #restDays .kft-rest-club-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kft-floodlight, #f0f1ed); font: 650 13px/1.3 var(--kft-body, Manrope, sans-serif); letter-spacing: -0.01em; }
  #restDays .kft-rest-club.is-mine { box-shadow: inset 3px 0 0 #e36169; }
  #restDays .kft-rest-mine {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e36169;
    color: #111313;
    font-size: 11px;
    font-weight: 800;
  }

  #restDays .kft-rest-band {
    align-self: stretch;
    display: grid;
    place-items: center;
    margin: 0 1px;
    border-radius: 6px 6px 0 0;
    background: var(--kft-panel, #202323);
    border: 1px solid var(--kft-match-line-strong, #444c49);
    border-bottom: 0;
    color: var(--kft-floodlight, #f0f1ed);
    font: 700 12px/1.2 var(--kft-data, 'Cascadia Mono', Consolas, monospace);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  #restDays .kft-rest-day { display: grid; justify-items: center; gap: 2px; color: var(--kft-muted, #adb3af); font: 700 9px/1.1 var(--kft-data, 'Cascadia Mono', Consolas, monospace); letter-spacing: 0.06em; text-transform: uppercase; }
  #restDays .kft-rest-day b { color: var(--kft-floodlight, #f0f1ed); font: 700 13px/1.1 var(--kft-body, Manrope, sans-serif); letter-spacing: 0; }
  #restDays .kft-rest-day.is-weekend { color: var(--kft-muted-strong, #c4cbc6); }
  #restDays .kft-rest-day.is-today b { color: #e36169; }

  /* A match on its day: league in near-black, cups and Europe in grey. */
  #restDays .kft-rest-match, #restDays .kft-rest-bar {
    appearance: none;
    height: 26px !important;
    min-height: 0 !important;
    margin: 0 1px !important;
    padding: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    transform: none !important;
    font: 700 11px/26px var(--kft-body, Manrope, sans-serif) !important;
    text-align: center;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
  }
  /* Matches are links to a Google search: drawn as chips, not as text links. */
  #restDays .kft-rest-match { display: block; text-decoration: none !important; background: #0a0c0c !important; border: 1px solid var(--kft-match-line-strong, #444c49) !important; color: var(--kft-floodlight, #f0f1ed) !important; z-index: 1; }
  #restDays .kft-rest-match:hover { border-color: var(--kft-floodlight, #f0f1ed) !important; }
  #restDays .kft-rest-match.is-cup { background: #5a625f !important; border-color: #6c7572 !important; color: #f0f1ed !important; }
  #restDays .kft-rest-bar { border: 0 !important; color: var(--kft-floodlight, #f0f1ed) !important; font-weight: 600 !important; }
  #restDays .kft-rest-bar.is-r1 { background: var(--rest-r1) !important; }
  #restDays .kft-rest-bar.is-r2 { background: var(--rest-r2) !important; }
  #restDays .kft-rest-bar.is-r3 { background: var(--rest-r3) !important; }
  #restDays .kft-rest-bar.is-r4 { background: var(--rest-r4) !important; }
  #restDays .kft-rest-bar.is-r5 { background: var(--rest-r5) !important; }
  #restDays .kft-rest-todaycol { align-self: stretch; margin: 0 4px; border-radius: 3px; background: rgba(227, 97, 105, 0.12); box-shadow: inset 0 0 0 1px rgba(227, 97, 105, 0.35); }
  #restDays .kft-rest-row:not(.is-bands):not(.is-days):hover { background: rgba(240, 241, 237, 0.03); }
  #restDays .kft-rest-row:not(.is-bands):not(.is-days):hover .kft-rest-club { background: var(--kft-panel, #202323); }
  #restDays .is-picked { outline: 2px solid #e36169 !important; outline-offset: 1px; }
  #restDays .kft-rest-match:focus-visible, #restDays .kft-rest-bar:focus-visible { outline: 2px solid #e36169 !important; outline-offset: 2px; }

  #restDays .kft-rest-detail {
    min-height: 44px;
    margin: 10px 0 0 !important;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--kft-panel, #202323);
    border: 1px solid var(--kft-match-line, #313736);
    color: var(--kft-floodlight, #f0f1ed);
    font: 500 13px/1.6 var(--kft-body, Manrope, sans-serif) !important;
  }
  #restDays .kft-rest-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    color: var(--kft-muted, #adb3af);
    font: 500 12px/1.5 var(--kft-body, Manrope, sans-serif);
  }
  #restDays .kft-rest-legend li { display: inline-flex; align-items: center; gap: 8px; }
  #restDays .kft-rest-swatch { width: 22px; height: 12px; border-radius: 3px; }
  #restDays .kft-rest-swatch.is-r1 { background: var(--rest-r1); }
  #restDays .kft-rest-swatch.is-r2 { background: var(--rest-r2); }
  #restDays .kft-rest-swatch.is-r3 { background: var(--rest-r3); }
  #restDays .kft-rest-swatch.is-r4 { background: var(--rest-r4); }
  #restDays .kft-rest-swatch.is-r5 { background: var(--rest-r5); }
  #restDays .kft-rest-cupkey { display: inline-grid; place-items: center; height: 20px; padding: 0 6px; border-radius: 4px; background: #5a625f; color: #f0f1ed; font-size: 10px; font-weight: 700; }
  #restDays .kft-rest-source { margin: 10px 0 0; color: var(--kft-muted, #adb3af); font: 450 12px/1.6 var(--kft-body, Manrope, sans-serif); }

  @media (max-width: 640px) {
    #restDays { --rest-club: 112px; --rest-day: 34px; }
    #restDays .kft-rest-club, #restDays .kft-rest-corner { padding: 0 6px 0 8px; }
    /* Two short lines instead of an ellipsis; both fit the fixed row height. */
    #restDays .kft-rest-club-name { font-size: 11.5px; line-height: 1.15; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
    #restDays .kft-rest-kit, #restDays .kft-rest-kit svg { flex-basis: 18px; width: 18px; }
    #restDays .kft-rest-controls .kft-field { flex: 1 1 calc(33% - 8px) !important; }
    #restDays .kft-rest-match, #restDays .kft-rest-bar { font-size: 10px !important; }
  }
}