@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');



/* ---- Design tokens ---- */
:root{
  --bg: #f6f8fb;
  --panel: #ffffff;
  --panel-2: #f2f4f8;
  --line: rgba(0,0,0,.08);
  --text: #0f1726;
  --muted: #5b6a7d;

  --accent: #0bbf73;
  --accent-2: #1580ff;
  --accent-3: #ffd700;

  --chip: #f6f8fb;
  --chip-line: rgba(0,0,0,.08);


  --radius-xl: 16px;
  --radius-lg: 12px;
  --radius-md: 10px;

  --shadow-1: 0 10px 30px rgba(0,0,0,.10);
  --shadow-2: 0 18px 50px rgba(0,0,0,.14);

  --px-per-min: 2.4;  /* ~36px per 15min (tweak freely) */
  --sess-xpad: 8px;   /* same gutter regular cards use */

  /* TEAM COLORS — Teamingly brand-adapted, 12 distinct teams.
     Each team = fill / border (-bd) / text (-fg) at one hue.
     Hues seeded from the logo trio (mint-green, lime/yellow, sky-blue),
     spread evenly in oklch. Uniform L+C keeps them one family. */
  --team-0-fill: oklch(0.945 0.055 162); --team-0-bd: oklch(0.70 0.125 162); --team-0-fg: oklch(0.42 0.095 162); /* mint green (brand) */
  --team-1-fill: oklch(0.945 0.055 188); --team-1-bd: oklch(0.70 0.115 188); --team-1-fg: oklch(0.42 0.090 188); /* teal */
  --team-2-fill: oklch(0.945 0.055 220); --team-2-bd: oklch(0.70 0.115 220); --team-2-fg: oklch(0.42 0.100 220); /* sky cyan */
  --team-3-fill: oklch(0.945 0.055 248); --team-3-bd: oklch(0.70 0.120 248); --team-3-fg: oklch(0.42 0.110 248); /* sky blue (brand) */
  --team-4-fill: oklch(0.945 0.055 278); --team-4-bd: oklch(0.70 0.120 278); --team-4-fg: oklch(0.42 0.110 278); /* indigo */
  --team-5-fill: oklch(0.945 0.055 305); --team-5-bd: oklch(0.70 0.115 305); --team-5-fg: oklch(0.42 0.105 305); /* violet */
  --team-6-fill: oklch(0.945 0.055 338); --team-6-bd: oklch(0.70 0.120 338); --team-6-fg: oklch(0.42 0.110 338); /* rose */
  --team-7-fill: oklch(0.945 0.055 18);  --team-7-bd: oklch(0.70 0.125 18);  --team-7-fg: oklch(0.42 0.115 18);  /* coral */
  --team-8-fill: oklch(0.945 0.055 45);  --team-8-bd: oklch(0.72 0.125 45);  --team-8-fg: oklch(0.44 0.110 45);  /* terracotta */
  --team-9-fill: oklch(0.950 0.060 75);  --team-9-bd: oklch(0.74 0.130 75);  --team-9-fg: oklch(0.45 0.105 75);  /* amber */
  --team-10-fill: oklch(0.952 0.062 100);--team-10-bd: oklch(0.76 0.135 100);--team-10-fg: oklch(0.46 0.100 100); /* gold (brand yellow) */
  --team-11-fill: oklch(0.948 0.060 128);--team-11-bd: oklch(0.73 0.130 128);--team-11-fg: oklch(0.44 0.105 128); /* lime (brand) */
}


.underlabel {
    font-size: 0.8em;
    margin-bottom: 0%;
}

.is-hidden { display: none !important; }


.loading-spinner {
    /* Add appropriate styles for your spinner */
    /* For example, using a CSS spinner animation */
    border: 4px solid #f3f3f3; /* Light gray border */
    border-top: 4px solid #3498db; /* Blue border on top */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
    margin-top: 20px;
    display: none;
}
  
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* # # # # # # # # # # # # # # # # # # # */
/* WARNING MANAGER */

/* General Warning Container */
.ui-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    font-weight: 500;
    margin-bottom: 1rem;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.15s ease-in-out, max-height 0.3s ease-in-out;
}

/* Shown State: Element expands and fades in */
.ui-warning.show {
    opacity: 1;
    max-height: 200px; /* Large enough for content */
    display: flex;
    margin-top: 16px;
    margin-bottom: 16px;
}

/* Hidden State: Collapses and fades out */
.ui-warning.hide {
    opacity: 0;
    max-height: 0;
    display: none;
}

.close-warning {
    background: none;
    border: none;
    font-size: 2rem;
    color: #856404; /* Same color as text */
    cursor: pointer;
    line-height: 1;
    padding: 0;
    margin-left: 1rem;
}

.close-warning:hover {
    color: #5c4300; /* Darker on hover */
}


.facility-rule-ref {
  color: #856404;
  font-weight: 700;
  white-space: nowrap;
}


/* # # # # # # # # # # # # # # # # # # # */
/* GENERAL CSS ACROSS THE ENTIRE APP */

.disabled-link {
  pointer-events: none;
  color: gray;
  text-decoration: none;
  cursor: not-allowed;
}

.disabled-a-button {
  background-color: #ccc;
  border-color: #ccc;
  pointer-events: none;
  cursor: not-allowed;
}

ul.no-bullets {
  list-style-type: none;
  padding: 0;
}


.team-report {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.aspect-container {
  margin-bottom: 10px;
}

.efficiency-bar {
  font-weight: bold;
  color: #fff;
  text-align: center;
  border-radius: 3px;
}

/* Full-width page padding & alignment */
.page-inner{
  --xpad: clamp(16px, 4vw, 32px);
  padding-left: var(--xpad);
  padding-right: var(--xpad);
}


/* # # # # # # # # # # # # # # # # # # # */
/* SCHEDULING JOBS */

#jobStatusList .card {
    background-color: #f8f9fa;
    border-radius: 10px;
    transition: transform 0.2s ease;
}

#jobStatusList .card:hover {
    transform: scale(1.02);
}

#savedSchedulesList .card {
  background-color: #f9f9f9;
  border-radius: 10px;
}

#savedSchedulesList .card:hover {
    transform: scale(1.02);
}

.opt-setup-section {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.step-box {
    border-left: 4px solid #0d6efd;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #ffffff;
    border-radius: 5px;
    transition: background-color 0.2s ease-in-out;
}

.step-box:hover {
    background-color: #f1f4ff;
}

.step-icon {
    font-size: 1.2rem;
    color: #0d6efd;
    margin-right: 0.6rem;
}

.step-box.optional {
    border-left-color: #6c757d;
}

.section-divider {
    border-top: 1px solid #dee2e6;
    margin: 2rem 0 1rem;
}

.disabled-card {
  pointer-events: none;  /* disables click */
  opacity: 0.5;
  cursor: not-allowed;
}

/* Failed job delete button (bottom-right) - just positioning */
#jobStatusList .job-failed-delete-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0.15rem 0.35rem;
  line-height: 1;
}

.schedule-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 55%, #000 45%);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
}



/* ===============================
   Period show page (2x2 dashboard)
   =============================== */

.period-strip .period-title{
  font-size: 1.05rem;
  font-weight: 700;
}

.period-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Make panels feel proportional */
.period-panel{
  min-height: 260px;
}

.period-panel__head{
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.period-panel__body{
  padding: 12px 14px 14px;
}



/* Saved schedules: wrap like jobs (auto columns) */
.period-panel--schedules .period-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;                 /* space between cards */
  align-content: start;      /* don't stretch oddly */
}


/* Scroll areas for the top row */
.scroll-y{
  max-height: 360px;     /* keeps page proportional */
  overflow: auto;
  padding-right: 6px;    /* space for scrollbar */
}

/* Saved schedules list */
.period-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.schedule-icon {
  color: #e03131;
  border-radius: 6px;
  padding: 4px 6px;
}

.period-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 80%, var(--muted) 10%);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.period-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px var(--shadow);
  border-color: color-mix(in srgb, var(--accent-2) 35%, var(--line) 65%);
}

.period-item__title{
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.period-item__meta{
  margin-top: 4px;
  color: var(--muted);
  font-size: .9rem;
}

/* Jobs grid */
.job-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.job-card{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 84%, var(--muted) 15%);
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.job-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.job-card__title{
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.job-card__bottom{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.job-pill{
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.job-pill--done{
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line) 50%);
  background: color-mix(in srgb, var(--surface) 84%, var(--accent) 10%);
}
.job-pill--run{
  border-color: color-mix(in srgb, var(--accent-2) 50%, var(--line) 50%);
  background: color-mix(in srgb, var(--surface) 84%, var(--accent-2) 10%);
}
.job-pill--fail{
  border-color: color-mix(in srgb, #e03131 55%, var(--line) 45%);
  background: color-mix(in srgb, var(--surface) 86%, #e03131 8%);
}

/* Required setup list */
.setup-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.setup-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.setup-item:hover{
  border-color: color-mix(in srgb, var(--accent-2) 35%, var(--line) 65%);
  box-shadow: 0 10px 22px var(--shadow);
}
.setup-item__title{
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.setup-item__meta{
  margin-top: 4px;
  color: var(--muted);
  font-size: .9rem;
}
.setup-item.is-disabled{
  opacity: 0.6;
  pointer-events: none;
}

/* Optional enhancements grid (keeps it from running down) */
.enh-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.enh-tile{
  position: relative;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 86%, var(--muted) 10%);
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.enh-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px var(--shadow);
  border-color: color-mix(in srgb, var(--accent-2) 35%, var(--line) 65%);
}

.enh-tile__icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface-2) 86%, var(--accent-2) 10%);
  border: 1px solid var(--line);
}
.enh-tile__title{
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.15;
}

.enh-tile.is-locked{
  opacity: 0.55;
  pointer-events: none;
}
.enh-tile__lock{
  position: absolute;
  right: 10px;
  top: 10px;
  color: var(--muted);
}

/* Full-width Team Schedule Pages panel */
.period-panel--team-pages {
  margin-bottom: 16px;
  min-height: auto;
}

.period-panel--team-pages .period-panel__head {
  align-items: flex-start;
}

.period-panel__subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

.setup-item--team-pages {
  background: color-mix(in srgb, var(--surface) 84%, var(--accent) 8%);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line) 65%);
}

/* Responsive: stack into 1 column */
@media (max-width: 992px){
  .period-grid{ grid-template-columns: 1fr; }
  .scroll-y{ max-height: none; }
  .job-grid{ grid-template-columns: 1fr; }
  .enh-grid{ grid-template-columns: 1fr; }
}



/* ===============================
   Period warnings bar (under hero)
   =============================== */

.period-warnbar{
  margin-bottom: 16px;
  border-radius: 16px;
  overflow: hidden;
  border-left: none;
  box-shadow: 0 6px 18px var(--shadow);
}

.period-warnbar__head{
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 86%, var(--accent-3) 20%);
}

.period-warnbar__title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.period-warnbar__title i{
  color: #e03131; /* a touch of urgency but not heavy */
}

.period-warnbar__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.period-warnbar__body{
  padding: 12px 14px 14px;
  background: var(--surface);
}

/* Remove left accent stripe from warning bar */
.period-warnbar::before {
  display: none;
}

.warn-section + .warn-section{
  margin-top: 14px;
}

.warn-section__label{
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--muted);
}

.warn-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warn-item{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  background: var(--surface-2);
}

.warn-item--block{
  background: color-mix(in srgb, var(--surface) 86%, #e03131 6%);
  border-color: color-mix(in srgb, #e03131 30%, var(--line) 70%);
}

.warn-item--warn{
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-3) 6%);
  border-color: color-mix(in srgb, var(--accent-3) 30%, var(--line) 70%);
}

.warn-item__title{
  font-weight: 700;
}

.warn-item__meta{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.warn-item__right{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Mobile: stack warning content + action button */
@media (max-width: 768px){
  .warn-item{
    flex-direction: column;
    align-items: stretch;
  }

  .warn-item__right{
    width: 100%;
    justify-content: flex-start; /* or flex-end if you want it right-aligned */
  }

  .warn-item__right .btn{
    width: 100%; /* optional: makes Fix a full-width button on mobile */
  }
}



/* ===== Warning expandable details (shared) ===== */

.warn-details{
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.warn-details__list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.warn-details__item{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 10px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-2) 8%);
}

.warn-details__top{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.warn-details__sub{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
}

.warn-details__more{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.warn-details__text {
  display: block;
  width: 100%;
  margin: 0 0 0.65rem 0;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;

  background: var(--surface-2);   /* subtle, not loud */
  border-left: 3px solid var(--accent-3); /* <-- THIS is the key */

  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 500;
}




/* ####  ####  ####  ####  ####  ####  #### */
/* SPORTY CARD LOOK */

.team-report__header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 8px; margin-bottom: 12px;
}

.team-name { margin: 0; font-weight: 800; letter-spacing: 0.3px; }

.team-metric-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.metric-pill {
    background: rgba(32,160,120,0.95);
    border: 1px solid rgba(32,160,120,0.35);
    color: #9cf3d6; padding: 4px 10px; border-radius: 999px; font-size: 0.9rem;
}

  .metric-details { margin: 0 0 10px 0; padding-left: 18px; }
  .sessions-title { margin: 8px 0 10px 0; font-size: 1.05rem; opacity: 0.95; }

  .sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
  }

.session-card {
    border-radius: 14px;
    background: var(--surface-3);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 12px;
    display: flex; flex-direction: column; gap: 6px;
}

  .session-card--empty {
    text-align: center; opacity: 0.8; font-style: italic;
  }
  .session-card__top { display: flex; gap: 8px; align-items: center; }

.badge-day {
    background: rgba(21,128,255,0.10);
    font-size: 0.8rem; 
    padding: 2px 8px; 
    border-radius: 999px; 
    border: 1px solid rgba(21,128,255,0.25);
}

.badge-facility {
  background: rgba(11,191,115,0.10);
  font-size: 0.8rem; 
  padding: 2px 8px; 
  border-radius: 999px; 
  border: 1px solid rgba(11,191,115,0.25);
}



  .session-card__time { display: flex; align-items: center; justify-content: space-between; }
  .time-range { font-weight: 700; letter-spacing: 0.3px; }

.duration-pill {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.4);
}
  .session-card__meta { font-size: 0.9rem; }

.part-pill {
    font-size: 0.8rem;
    color: rgba(255, 230, 0, 0.95);
    padding: 2px 8px; 
    border-radius: 8px; 
    background: #1e3c72; 
    border: 1px solid rgba(255,255,255,0.12);
}

  .session-card__share { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
  .session-card__share label { font-size: 0.85rem; opacity: 0.85; margin: 0; }
  .share-list { font-size: 0.95rem; }

  /* Small tweaks for facility grid visuals */
  .tu-part-pill {
    font-size: 0.9em; color: #FFDA7A; background: rgba(255,218,122,0.12);
    border: 1px solid rgba(255,218,122,0.35); padding: 2px 6px; border-radius: 999px;
  }
  .tu-sep { margin: 4px 0; border-top: 1px dashed #39507a; }

/* cell flash */
.flash-highlight {
  animation: flashPulse 1.6s ease-out;
  outline: 2px solid rgba(255, 230, 0, 0.95);
  outline-offset: -2px;
  position: relative; /* ensures outline sits right on td */
}

@keyframes flashPulse {
  0%   { background-color: rgba(255,230,0,0.45) !important; }
  35%  { background-color: rgba(255,230,0,0.85) !important; }
  100% { background-color: rgba(255,230,0,0.25) !important; }
}

.view-on-grid-link {
  font-size: 0.8rem;
  opacity: 0.75;
  text-decoration: underline;
  cursor: pointer;
}
.view-on-grid-link:hover {
  opacity: 1;
  color: #ffd700; /* sporty highlight yellow */
}


/* ############## HOME PAGE LOOK ################## */

/* ===== THEME CORE (Light default) ===== */
:root{
  /* Light palette (default) */
  --bg: #f9fafc;
  --surface: #fdfdfd;
  --surface-2: #f1f3f7;
  --surface-2-strong: color-mix(in srgb, var(--surface-2) 85%, #000 15%);
  --surface-3: color-mix(in srgb, var(--surface-2) 75%, var(--accent-2) 25%);
  --text: #0e1320;
  --muted: #475569;
  --muted-light: rgba(53, 141, 192, 0.04);
  --accent: #0bbf73;          /* sporty pitch green */
  --accent-2: #1580ff;        /* techy blue */
  --accent-3: #ffd700;        /* sporty highlight yellow */
  --accent-light: #0bbf746e;
  --accent-2-light: #157eff6e; 
  --line: rgba(0,0,0,0.06);
  --shadow: rgba(0,0,0,0.08);
}

/* Optional: Dark theme (enable by adding .theme-dark on <body>) */
.theme-dark{
  --bg: #0b0e14;
  --surface: #121723;
  --surface-2: #0f1420;
  --text: #e8eefc;
  --muted: #a6b0c2;
  --accent: #1fd06e;
  --accent-2: #2fb5ff;
  --accent-3: #ffd700;        /* sporty highlight yellow */
  --line: rgba(255,255,255,0.08);
  --shadow: rgba(0,0,0,0.35);
}

/* Keep body simple and neutral by default */
body{
  background: var(--bg);
  color: var(--text);
}

/* Apply the subtle “sporty/AI” background ONLY when desired */
body.sporty-bg{
  /* ultra-subtle diagonal micro-stripes + faint radial glow */
  background:
    radial-gradient(900px 200px at 85% -10%, rgba(21,128,255,0.08), transparent 60%),
    radial-gradient(900px 200px at 15% -10%, rgba(11,191,115,0.08), transparent 60%),
    repeating-linear-gradient(135deg, rgba(21,128,255,0.04) 0 2px, transparent 2px 8px),
    var(--bg);
}


/* ===== Hero ===== */
.home-hero {
  border-bottom: 4px solid var(--accent);
  background: var(--surface);
  min-height: 140px; 
}
.home-hero__inner{
  max-width: none;
  margin: 0;                          
  padding: 32px 16px;
}



.home-title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;       /* lighter than 800 */
  letter-spacing: -0.5px; /* tighter for a sleek tech look */
  margin: 0;
}

.home-subtitle {
  margin: .5rem 0 0;
  font-size: 1rem;
  font-weight: 400;       /* lighter, acts as supporting text */
  color: var(--muted);
  letter-spacing: 0.2px;
}

/* prevent hero buttons from wrapping awkwardly */
.hero-actions { min-width: 0; }
.hero-actions .btn { white-space: nowrap; }


/* ===== Section container ===== */
.assoc-section{
  max-width: none;
  margin: 1rem 0 3rem;                
  padding-left: 0; padding-right: 0;  /* edges controlled by .page-inner */
}

/* ===== Empty state ===== */
.assoc-empty{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 10px 30px var(--shadow);
}
.assoc-empty h2{ margin: 0 0 .5rem; }
.assoc-empty p{ color: var(--muted); margin: 0 0 1rem; }



/* ===== Body ===== */
.assoc-card__body{
  padding: 12px 14px 0;
}
.assoc-card__title{
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}
.assoc-card__meta{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.chip{
  display: inline-flex; align-items: center;
  gap: 6px;
  font-size: .75rem; line-height: 1;
  color: var(--text);
  background: rgba(31,208,110,0.08);
  border: 1px solid rgba(31,208,110,0.3);
  padding: 6px 8px;
  border-radius: 999px;
}
.chip::before{
  content: "";
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent);
}
.chip--ghost{
  background: transparent;
  border-color: var(--line);
}
.chip--ghost::before{
  background: var(--accent-2);
}

.assoc-card__desc{
  /* multi-line clamp */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Standard (supported in modern Chrome/Safari/Firefox) */
  line-clamp: 3;

  /* Legacy WebKit fallback */
  -webkit-line-clamp: 3;
}

/* ===== Footer (actions) ===== */
.assoc-card__footer{
  display: flex;
  gap: 10px;
  padding: 0 14px 14px;
}


/* ========================================
Option Cards
===========================================*/
.option-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}

.option-card {
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    opacity 140ms ease;
}

.option-card:not(.is-selected) {
  opacity: 0.72;
}

.option-card.is-selected {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line) 52%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 10%, transparent);
}

.option-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.option-card__preview {
  display: block;
  cursor: pointer;
  margin-top: 12px;
}



/* ========================================
   Page hero
======================================== */

.page-hero {
  border-bottom: 4px solid var(--accent);
  padding: 18px 0 18px;
}

.page-hero--plain {
  background: transparent;
}

.page-hero__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.page-hero__back {
  display: inline-block;
  margin-bottom: 12px;
  text-decoration: none;
}

.page-hero__main-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.page-hero__main {
  min-width: 0;
}

.page-hero__back:hover {
  text-decoration: none;
}

.page-hero__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-hero__eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
}

.page-hero__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.page-hero__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-bottom: 2px;
}

@media (max-width: 768px) {

  .page-hero__main-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .page-hero__title {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .page-hero .team-metric-pills {
    max-width: 100%;
  }

  .page-hero .chip {
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
  }

  .page-hero__actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 0;
  }

  .page-hero__actions .btn,
  .page-hero__actions form {
    width: auto;
    flex: 0 0 auto;
  }
}




/* ========================================
   Facility map
======================================== */

.facility-map {
  height: 320px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-top: 12px;
  background: var(--surface-2);
}

.leaflet-container {
  font-family: inherit;
}

.facility-map-status {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.facility-map-status.is-saved {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line) 55%);
  color: var(--accent);
}

.facility-map {
  position: relative;
}

.facility-map-marker span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.facility-map .leaflet-tile {
  filter:
    saturate(0.9)
    contrast(0.96)
    brightness(1.02)
    hue-rotate(-6deg);
}

.facility-map {
  box-shadow: inset 0 0 0 1px var(--line);
}

.facility-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(11, 191, 115, 0.08), transparent 34%),
    radial-gradient(circle at 82% 82%, rgba(21, 128, 255, 0.06), transparent 36%);
  z-index: 500;
}


.facility-address-row {
  position: relative;
}

.facility-address-input {
  padding-right: 76px;
}

.facility-address-btn {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);

  height: 28px;
  min-height: 0;
  padding: 0 11px;
  border-radius: 10px;

  background: color-mix(in srgb, var(--accent-2) 2%, var(--surface) 92%);
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--line) 65%);
  color: var(--accent-2);

  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: none;
}

.facility-address-btn:hover {
  transform: translateY(-50%);
  box-shadow: none;
  background: color-mix(in srgb, var(--accent-2) 14%, var(--surface) 86%);
  border-color: var(--accent-2);
  color: var(--accent-2);
}



/* ========================================
   UNIVERSAL ACTION STRIP (calm toolbar)
   ======================================== */
.strip {
  --strip-accent: var(--accent-2); /* default (techy blue) */
  background: color-mix(in srgb, var(--surface-2) 85%, var(--strip-accent) 15%);
  border: 1px solid color-mix(in srgb, var(--line) 85%, var(--strip-accent) 15%);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  box-shadow: none;
  transition: none;                /* no lift */
}
.strip:hover { transform: none; box-shadow: none; }

/* Layout helper for pushing items to the end */
.strip .push-end { margin-left: auto; }

/* ===== Variants (role-based) ===== */
/* Section-level actions (blue-ish) */
.strip--section { --strip-accent: var(--accent-2); }

/* Association-level actions (sporty green) */
.strip--association { --strip-accent: var(--accent); }

/* Warning/ops strips (yellow hint) */
.strip--warning { --strip-accent: var(--accent-3); }

/* Danger/critical ops (destructive areas) */
.strip--danger { --strip-accent: #e03131; }

/* Muted/neutral info */
.strip--neutral { --strip-accent: var(--muted); }

/* Calmer visual variants */
.strip--quiet {
  /* lighter tint, thinner border, smaller padding */
  background: color-mix(in srgb, var(--surface-2) 94%, var(--strip-accent) 6%);
  border: 1px solid color-mix(in srgb, var(--line) 90%, var(--strip-accent) 10%);
  padding: 0.6rem 0.8rem;
}

.strip--subtle {
  /* almost neutral; great for admin/utility */
  --strip-accent: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 96%, var(--strip-accent) 4%);
  border: 1px solid color-mix(in srgb, var(--line) 92%, var(--strip-accent) 8%);
  padding: 0.55rem 0.8rem;
}

/* Tone down contained buttons inside quiet/subtle strips */
.strip--quiet .btn,
.strip--subtle .btn {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--line) 85%, var(--strip-accent) 15%);
}
.strip--quiet .btn:hover,
.strip--subtle .btn:hover {
  transform: none;           /* no lift */
  box-shadow: none;
}

/* Optional: smaller text and icon opacity for admin tool vibe */
.strip--subtle {
  font-size: 0.95rem;
}
.strip--subtle .btn-ghost-neutral { opacity: 0.9; }



/* ===========================
   UNIVERSAL APP CARD SYSTEM
   =========================== */

/* Core tokens (inherits your theme vars) */
:root{
  --card-radius: 16px;
  --card-pad-x: 18px;
  --card-pad-y: 14px;
  --card-border: var(--line);
  --card-bg: linear-gradient(180deg, var(--surface-2) 60%, var(--surface) 100%);
  --card-shadow: 0 8px 22px var(--shadow);
  --card-shadow-hover: 0 14px 28px var(--shadow);
}

/* Base card */
.app-card{
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transform: none;
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

/* Base cards stay stable */
.app-card:hover{
  transform: none;
}

/* Only cards explicitly marked interactive should lift */
.app-card--interactive{
  cursor: pointer;
}

.app-card--interactive:hover{
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

/* Content zones */
.app-card__body{ 
  background: var(--card-bg); /* subtle inner panel tone */
  border-radius: calc(var(--card-radius) - 4px);
  padding: var(--card-pad-y) var(--card-pad-x) 0; 
}

.app-card__footer{
  background: var(--surface);
  display: flex; gap: 10px;
  padding: var(--card-pad-x) var(--card-pad-y);
}

/* Give vertical spacing when the flex items wrap to a new row */
/* This automatically adds a top margin to every element that follows another in the wrapped form, but only when they wrap to a new line. */
.app-card__body form.d-flex.flex-wrap.gap-2 > * + * {
  margin-top: 0.5rem; /* same as mt-2 */
}


/* Title + meta */
.app-card__title {
  font-size: 1.05rem;
  font-weight: 600;   /* reduced from 800 */
  line-height: 1.3;   /* slightly looser */
}

.app-card__meta{ display:flex; flex-wrap:wrap; gap:6px; margin: 0 0 8px; }

/* Media header (optional) */
.app-card__media{
  position: relative;
  height: 140px;
  background: linear-gradient(135deg, rgba(11,191,115,0.16), rgba(21,128,255,0.16));
  background-image: var(--bg-url), linear-gradient(135deg, rgba(11,191,115,0.16), rgba(21,128,255,0.16));
  background-size: cover, auto;
  background-position: center;
}
.app-card__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.12) 60%, rgba(0,0,0,0.22) 100%);
}

/* Clickable whole card */
.app-card__link { 
  position:absolute; 
  inset:0; 
  color: inherit;
  background: transparent;
}

/* Badge (optional) */
.app-card__badge{
  position:absolute; top:10px; left:10px;
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#06120a; border-radius:999px; padding:6px 10px; border:1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

/* Description (clamped) */
.app-card__desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  color: var(--muted);
  margin: 0 0 12px;
}

/* Variants */
.app-card--outline{ background: var(--surface); box-shadow:none; }
.app-card--ghost{ background: transparent; box-shadow:none; }
.app-card--compact .app-card__body{ padding: 10px 12px 0; }
.app-card--compact .app-card__footer{ padding: 0 12px 12px; }

/* Grid helper (for lists of cards) */
.app-card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}

/* =========================================
   CARD VARIANT SIDE STRIPES (full height)
   ========================================= */
.app-card--period::before,
.app-card--facility::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  border-top-left-radius: var(--card-radius);
  border-bottom-left-radius: var(--card-radius);
}

/* Distinct variant colors */
.app-card--period::before {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-2) 85%, #fff 10%) 0%,
    color-mix(in srgb, var(--accent-2) 70%, #000 10%) 100%
  );
}

.app-card--facility::before {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 85%, #fff 10%) 0%,
    color-mix(in srgb, var(--accent) 70%, #000 10%) 100%
  );
}



/* ========================================
   Generic panels
======================================== */

.panel {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent-2) 16%, var(--line) 84%);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow) 70%, transparent);
  margin-bottom: 20px;
}

.panel__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.panel__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.panel__body {
  padding: 22px;
}

.panel__head--between {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

@media (max-width: 768px) {
  .panel__head--between {
    flex-direction: column;
    align-items: stretch;
  }

  .panel__head--between .btn {
    align-self: flex-start;
  }
}


/* =======================================
  Team-Session-Page Panels
  ========================================*/

.team-session-panel {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent-2) 20%, var(--line) 80%);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--shadow) 65%, transparent);
  border-color: color-mix(
    in srgb,
    var(--accent) 18%,
    var(--line) 82%
  );
  margin-bottom: 28px;
}

.team-session-panel .panel__head {
  padding: 16px 18px;
}

.team-session-panel .panel__body {
  padding: 18px;
}

@media (max-width: 600px) {
  .team-session-panel .panel__head {
    padding: 12px 14px;
  }

  .team-session-panel .panel__body {
    padding: 14px;
  }
}


/* ========================================
   Data list panel
======================================== */

.data-list-panel {
  background: var(--surface);
}

.data-list {
  width: 100%;
}

.data-list__head,
.data-list__row {
  display: grid;
  gap: 18px;
  align-items: center;
}

.data-list__head {
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);

  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.data-list__row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.data-list__row:last-child {
  border-bottom: 0;
}

.data-list__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.data-list__badge {
  width: 36px;
  height: 36px;
  border-radius: 9px;

  display: grid;
  place-items: center;

  background: #08112f;
  color: #fff;

  font-size: 0.75rem;
  font-weight: 900;
  flex: 0 0 auto;
}

.data-list__title {
  font-weight: 850;
  line-height: 1.1;
}

.data-list__meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
}

.data-list__strong {
  font-weight: 900;
}

.data-list__link-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.data-list__mono-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  text-decoration: none;
}

.data-list__mono-link:hover {
  color: var(--accent-2);
}

.data-list__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* reusable small icon button */
.icon-btn {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 8px;
  width: 32px;
  height: 32px;

  display: inline-grid;
  place-items: center;
}

.icon-btn:hover {
  border-color: color-mix(in srgb, var(--accent-2) 35%, var(--line) 65%);
  color: var(--accent-2);
}

.icon-btn.is-copied {
  color: var(--accent);
  border-color: var(--accent);
}

/* mobile generic fallback */
@media (max-width: 800px) {
  .data-list__head {
    display: none;
  }

  .data-list__row {
    grid-template-columns: 1fr !important;
    gap: 10px;
    align-items: stretch;
  }

  .data-list__actions {
    justify-content: stretch;
  }

  .data-list__actions .btn {
    width: 100%;
  }
}


/* ========================================
   Layout picker
======================================== */

.facility-layout-picker {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.layout-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.layout-group__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.layout-group__number {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
  color: var(--accent);
  font-weight: 800;
  font-size: 1.1rem;
}

.layout-group__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.layout-group__meta {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-weight: 400;
  font-size: 0.92rem;
}

.layout-tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.layout-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.layout-tile__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.layout-tile__name {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}

.layout-tile.is-selected .layout-tile__name {
  color: var(--text);
}

/* Soccer tactical preview */

.soccer-layout-preview {
  position: relative;
  display: block;
  width: 178px;
  aspect-ratio: 1.55 / 1;
  border-radius: 10px;
  overflow: hidden;

  background: color-mix(in srgb, var(--accent) 7%, var(--surface) 93%);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line) 70%);
  box-shadow: 0 2px 8px var(--shadow);
}

.layout-tile.is-selected .soccer-layout-preview {
  outline: 4px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}

.soccer-layout-preview__midline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: color-mix(in srgb, var(--accent) 25%, transparent);
}

.soccer-layout-preview__circle {
  position: absolute;

  width: 13%;
  aspect-ratio: 1 / 1;
  height: auto;

  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.soccer-layout-preview__box {
  position: absolute;

  width: 8%;
  height: 40%;

  top: 30%;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.soccer-layout-preview__box--left {
  left: 0;
  border-left: 0;
}

.soccer-layout-preview__box--right {
  right: 0;
  border-right: 0;
}

.soccer-layout-preview__rect {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%);
  height: calc(var(--h) * 100%);

  border: 2px solid var(--accent);
  background: transparent;
  pointer-events: none;
}

.layout-tile:not(.is-selected) .soccer-layout-preview__rect {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}


/* ========================================
   Layout tile states
======================================== */

.layout-tile {
  opacity: 0.5;
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    filter 140ms ease;
}

.layout-tile:hover {
  opacity: 0.82;
}

.layout-tile.is-selected {
  opacity: 1;
}

.layout-tile:not(.is-selected) .soccer-layout-preview {
  filter: saturate(0.72);
  border-color: color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
}

.layout-tile:not(.is-selected) .soccer-layout-preview__rect {
  border-color: color-mix(in srgb, var(--line) 65%, var(--accent) 35%);
}

.layout-tile:not(.is-selected) .layout-tile__name {
  color: var(--muted);
}

.layout-tile.is-selected .layout-tile__name {
  color: var(--text);
}

.layout-tile.is-selected .soccer-layout-preview {
  transform: translateY(-1px);
}

/* ========================================
   Division of layouts on show page
======================================== */

.division-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  background: var(--surface-2);
}

.division-summary__item {
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
}

.division-summary__item strong {
  font-size: 1.05rem;
}

.division-summary__item span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.division-summary__item.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
}

.soccer-layout-preview__area {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%);
  height: calc(var(--h) * 100%);
  pointer-events: none;
}

.soccer-layout-preview__area--training {
  border: 2px solid var(--accent);
  background: transparent;
}

.soccer-layout-preview__area--inactive {
  border: 2px dashed color-mix(in srgb, var(--accent-3) 75%, var(--line) 25%);
  background: color-mix(in srgb, var(--accent-3) 20%, transparent);
  display: grid;
  place-items: center;
}

.soccer-layout-preview__area-label {
  font-size: 0.65rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--accent-3) 70%, #000 30%);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

.facility-layout-preview__rect--inactive {
  border-style: dashed;
  background: color-mix(in srgb, var(--accent-3) 20%, transparent);
  color: color-mix(in srgb, var(--accent-3) 70%, #000 30%);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}


/* ========================================
   Indoor hall layout preview
======================================== */

.indoor-layout-preview {
  position: relative;
  display: block;
  width: 178px;
  aspect-ratio: 1.55 / 1;
  border-radius: 10px;
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent-3) 12%, var(--surface) 88%),
      color-mix(in srgb, var(--accent-3) 5%, var(--surface) 95%)
    );

  border: 1px solid color-mix(in srgb, var(--accent-3) 42%, var(--line) 58%);
  box-shadow: 0 2px 8px var(--shadow);
}

.indoor-layout-preview__line {
  position: absolute;
  pointer-events: none;
  background: color-mix(in srgb, var(--accent-3) 35%, var(--line) 65%);
  opacity: 0.55;
}

.indoor-layout-preview__line--mid-x {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
}

.indoor-layout-preview__line--mid-y {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}

.indoor-layout-preview__area {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%);
  height: calc(var(--h) * 100%);

  display: grid;
  place-items: center;
  pointer-events: none;
}

.indoor-layout-preview__area--training {
  border: 2px solid var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 7%, transparent);
}

.indoor-layout-preview__area--inactive {
  border: 2px dashed color-mix(in srgb, var(--accent-3) 80%, var(--line) 20%);
  background: color-mix(in srgb, var(--accent-3) 22%, transparent);
}

.indoor-layout-preview__area-label {
  font-size: 0.65rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--muted) 82%, #000 18%);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Selected/unselected states for indoor previews */

.layout-tile.is-selected .indoor-layout-preview {
  outline: 4px solid color-mix(in srgb, var(--accent-3) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent-3) 75%, var(--line) 25%);
}

.layout-tile:not(.is-selected) .indoor-layout-preview {
  filter: saturate(0.75);
  opacity: 0.86;
}


/* ======================
 Dashboard overview stats
========================*/

.overview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  background: var(--surface);
}

.overview-stat {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  background: transparent;
}

.overview-stat:not(:last-child) {
  border-right: 1px solid var(--line);
}

.overview-stat__label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.overview-stat__value {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
}

.overview-stat__value--text {
  font-size: 1rem;
  line-height: 1.25;
}

.overview-stat__unit {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.overview-footer {
  margin-top: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);

  display: flex;
  align-items: center;
  gap: 16px;
}

.overview-footer__label {
  margin: 0;
  flex: 0 0 auto;
}

.overview-footer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 768px) {
  .overview-stats {
    grid-template-columns: 1fr;
  }

  .overview-stat:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}

/* =============================
   Facility Reference Layout
   ============================= */

.facility-reference-layout-preview {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-2);
  margin-bottom: 1rem;
}

.facility-reference-preview-wrapper {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1.6 / 1;
  margin: 0 auto;
  padding: 3rem;
}

.facility-reference-preview-pitch {
  position: absolute;
  inset: 3rem;
  border: 2px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  overflow: hidden;
}

.facility-reference-preview-area {
  position: absolute;
  left: var(--area-left, 0%);
  top: var(--area-top, 0%);
  width: var(--area-width, 100%);
  height: var(--area-height, 100%);
  border: 1px dashed rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.35);
}

.facility-reference-preview-markers {
  position: absolute;
  inset: 3rem;
  pointer-events: none;
}

.facility-reference-preview-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  box-shadow: var(--shadow);
  white-space: nowrap;
  font-size: 0.85rem;
}

.facility-reference-preview-marker {
  left: var(--ref-left, 50%);
  top: var(--ref-top, 50%);
}

.facility-reference-preview-marker__icon {
  line-height: 1;
}

.facility-reference-preview-marker__label {
  font-weight: 600;
}

.facility-reference-row {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  margin-bottom: 0.75rem;
}

.facility-reference-list {
  display: grid;
  gap: 0.5rem;
}

.facility-reference-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  background: var(--surface);
}

.facility-reference-list-item__label {
  font-weight: 600;
}

.facility-reference-list-item__position {
  margin-left: auto;
  font-size: 0.85rem;
}

.facility-reference-preview-pitch .layout-tile {
  width: 100%;
  height: 100%;
  box-shadow: none;
  border-radius: 0.75rem;
}

.facility-reference-preview-pitch .layout-preview,
.facility-reference-preview-pitch .soccer-layout-preview,
.facility-reference-preview-pitch .indoor-layout-preview {
  width: 100%;
  height: 100%;
}


/* 

*/

.session-rule-summary {
  border: 1px solid var(--line);
  background: var(--surface);
}

.session-rule-summary__main {
  padding: 18px 16px;
}

.session-rule-summary__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.session-rule-summary__mode {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.session-rule-summary__mode strong {
  font-weight: 700;
}

.session-rule-summary__mode span {
  color: var(--muted);
  font-size: 0.9rem;
}

/* 

*/

.session-rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.session-rule-tile {
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session-rule-tile__value {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.session-rule-tile__label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}


/* Period dashboard panels should NOT have side stripes */
.period-panel::before {
  display: none;
}

/* ===== Period dashboard panel colors (stable) ===== */

.period-panel--schedules {
  background: var(--surface);
}

.period-panel--jobs {
  background: var(--surface-2);
}

.period-panel--required {
  background: var(--surface);
}

.period-panel--optional {
  background: var(--surface-2);
}

/* Panel header accent bars */
.period-panel__head {
  position: relative;
}

.period-panel__head {
  background: var(--surface-2);
}

.period-panel--schedules .period-panel__head {
  background: color-mix(in srgb, var(--accent-2) 14%, var(--surface) 86%);
}

.period-panel--jobs .period-panel__head {
  background: color-mix(in srgb, var(--accent-2) 14%, var(--surface) 86%);
}

.period-panel--required .period-panel__head {
  background: color-mix(in srgb, var(--accent-2) 14%, var(--surface) 86%);
}

.period-panel--optional .period-panel__head {
  background: var(--surface-2);
}





/* Badge tint (if you ever re-enable media/badge) */
.badge--period { 
  background: linear-gradient(90deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 70%, #fff 30%));
}
.badge--facility { 
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff 30%));
}

/* Title icon color hint */
.app-card--period .app-card__title i { color: var(--accent-2); opacity: .9; }
.app-card--facility .app-card__title i { color: var(--accent); opacity: .9; }

/* Optional meta chips by type */
.chip--period  { background: rgba(21,128,255,0.08); border-color: rgba(21,128,255,0.28); }
.chip--facility{ background: rgba(11,191,115,0.10); border-color: rgba(11,191,115,0.28); }




/* ===== Row / time-slot containers ===== */
.row-parent-container {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.row-parent-container + .row-parent-container {
  margin-top: 12px;
}



/* Chips (shared) */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.75rem; line-height:1;
  color: var(--text);
  background: rgba(11,191,115,0.10);
  border: 1px solid rgba(11,191,115,0.28);
  padding: 6px 8px; border-radius: 999px;
}
.chip::before{ content:""; width:6px; height:6px; border-radius:999px; background: var(--accent); }
.chip--ghost{ background: transparent; border-color: var(--line); }
.chip--ghost::before{ background: var(--accent-2); }


.chip--warn{
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.34);
  color: var(--text);
}

.chip--warn::before{
  background: var(--accent-3);
}


/* Empty state inside cards */
.app-empty{
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
}

/* Table that fits your theme */
.app-table thead th{
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 600;
}
.app-table tbody td{
  border-top: 1px solid var(--line);
}
.app-table .btn-sm{
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
}


/* =================== */
/* ===== Buttons ===== */

/* basic grey button with grey bg and grey border */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  font-weight: 600; /* reduced from 700 */
  transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 6px 14px var(--shadow);
}

/* Outline buttons */
.btn-outline-success {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-outline-success:hover {
  background: color-mix(in srgb, var(--surface-2) 90%, var(--accent) 10%);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-outline-info {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-outline-info:hover {
  background: color-mix(in srgb, var(--surface-2) 90%, var(--accent-2) 10%);
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.btn-outline-warning {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-outline-warning:hover {
  background: color-mix(in srgb, var(--surface-2) 90%, var(--accent-3) 10%);
  border-color: var(--accent-3);
  color: var(--text);
}

/* Solid Buttons */
.btn-solid-success {
  background: var(--surface-2);
  color: var(--accent);
  border: 1px solid var(--accent-light);
  font-weight: 500;
}
.btn-solid-success:hover {
  background: var(--accent);
  color: #fff;
}

.btn-solid-info {
  background: var(--surface-2);
  color: var(--accent-2);
  border: 1px solid var(--accent-2-light);
}
.btn-solid-info:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
}

/* Ghost buttons */
.btn-ghost-neutral {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
}
.btn-ghost-neutral:hover {
  color: var(--muted);
  background: var(--muted-light);
}

.btn-ghost-accent {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
}
.btn-ghost-accent:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
  background: rgba(11,191,115,0.04); /* faint sporty tint */
}

/* Info (execute/final action) */
.btn-info {
  background: var(--surface);
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
}
.btn-info:hover {
  background: var(--accent-2);
  color: #fff;
}

/* Danger (destructive action) */
.btn-danger {
  background: var(--surface);
  color: #e03131;
  border: 1px solid #e03131;
}
.btn-danger:hover {
  background: #e03131;
  color: #fff;
}

/* Small helper for the empty-state buttons */
.actions{ display:flex; gap:10px; justify-content:center; margin-top:.5rem; flex-wrap:wrap; }

/* Icon-only buttons (compact actions) */
.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border-radius: 12px;
}

.btn-icon i {
  pointer-events: none;
  transition: transform 0.12s ease, color 0.12s ease;
}

.btn-icon:hover i {
  transform: scale(1.1);
}

/* Only THESE variants get the blue techy hover color */
.btn-ghost-accent.btn-icon:hover i,
.btn-outline-info.btn-icon:hover i,
.btn-outline-success.btn-icon:hover i {
  color: var(--accent-2);
}

/* And explicitly make danger stay white on hover */
.btn-icon.btn-danger:hover i {
  color: #fff;
}

/* Compact red icon button */
.btn-icon.btn-danger {
  border: 1px solid color-mix(in srgb, #e03131 70%, var(--line) 30%);
  background: transparent;
  color: #e03131;
}

.btn-icon.btn-danger:hover {
  color: #fff;
  background: #e03131;
  border-color: #e03131;
}


/* Expand / collapse toggle */
.btn-view-details{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: transparent;
  color: var(--accent-2); /* your Teamingly blue */

  font-weight: 600;
  font-size: 0.85rem;
  padding: 2px 4px;
  border-radius: 6px;

  cursor: pointer;
}

.btn-view-details i{
  font-size: 0.85em;
  transition: transform 0.2s ease;
  opacity: 0.85;
}

/* Hover = clearer affordance */
.btn-view-details:hover{
  text-decoration: underline;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Expanded state */
.btn-view-details.is-open{
  color: color-mix(in srgb, var(--accent) 85%, black);
}

/* Rotate chevron when open */
.btn-view-details.is-open i{
  transform: rotate(90deg);
}


.info-toggle-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--muted);
}

.info-toggle-btn:hover {
  color: var(--accent-2);
}

.info-toggle-btn i {
  font-size: 0.85rem;
  line-height: 1;
}






/* =========================
   Clean selects & inputs
   ========================= */

/* Base input (text, time, number…) */
.input, .form-control {
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input:focus, .form-control:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-2) 60%, var(--line) 40%);
  box-shadow: 0 0 0 3px rgba(21,128,255,0.16);
  background: var(--surface);
}

/* Native select with custom arrow */
.select {
  height: 38px;
  padding: 0 38px 0 12px; /* room for arrow */
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(0deg, var(--line), var(--line));
  background-position:
    calc(100% - 18px) 15px,
    calc(100% - 12px) 15px,
    calc(100% - 30px) 50%;
  background-size: 6px 6px, 6px 6px, 1px 60%;
  background-repeat: no-repeat;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-2) 60%, var(--line) 40%);
  box-shadow: 0 0 0 3px rgba(21,128,255,0.16);
  background: var(--surface);
}

/* Disabled/muted look (still readable) */
.select:disabled,
.input:disabled,
.form-control:disabled {
  background: var(--surface-2);
  color: var(--muted);
  border-color: color-mix(in srgb, var(--line) 80%, var(--muted) 20%);
  opacity: 0.9;
  cursor: not-allowed;
}

/* Full-width helper if you want it */
.w-100 { width: 100%; }


/* ======================================
   Multiselect
   ====================================== */

.tm-multiselect {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tm-multiselect__search {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 0.7rem 0.9rem;
  outline: none;
}

.tm-multiselect__search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}

.tm-multiselect__selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 12px;
}

.tm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 10px;
  border-radius: 999px;

  background: var(--accent-3);        /* subtle accent tint */
  border: 1px solid var(--accent);    /* gives definition */

  color: var(--text);

  font-size: 0.85rem;
  font-weight: 500;

  box-shadow: 0 1px 2px rgba(0,0,0,0.08);

  transition: all 0.15s ease;
}

/* Teams */
.tm-multiselect[data-name*="[teams]"] .tm-chip {
  background: rgba(59, 130, 246, 0.12); /* blue-ish */
  border-color: rgba(59, 130, 246, 0.4);
}

/* Facilities */
.tm-multiselect[data-name*="[facilities]"] .tm-chip {
  background: rgba(16, 185, 129, 0.12); /* green-ish */
  border-color: rgba(16, 185, 129, 0.4);
}

.tm-chip:hover {
  background: var(--accent-2);
  border-color: var(--accent);
}

.tm-chip__remove {
  font-weight: 600;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.tm-chip:hover .tm-chip__remove {
  opacity: 1;
}

.facility-rule-summary-chip--team:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.4);
  cursor: default;
}

.facility-rule-summary-chip--facility:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
  cursor: default;
}

.facility-rule-summary-chip .tm-chip__remove {
  display: none;
}

.tm-multiselect__options {
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tm-multiselect__option {
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
}

.tm-multiselect__option:hover {
  background: var(--surface-2);
}

.tm-multiselect__selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}


/* =========================================
   Compact page filter bar
========================================= */

.rule-filterbar-body {
  padding-top: 14px;
  padding-bottom: 14px;
}

.rule-filterbar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.rule-filterbar-title {
  margin: 0;
  font-size: 1rem;
}

.rule-filterbar-subtitle {
  margin: 2px 0 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.rule-filterbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rule-filterbar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
}

.rule-filterbar-field {
  min-width: 0;
}

@media (max-width: 900px) {
  .rule-filterbar-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================
   Compact token filter select
========================================= */

.tm-filter-select {
  position: relative;
}

.tm-filter-select__control {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 10px;
  cursor: text;
}

.tm-filter-select.is-open .tm-filter-select__control,
.tm-filter-select__control:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.tm-filter-select__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tm-filter-select__input {
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  min-width: 120px;
  flex: 1 1 120px;
  padding: 4px 2px;
}

.tm-filter-select__toggle {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tm-filter-select__dropdown {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  overflow: hidden;
}

.tm-filter-select__options {
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tm-filter-select__option {
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
}

.tm-filter-select__option:hover {
  background: var(--surface-2);
}

.tm-filter-select__option[hidden] {
  display: none !important;
}

.tm-filter-select__empty {
  padding: 0.65rem 0.7rem;
  color: var(--muted);
  font-size: 0.9rem;
}


/* chips inside filter controls */
.tm-filter-select .tm-chip {
  padding: 4px 9px;
  font-size: 0.8rem;
  border-radius: 999px;
  box-shadow: none;
}

/* distinguish filter categories slightly */
.tm-filter-select[data-filter-type="teams"] .tm-chip {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.tm-filter-select[data-filter-type="facilities"] .tm-chip {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
}



.rules-filter-icon {
  color: var(--muted);
  transition: color 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}

/* Active state → only icon reacts */
.js-toggle-filter.is-filter-active .rules-filter-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 70%, transparent));
  transform: scale(1.05);
}

.js-toggle-filter:hover .rules-filter-icon {
  color: var(--text);
}

/* =========================================
   Compact token filter select
========================================= */

.tm-filter-select {
  position: relative;
  z-index: 1;
}

.tm-filter-select.is-open {
  z-index: 200;
}

.tm-filter-select__control {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 10px;
  cursor: text;
}

.tm-filter-select.is-open .tm-filter-select__control,
.tm-filter-select__control:focus-within {
  border-color: var(--line);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.03);
}

.tm-filter-select__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tm-filter-select__input {
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  min-width: 120px;
  flex: 1 1 120px;
  padding: 4px 2px;
}

.tm-filter-select__toggle {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tm-filter-select__dropdown {
  position: absolute;
  z-index: 300;
  top: calc(100% + 6px);
  left: 0;
  right: 0;

  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  overflow: hidden;
}

.tm-filter-select__options {
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tm-filter-select__option {
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
}

.tm-filter-select__option:hover {
  background: var(--surface-2);
}

.tm-filter-select__option[hidden] {
  display: none !important;
}

.tm-filter-select__empty {
  padding: 0.65rem 0.7rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* softer chips inside filters */
.tm-filter-select .tm-chip {
  padding: 4px 9px;
  font-size: 0.8rem;
  border-radius: 999px;
  box-shadow: none;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--text);
}

/* very subtle category distinction */
.tm-filter-select[data-filter-type="teams"] .tm-chip {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.22);
}

.tm-filter-select[data-filter-type="facilities"] .tm-chip {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
}


.rule-filterbar-summary {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}


/* =========================================
   Clear filters button visibility
========================================= */

#clearRuleFiltersBtn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}

#clearRuleFiltersBtn:hover {
  background: var(--surface-3);
  border-color: var(--text);
}


/* =========================================
   Filter bar
===========================================*/

.rule-filterbar-card {
  box-shadow: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.rule-filterbar-body {
  padding: 0;
}

.rule-filterbar-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.rule-filterbar-toggle:hover {
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
}

.rule-filterbar-toggle__left,
.rule-filterbar-toggle__right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rule-filterbar-toggle__left {
  font-weight: 700;
}

.rule-filterbar-summary {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

.rule-filterbar-panel {
  border-top: 1px solid var(--line);
  padding: 12px 16px 16px;
}

.rule-filterbar-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.rule-filterbar-subtitle {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
}



/* ========================================
    Facility Rules
========================================== */

.facility-rule-card {
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.facility-rule-card.is-editing {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line) 65%);
}

.facility-rule-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: stretch;
  padding: 12px 0 4px;
}

.facility-rule-summary__grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.8fr;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.facility-rule-summary__col {
  min-width: 0;
}

.facility-rule-summary__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 7px;
}

.facility-rule-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.facility-rule-summary-chip {
  box-shadow: none;
}

.facility-rule-summary-chip--team {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.facility-rule-summary-chip--facility {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.facility-rule-summary__actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  align-self: stretch;
}

.facility-rule-editor[hidden],
.facility-rule-summary[hidden] {
  display: none !important;
}

@media (max-width: 800px) {
  .facility-rule-summary {
    grid-template-columns: 1fr;
  }

  .facility-rule-summary__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .facility-rule-summary__actions {
    justify-content: flex-start;
  }
}

#facilityRulesRows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.facility-rule-card:not(.is-editing) .js-editor-only {
  display: none;
}


/* ========================================
   Facility rules from Team Wishes
======================================== */

.facility-wish-rules__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.facility-wish-rules__head h2 {
  margin: 0;
}

.facility-wish-rules__head p {
  margin: .3rem 0 0;
}

.facility-wish-rules__list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.facility-wish-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;

  padding: 1rem 1.1rem;

  border: 1px solid var(--line);
  border-radius: .85rem;

  background: var(--surface);
}

.facility-wish-rule--pending {
  border-color:
    color-mix(
      in srgb,
      #f2c500 55%,
      var(--line) 45%
    );

  background:
    color-mix(
      in srgb,
      var(--surface) 92%,
      #f2c500 8%
    );
}

.facility-wish-rule__main {
  min-width: 0;
}

.facility-wish-rule__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem;
}

.facility-wish-rule__title-row > strong {
  font-size: .95rem;
}

.facility-wish-rule__source {
  display: inline-flex;
  align-items: center;
  gap: .3rem;

  padding: .2rem .55rem;

  border-radius: 999px;

  background: #ecfdf5;
  color: #047857;

  font-size: .7rem;
  font-weight: 800;
}

.facility-wish-rule__constraint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;

  margin-top: .65rem;
}

.facility-wish-rule__verb {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
}

.facility-wish-rule__reason {
  margin-top: .7rem;
}

.facility-wish-rule__reason > span {
  display: block;

  margin-bottom: .15rem;

  color: var(--muted);

  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.facility-wish-rule__reason p {
  margin: 0;

  color: var(--text);

  font-size: .82rem;
}

.facility-wish-decision {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  gap: 1rem;
}

.facility-wish-decision__actions {
  display: flex;
  gap: .4rem;
}

.facility-wish-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  white-space: nowrap;

  font-size: .75rem;
  font-weight: 850;
}

.facility-wish-status--use {
  color: #047857;
}

.facility-wish-status--ignore {
  color: var(--muted);
}

.facility-wish-status--pending {
  color: #8a6200;
}

@media (max-width: 760px) {
  .facility-wish-rule {
    align-items: flex-start;
    flex-direction: column;
  }

  .facility-wish-decision {
    width: 100%;
    justify-content: space-between;
  }
}


/* =========================
   Rules toolbar
========================= */

.rules-toolbar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rules-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rules-toolbar-hint {
  font-size: 0.85rem;
  color: var(--muted);
}

.rules-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rules-toolbar-summary {
  font-size: 0.85rem;
  color: var(--muted);
}

.rules-toolbar-filter {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}


/* Give collapsed toolbar more breathing room */
#rulesToolbar .rules-toolbar-body {
  padding-bottom: 14px;
}

/* When filter panel is open, give bottom controls breathing room */
#rulesToolbar .rules-toolbar-filter {
  margin-top: 14px;
  padding-top: 12px;
  padding-bottom: 14px;
  border-top: 1px solid var(--line);
}

/* Hard override: toolbar dropdown must escape all toolbar containers */
section#rulesToolbar.app-card,
#rulesToolbar,
#rulesToolbar.app-card,
#rulesToolbar .app-card__body,
#rulesToolbar .rules-toolbar-body,
#rulesToolbar .rules-toolbar-filter,
#rulesToolbar .rule-filterbar-grid,
#rulesToolbar .rule-filterbar-field,
#rulesToolbar .tm-filter-select {
  overflow: visible !important;
}

#rulesToolbar {
  position: relative;
  z-index: 1000;
}

#rulesToolbar .tm-filter-select {
  position: relative;
  z-index: 1001;
}

#rulesToolbar .tm-filter-select.is-open {
  z-index: 1100;
}

#rulesToolbar .tm-filter-select__dropdown {
  z-index: 1200;
}


/* ======================================
   Disabled input page state 
   ====================================== */

#facilityRulesRows.is-rules-disabled .row-parent-container {
  opacity: 0.45;
  filter: grayscale(0.35);
  pointer-events: none;
}

#facilityRulesRows.is-rules-disabled::before {
  content: "Facility rules are currently disabled for this period.";
  display: block;
  margin-bottom: 10px;
  padding: 10px 12px 10px 16px;

  border-radius: 12px;

  background: rgba(59, 130, 246, 0.10);
  border: 1px solid rgba(59, 130, 246, 0.35);

  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;

  position: relative;
}

/* left accent stripe */
#facilityRulesRows.is-rules-disabled::before {
  box-shadow: inset 4px 0 0 0 var(--accent-2);
}


/* ======================================
   Sporty Grid Rows – for input pages
   ====================================== */

.rows-stack{
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.row-container-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end; /* align all controls at the bottom */
}

/* Desktop: make columns wider so fewer items try to squeeze per row */
@media (min-width: 993px){
  .row-container-grid{
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start; /* for tall multi-selects */
  }
}

.row-container-grid .form-group{
  display: flex;
  flex-direction: column;
}

.row-container-grid .form-label{
  min-height: 20px;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: flex-end;
}

/* Normalize control heights */
.row-container-grid .select,
.row-container-grid .input,
.row-container-grid .form-control{
  height: 44px;
  line-height: 1.2;
  padding: 0 12px;
}

/* Multi-selects should not be forced to single-line height */
.row-container-grid select.select[multiple]{
  height: auto;
  min-height: 220px;       /* show many rows */
  padding: 10px 12px;      /* nicer inside spacing */
  background-image: none;  /* remove custom arrow (multi-select doesn't need it) */
}

/* Force “Specific days” to take a full row (prevents overlap) */
.row-container-grid .js-custom-days{
  grid-column: 1 / -1;
  width: 100%;
}

.row-container-grid input[type="time"]{
  -webkit-appearance: none;
  appearance: none;
}
.row-container-grid input[type="time"]::-webkit-datetime-edit{
  padding: 0; margin: 0; line-height: 1.2;
}

/* Action column gets a real width so it won't hug its neighbor */
.row-container-grid .actions{
  min-width: 200px;       /* aligns with your other fields */
  justify-content: flex-end;
  padding-left: 10px;
}

/* Slightly larger gap between grid items avoids “border kiss” */
.row-container-grid{
  gap: 10px;              /* was 12px */
}

/* Make rows pop against the app-card background */
.app-card__body .row-parent-container{
  background: color-mix(in srgb, var(--surface) 85%, var(--accent) 1%);
  border: 2px solid color-mix(in srgb, var(--accent) 20%, #000 5%);
  border-radius: 12px;
  padding: 12px;
}

/* Pro coach page has more input fields and needs special loving*/

/* Pro coach page: make the dynamic row breathe on desktop */
.js-procoach-row{
  gap: 14px;        /* works for grid too */
  align-items: start;
}

/* Make each input block behave like a “tile” */
.js-procoach-row > div {
  flex: 1 1 260px;     /* grows, shrinks, base width */
  min-width: 240px;
}

/* Coach name a bit smaller */
.js-procoach-row > div:first-child {
  flex: 1 1 220px;
  min-width: 220px;
}

/* Multi-selects bigger and usable */
.js-procoach-row select[multiple] {
  min-height: 220px;
}

/* Trainings/week & days dropdown shouldn’t hog space */
#coach-tpw-0, .js-procoach-row [id^="coach-tpw-"] {
  max-width: 180px;
}
#coach-daymode-0, .js-procoach-row [id^="coach-daymode-"] {
  max-width: 220px;
}

/* When "Specific days" is visible, it should take a new line */
.js-procoach-row .js-custom-days {
  flex: 1 1 100%;
  min-width: 100%;
}

/* Actions always on the far right, and never squeezed */
.js-procoach-row .actions {
  flex: 0 0 auto;
  min-width: 120px;
}

.js-procoach-row .js-custom-days .form-check-label {
  margin-right: 10px;
  margin-bottom: 6px;
  white-space: nowrap;
}

.form-check .underlabel{
  margin-top: 4px;
}

/* Pro coach input: ensures “Specific days + per-day time rows” become an entire row visually*/
.row-container-grid .js-custom-days,
.row-container-grid .js-perday-times{
  grid-column: 1 / -1;
}


/* Make each pro coach row-card a vertical layout */
.rows-stack .row-parent-container{
  display: flex;
  flex-direction: column;
}

/* Better breathing room when expanded row wraps */
.procoach-card.is-editing .row-container-grid {
  row-gap: 40px;
}

/* Slightly more space before the footer */
.procoach-card.is-editing .procoach-row-footer {
  margin-top: 14px;
}


/* Footer styling */
.procoach-row-footer{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;

  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.procoach-row-footer__left{
  flex: 1 1 auto;
  min-width: 260px;
}

.procoach-row-footer__right{
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Force the custom-days block to be a full-width “section” */
.row-container-grid .js-custom-days{
  grid-column: 1 / -1;
  width: 100%;
}

/* Make per-day time rows use a grid that fills the whole width */
.row-container-grid .js-custom-days .js-perday-times > .pc-day-row{
  display: grid;
  grid-template-columns: 120px 1fr 1fr 220px; /* Day | From | To | Anytime */
  gap: 10px;
  align-items: end;
  width: 100%;
}

/* Nice responsiveness */
@media (max-width: 992px){
  .row-container-grid .js-custom-days .js-perday-times > .pc-day-row{
    grid-template-columns: 1fr 1fr; /* Day + anytime will wrap below */
  }
  .row-container-grid .js-custom-days .js-perday-times > .pc-day-row .pc-day-label{
    grid-column: 1 / -1;
  }
  .row-container-grid .js-custom-days .js-perday-times > .pc-day-row .pc-day-any{
    grid-column: 1 / -1;
  }
}


.pc-day-row.is-muted {
  opacity: 0.85;
}

.pc-day-row.is-muted select {
  background: var(--surface-2);
  cursor: not-allowed;
}


.row-container-grid .js-custom-days .js-perday-times > .pc-day-row .tb-day-advice {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 0.85em;
  line-height: 1.35;
}





/* Pro coach page: make the bottom ghost footer align with row-parent containers */
.page-inner .app-card.app-card--ghost{
  border: 2px solid color-mix(in srgb, var(--accent) 20%, #000 5%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 85%, var(--accent) 1%);
}

/* Match the visual inset of .row-parent-container inside the main app-card */
.page-inner .app-card.app-card--ghost{
  margin-left: 12px;
  margin-right: 12px;
}

/* Override the global ghost margins ONLY for the pro coach action card */
.page-inner .procoach-actions.app-card--ghost{
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* =========================
   Pro coach toolbar
========================= */

#proCoachesToolbar .rules-toolbar-body {
  padding-bottom: 14px;
}

#proCoachesToolbar .rules-toolbar-filter {
  margin-top: 14px;
  padding-top: 12px;
  padding-bottom: 14px;
  border-top: 1px solid var(--line);
}

/* Let filter dropdowns escape toolbar */
section#proCoachesToolbar.app-card,
#proCoachesToolbar,
#proCoachesToolbar.app-card,
#proCoachesToolbar .app-card__body,
#proCoachesToolbar .rules-toolbar-body,
#proCoachesToolbar .rules-toolbar-filter,
#proCoachesToolbar .rule-filterbar-grid,
#proCoachesToolbar .rule-filterbar-field,
#proCoachesToolbar .tm-filter-select {
  overflow: visible !important;
}

#proCoachesToolbar {
  position: relative;
  z-index: 1000;
}

#proCoachesToolbar .tm-filter-select {
  position: relative;
  z-index: 1001;
}

#proCoachesToolbar .tm-filter-select.is-open {
  z-index: 1100;
}

#proCoachesToolbar .tm-filter-select__dropdown {
  z-index: 1200;
}

/* Active filter icon */
#proCoachesToolbar .js-toggle-procoach-filter.is-filter-active .rules-filter-icon {
  color: var(--accent-2);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-2) 70%, transparent));
  transform: scale(1.05);
}

#proCoachesToolbar .js-toggle-procoach-filter .rules-filter-icon {
  transition: color 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}


/* =========================
   Disabled pro coach state
========================= */

#proCoachesRows.is-rules-disabled .row-parent-container {
  opacity: 0.45;
  filter: grayscale(0.35);
  pointer-events: none;
}

#proCoachesRows.is-rules-disabled::before {
  content: "Pro coach rules are currently disabled for this period.";
  display: block;
  margin-bottom: 10px;
  padding: 10px 12px 10px 16px;

  border-radius: 12px;
  background: rgba(59, 130, 246, 0.10);
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: inset 4px 0 0 0 var(--accent);

  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}


/* =========================
   Pro coach rows
========================= */

#proCoachesRows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.procoach-card {
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.procoach-card.is-editing {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line) 65%);
}

.procoach-card:not(.is-editing) .js-editor-only {
  display: none;
}


/* ==========================
   Training block row head (for training block name)
   ========================== */
   
.trainingblock-row-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.1rem 0 0.1rem;
}

.trainingblock-row-id {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.trainingblock-row-subtitle {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.3;
}

/* ----------------------------
  TrainingBlocks toolbar 
  -----------------------------*/
#trainingBlocksToolbar .rules-toolbar-body {
  padding-bottom: 14px;
}

#trainingBlocksToolbar .rules-toolbar-filter {
  margin-top: 14px;
  padding-top: 12px;
  padding-bottom: 14px;
  border-top: 1px solid var(--line);
}

section#trainingBlocksToolbar.app-card,
#trainingBlocksToolbar,
#trainingBlocksToolbar.app-card,
#trainingBlocksToolbar .app-card__body,
#trainingBlocksToolbar .rules-toolbar-body,
#trainingBlocksToolbar .rules-toolbar-filter,
#trainingBlocksToolbar .rule-filterbar-grid,
#trainingBlocksToolbar .rule-filterbar-field,
#trainingBlocksToolbar .tm-filter-select {
  overflow: visible !important;
}

#trainingBlocksToolbar {
  position: relative;
  z-index: 1000;
}

#trainingBlocksToolbar .tm-filter-select {
  position: relative;
  z-index: 1001;
}

#trainingBlocksToolbar .tm-filter-select.is-open {
  z-index: 1100;
}

#trainingBlocksToolbar .tm-filter-select__dropdown {
  z-index: 1200;
}

/* ======================================
   Active filter icon (training blocks)
====================================== */

#trainingBlocksToolbar .js-toggle-trainingblock-filter.is-filter-active i {
  color: var(--accent); /* your green */
  text-shadow: 0 0 6px rgba(16, 185, 129, 0.35);
}


/* -----------------------------
   TrainingBlocks disable checkbox behavior
--------------------------------*/
#trainingBlocksRows.is-rules-disabled .row-parent-container {
  opacity: 0.45;
  filter: grayscale(0.35);
  pointer-events: none;
}

#trainingBlocksRows.is-rules-disabled::before {
  content: "Training blocks are currently disabled for this period.";
  display: block;
  margin-bottom: 10px;
  padding: 10px 12px 10px 16px;

  border-radius: 12px;
  background: rgba(59, 130, 246, 0.10);
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: inset 4px 0 0 0 var(--accent);

  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}





/* ==========================
   Flash animation for new rows
   ========================== */
.row-flash {
  animation: rowFlashAnim 1.4s ease-out;
}

@keyframes rowFlashAnim {
  0%   { background-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  40%  { background-color: color-mix(in srgb, var(--accent) 25%, transparent); }
  100% { background-color: transparent; }
}


/* ==========================
   Flash animation for deleted rows
   ========================== */
.row-delete-flash {
  animation: rowDeleteAnim 0.5s ease-out forwards;
}

@keyframes rowDeleteAnim {
  0%   { background-color: color-mix(in srgb, #e03131 40%, transparent); }
  100% { background-color: transparent; opacity: 0; }
}



/* ==========================
   Form Validation (consolidated)
   ========================== */

/* Highlight invalid inputs anywhere */
[aria-invalid="true"],
.invalid {
  outline: 2px solid rgba(224,49,49,0.75);
  background: rgba(224,49,49,0.06);
  border-radius: 8px;
}

/* Row pulse when a row has any invalid field */
.has-error {
  animation: rowErrorPulse .45s ease-out;
}
@keyframes rowErrorPulse {
  0%   { box-shadow: 0 0 0 0 rgba(224,49,49,.4); }
  100% { box-shadow: 0 0 0 6px rgba(224,49,49,0); }
}

/* Tiny inline error note injected by JS (optional but nice) */
.field-error-note{
  margin-top: 4px;
  font-size: 0.8rem;
  color: #e03131;
}

/* ==========================
   UI Warning - Teamingly variant (used by pro coach input validation)
   ========================== */

.ui-warning.ui-warning--teamingly {
  /* same animation behavior as base, but modern theme */
  background: color-mix(in srgb, var(--surface) 86%, #e03131 8%);
  color: var(--text);
  border: 1px solid color-mix(in srgb, #e03131 28%, var(--line) 72%);
  border-radius: 14px;
  box-shadow: 0 8px 18px var(--shadow);
  backdrop-filter: blur(4px);
}

.ui-warning.ui-warning--teamingly .close-warning {
  color: color-mix(in srgb, #e03131 65%, var(--muted) 35%);
}

.ui-warning.ui-warning--teamingly .close-warning:hover {
  color: #e03131;
}

/* Optional: slightly tighter inside row cards */
.row-parent-container > .ui-warning.ui-warning--teamingly {
  margin-bottom: 10px;
  padding: 10px 12px;
}


/* When skipProCoaches is checked, you can add a body class via JS if you want */
.procoach-skip-mode .row-parent-container {
  opacity: 0.65;
}
.procoach-skip-mode .row-parent-container:hover {
  transform: none;
  box-shadow: none;
}

/* Soft (non-blocking) warning variant */
.ui-warning.ui-warning--soft {
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-3) 12%);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent-3) 35%, var(--line) 65%);
}
.ui-warning.ui-warning--soft .close-warning { color: var(--muted); }
.ui-warning.ui-warning--soft .close-warning:hover { color: color-mix(in srgb, var(--accent-3) 80%, #000 20%); }


/* If a field is custom-invalid, do not show the green success message below it */
.form-control.invalid ~ .valid-feedback,
.input.invalid ~ .valid-feedback,
.select.invalid ~ .valid-feedback {
  display: none !important;
}


.form-control.is-invalid,
.input.is-invalid,
.select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .input:invalid,
.was-validated .select:invalid {
  border-color: #dc3545 !important;
  background-image: none !important;
  box-shadow: none;
}

.form-control.invalid,
.input.invalid,
.select.invalid,
[aria-invalid="true"] {
  background-image: none !important;
}


.field-warning-note {
  margin-top: 4px;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--accent-3) 80%, #000 20%);
}


.tm-multiselect.invalid .tm-multiselect__search,
.tm-multiselect.invalid .tm-multiselect__options {
  border-color: var(--danger, #dc3545);
}

.tm-multiselect.invalid .tm-multiselect__search {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.08);
}


/* ===============================
   Vertical Timeline Schedule UI
   =============================== */
.sched-head{
  display: grid;
  grid-template-columns: 90px repeat(7, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 10px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 2;
}
.time-head{ font-weight: 700; color: var(--muted); }
.day-head{ font-weight: 700; text-align: center; }

.sched-body{
  display: grid;
  grid-template-columns: 90px repeat(7, 1fr);
  gap: 8px;
  padding: 10px;
}

.time-axis{
  position: relative;
  border-right: 1px dashed var(--line);
  min-height: 400px;
}
.time-label{
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: var(--muted);
}
.time-label.is-boundary{
  font-weight: 800;          /* emphasize starts/ends */
  color: var(--text);
}

.day-col{
  position: relative;
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-2) 4%);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

/* 30-min grid lines */
.day-col .gridline{
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--line) 70%, #fff 30%);
}

/* Session block */
.sess-block{
  position: absolute;
  left: 8px; right: 8px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--line) 70%);
  background: color-mix(in srgb, var(--surface-2) 85%, var(--accent-2) 15%);
  border-radius: 12px;
  box-shadow: 0 8px 16px var(--shadow);
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 6px;
}

/* Subtle accent bar on the left (modern card vibe) */
.sess-block::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width: 5px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background: linear-gradient(180deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 65%, #000 35%));
}

.sess-head{
  display: flex; gap: 8px; align-items: baseline; justify-content: space-between;
  font-size: 0.9rem;
}
.sess-time{ font-weight: 800; letter-spacing: 0.2px; }
.sess-part{
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-3) 45%, var(--line) 55%);
  background: color-mix(in srgb, var(--surface) 80%, var(--accent-3) 20%);
}

/* Teams inside the session */
.team-wrap{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* two per row */
  gap: 6px;
}
.team-chip{
  display: flex; align-items: center; justify-content: center;
  padding: 6px 8px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  background: color-mix(in srgb, var(--surface) 78%, var(--accent) 22%);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line) 65%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact hover (future: use as drag handle too) */
.sess-block:hover{
  transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .18s ease;
  box-shadow: 0 14px 28px var(--shadow);
}





#toast-root {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 64px);  /* slightly below navbar */
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

/* Base Toast */
.fk-toast {
  --toast-accent: var(--accent-2);
  position: relative;
  min-width: 280px;
  max-width: 460px;
  border-radius: 8px;
  padding: 14px 16px 12px;
  background: color-mix(in srgb, var(--surface-2) 85%, var(--toast-accent) 15%);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--toast-accent) 40%, var(--line) 60%);
  box-shadow: 0 8px 22px var(--shadow);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
  pointer-events: auto;
  animation: fkToastIn 0.25s ease-out;
  backdrop-filter: blur(4px);
}

/* Top accent stripe */
.fk-toast::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 4px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: var(--toast-accent);
}

/* Variants */
.fk-toast--success { --toast-accent: var(--accent); }
.fk-toast--error   { --toast-accent: #e03131; }
.fk-toast--info    { --toast-accent: var(--accent-2); }

.fk-toast__msg {
  margin: 0;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1px;
}

.fk-toast__close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.2s ease;
}
.fk-toast__close:hover { color: var(--toast-accent); }

@keyframes fkToastIn {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}


/* ===============================
   Navbar
   =============================== */

.navbar {
  background-color: #eaf2ff !important; /* fallback */
  background: color-mix(in srgb, var(--accent) 8%, #fff 85%) !important;
}

.footer {
  background-color: #eaf2ff !important; /* fallback */
  background: color-mix(in srgb, var(--accent) 5%, #fff 85%) !important;
}



/* =========================================
   Responsive tweaks for team min-size rows
   ========================================= */

/* Step 1: up to ~tablet width → 2 columns + actions full row */
@media (max-width: 992px) {
  .row-container-grid {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }

  /* Make actions a full-width row under the selects */
  .row-container-grid .actions {
    grid-column: 1 / -1;
    min-width: 0;
    padding-left: 0;
    justify-content: flex-start;
  }

  .row-container-grid .actions .btn {
    margin-top: 0;
  }
}

/* Step 2: small mobile → fully stacked 1 column */
@media (max-width: 768px) {
  .row-container-grid {
    grid-template-columns: 1fr;
  }

  .page-inner {
    --xpad: 12px;
  }
}

/* =========================================
   Responsive for larger containers (pages)
   ========================================= */

/* Make the page page container wider on big screens */
@media (min-width: 1400px){
  .container--page-wide{
    max-width: 1750px;   /* ≈ 30% wider than 1350px */
  }
}



/* ========================================
   Section facility layout settings
======================================== */

.facility-layout-option {
  min-height: 100%;
}

.facility-layout-option .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}

.facility-layout-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;

  background:
    linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.16) 1px, transparent 1px),
    color-mix(in srgb, var(--accent) 18%, var(--surface-2) 82%);

  background-size: 12.5% 25%;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line) 65%);
}

.facility-layout-preview__rect {
  position: absolute;
  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,0.75);
  background: color-mix(in srgb, var(--accent-2) 18%, transparent);
  color: var(--text);

  font-size: 0.8rem;
  font-weight: 700;
}

.facility-layout-preview__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.facility-layout-option:has(input[type="checkbox"]:checked) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 12%, transparent);
}

.facility-layout-option:has(input[type="checkbox"]:checked) .facility-layout-preview {
  border-color: var(--accent);
}


.facility-layout-preview__rect {
  position: absolute;

  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%);
  height: calc(var(--h) * 100%);

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,0.75);
  background: color-mix(in srgb, var(--accent-2) 18%, transparent);
  color: var(--text);

  font-size: 0.8rem;
  font-weight: 700;
}


/* =======================================
   TEAM SCHEDULE PAGES
   =======================================  */

.team-page-layout {
  --team-page-ref-pad-x: clamp(40px, 9vw, 76px);
  --team-page-ref-pad-y: clamp(42px, 7vw, 68px);

  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;

  aspect-ratio: 1.6 / 1;

  padding:
    var(--team-page-ref-pad-y)
    var(--team-page-ref-pad-x);

  box-sizing: border-box;

  border-radius: 14px;
  overflow: visible;

  background: var(--surface-2);

  border: 1px solid var(--line);
}

.team-page-layout--pitch {
  background:
    color-mix(
      in srgb,
      var(--surface-2) 98%,
      var(--accent) 2%
    );
}

.team-page-layout--indoor {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent-3) 5%, var(--surface) 95%),
      color-mix(in srgb, var(--accent-3) 2%, var(--surface-2) 98%)
    );
}

.team-page-layout__pitch-anchor {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.team-page-layout .schedule-layout-preview {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}



.team-page-layout-area--current::after {
  content: '';

  position: absolute;
  inset: 1px;

  border: 5px solid color-mix(in srgb, var(--accent-3) 40%, transparent);
  border-radius: 7px;

  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, var(--accent-3) 20%, transparent);
    /*inset 0 0 0 7px color-mix(in srgb, var(--accent-3) 20%, transparent);*/

  pointer-events: none;
  z-index: 2;
}

.team-page-layout-area--other {
  opacity: 0.55;
}

.team-page-layout-team-name {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-weight: 800;
  font-size: 0.85rem;
  text-align: center;
}

.team-page-layout .schedule-layout-reference {
  background: rgba(255,255,255,0.92);
  border: 1px solid color-mix(in srgb, var(--line) 70%, #fff 30%);
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
  font-weight: 850;
  border-radius: 6px;
}

.schedule-layout-reference--left,
.schedule-layout-reference--right {
  writing-mode: vertical-rl;
}

.schedule-layout-reference--right {
  transform: translate(-50%, -50%) rotate(180deg);
}

.schedule-layout-reference--top-right,
.schedule-layout-reference--bottom-right {
  transform: translate(-100%, -50%);
}

.schedule-layout-reference--top-left,
.schedule-layout-reference--bottom-left {
  transform: translate(0, -50%);
}

/* right side: bleed inward/left */
.team-page-layout .schedule-layout-reference--right {
  transform: translate(calc(-100% - 12px), -50%);
  writing-mode: vertical-rl;
}

/* top-left / bottom-left: move inward */
.team-page-layout .schedule-layout-reference--top-left,
.team-page-layout .schedule-layout-reference--bottom-left {
  transform: translate(12px, -50%);
}

/* top-right / bottom-right: bleed left */
.team-page-layout .schedule-layout-reference--top-right,
.team-page-layout .schedule-layout-reference--bottom-right {
  transform: translate(calc(-100% - 12px), -50%);
}

/* top / bottom centered */
.team-page-layout .schedule-layout-reference--top,
.team-page-layout .schedule-layout-reference--bottom,
.team-page-layout .schedule-layout-reference--custom {
  transform: translate(-50%, -50%);
}

/* ===============================
   Team schedule page layout preview
   Owns sizing; overrides schedule board/modal sizing
   =============================== */

.team-session-layout-preview {
  width: 100%;
  margin-top: 12px;
}

/* This is the only box the pitch + refs should scale from */
.team-page-layout__pitch-anchor {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Override schedule renderer inherited dimensions */
.team-page-layout .schedule-layout-preview,
.team-page-layout .soccer-layout-preview,
.team-page-layout .indoor-layout-preview {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  box-sizing: border-box;
}

/* References anchor to pitch, not card/container */
.team-page-layout .schedule-layout-reference {
  position: absolute;
  left: calc(var(--ref-x) * 100%);
  top: calc(var(--ref-y) * 100%);
  z-index: 50;

  font-size: clamp(0.58rem, 1.6vw, 0.72rem);
  padding: 3px 6px;
  max-width: 90px;

  white-space: normal;
  text-align: center;
}

/* left side: move inward/right */
.team-page-layout .schedule-layout-reference--left {
  transform: translate(10px, -50%);
  writing-mode: vertical-rl;
}

/* right side: move inward/left */
.team-page-layout .schedule-layout-reference--right {
  transform: translate(calc(-100% - 10px), -50%);
  writing-mode: vertical-rl;
}

/* left corners: start inside card */
.team-page-layout .schedule-layout-reference--top-left,
.team-page-layout .schedule-layout-reference--bottom-left {
  transform: translate(10px, -50%);
}

/* right corners: align from right, bleed left */
.team-page-layout .schedule-layout-reference--top-right,
.team-page-layout .schedule-layout-reference--bottom-right {
  transform: translate(calc(-100% - 10px), -50%);
}

/* centered refs */
.team-page-layout .schedule-layout-reference--top,
.team-page-layout .schedule-layout-reference--bottom,
.team-page-layout .schedule-layout-reference--custom {
  transform: translate(-50%, -50%);
}

/* determines min max size of  */
.team-page-shell {
  width: min(100%, 1100px);
  min-width: 340px;
  margin: 0 auto;
}

.team-page-hetero__controls {
  margin-top: 50px;
}

.team-page-hetero__time {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.team-page-hetero__controls input[type="range"] {
  width: 100%;
  margin: 0 0 10px;
}

.team-page-hetero-scale {
  position: relative;
  height: 34px;
  margin: 4px 0 2px;
}

.team-page-hetero-scale::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
}

.team-page-hetero-scale__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.team-page-hetero-scale__line {
  display: block;
  width: 1px;
  height: 12px;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  margin: 0 auto 3px;
}

.team-page-hetero-scale__label {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}


.team-page-hetero-bars {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.team-page-hetero-lane {
  display: block;
}

.team-page-hetero-lane .hetero-lane__track {
  position: relative;
  height: 34px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.team-page-hetero-lane .hetero-lane__bar {
  position: absolute;
  top: 5px;
  bottom: 5px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 0.74rem;
  font-weight: 800;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.team-page-hetero-lane .hetero-lane__bar--vacant {
  background: color-mix(in srgb, var(--team-1-fill) 65%, transparent);
  border: 1px dashed var(--team-1-bd);
  color: var(--team-1-fg);
}

.team-page-hetero-bar-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  align-items: center;
}

.team-page-hetero-bar-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-page-hetero-bar-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.team-page-hetero-bar-cell {
  border-right: 1px solid var(--line);
}

.team-page-hetero-bar-cell.is-active {
  background: var(--accent-2);
}

.team-page-hetero-slider-shell {
  position: relative;
  height: 34px;
  margin: 8px 0 18px;
}

.team-page-hetero-slider-shell::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  z-index: 1;
}

.team-page-hetero-slider-window {
  position: absolute;
  left: var(--window-left);
  top: 7px;
  width: var(--window-width);
  height: 20px;

  border-radius: 8px;
  background: var(--accent-2);
  border: 1px solid color-mix(in srgb, var(--accent-2) 78%, #000 22%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
  z-index: 3;
}

.team-page-hetero-slider-grip {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.team-page-hetero-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0.001;
  cursor: grab;
  z-index: 4;
}

.team-page-hetero-slider:active {
  cursor: grabbing;
}

/* Index colors for horisontal team session bars in heterogeneous time blocks*/

.team-page-hetero-lane .hetero-lane__bar[data-team-color="0"] {
  background: var(--team-0-fill);
  border-color: var(--team-0-bd);
  color: var(--team-0-fg);
}

.team-page-hetero-lane .hetero-lane__bar[data-team-color="1"] {
  background: var(--team-1-fill);
  border-color: var(--team-1-bd);
  color: var(--team-1-fg);
}

.team-page-hetero-lane .hetero-lane__bar[data-team-color="2"] {
  background: var(--team-2-fill);
  border-color: var(--team-2-bd);
  color: var(--team-2-fg);
}

.team-page-hetero-lane .hetero-lane__bar[data-team-color="3"] {
  background: var(--team-3-fill);
  border-color: var(--team-3-bd);
  color: var(--team-3-fg);
}

.team-page-hetero-lane .hetero-lane__bar[data-team-color="4"] {
  background: var(--team-4-fill);
  border-color: var(--team-4-bd);
  color: var(--team-4-fg);
}

.team-page-hetero-lane .hetero-lane__bar[data-team-color="5"] {
  background: var(--team-5-fill);
  border-color: var(--team-5-bd);
  color: var(--team-5-fg);
}

.team-page-hetero-lane .hetero-lane__bar[data-team-color="6"] {
  background: var(--team-6-fill);
  border-color: var(--team-6-bd);
  color: var(--team-6-fg);
}

.team-page-hetero-lane .hetero-lane__bar[data-team-color="7"] {
  background: var(--team-7-fill);
  border-color: var(--team-7-bd);
  color: var(--team-7-fg);
}

.team-page-hetero-lane .hetero-lane__bar[data-team-color="8"] {
  background: var(--team-8-fill);
  border-color: var(--team-8-bd);
  color: var(--team-8-fg);
}

.team-page-hetero-lane .hetero-lane__bar[data-team-color="9"] {
  background: var(--team-9-fill);
  border-color: var(--team-9-bd);
  color: var(--team-9-fg);
}

.team-page-hetero-lane .hetero-lane__bar[data-team-color="10"] {
  background: var(--team-10-fill);
  border-color: var(--team-10-bd);
  color: var(--team-10-fg);
}

.team-page-hetero-lane .hetero-lane__bar[data-team-color="11"] {
  background: var(--team-11-fill);
  border-color: var(--team-11-bd);
  color: var(--team-11-fg);
}

.team-page-hetero-lane .hetero-lane__bar {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.08),
    0 1px 2px rgba(0,0,0,0.06);
}


/* Vacant layout areas */

.schedule-layout-preview .schedule-layout-team-area--vacant,
.schedule-layout-preview .soccer-layout-preview__area--vacant,
.schedule-layout-preview .indoor-layout-preview__area--vacant {

  background:
    color-mix(
      in srgb,
      var(--team-1-fill) 50%,
      transparent
    );

  border-color:
    color-mix(
      in srgb,
      var(--team-1-bd) 55%,
      transparent
    );

  color:
    color-mix(
      in srgb,
      var(--team-1-fg) 65%,
      var(--muted) 35%
    );
}

/* Center VACANT perfectly */

.layout-vacant-label {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;

  color: var(--team-1-fg);

  pointer-events: none;
}

/* No access placement */

.team-page-layout .soccer-layout-preview__area--locked,
.team-page-layout .indoor-layout-preview__area--locked {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--muted) 14%, transparent),
      color-mix(in srgb, var(--muted) 14%, transparent) 6px,
      transparent 6px,
      transparent 12px
    ),
    color-mix(in srgb, var(--muted) 10%, transparent);

  border: 1px dashed color-mix(in srgb, var(--muted) 45%, var(--line) 55%);
}

.team-page-layout .soccer-layout-preview__area--locked .soccer-layout-preview__area-label,
.team-page-layout .indoor-layout-preview__area--locked .indoor-layout-preview__area-label {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  font-size: 0.62rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.team-session-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.team-session-panel__title {
  margin: 0;
}

.team-session-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 7px;

  background: var(--accent);
  color: #fff;

  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .team-session-panel__head {
    align-items: flex-start;
    flex-direction: column;
  }
}


.team-session-location {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 14px;

  font-size: 1.12rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.team-session-location i {
  color: var(--accent);
  font-size: 1.05rem;
}


.team-schedule-pages-list .data-list__head,
.team-schedule-pages-list .data-list__row {
  grid-template-columns:
    minmax(220px, 1.6fr)
    90px
    minmax(240px, 1.4fr)
    120px;
}

@media (max-width: 800px) {
  .team-schedule-pages-list .data-list__strong::before {
    content: "Sessions: ";
    color: var(--muted);
    font-weight: 700;
  }

  .team-schedule-pages-list .data-list__link-cell {
    justify-content: space-between;
  }
}


/* ========================================
   Workspace shell
   Reusable for association/section/team pages
======================================== */

.workspace-page {
  min-height: calc(100vh - 64px);
}

.workspace-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 24px clamp(18px, 3vw, 38px) 26px;
  border-bottom: 4px solid var(--accent);
  background: var(--surface);
}

.workspace-back {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: none;
}

.workspace-back:hover {
  color: var(--accent-2);
  text-decoration: underline;
}

.workspace-title {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.workspace-subtitle {
  margin: 8px 0 0;
  color: var(--muted);
}

.workspace-hero__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.workspace-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: calc(100vh - 230px);
}

.workspace-sidebar {
  padding: 22px 14px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 76%, var(--surface-2) 24%);
}

.workspace-nav-label {
  margin: 0 8px 10px;
  color: color-mix(in srgb, var(--muted) 75%, transparent);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.workspace-nav {
  display: grid;
  gap: 4px;
}

.workspace-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 11px;
  color: color-mix(in srgb, var(--text) 82%, var(--muted) 18%);
  text-decoration: none;
  font-weight: 700;
}

.workspace-nav__item span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.workspace-nav__item i {
  width: 16px;
  text-align: center;
  color: var(--muted);
}

.workspace-nav__item strong {
  color: var(--muted);
  font-size: 0.82rem;
}

.workspace-nav__item:hover,
.workspace-nav__item.is-active {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
  color: color-mix(in srgb, var(--accent) 72%, #000 28%);
}

.workspace-nav__item:hover i,
.workspace-nav__item.is-active i {
  color: var(--accent);
}

.workspace-sidebar__settings {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.workspace-sidebar__settings a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

.workspace-sidebar__settings p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.workspace-main {
  padding: 28px clamp(18px, 3vw, 38px) 48px;
}

.workspace-kicker {
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--accent) 75%, #000 25%);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.workspace-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--shadow) 70%, transparent);
}

.workspace-panel--featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 24px;
  padding: 26px;
  margin-bottom: 18px;
}

.workspace-panel__main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.workspace-panel__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 850;
  letter-spacing: -0.035em;
}

.workspace-panel__meta {
  margin: 6px 0 18px;
  color: var(--muted);
}

.workspace-panel__aside {
  border-left: 1px solid var(--line);
  padding-left: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  gap: 8px 20px;
}

.workspace-panel__aside span {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.workspace-panel__aside strong {
  font-size: 1.45rem;
  line-height: 1;
}

.workspace-panel__aside small {
  color: var(--muted);
  font-weight: 600;
}

.workspace-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--accent) 75%, #000 25%);
}

.workspace-icon--dark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #08112f;
  color: #fff;
}

.workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.workspace-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

.workspace-badge--success {
  margin-left: 8px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface) 87%);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line) 65%);
  color: color-mix(in srgb, var(--accent) 70%, #000 30%);
  text-transform: uppercase;
}

.workspace-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.workspace-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow) 55%, transparent);
}

.workspace-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.workspace-card__head > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.workspace-card h2 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 850;
}

.workspace-card__head > strong {
  font-size: 1.8rem;
  line-height: 1;
}

.workspace-card__meta {
  margin: 14px 0 12px;
  color: var(--muted);
}

.workspace-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-2);
  font-weight: 750;
  text-decoration: none;
}

.workspace-link:hover {
  color: var(--accent-2);
  text-decoration: underline;
}

.workspace-list-section {
  margin-top: 8px;
}

.workspace-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.workspace-section-head h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 850;
}

.workspace-list {
  display: grid;
  gap: 8px;
}

.workspace-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.workspace-row:hover {
  border-color: color-mix(in srgb, var(--accent-2) 35%, var(--line) 65%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--shadow) 55%, transparent);
  color: var(--text);
}

.workspace-row__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.workspace-row__left i {
  color: var(--muted);
}

.workspace-row__left strong {
  display: block;
}

.workspace-row__left span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
}

.workspace-row__right {
  flex: 0 0 auto;
}

.workspace-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

@media (max-width: 980px) {
  .workspace-shell {
    grid-template-columns: 1fr;
  }

  .workspace-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .workspace-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-sidebar__settings {
    display: none;
  }

  .workspace-panel--featured {
    grid-template-columns: 1fr;
  }

  .workspace-panel__aside {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 18px;
  }
}


.workspace-section-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}


@media (max-width: 720px) {
  .workspace-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-hero__right {
    justify-content: flex-start;
  }

  .workspace-nav {
    grid-template-columns: 1fr;
  }

  .workspace-card-grid {
    grid-template-columns: 1fr;
  }

  .workspace-panel--featured {
    padding: 18px;
  }

  .workspace-panel__main {
    flex-direction: column;
  }

  .workspace-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.workspace-card-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workspace-card--link {
  color: var(--text);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

.workspace-card--link:hover {
  color: var(--text);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-2) 35%, var(--line) 65%);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--shadow) 70%, transparent);
}

.workspace-card__mini-meta {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.2;
}

.workspace-card__footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  color: var(--muted);
  font-size: 0.86rem;
}

.workspace-card__footer span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-card__footer i {
  margin-right: 5px;
  color: var(--muted);
}

.workspace-facility-card .workspace-icon {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--accent) 75%, #000 25%);
}

@media (max-width: 1180px) {
  .workspace-card-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .workspace-card-grid--3 {
    grid-template-columns: 1fr;
  }
}

.workspace-team-list .data-list__head,
.workspace-team-list .data-list__row {
  grid-template-columns: minmax(260px, 1.5fr) minmax(120px, .7fr) 100px;
}

.workspace-list-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.workspace-search {
  position: relative;
  max-width: 420px;
  width: 100%;
}

.workspace-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.85rem;
}

.workspace-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}

.workspace-search input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-2) 40%, var(--line) 60%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 12%, transparent);
}


/* ========================================
   Workspace secondary action panel
   Reusable for contextual follow-up actions
======================================== */

.workspace-action-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  padding: 20px 22px;
  margin-top: 16px;
}

.workspace-action-panel__main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.workspace-action-panel__content {
  min-width: 0;
}

.workspace-action-panel__title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.workspace-action-panel__text {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.workspace-action-panel > .workspace-actions {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .workspace-action-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-action-panel > .workspace-actions {
    width: 100%;
  }
}


/* ========================================
   Workspace card status strip

   Used when a card has an important operational state that
   should be visible at a glance while the card remains clickable.
======================================== */

.workspace-card--with-status {
  padding-top: 0;
  overflow: hidden;
}


.workspace-card__status {
  display: flex;
  align-items: center;
  gap: 6px;

  margin: 0 -20px 16px;
  padding: 7px 20px;

  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}


.workspace-card__status i {
  font-size: 0.7rem;
}


/*
  Skipped means:
  - the enhancement still exists
  - the card is still available to open
  - its rules are currently not used in scheduling
*/
.workspace-card__status--skipped {
  background: #ffe58a;
  color: #6e4e00;
  border-bottom: 1px solid
    color-mix(
      in srgb,
      #f2c500 45%,
      var(--line) 55%
    );
}

/*
  info
*/
.workspace-card__status--info {
  background: color-mix(
    in srgb,
    var(--accent-2) 12%,
    var(--surface) 88%
  );

  color: color-mix(
    in srgb,
    var(--accent-2) 78%,
    #000 22%
  );

  border-bottom: 1px solid
    color-mix(
      in srgb,
      var(--accent-2) 28%,
      var(--line) 72%
    );
}


/* ========================================
   Settings workspace
======================================== */

.settings-page {
  min-height: calc(100vh - 64px);
}

.settings-hero {
  padding-left: clamp(18px, 3vw, 38px);
  padding-right: clamp(18px, 3vw, 38px);
  background: var(--surface);
}

.settings-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: calc(100vh - 220px);
}

.settings-sidebar {
  padding: 22px 14px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 76%, var(--surface-2) 24%);
}

.settings-nav-label {
  margin: 0 8px 10px;
  color: color-mix(in srgb, var(--muted) 75%, transparent);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.settings-nav {
  display: grid;
  gap: 4px;
}

.settings-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 11px;
  color: color-mix(in srgb, var(--text) 82%, var(--muted) 18%);
  text-decoration: none;
  font-weight: 700;
}

.settings-nav__item i {
  width: 16px;
  text-align: center;
  color: var(--muted);
}

.settings-nav__item:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
  color: color-mix(in srgb, var(--accent) 72%, #000 28%);
}

.settings-nav__item:hover i {
  color: var(--accent);
}

.settings-nav__item--danger:hover {
  background: color-mix(in srgb, #e03131 9%, var(--surface) 91%);
  color: #e03131;
}

.settings-main {
  padding: 28px clamp(18px, 3vw, 38px) 48px;
  display: grid;
  gap: 18px;
}

.settings-panel {
  background: var(--surface);
}

.settings-panel__text {
  margin: 0 0 14px;
  color: var(--muted);
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-action-list {
  display: grid;
  gap: 10px;
}

.settings-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;

  color: var(--text);
  text-decoration: none;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-2) 12%);
}

.settings-action-row:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-2) 35%, var(--line) 65%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--shadow) 55%, transparent);
}

.settings-action-row strong {
  display: block;
  font-weight: 850;
}

.settings-action-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.84rem;
}

.settings-action-row > i {
  color: var(--muted);
}

.settings-panel--danger {
  border-color: color-mix(in srgb, #e03131 30%, var(--line) 70%);
}

@media (max-width: 980px) {
  .settings-shell {
    grid-template-columns: 1fr;
  }

  .settings-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .settings-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .settings-nav {
    grid-template-columns: 1fr;
  }
}

.workspace-panel__aside--status {
  display: block;
}

.season-status-list {
  display: grid;
  gap: 8px;
}

.season-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
}

.season-status-item.is-done {
  color: color-mix(in srgb, var(--accent) 72%, #000 28%);
}

.season-status-item.is-missing {
  color: color-mix(in srgb, #d97706 80%, #000 20%);
}

.season-status-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--line);
}

/* BulkTeam paste import */

textarea.form-control.bulk-team-textarea {
  min-height: 500px;
  resize: vertical;
}

/* Workspace disclosure  */

.workspace-disclosure {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;

  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;

  cursor: pointer;
}

.workspace-disclosure:hover {
  color: var(--accent);
}

.workspace-disclosure:focus-visible {
  outline: none;
  color: var(--accent);
}

.workspace-disclosure i {
  font-size: 0.8rem;
  transition: transform 0.18s ease;
}


/* ===================================
Checklist component
======================================*/

.checklist {
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 1.35rem 1.45rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 8px 24px var(--shadow);
}

.checklist__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.checklist__head h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.checklist__head p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.checklist__badge {
  flex: 0 0 auto;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.checklist__list {
  display: flex;
  flex-direction: column;
}

.checklist__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

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

.checklist__item:hover {
  color: inherit;
  text-decoration: none;
}

.checklist__icon {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
}

.checklist__icon--pending {
  background: #fff8d6;
  border: 1px solid #f2c500;
  color: #b98100;
}

.checklist__icon--complete {
  background: #d8f5e7;
  border: 1px solid #10b981;
  color: #047857;
}

.checklist__content {
  min-width: 0;
}

.checklist__title {
  display: block;
  font-weight: 800;
}

.checklist__description {
  display: block;
  color: var(--muted);
  margin-top: 0.15rem;
  font-size: 0.9rem;
}

.checklist__action {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
}

.checklist__action--primary {
  border: 1px solid #f2c500;
  background: #fff8d6;
  color: #8a6200;
}

.checklist__action--complete {
  color: var(--link);
}

@media (max-width: 760px) {
  .checklist__head {
    flex-direction: column;
  }

  .checklist__item {
    grid-template-columns: auto 1fr;
  }

  .checklist__action {
    grid-column: 2;
    justify-self: start;
  }
}

.checklist__icon--locked {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--muted);
}

.checklist__action--disabled {
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--line);
}

.checklist__item--disabled {
    cursor: default;
    opacity: .8;
}

.checklist__item--disabled:hover {
    text-decoration: none;
}

.checklist-success {
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid #10b981;
  border-radius: 1rem;
  background: #ecfdf5;
  box-shadow: 0 8px 24px var(--shadow);
}

.checklist-success__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.checklist-success__content {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.checklist-success__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d8f5e7;
  color: #047857;
  font-size: 1rem;
  flex: 0 0 auto;
}

.checklist-success h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
}

.checklist-success p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.checklist-success__dismiss {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  padding: 0.35rem 0.5rem;
}

.checklist-success__dismiss:hover {
  color: var(--text);
}

@media (max-width: 760px) {
  .checklist-success__inner {
    align-items: flex-start;
  }
}


/* ========================================
   Season workspace
======================================== */

.season-workspace__main {
  min-width: 0;
}

.season-hero__actions {
  align-self: center;
}

.season-optimize {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.season-optimize__caption {
  max-width: 250px;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: right;
}

.season-nav-group {
  display: grid;
  gap: 4px;
  margin-top: 16px;
}

.season-nav__parent {
  margin-bottom: 2px;
}

.season-nav__children {
  display: grid;
  gap: 3px;
  margin-left: 18px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.season-nav__child {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 0.87rem;
}

.season-nav__child--locked,
.season-nav__locked {
  cursor: default;
  opacity: 0.58;
}

.season-nav__optional {
  margin-left: 3px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.season-nav__state {
  flex: 0 0 auto;
  width: auto !important;
}

.season-nav__state--complete {
  color: #047857 !important;
}

.season-nav__state--progress {
  color: #b98100 !important;
}

.season-nav__state--skipped {
  color: var(--muted) !important;
}

.season-nav__result-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #10b981;
}

.season-view {
  width: 100%;
  max-width: 1120px;
}

.season-view__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.season-view__title {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 850;
  letter-spacing: -0.035em;
}

.season-view__subtitle {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--muted);
}

.season-next-step,
.season-ready-card {
  margin-bottom: 18px;
  padding: 24px 26px;
  border: 1px solid color-mix(
    in srgb,
    #10b981 45%,
    var(--line) 55%
  );
  border-radius: 14px;
  background: color-mix(
    in srgb,
    #ecfdf5 72%,
    var(--surface) 28%
  );
  box-shadow: 0 8px 22px
    color-mix(in srgb, var(--shadow) 55%, transparent);
}

.season-next-step__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.season-next-step__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: #08112f;
  color: #fff;
  font-size: 1.15rem;
}

.season-next-step__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.season-next-step h2,
.season-ready-card h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.season-next-step p,
.season-ready-card p {
  max-width: 720px;
  margin: 5px 0 0;
  color: var(--muted);
}

.season-next-step__payoff {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: #047857;
  font-size: 0.82rem;
  font-weight: 700;
}

.season-optional-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  vertical-align: middle;
}

.season-ready-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.season-ready-card--active-schedule {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 5%, var(--surface)) 0%,
      var(--surface) 100%
    );
}

.season-ready-card--active-schedule {
  padding: 2rem 2.25rem;
}

.season-ready-card--active-schedule h2 {
  margin-top: 0.4rem;
  margin-bottom: 0.75rem;
}

.season-ready-card--active-schedule p {
  max-width: 48rem;
  margin-bottom: 1.5rem;
}

.season-ready-card--active-schedule .season-ready-card__actions {
  margin-top: 1.75rem;
}

.season-awaiting {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding: 17px 19px;
  border: 1px solid #f2c500;
  border-radius: 12px;
  background: #fff8d6;
}

.season-awaiting__icon {
  color: #8a6200;
  font-size: 1.2rem;
}

.season-awaiting strong {
  color: #6e4e00;
}

.season-awaiting p {
  margin: 3px 0 0;
  color: #806526;
}

.season-checklist__item--complete {
  background: color-mix(
    in srgb,
    #ecfdf5 60%,
    var(--surface) 40%
  );
}

.season-setup-complete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  background: #ecfdf5;
}

.season-setup-complete__icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
}

.season-setup-complete strong,
.season-setup-complete span {
  display: block;
}

.season-setup-complete span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.85rem;
}

.season-locked-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid #f2c500;
  border-radius: 12px;
  background: #fff8d6;
}

.season-locked-panel__icon {
  color: #8a6200;
  font-size: 1.2rem;
}

.season-locked-panel strong {
  display: block;
  color: #6e4e00;
}

.season-locked-panel p {
  margin: 3px 0 0;
  color: #806526;
}

.season-enhancement-card {
  min-height: 170px;
}

.season-result-card {
  min-width: 0;
  padding: 20px;
}

.season-team-pages {
  margin-top: 18px;
  padding: 20px;
}

@media (max-width: 980px) {
  .season-nav__children {
    margin-left: 8px;
  }
}

@media (max-width: 720px) {
  .season-optimize {
    align-items: flex-start;
  }

  .season-optimize__caption {
    text-align: left;
  }

  .season-next-step__row,
  .season-setup-complete,
  .season-locked-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .season-next-step__row > .btn,
  .season-setup-complete > .btn,
  .season-locked-panel > .btn {
    grid-column: 2;
    justify-self: start;
  }

  .season-next-step,
  .season-ready-card {
    padding: 20px;
  }
}

/* ========================================
   Season results workflow
======================================== */

.season-results-view {
  max-width: 960px;
}

.season-results-flow {
  display: flex;
  flex-direction: column;
}

.season-results-stage {
  min-width: 0;
}

.season-results-stage__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.season-results-stage__number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #08112f;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
}

.season-results-stage__head h2 {
  margin: 1px 0 0;
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.season-results-stage__head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.season-results-connector {
  position: relative;
  width: 30px;
  height: 58px;
  margin-left: 0;
  display: flex;
  justify-content: center;
  color: var(--muted);
}

.season-results-connector span {
  position: absolute;
  top: 5px;
  bottom: 14px;
  width: 1px;
  background: var(--line);
}

.season-results-connector i {
  position: absolute;
  bottom: 0;
  padding: 2px;
  background: var(--surface-2);
  font-size: 0.78rem;
}

.season-results-connector.is-active {
  color: #047857;
}

.season-results-connector.is-active span {
  background: color-mix(
    in srgb,
    #10b981 55%,
    var(--line) 45%
  );
}

.season-result-card {
  width: 100%;
  min-width: 0;
  padding: 20px;
}

.season-result-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.season-result-card__head h3 {
  font-size: 1rem;
  font-weight: 850;
}

.season-job-capacity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.season-team-pages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 0;
  padding: 22px;
}

.season-team-pages__main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.season-team-pages__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.season-team-pages h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 850;
}

.season-team-pages p {
  margin: 5px 0 0;
  color: var(--muted);
}

@media (max-width: 720px) {
  .season-result-card__head {
    flex-direction: column;
  }

  .season-job-capacity {
    align-items: flex-start;
  }

  .season-job-capacity [data-job-info] {
    text-align: left !important;
  }

  .season-team-pages {
    align-items: flex-start;
    flex-direction: column;
  }

  .season-team-pages > .btn {
    margin-left: 58px;
  }
}


/* =============================
   Age Time Rules
   ============================= */

.age-time-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.5rem;
}

.info-callout {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #10b981;
  border-radius: 1rem;
  background: #ecfdf5;
}

.info-callout__icon {
  color: #047857;
  font-size: 1.2rem;
  flex: 0 0 auto;
}

.info-callout h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
}

.info-callout p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.age-time-rules-panel,
.age-time-editor {
  margin-bottom: 1.25rem;
}

.age-time-table {
  width: 100%;
}

.age-time-table__head,
.age-time-table__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  gap: 1rem;
  align-items: center;
}

.age-time-table__head {
  padding: 0.75rem 1rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  border-bottom: 1px solid var(--line);
}

.age-time-table__row {
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}

.age-time-table__row:last-child {
  border-bottom: 0;
}

.age-time-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 0.85rem;
  font-weight: 900;
}

.age-time-table code {
  padding: 0.25rem 0.45rem;
  border-radius: 0.45rem;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
}

.age-time-table__actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

.icon-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  color: var(--text);
  background: var(--surface-2);
}

.icon-btn--danger:hover {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fecaca;
}

.age-time-add-link {
  width: 100%;
  padding: 1rem;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--link);
  font-weight: 900;
  text-align: left;
}

.age-time-add-link:hover {
  background: var(--surface-2);
}

.age-time-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted);
}

.age-time-empty__icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.8rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.age-time-empty h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 900;
}

.age-time-empty p {
  margin: 0.35rem 0 0;
}

.age-time-editor__section-label {
  margin: 1rem 0 0.45rem;
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.age-time-editor__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 1rem;
}

.age-time-editor__hint {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.age-time-day-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.age-time-day-option {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
}

.age-time-day-option.is-active {
  background: #ecfdf5;
  border-color: #10b981;
  color: #047857;
}

.age-time-specific-day {
  width: auto;
  min-width: 180px;
}

.age-time-editor__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.age-time-save-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

.age-time-editor__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .age-time-editor__grid--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .age-time-main {
    padding: 1rem;
  }

  .info-callout {
    align-items: flex-start;
  }

  .age-time-table__head {
    display: none;
  }

  .age-time-table__row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .age-time-table__actions {
    justify-content: flex-start;
  }

  .age-time-editor__grid {
    grid-template-columns: 1fr;
  }

  .age-time-save-actions {
    flex-direction: column;
  }

  .age-time-save-actions .btn {
    width: 100%;
  }
}

.age-time-empty {
  max-width: 540px;
  margin: 0 auto;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
}

.age-time-empty p {
  margin: 0.55rem 0 0;
  line-height: 1.5;
}

.age-time-empty__button {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid #f2c500;
  background: #fff8d6;
  color: #8a6200;
  font-weight: 900;
}

.age-time-empty__button:hover {
  background: #fff3bf;
}
/*
.age-time-save-actions {
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.age-time-save-actions.has-unsaved-changes {
  padding: 0.85rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 88%, #f2c500 12%);
  box-shadow: 0 8px 24px color-mix(in srgb, #f2c500 16%, transparent);
}


.age-time-save-actions.has-unsaved-changes [data-save-age-time-form] {
  box-shadow:
    0 0 0 3px color-mix(in srgb, #f2c500 35%, transparent),
    0 8px 18px color-mix(in srgb, #f2c500 20%, transparent);
}
*/

.age-time-save-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-start;
}

.age-time-save-actions__buttons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.age-time-unsaved-note {
  color: #8a6200;
  font-size: 0.85rem;
  font-weight: 900;
}

@media (max-width: 760px) {
  .age-time-save-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .age-time-save-actions__buttons {
    margin-left: 0;
    width: 100%;
    flex-direction: column;
  }

  .age-time-save-actions__buttons .btn {
    width: 100%;
  }
}

.age-time-save-actions.has-unsaved-changes [data-save-age-time-form],
.age-time-save-actions.has-unsaved-changes [data-save-training-volume-form],
.age-time-save-actions.has-unsaved-changes [data-save-age-preference-form] {
  animation: saveButtonGlow 2.5s ease-in-out infinite;
}

@keyframes saveButtonGlow {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(242, 197, 0, 0.18);
  }

  50% {
    box-shadow:
      0 0 0 4px rgba(242, 197, 0, 0.30);
  }
}

.age-preference-table .age-time-table__head,
.age-preference-table .age-time-table__row {
  grid-template-columns: 1.1fr 1.2fr 1.4fr auto;
}


/* =============================
   Inline Notice
   ============================= */

.inline-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.inline-notice.is-hidden {
  display: none;
}

.inline-notice__icon {
  flex: 0 0 auto;
  margin-top: 0.1rem;
}

.inline-notice__content {
  min-width: 0;
}

.inline-notice__title {
  font-weight: 900;
  margin-bottom: 0.15rem;
}

.inline-notice__text {
  color: var(--muted);
  font-size: 0.9rem;
}

.inline-notice--warning {
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-3) 10%);
  border-color: color-mix(in srgb, var(--accent-3) 35%, var(--line) 65%);
}

.inline-notice--warning .inline-notice__icon {
  color: color-mix(in srgb, var(--accent-3) 80%, #000 20%);
}

.inline-notice--danger {
  background: color-mix(in srgb, var(--surface) 88%, #e03131 8%);
  border-color: color-mix(in srgb, #e03131 35%, var(--line) 65%);
}

.inline-notice--danger .inline-notice__icon {
  color: #e03131;
}


/* ===================================
period/season checklist call to action 
======================================*/


.season-checklist__item--needs-review {
  background:
    color-mix(
      in srgb,
      var(--surface) 91%,
      #f2c500 9%
    );
}

.season-next-step--review {
  border-color:
    color-mix(
      in srgb,
      #f2c500 65%,
      var(--line) 35%
    );
  background:
    color-mix(
      in srgb,
      var(--surface) 92%,
      #f2c500 8%
    );
}

.season-next-step__icon--review {
  background: #fff8d6;
  color: #8a6200;
}

.season-next-step__payoff--review {
  color: #8a6200;
}

.season-review-cta {
  border: 1px solid #f2c500;
  background: #fff8d6;
  color: #8a6200;
  font-weight: 800;
}

.season-review-cta:hover {
  border-color: #d9af00;
  background: #fff2ad;
  color: #715000;
}


/* ========================================
   Team Wishes management
======================================== */

.team-wishes-main {
  max-width: 980px;
}

.team-wishes-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 8px 22px
    color-mix(in srgb, var(--shadow) 55%, transparent);
}

.team-wishes-card h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.team-wishes-card > p {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--muted);
}

.team-wishes-card--muted {
  background: var(--surface-2);
}

.team-wishes-card--success {
  border-color: #a7f3d0;
  background: #ecfdf5;
}

.team-wishes-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.team-wishes-card__actions form {
  margin: 0;
}

.team-wishes-lock {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 1px solid #f2c500;
  border-radius: 12px;
  background: #fff8d6;
}

.team-wishes-lock__icon {
  color: #8a6200;
  font-size: 1.25rem;
}

.team-wishes-lock h2 {
  margin: 0;
  color: #6e4e00;
  font-size: 1.12rem;
  font-weight: 850;
}

.team-wishes-lock p {
  margin: 5px 0 0;
  color: #806526;
}

.team-wishes-lock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.team-wishes-status-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.team-wishes-status-row__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}

.team-wishes-question-list {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.team-wishes-question {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}

.team-wishes-question:hover {
  border-color:
    color-mix(in srgb, var(--accent-2) 35%, var(--line) 65%);
}

.team-wishes-question input {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  accent-color: #10b981;
}

.team-wishes-question span {
  font-size: 0.92rem;
  font-weight: 650;
}

.team-wishes-deadline {
  max-width: 300px;
  margin-top: 22px;
}

.team-wishes-deadline label {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
}

.team-wishes-deadline small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.team-wishes-live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.team-wishes-live-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.team-wishes-deadline-pill {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid #f2c500;
  border-radius: 999px;
  background: #fff8d6;
  color: #8a6200;
  font-size: 0.76rem;
  font-weight: 850;
}

.team-wishes-team-list {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.team-wishes-team-row {
  display: grid;
  grid-template-columns:
    minmax(120px, 0.7fr)
    minmax(220px, 1.6fr)
    90px
    auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.team-wishes-team-row__name {
  min-width: 0;
}

.team-wishes-team-row__url {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-wishes-response {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.team-wishes-response--done {
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
}

.team-wishes-background-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid
    color-mix(in srgb, var(--accent-2) 25%, var(--line) 75%);
  border-radius: 10px;
  background:
    color-mix(in srgb, var(--accent-2) 7%, var(--surface) 93%);
  color: var(--muted);
  font-size: 0.87rem;
}

.team-wishes-background-note i {
  margin-top: 2px;
  color: var(--accent-2);
}

.team-wishes-collected {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.team-wishes-collected__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  font-size: 1.2rem;
}

.team-wishes-collected p {
  margin: 5px 0 16px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .team-wishes-live-head {
    flex-direction: column;
  }

  .team-wishes-team-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .team-wishes-team-row__url {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .team-wishes-response {
    grid-column: 1;
    grid-row: 3;
  }

  .team-wishes-team-row .btn {
    grid-column: 2;
    grid-row: 3;
  }
}


/* ========================================
   Team Wishes response review
======================================== */

.team-wishes-review__status {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.team-wishes-review-team {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  overflow: hidden;
}

.team-wishes-review-team .team-wishes-team-row {
  border: 0;
  border-radius: 0;
}

.team-wishes-team-row__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.team-wishes-response--missing {
  color: #b45309;
}

.team-wishes-response-panel {
  padding: 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.team-wishes-response-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.team-wishes-response-panel__head strong {
  font-size: 0.92rem;
}

.team-wishes-response-panel__head span {
  color: var(--muted);
  font-size: 0.78rem;
}

.team-wishes-answer-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.team-wishes-answer {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1.3fr);
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.team-wishes-answer dt,
.team-wishes-answer dd {
  margin: 0;
}

.team-wishes-answer dt {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.team-wishes-answer dd {
  font-size: 0.9rem;
}

.team-wishes-review-actions {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.team-wishes-reopen,
.team-wishes-ignore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.team-wishes-reopen h3,
.team-wishes-ignore h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 850;
}

.team-wishes-reopen p,
.team-wishes-ignore p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.team-wishes-reopen__form {
  display: grid;
  grid-template-columns: auto minmax(145px, auto) auto;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.team-wishes-reopen__form label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.team-wishes-ignore {
  border-color:
    color-mix(in srgb, #dc3545 28%, var(--line) 72%);
}

@media (max-width: 820px) {
  .team-wishes-reopen,
  .team-wishes-ignore {
    align-items: flex-start;
    flex-direction: column;
  }

  .team-wishes-reopen__form {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .team-wishes-reopen__form label {
    margin-bottom: -3px;
  }
}

@media (max-width: 760px) {
  .team-wishes-answer {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .team-wishes-response-panel__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .team-wishes-team-row__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

.team-wishes-config-summary {
  margin-bottom: 18px;
}

.team-wishes-config-summary__head,
.team-wishes-config-editor__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.team-wishes-config-summary__head p,
.team-wishes-config-editor__head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.team-wishes-config-editor[hidden],
[data-team-wishes-config-summary][hidden] {
  display: none;
}

.team-wishes-config-editor {
  margin: 0;
}

.team-wishes-question strong,
.team-wishes-question small {
  display: block;
}

.team-wishes-question small {
  margin-top: 2px;
  color: var(--muted);
  font-weight: 500;
}

.team-wishes-config-warning {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 20px;
  padding: 13px 15px;
  border: 1px solid #f2c500;
  border-radius: 10px;
  background: #fff8d6;
  color: #6e4e00;
}

.team-wishes-config-warning > i {
  margin-top: 2px;
}

.team-wishes-config-warning p {
  margin: 3px 0 0;
  color: #806526;
  font-size: 0.84rem;
}

@media (max-width: 760px) {
  .team-wishes-config-summary__head,
  .team-wishes-config-editor__head {
    flex-direction: column;
  }
}

.team-wishes-config-history__deadline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.8rem;
}

.team-wishes-config-history__deadline strong {
  display: inline;
  color: var(--text);
  font-size: inherit;
}


/* ========================================
   Public Team Wishes
======================================== */

.public-wishes-body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--accent) 8%,
        var(--surface-2) 92%
      ),
      var(--surface-2)
    );
  color: var(--text);
}

.public-wishes {
  width: min(100% - 28px, 680px);
  margin: 0 auto;
  padding: 30px 0 60px;
}

.public-wishes__hero {
  padding: 18px 4px 24px;
  text-align: center;
}

.public-wishes__brand {
  margin-bottom: 24px;
  color: var(--accent-2);
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.public-wishes__eyebrow {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.public-wishes__hero h1 {
  margin: 5px 0 0;
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.045em;
}

.public-wishes__hero p {
  margin: 6px 0 0;
  color: var(--muted);
}

.public-wishes-card {
  padding: clamp(20px, 5vw, 32px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow:
    0 18px 50px
    color-mix(
      in srgb,
      var(--shadow) 72%,
      transparent
    );
}

.public-wishes-intro {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.public-wishes-intro h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
}

.public-wishes-intro p {
  margin: 7px 0 0;
  color: var(--muted);
}

.public-wishes-deadline {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff8d6;
  color: #8a6200;
  font-size: 0.8rem;
}

.public-wishes-errors {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #fca5a5;
  border-radius: 12px;
  background: #fef2f2;
  color: #991b1b;
}

.public-wishes-errors ul {
  margin: 7px 0 0;
  padding-left: 20px;
}

.public-wishes-form {
  display: grid;
}

.public-wishes-question {
  min-width: 0;
  margin: 0;
  padding: 24px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.public-wishes-question legend {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 850;
}

.public-wishes-question > p {
  margin: 5px 0 14px;
  color: var(--muted);
  font-size: 0.88rem;
}

.public-wishes-options,
.public-wishes-radio-options {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.public-wishes-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
}

.public-wishes-option:hover {
  border-color:
    color-mix(
      in srgb,
      var(--accent-2) 38%,
      var(--line) 62%
    );
}

.public-wishes-option:has(input:checked) {
  border-color: #10b981;
  background: #ecfdf5;
}

.public-wishes-option:has(input:disabled) {
  cursor: default;
  opacity: 0.55;
}

.public-wishes-option input {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  accent-color: #10b981;
}

.public-wishes-option span {
  font-weight: 750;
}

.public-wishes-selection-count {
  display: block;
  margin-top: 9px;
  color: var(--muted);
}

.public-wishes-time-range {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.public-wishes-time-range label span,
.public-wishes-overlap-details label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 800;
}

.public-wishes-question > .form-select,
.public-wishes-question > .form-control {
  margin-top: 14px;
}

.public-wishes-overlap-details {
  margin-top: 14px;
}

.public-wishes-submit {
  padding-top: 24px;
  text-align: center;
}

.public-wishes-submit__button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: #10b981;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
}

.public-wishes-submit__button:hover {
  background: #059669;
}

.public-wishes-submit p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.public-wishes-success,
.public-wishes-closed {
  padding-top: 44px;
  padding-bottom: 44px;
  text-align: center;
}

.public-wishes-success__icon,
.public-wishes-closed__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 999px;
  font-size: 1.5rem;
}

.public-wishes-success__icon {
  background: #d8f5e7;
  color: #047857;
}

.public-wishes-closed__icon {
  background: var(--surface-2);
  color: var(--muted);
}

.public-wishes-success h2,
.public-wishes-closed h2,
.public-wishes-closed h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
}

.public-wishes-success p,
.public-wishes-closed p {
  margin: 9px auto 0;
  max-width: 480px;
  color: var(--muted);
}

.public-wishes-success__note,
.public-wishes-closed__note {
  font-size: 0.84rem;
}

@media (max-width: 520px) {
  .public-wishes {
    width: min(100% - 18px, 680px);
    padding-top: 14px;
  }

  .public-wishes-card {
    border-radius: 16px;
  }

  .public-wishes-options,
  .public-wishes-radio-options,
  .public-wishes-time-range {
    grid-template-columns: 1fr;
  }
}

.public-wishes-window__clear {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}

.public-wishes-window__clear:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ========================================
   Team Wishes structured configuration
======================================== */

.team-wishes-config-fields {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.team-wishes-config-section {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}

.team-wishes-config-toggle {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  cursor: pointer;
}

.team-wishes-config-toggle > input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: #10b981;
}

.team-wishes-config-toggle strong,
.team-wishes-config-toggle small {
  display: block;
}

.team-wishes-config-toggle strong {
  font-size: 0.94rem;
}

.team-wishes-config-toggle small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
}

.team-wishes-config-options {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 15px;
  padding-top: 15px;
  padding-left: 30px;
  border-top: 1px solid var(--line);
}

.team-wishes-config-options[hidden] {
  display: none;
}

.team-wishes-config-options > label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.79rem;
  font-weight: 800;
}

.team-wishes-config-checkbox {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  cursor: pointer;
}

.team-wishes-config-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #10b981;
}

.team-wishes-config-checkbox span {
  font-size: 0.87rem;
  font-weight: 700;
}

.team-wishes-answer dd {
  white-space: pre-line;
}

@media (max-width: 680px) {
  .team-wishes-config-options {
    grid-template-columns: 1fr;
    padding-left: 0;
  }
}


/* =======================================
  Sports manager handling of team wishes
==========================================*/

.team-wishes-review-answer-group {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.team-wishes-review-answer-group:last-child {
  border-bottom: 0;
}

.team-wishes-review-answer-group h4 {
  margin: 0 0 9px;
  font-size: 0.86rem;
  font-weight: 850;
}

.team-wishes-review-wish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 8px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.team-wishes-review-wish__content {
  min-width: 0;
}

.team-wishes-review-wish__content strong {
  display: block;
  font-size: 0.88rem;
}

.team-wishes-review-wish__content p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.79rem;
}

.team-wishes-review-wish__content p span {
  font-weight: 800;
}

.team-wishes-decision {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.team-wishes-decision__actions {
  display: flex;
  gap: 6px;
}

.team-wishes-decision-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 0.73rem;
  font-weight: 850;
}

.team-wishes-decision-status--use {
  color: #047857;
}

.team-wishes-decision-status--ignore {
  color: var(--muted);
}

.team-wishes-decision-status--pending {
  color: #b45309;
}

.team-wishes-review-comment {
  padding: 11px 13px;
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 0.87rem;
  line-height: 1.5;
}

.team-wishes-review-comment__note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.72rem;
}

@media (max-width: 760px) {
  .team-wishes-review-wish {
    align-items: flex-start;
    flex-direction: column;
  }

  .team-wishes-decision {
    width: 100%;
    justify-content: space-between;
  }
}


/* ========================================
   Team Wishes review attention state
======================================== */

.team-wishes-team-row--needs-review {
  background:
    color-mix(
      in srgb,
      var(--surface) 91%,
      #f2c500 9%
    );
}

.team-wishes-response--review {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8a6200;
  font-weight: 800;
}

.team-wishes-response--review i {
  color: #b98100;
}

.team-wishes-review-cta {
  border: 1px solid #f2c500;
  background: #fff8d6;
  color: #8a6200;
  font-weight: 800;
}

.team-wishes-review-cta:hover {
  border-color: #d9af00;
  background: #fff2ad;
  color: #715000;
}

.team-wishes-review-cta:focus {
  box-shadow:
    0 0 0 0.2rem
    color-mix(
      in srgb,
      #f2c500 24%,
      transparent
    );
}


/* ========================================
   Public Team Wishes structured inputs
======================================== */

.public-wishes-window-list {
  display: grid;
  gap: 12px;
  margin-top: 15px;
}

.public-wishes-window {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.public-wishes-window__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.public-wishes-window__head strong {
  font-size: 0.9rem;
}

.public-wishes-window__head span {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.public-wishes-window__fields {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.2fr)
    minmax(110px, 0.8fr)
    minmax(110px, 0.8fr);
  gap: 10px;
}

.public-wishes-window__fields label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.public-wishes-window__hint {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.76rem;
}

.public-wishes-window__error {
  margin-top: 8px;
  color: #b91c1c;
  font-size: 0.8rem;
  font-weight: 750;
}

.public-wishes-rule-note,
.public-wishes-empty-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.82rem;
}

.public-wishes-team-options {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

@media (max-width: 580px) {
  .public-wishes-window__fields {
    grid-template-columns: 1fr 1fr;
  }

  .public-wishes-window__fields label:first-child {
    grid-column: 1 / -1;
  }

  .public-wishes-team-options {
    grid-template-columns: 1fr;
  }
}

.public-wishes-window__reason {
  display: block;
  margin-top: 12px;
}

.public-wishes-window__reason > span,
.public-wishes-facility-reason > label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.public-wishes-facility-reason {
  margin-top: 14px;
}

/** ==========================
    PUBLIC WISHES PAGE HEADER
==============================*/ 

.public-wishes-header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 2rem;
}

.public-wishes-header__brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(0, 0, 0, .9);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--bs-body-font-family);
  font-size: 1.25rem;
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
}

.public-wishes-header__brand:hover {
  color: rgba(0, 0, 0, .9);
  text-decoration: none;
}

.public-wishes-header__brand img {
  display: block;
  width: auto;
  height: 30px;
}

.public-wishes-identity {
  margin-bottom: 28px;
  text-align: center;
}

.public-wishes-identity__club,
.public-wishes-identity__team,
.public-wishes-identity__season {
  text-align: center;
}



/* =========================================================
   Team conflict rules
   ========================================================= */

.team-conflict-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.team-conflict-rule-grid {
  display: grid;
  grid-template-columns:
    minmax(180px, 0.9fr)
    minmax(240px, 1.1fr)
    minmax(220px, 1fr)
    minmax(300px, 1.5fr);
  gap: 16px;
  align-items: start;
}

.team-conflict-field--teams {
  min-width: 0;
}

.team-conflict-wish-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.team-conflict-wish-team {
  font-weight: 700;
  font-size: 1.05rem;
}

.team-wish-conflict-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-wish-conflict-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.team-wish-conflict-row.is-ignored {
  opacity: 0.65;
}

.team-wish-conflict-relation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.team-conflict-relation-icon {
  color: var(--muted);
}

.team-wish-conflict-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.team-conflict-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
}

.team-conflict-status--use {
  color: var(--success);
}

.team-conflict-status--ignore,
.team-conflict-status--pending {
  color: var(--muted);
}

@media (max-width: 1100px) {
  .team-conflict-rule-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .team-conflict-section-head,
  .team-wish-conflict-row {
    flex-direction: column;
    align-items: stretch;
  }

  .team-conflict-rule-grid {
    grid-template-columns: 1fr;
  }

  .team-wish-conflict-actions {
    justify-content: flex-start;
  }
}

/* =========================================================
   Enhancement rule filters
   Allow filter dropdowns to escape toolbar cards.
   ========================================================= */

#teamConflictToolbar,
#unavailableTimeToolbar,
#teamConflictToolbar .app-card__body,
#unavailableTimeToolbar .app-card__body,
#teamConflictToolbar .rules-toolbar-filter,
#unavailableTimeToolbar .rules-toolbar-filter,
#teamConflictToolbar .rule-filterbar-grid,
#unavailableTimeToolbar .rule-filterbar-grid,
#teamConflictToolbar .rule-filterbar-field,
#unavailableTimeToolbar .rule-filterbar-field {
  overflow: visible;
}


#teamConflictToolbar,
#unavailableTimeToolbar {
  position: relative;
  z-index: 20;
}


#teamConflictToolbar .tm-filter-select,
#unavailableTimeToolbar .tm-filter-select {
  position: relative;
}


#teamConflictToolbar .tm-filter-select__dropdown,
#unavailableTimeToolbar .tm-filter-select__dropdown {
  z-index: 100;
}



/* ===========================================
   Training Volume Select page in season
=============================================*/

.training-volume-option {
  border-bottom: 1px solid var(--line);
}

.training-volume-option:last-child {
  border-bottom: 0;
}


.training-volume-option__summary {
  border-bottom: 0;
}


.training-volume-option__select {
  display: flex;
  align-items: flex-start;
  flex: 1;
  gap: 0.35rem;
  cursor: pointer;
}

.training-volume-option__select > span {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}


.training-volume-option__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}


.training-volume-option__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  padding: 0.35rem 0.55rem;

  border: 0;
  background: transparent;

  color: var(--accent-2);
  font-size: 0.82rem;
  font-weight: 600;

  cursor: pointer;
}

.training-volume-option__toggle:hover {
  text-decoration: underline;
}


.training-volume-option__details {
  margin: -0.15rem 1rem 1rem 2.6rem;
  padding: 1rem 1.1rem;

  border: 1px solid var(--line);
  border-top-color: transparent;
  border-radius: 0 0 0.85rem 0.85rem;

  background: var(--surface-2);
}


.training-volume-option__details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 0.75rem;
}

.training-volume-option__details-head span {
  color: var(--muted);
  font-size: 0.8rem;
}


.training-volume-rules {
  display: flex;
  flex-direction: column;
}


.training-volume-rule {
  display: grid;
  grid-template-columns:
    minmax(9rem, 1fr)
    minmax(8rem, 0.8fr)
    minmax(8rem, 0.8fr);

  gap: 1rem;

  padding: 0.75rem 0;

  border-top: 1px solid var(--line);
}

.training-volume-rule:first-child {
  border-top: 0;
}


.training-volume-rule__age {
  font-weight: 600;
}


.training-volume-rule__metric {
  display: flex;
  flex-direction: column;
}

.training-volume-rule__metric span {
  color: var(--muted);
  font-size: 0.75rem;
}


.training-volume-option__manage {
  margin-top: 0.8rem;
  padding-top: 0.8rem;

  border-top: 1px solid var(--line);

  font-size: 0.8rem;
}

.training-volume-option__manage a {
  text-decoration: none;
}


@media (max-width: 700px) {
  .training-volume-rule {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .training-volume-option__details {
    margin-left: 0;
    margin-right: 0;
  }

  .training-volume-option__actions {
    gap: 0.5rem;
  }
}