/* ===========================================
   Teamingly — Modern Schedule (standalone)
   No dependencies on your existing index.css
   =========================================== */

/* ---- 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) */
}

/* Optional dark mode: add .theme-dark on a wrapper if you want */
.theme-dark{
  --bg: #0f141b;                /* canvas background */
  --panel: #111821;             /* cards/panels */
  --panel-2: #0c1117;           /* deeper panels */
  --line: rgba(255,255,255,.06);
  --text: #e8eef6;
  --muted: #98a6b8;
  --accent: #37e19c;            /* mint */
  --accent-2: #5aa8ff;          /* azure */
  --accent-3: #ffd166;          /* warm */
  --chip: #1a2230;
  --chip-line: rgba(255,255,255,.10);
  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 18px 50px rgba(0,0,0,.45);
}

/* Make the whole page chrome dark when we toggle it on this view */
body.theme-dark-page {
  background: #080b10 !important;   /* deep, neutral background */
  color-scheme: dark;               /* dark scrollbars, form controls */
}

/* Optional: nudge generic link color so the back link is readable */
body.theme-dark-page a {
  color: #9dbfff;
}
body.theme-dark-page a:hover {
  color: #c2d6ff;
}

/* Default Light theme contrast tweaks */
.gridline{
  background: color-mix(in srgb, var(--line) 35%, #000 65%);
  opacity: .45;
}

/* Hour lines a touch stronger in default light mode */
.tick--boundary + .gridline{
  opacity: 0.7;
}

/* Time labels: slightly darker for readability in light */
.tick{
  color: color-mix(in srgb, var(--text) 90%, #000 10%);
  opacity: 0.95;
}
.tick.tick--boundary{
  color: color-mix(in srgb, var(--text) 100%, #000 0%);
  opacity: 1;
}

/* Optional: day column dividers a bit stronger in light mode */
.day-col{
  /* if using pseudo dividers, keep as-is; if using border-left, bump contrast: */
  border-left-color: color-mix(in srgb, var(--line) 35%, #000 65%);
}

/* Dual-view toggles */
.board--desktop { display: block; }
.board--mobile  { display: none; }

@media (max-width: 900px) {
  .board--desktop { display: none; }
  .board--mobile  { display: block; }
}

/* Mobile day strip */
.day-tabs-mobile{
  display: flex; gap: 6px; padding: 8px 10px 0;
}
.day-tab{
  appearance: none; border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; padding: 6px 10px; font-weight: 700; color: var(--text);
  opacity: .75; cursor: pointer;
}
.day-tab[aria-selected="true"]{
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line) 45%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent);
}

/* ---- Page base (scoped by a wrapper) ---- */
.schedule-shell{
  background: radial-gradient(1100px 400px at 85% -10%, rgba(90,168,255,.10), transparent 60%),
              radial-gradient(950px 350px at 15% -10%, rgba(55,225,156,.10), transparent 60%),
              var(--bg);
  color: var(--text);
  padding: clamp(12px, 2vw, 20px);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
}


/* =========================
   Edit layout: team pool + schedule
   ========================= */
.schedule-edit-layout{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Sticky sidebar (desktop side-by-side only) */
.schedule-edit-layout{
  align-items: flex-start; /* important for sticky inside flex */
}

/* Sidebar with teams that have missing sessions + bin */
.schedule-sidebar{
  /* Narrower sidebar: roughly 2/3 of previous width */
  flex: 0 0 190px;
  max-width: 220px;

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 8px 8px 10px;
  box-shadow: var(--shadow-1);
}

/* Sticky sidebar (desktop side-by-side only) */
@media (min-width: 1301px){
  .schedule-sidebar{
    position: sticky;
    top: 16px;                   /* tweak: 12–24px depending on your layout */
    align-self: flex-start;       /* important inside flex */
    max-height: calc(100vh - 32px);
    overflow: auto;              /* internal scroll if sidebar gets tall */
  }
}

/* give the sidebar its own scrollbars only when needed, and prevent horizontal scroll */
@media (min-width: 1301px){
  .schedule-sidebar{
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Main shell flexes */
.schedule-edit-layout .schedule-shell{
  flex: 1 1 auto;
  min-width: 0;   /* important for flexbox so it doesn't keep an oversized min-width */
}


/* Team pool */
.team-pool__header h2{
  margin: 0 0 4px;
  font-size: 1rem;
}

.team-pool__header p{
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--muted);
}

.team-pool__list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}




/* Individual team box */
.team-pool__item{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  cursor: grab;
}

.team-pool__item:active{
  cursor: grabbing;
}

/* Header row: name + pill */
.team-pool__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.team-pool__name{
  font-weight: 700;
  font-size: 0.9rem;
}

/* Yellow Teamingly pill with missingSessions count */
.team-pool__pill{
  font-weight: 700;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;

  color: color-mix(in srgb, var(--accent-3) 90%, #000 10%);
  background: color-mix(in srgb, var(--accent-3) 18%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent-3) 50%, var(--line) 50%);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent-3) 45%, transparent);
}


/* Meta text (minutes etc) */
.team-pool__meta{
  font-size: 0.75rem;
  color: var(--muted);
}

/* Empty state */
.team-pool__empty{
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
  padding: 4px 0 8px;
}

/* Trash bin area */
.schedule-bin{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px dashed rgba(0,0,0,0.15);
  background: color-mix(in srgb, var(--panel-2) 82%, #ff6b6b 18%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.schedule-bin__icon{
  font-size: 1.2rem;
}

.schedule-bin__label{
  flex: 1 1 auto;
}

/* When something is dragged over the bin */
.schedule-bin--active{
  border-color: #ff4b4b;
  box-shadow: 0 0 0 1px rgba(255,75,75,0.5);
}


/* Make the schedule page container wider on big screens */
@media (min-width: 1400px){
  .container--schedule-wide{
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
  }
}


/* Responsive: stack sidebar above schedule on narrower screens */
@media (max-width: 1300px){
  .schedule-edit-layout{
    flex-direction: column;
  }

  /* un-sticky the sidebar when placed on top */
  .schedule-sidebar{
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .schedule-sidebar{
    width: 100%;
    max-width: none;
    order: -1; /* appear above the schedule shell */
  }

  /* When stacked, make team cards line up horizontally and wrap */
  .schedule-sidebar .team-pool__list{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .schedule-sidebar .team-pool__item{
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 220px;
  }

  .schedule-edit-layout .schedule-shell{
    width: 100%;
  }

  /* NEW: helpers behave like one of the cards */
  .schedule-sidebar .edit-filters{
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 220px;
  }

}



@media (max-width: 1100px){
  .schedule-edit-layout{
    flex-direction: column;
  }

  /* un-sticky the sidebar when placed on top */
  .schedule-sidebar{
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .schedule-sidebar{
    width: 100%;
    max-width: none;
    order: -1; /* appear above the schedule shell */
  }

  /* ⬇ New: when stacked, make team cards line up horizontally and wrap */
  .schedule-sidebar .team-pool__list{
    flex-direction: row;   /* instead of column */
    flex-wrap: wrap;
    gap: 8px;
  }

  .schedule-sidebar .team-pool__item{
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 220px;
  }

  /* NEW: helpers behave like one of the cards */
  .schedule-sidebar .edit-filters{
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 220px;
  }
}


/* =========================
   Sidebar section header
   ========================= */

.sidebar-panel{
  margin-top: 12px;
}

.sidebar-section-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
}

.sidebar-section-title{
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.sidebar-section-chevron{
  font-size: 0.8rem;
  color: var(--muted);
  transition: transform 0.16s ease;
}

.sidebar-section-toggle[aria-expanded="true"] .sidebar-section-chevron{
  transform: rotate(180deg);
}

.sidebar-section-body{
  padding-top: 2px;
}

/* =========================
   Edit helpers – compact
   ========================= */

.helpers-group{
  margin-bottom: 16px;
}

.edit-helpers-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.edit-helper-card{
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.edit-filters__item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 0.84rem;
  color: var(--text);
  cursor: pointer;
}

.edit-filters__item span{
  color: var(--text);
}

.edit-filters__item input[type="checkbox"]{
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* =========================
   Facilities list
   ========================= */

.facility-picker-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.facility-picker-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text);
}

.facility-picker-row input[type="checkbox"]{
  margin: 0;
  accent-color: var(--accent);
}

.facility-picker-row__name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facility-picker-row__badge{
  font-size: 0.68rem;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.facility-picker-row input[type="checkbox"]:disabled + .facility-picker-row__name{
  color: var(--muted);
}

@media (max-width: 1300px),
       (max-width: 1100px){
  .edit-helpers-list{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .edit-helper-card{
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 220px;
  }
}





/* ---------- Shared “home hero” header (matches rest of app) ---------- */
.home-hero{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px;
  margin-bottom: 14px;                 /* visual separation */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0px;
  position: relative;
  box-shadow: var(--shadow-1);
}

/* when no action buttons, eg. in public schedule show page*/
.home-hero--compact {
  min-height: 0;
}

/* green underline (light) / mint-teal (dark) */
.home-hero::after{
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 85%, transparent);
  opacity: 0.85;
}

/* dark-mode: slightly cooler, same form */
.theme-dark .home-hero{
  background: var(--panel);
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}
.theme-dark .home-hero::after{
  background: color-mix(in srgb, var(--accent) 80%, var(--panel-2) 20%);
  opacity: .95;
}

.home-hero__title{
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text);
}
.home-hero__subtitle{
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--text) 70%, var(--muted) 30%);
  font-size: .95rem;
}

.home-hero__actions{ display: flex; gap: 8px; flex-wrap: wrap; }

/* Remove the old schedule header if still present */
.schedule-header{ display: none !important; }


.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));
}


/* Buttons (local palette) */
.btnx{
  display: inline-flex; align-items: center; gap: .5rem;
  height: 40px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text); text-decoration: none; font-weight: 700;
}
.btnx:hover{ transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btnx--accent{ border-color: color-mix(in srgb, var(--accent) 40%, var(--line) 60%); color: var(--accent); }
.btnx--danger{ border-color: rgba(255,85,85,.4); color: #ff6b6b; }

/* Tabs (facilities) */
.facility-tabs{
  display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 4px;
}
.tabx{
  appearance: none; cursor: pointer;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color: var(--text); font-weight: 700; opacity: .85;
}
.tabx[aria-selected="true"]{
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line) 45%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent),
              0 8px 20px rgba(90,168,255,.10);
}

/* Tabs that are valid cross-facility drag targets */
.tabx--drop-target{
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent-2) 70%, var(--line) 30%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-2) 55%, transparent),
    0 8px 18px rgba(0,0,0,.15);
}

/* Tab currently hovered while dragging */
.tabx--drop-hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-3) 70%, transparent),
    0 10px 22px rgba(0,0,0,.20);
}


/* Board (time + 7 columns) */
.schedule-board{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Sticky header row */
.board-head{
  display: grid;
  grid-template-columns: 100px repeat(7, 1fr);
  gap: 6px;
  padding: 12px 12px 10px;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 65%, transparent) 100%);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.head-time{ color: var(--muted); font-weight: 700; letter-spacing: .25px; }
.head-day{ text-align: center; font-weight: 800; }

/* Body grid */
.board-body{
  display: grid;
  grid-template-columns: 100px repeat(7, 1fr);
  gap: 6px;
  padding: 12px;
}

/* Single source of truth for spacing */
.board-body,
.board-head{
  --grid-gap: 6px;           /* adjust once here */
  gap: var(--grid-gap);
}

/* Time axis left */
.time-axis {
  position: relative;
  min-height: 480px;
  border-right: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding-right: 4px;
}

/* Time axis ticks (text) */
.tick {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--text) 70%, var(--muted) 30%);
  font-weight: 400;
  opacity: 0.9;
  letter-spacing: 0.15px;
}

/* Hour marks: a touch stronger for rhythm */
.tick.tick--boundary {
  color: color-mix(in srgb, var(--text) 85%, var(--muted) 15%);
  opacity: 1;
}

/* Remove the special style for "boundary" times entirely */
.tick--boundary {
  color: inherit;
  font-weight: inherit;
}

/* FLAT day columns (still act as drop targets) */
.day-col{
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  min-height: 480px;
  overflow: visible;          /* IMPORTANT: let the divider sit in the gap */
}

.day-col:first-of-type{
  border-left: none; /* no divider before Monday */
}

/* Centered vertical divider in the middle of gaps (not before the first column) */
.day-col:not(:first-child)::before{
  content:"";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(-0.5 * var(--grid-gap));   /* centers in the gap */
  width: 1px;
  background: color-mix(in srgb, var(--line) 85%, transparent);
  pointer-events: none;
  opacity: .9;
}

/* Header cells: same divider logic, perfectly aligned with body */
.board-head > .head-day{
  position: relative;
}

.board-head > .head-day:not(:first-child)::before{
  content:"";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(-0.5 * var(--grid-gap));
  width: 1px;
  background: color-mix(in srgb, var(--line) 85%, transparent);
  pointer-events: none;
  opacity: .9;
}

/* Extra-wide screens: give more width to the day columns */
@media (min-width: 1440px){
  .board-head{
    grid-template-columns: 80px repeat(7, 1fr); /* was 100px + 7fr */
  }
  .board-body{
    grid-template-columns: 80px repeat(7, 1fr);
  }

  /* Slightly loosen padding so the grid itself can breathe */
  .schedule-shell{
    padding: 16px 24px;
  }
}

/* =============================
/* Drag autoscroll hints
/* =============================


/* Drag autoscroll hints (only shown during drag by JS) */
.drag-scroll-zone {
  position: fixed;
  left: 0;
  right: 0;
  height: 64px;              /* <- thickness */
  z-index: 9999;
  display: none;             /* JS toggles */
  align-items: center;
  justify-content: center;
  pointer-events: auto;      /* IMPORTANT: don't block drag unless active */
  opacity: 0.95;
}

.drag-scroll-zone--top {
  top: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0));
}

.drag-scroll-zone--bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.18), rgba(0,0,0,0));
}

.drag-scroll-zone__arrow {
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  color: #fff;
  letter-spacing: 2px;
  user-select: none;
}

/* When active/hovered (JS toggles .is-active) */
.drag-scroll-zone.is-active {
  pointer-events: auto; /* allow hover detection to "stick" */
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(2px);
}

.drag-scroll-zone.is-active .drag-scroll-zone__arrow {
  background: rgba(0,0,0,0.55);
}



/* =========================
   Same-day warning visuals
   ========================= */

/* Day columns that already contain sessions for the dragged team (any facility) */
.day-col--team-warning{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #ffb3b3 22%, var(--panel-2)),
      color-mix(in srgb, #ffe0e0 12%, var(--panel)));
}

/* Tiny hint inside a warned day column (e.g. "On: Älta IP 2") */
.day-col-hint{
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  max-width: 80%;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: #7a1f1f;
  background: color-mix(in srgb, #ffe0e0 55%, var(--panel));
  border: 1px solid color-mix(in srgb, #ff6b6b 50%, var(--line) 50%);
}

/* Sessions for the same team, on the facility you're editing now */
.sess--team-warning{
  border-color: color-mix(in srgb, #ff6b6b 70%, var(--line) 30%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #ffcccc 40%, var(--panel) 60%),
      color-mix(in srgb, #ffe6e6 45%, var(--panel-2) 55%));
  box-shadow: 0 10px 26px rgba(255, 80, 80, 0.4);
}


/* =========================
   Pro coach drag: busy-time overlays (refined)
   ========================= */
.coach-busy-overlay{
  position: absolute;
  left: var(--sess-xpad);
  right: var(--sess-xpad);
  border-radius: 14px;
  pointer-events: none;

  /* ⬇ Key changes */
  z-index: 1;               /* BELOW sessions, ABOVE gridlines */
  opacity: 0.55;            /* let the grid breathe */

  border: 1px solid color-mix(in srgb, #ff6b6b 55%, var(--line) 45%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ffcccc 30%, transparent),
      color-mix(in srgb, #ffe6e6 22%, transparent)
    );

  box-shadow: none;         /* 🚫 kill neon curtain effect */
}

.coach-busy-overlay .day-col-hint{
  opacity: 0.9;
  backdrop-filter: blur(2px);
}

.coach-busy-overlay{
  position: absolute;
  left: var(--sess-xpad);
  right: var(--sess-xpad);
  border-radius: 14px;
  pointer-events: none;

  z-index: 1;
  opacity: 0.6;

  border: 1px solid color-mix(in srgb, #ff6b6b 55%, var(--line) 45%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ffcccc 30%, transparent),
      color-mix(in srgb, #ffe6e6 22%, transparent)
    );

  /* ✅ Soft “session warning” aura */
  box-shadow:
    0 0 0 1px rgba(255, 107, 107, 0.12),
    0 8px 22px rgba(255, 80, 80, 0.22);
}

.coach-busy-overlay{
  filter: saturate(0.9);
}








/* Subtle 30-min grid lines */
.gridline{
  position: absolute; left: 0; right: 0; height: 1px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
  opacity: 0.35; /* default fade for half-hours */
}

/* Slightly stronger 1-hour lines (those coinciding with .tick--boundary) */
.tick--boundary + .gridline {
  opacity: 0.55;
}

/* Session card (vertical block) */
.sess{
  position: absolute; 
  left: var(--sess-xpad);
  right: var(--sess-xpad);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--line) 60%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 85%, var(--accent-2) 15%), var(--panel-2));
  padding: 6px 8px 8px;   /* was 10px */ 
  display: flex; 
  flex-direction: column; 
  gap: 4px;
}

/* Thin neon edge */
.sess::before{
  content:""; position:absolute; inset:0;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba
}

.sess-head{
  display: flex;
  align-items: center;
  justify-content: space-between;   /* time on left, pill on right */
  gap: 4px;
  margin: 0;
}

/* Heterogeneous cards: header only contains the pill, right-aligned */
.sess-head--cols{
  justify-content: flex-end;
}

.sess--cols .sess-time{
  display: none;
}

/* Overlay part pill for blue-bar (sess--cols) cards */
.sess-pill-overlay{
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 3;
  pointer-events: none; /* don't block dragging the bars */
}

/* Slightly smaller pill inside blue-bar cards */
.sess--cols .sess-part{
  font-size: 0.7rem;
  padding: 1px 6px;
}



.sess-time{
  font-weight: 400;          /* softer – medium weight */
  font-size: 0.85rem;        /* slightly smaller for finesse */
  letter-spacing: 0.25px;     /* less spread for tech precision */
  color: color-mix(in srgb, var(--text) 85%, var(--muted) 15%);
  text-align: center;
  line-height: 1.05;      /* denser line box */
}

/* Inline pill that sits to the right, allowed to "peek" out a bit */
.sess-part--inline{
  position: absolute;
  right: -25px;                 /* small peek outside the card */
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  z-index: 1;
}




/* ----- Resize handles on session blocks (pitch / tiny) ----- */
.sess-resize-handle{
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 4;
  cursor: ns-resize;
  background: transparent;
}

.sess-resize-handle--top{
  top: 0;
}

.sess-resize-handle--bottom{
  bottom: 0;
}

/* Soft highlight when you hover the edge */
.sess-resize-handle:hover{
  background: rgba(0,0,0,.04);
}

/* ----- Resize handles on blue team bars ----- */
.team-bar-handle{
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 4;
  background: transparent;
}

.team-bar-handle--top{
  top: -2px;
}

.team-bar-handle--bottom{
  bottom: -2px;
}

.team-bar-handle:hover{
  background: rgba(0,0,0,.04);
}


/* =========================
   Resize ghost silhouette
   ========================= */
.sess-ghost{
  position: absolute;
  left: var(--sess-xpad);
  right: var(--sess-xpad);
  border-radius: 14px;
  border: 2px dashed color-mix(in srgb, var(--accent-3) 80%, #000 20%); /* yellow-ish */
  background: color-mix(in srgb, var(--accent-3) 18%, transparent);
  pointer-events: none;
  z-index: 6; /* above .sess blocks */
}


/* Optional: a bit stronger in dark mode */
.theme-dark .sess-ghost{
  border-color: color-mix(in srgb, var(--accent-3) 85%, #fff 15%);
  background: color-mix(in srgb, var(--accent-3) 26%, transparent);
}


.team-ghost{
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 1px;
  border: 2px dashed color-mix(in srgb, var(--accent-3) 80%, #000 20%);
  background: color-mix(in srgb, var(--accent-3) 20%, transparent);
  pointer-events: none;
  z-index: 5; /* above real bars, below labels */
}

.theme-dark .team-ghost{
  border-color: color-mix(in srgb, var(--accent-3) 85%, #fff 15%);
  background: color-mix(in srgb, var(--accent-3) 30%, transparent);
}




/* Drag ghost (when moving a session between blocks) */
.sess-drag-ghost{
  border-width: 2px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent-2) 80%, transparent);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  opacity: 0.95;
}

/* Drop zones (block vs session placement) */
.drop-zone{
  position: absolute;
  left: var(--sess-xpad);
  right: var(--sess-xpad);
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent-2) 55%, transparent);
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  pointer-events: none;
  z-index: 3;
}

/* Left option = snap to whole block */
.drop-zone--block{
  border-color: color-mix(in srgb, var(--accent-3) 70%, transparent);
  background: color-mix(in srgb, var(--accent-3) 7%, transparent);
}

/* Right option = session-length sliding window */
.drop-zone--session{
  border-style: dashed;
}

/* Highlight currently "armed" drop zone under cursor */
.drop-zone.is-active{
  border-width: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 55%, transparent);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
}

.drop-zone__label{
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 9999;
  pointer-events: none;

  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;

  /* default (neutral) */
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  border: 1px solid var(--line);
  opacity: 0.95;
}

/* Make it clearly “blue” for the session landing zone */
.drop-zone--session .drop-zone__label{
  color: #fff;
  background: color-mix(in srgb, var(--accent-2) 75%, #000 25%);
  border-color: color-mix(in srgb, var(--accent-2) 70%, var(--line) 30%);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* Optional: only show when that zone is active */
.drop-zone:not(.is-active) .drop-zone__label{
  display: none;
}



/* =======================================
   Unified pill / badge (sessions + opti)
   ======================================= */
.sess-part,
.opti .part-pill {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 1.6px;
  padding: 2px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--accent-3) 90%, #000 10%);
  background: color-mix(in srgb, var(--accent-3) 14%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent-3) 50%, var(--line) 50%);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent-3) 60%, transparent);
  opacity: 0.95;
}

/* Dark-mode variant — same tone as opti .part-pill */
.theme-dark .sess-part,
.theme-dark .opti .part-pill {
  color: color-mix(in srgb, var(--accent-3) 88%, #fff 12%);
  background: color-mix(in srgb, var(--accent-3) 18%, var(--panel-2));
  border-color: color-mix(in srgb, var(--accent-3) 45%, var(--line) 55%);
}


/* Stacked time-bands inside a session card */
.sess-bands{
  display: flex;
  flex-direction: column;
  gap: 0;                 /* exact proportions; no gaps */
  height: 100%;
}

/* Each band gets a proportional height via inline flex-grow */
.sess-band{
  display: flex;
  align-items: stretch;
  position: relative;
}

/* Subtle separator between bands that doesn't overpower the field */
.sess-band + .sess-band::before{
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: -1px;
  height: 1px;
  background: color-mix(in srgb, var(--accent-2) 28%, transparent);
  opacity: .35;
}

/* Make the field fill the band completely */
.sess-band .field{
  width: 100%;
  height: 100%;
  border-radius: 10px;    /* slight rounding inside card */
}

/* Optionally thin the inner cell borders a bit in bands */
.sess-band .field .cell{
  border-width: 1px;
}


/* Pro coach badge */
.pc-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-2) 28%, transparent);
  color: #111;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* For pitch cells: tuck in corner */
.cell{ position: relative; }
.pc-badge--cell{
  position:absolute;
  top: 4px;
  left: 4px;
  padding: 2px 3px;
  font-size: 9px;
  border-radius: 5px;
}

/* For blue bars */
.team-bar{ position: relative; }
.team-bar .pc-badge{
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
}

/* 7+ pills: subtle treatment only */
.sess-tiny-team--pc{
  background: color-mix(in srgb, var(--accent-2) 28%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
}

.sess-tiny-team__pc-icon{
  margin-left: 6px;
  font-size: 0.9em;
  opacity: 0.95;
}


/* Pro coach badge inside Optimization Status session cards */
.opti .opti-pc-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  margin-left: auto;              /* push to right in .session-card__top */
  white-space: nowrap;

  min-width: 28px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;

  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--line) 60%);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
  color: var(--text);
}

.opti .opti-pc-badge__icon{
  opacity: .85;
  font-size: 0.95em;
}

/* so the badge doesn’t wrap oddly on small cards */
.opti .session-card__top{ flex-wrap: wrap; }


.procoach-drop-target {
  outline: 2px dashed var(--accent, #3b82f6);
  outline-offset: 2px;
}

.procoach-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--surface, #fff);
  cursor: grab;
  user-select: none;
}

.sidebar-panel {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.js-modern-schedule.theme-dark .sidebar-panel {
  border-top-color: rgba(255,255,255,0.12);
}


/* - - - - - - - - - - - - - - - */
/* - - -  TRAINING BLOCKS - - -  */

/* Training block badge */
.tb-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;

  /* slightly different accent so it doesn’t look identical to pro coach */
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: #111;

  font-weight: 700;
}

/* Make the bootstrap icon behave nicely */
.tb-badge i{
  font-size: 12px;         /* icon size */
  line-height: 1;
}

/* For pitch cells: tuck in corner (offset so it can coexist with pc-badge) */
.cell{ position: relative; }
.tb-badge--cell{
  position:absolute;
  top: 4px;
  right: 4px;              /* <-- sits to the right of pc-badge--cell */
  padding: 2px 3px;
  border-radius: 5px;
}

/* For blue bars: top-left but offset so PC + TB can both show */
.team-bar{ position: relative; }
.team-bar .tb-badge{
  position: absolute;
  top: 4px;
  left: 4px;              /* <-- sits to the right of pc-badge */
  z-index: 2;
}

/* 7+ pills: subtle treatment only */
.sess-tiny-team--tb{
  background: color-mix(in srgb, var(--accent-3) 24%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
}

.sess-tiny-team__tb-icon{
  margin-left: 6px;
  font-size: 0.95em;
  opacity: 0.95;
}


/* Locked session badge */
.lock-badge--cell {
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 2;

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

  font-size: 9px;
  line-height: 1;
  opacity: 0.9;
}


.lock-badge--bar {
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 2;

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

  font-size: 9px;
  line-height: 1;
  opacity: 0.9;
}


.js-modern-schedule[data-mode="lock"] [data-lock-session="true"] {
  cursor: pointer;
}


/* =========================
   EDIT SIDEBAR — DARK MODE
   Scope: modern schedule only
   ========================= */

.js-modern-schedule.theme-dark .team-pool__item {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.js-modern-schedule.theme-dark .team-pool__name {
  color: rgba(255, 255, 255, 0.92);
}

.js-modern-schedule.theme-dark .team-pool__header {
  color: rgba(255, 255, 255, 0.92);
}

.js-modern-schedule.theme-dark .team-pool__meta {
  color: rgba(255, 255, 255, 0.68);
}

.js-modern-schedule.theme-dark .team-pool__pill {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

/* Schedule bin (session trash) */
.js-modern-schedule.theme-dark .schedule-bin {
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.js-modern-schedule.theme-dark .schedule-bin__label {
  color: rgba(255, 255, 255, 0.78);
}

/* Pro coach pill list */
.js-modern-schedule.theme-dark .procoach-pill {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}





/* =========================
   Tiny session blocks
   ========================= */

.sess--tiny {
  /* Make it visually match the normal .sess card */
  padding: 0;
  border-radius: 14px;  /* same as .sess */
  overflow: visible;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 85%, var(--accent-2) 15%),
    var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--line) 60%);
  font-size: 11px;
  display: flex;
  align-items: stretch;
}

/* Inner layout: time + team chips */
.sess-tiny-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 4px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Time text – small, slightly muted */
.sess-tiny-time {
  flex: 0 0 auto;
  opacity: 0.85;
  white-space: nowrap;
  font-size: 0.72rem;
}

/* Container for chips */
.sess-tiny-teams {
  flex: 1 1 auto;
  display: flex;
  gap: 2px;
  overflow: hidden;
}

/* Team chip = pitch green (same gradient as .field) */
.sess-tiny-team {
  flex: 0 0 auto;
  padding: 0 4px;
  border-radius: 999px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  /* reuse “pitch” gradient from .field */
  background:
    linear-gradient(180deg, rgba(55,225,156,.08), rgba(90,168,255,.06)),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  font-weight: 500;
}

/* “+N” badge – neutral, subtle */
.sess-tiny-more {
  flex: 0 0 auto;
  padding: 0 4px;
  border-radius: 999px;
  background: transparent;
  border: 1px dashed var(--line);
  opacity: 0.8;
  white-space: nowrap;
  font-size: 0.7rem;
}

.sess-tiny-team {
  cursor: grab;
}

.sess-tiny-team:active {
  cursor: grabbing;
}

.sess-tiny-team {
  position: relative;
  z-index: 2;
}

/* Tiny cards: keep a small, visible part pill */
.sess--tiny .sess-part.sess-part--tiny{
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.65rem;
  padding: 1px 6px;
  z-index: 5;              /* above background & time label, below drag handles if needed */
}





/* =========================
   Facility mini-map (clean)
   ========================= */

/* Base field */
.field {
  position: relative;
  display: grid;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(55,225,156,.08), rgba(90,168,255,.06)),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  flex: 1 1 auto;
  min-height: 0px; /* height is controlled by js in scheduleTimeline.modern.js */
}

/* Cells */
.field .cell{
  display: flex; align-items: center; justify-content: center;
  padding: 4px 6px;
  font-weight: 500;
  font-size: clamp(0.65rem, 0.9vw, 0.85rem);
  letter-spacing: 0.15px;
  color: var(--text);
   /* fit logic */
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.10));
  border: 1px solid rgba(255,255,255,.06);
}

/* Layouts */
.field--t1 { grid-template-rows: 1fr; grid-template-columns: 1fr; }
.field--t2 { grid-template-rows: repeat(2, 1fr); grid-template-columns: 1fr; }
.field--t3 { grid-template-rows: repeat(3, 1fr); grid-template-columns: 1fr; }
.field--t4 { grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); }
/* 5 teams – 5 horizontal corridors (full width) */
.field--t5 { 
  grid-template-rows: repeat(5, 1fr); 
  grid-template-columns: 1fr; 
}
/* 6 teams – split center vertically + two horizontals (3x2) */
.field--t6 { 
  grid-template-rows: repeat(3, 1fr); 
  grid-template-columns: repeat(2, 1fr); 
}

/* Over-capacity team list: compact schedule overview */
.sess .teams-fallback--pills {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 1px 3px;
  padding-top: 2px;
  max-height: 100%;
  overflow-y: auto;
}

/* Compact pill style (reusing tiny-card visuals) */
.teams-fallback--pills .sess-tiny-team,
.sess-tiny-team--fallback{
  margin: 0;
  padding: 0 4px;
  font-size: 0.72rem;
  line-height: 1;    /* <- kills extra line gap */
}




/* Pill style (same vibe as tiny teams) */
.team-pill{
  display: inline-block;
  background: var(--accent-2); /* Teamingly pill yellow */
  color: var(--text);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: grab;
  user-select: none;
  white-space: nowrap;
}

/* Drag hover styling (optional) */
.team-pill:active{
  cursor: grabbing;
  opacity: 0.8;
}

/* Reset any earlier pseudo-element styles */
.field::before, .field::after,
.field--t2::before, .field--t2::after,
.field--t3::before, .field--t3::after,
.field--t4::before, .field--t4::after { content: none !important; }

/* vertical middle line */
.field--t6::before{
  content:"";
  position:absolute; top:4%; bottom:4%; left:50%; width:1px;
  background: color-mix(in srgb, var(--accent-2) 40%, transparent);
  opacity:.35; border-radius:2px; pointer-events:none;
}

/* Balanced dividers (subtle, inset), re-add precisely */

/* 2 teams – one horizontal midline */
.field--t2::after{
  content:"";
  position:absolute;
  left:4%; right:4%;
  top:50%;
  height:1px;
  background: color-mix(in srgb, var(--accent-2) 40%, transparent);
  opacity:.35; border-radius:2px;
}

/* 3 teams – two horizontal lines */
.field--t3::before,
.field--t3::after{
  content:"";
  position:absolute;
  left:4%; right:4%;
  height:1px;
  background: color-mix(in srgb, var(--accent-2) 40%, transparent);
  opacity:.35; border-radius:2px;
}
.field--t3::before{ top:33.333%; }
.field--t3::after { top:66.666%; }

/* 4 teams – cross (2×2) */
.field--t4::before,   /* horizontal */
.field--t4::after{    /* vertical   */
  content:"";
  position:absolute;
  background: color-mix(in srgb, var(--accent-2) 40%, transparent);
  opacity:.35; border-radius:2px;
}
/* horizontal — inset from left/right */
.field--t4::before{
  left:4%; right:4%;
  top:50%;
  height:1px;
}
/* vertical — inset from top/bottom */
.field--t4::after{
  top:4%; bottom:4%;
  left:50%;
  width:1px;
}

/* draw 4 subtle horizontal separators at 20/40/60/80% */
.field--t5::after{
  content:"";
  position:absolute; left:4%; right:4%; top:0; bottom:0;
  background-image:
    linear-gradient(to bottom,
      transparent 20%, color-mix(in srgb, var(--accent-2) 40%, transparent) 0,
      color-mix(in srgb, var(--accent-2) 40%, transparent) calc(20% + 1px), transparent calc(20% + 1px),
      transparent 40%, color-mix(in srgb, var(--accent-2) 40%, transparent) 0,
      color-mix(in srgb, var(--accent-2) 40%, transparent) calc(40% + 1px), transparent calc(40% + 1px),
      transparent 60%, color-mix(in srgb, var(--accent-2) 40%, transparent) 0,
      color-mix(in srgb, var(--accent-2) 40%, transparent) calc(60% + 1px), transparent calc(60% + 1px),
      transparent 80%, color-mix(in srgb, var(--accent-2) 40%, transparent) 0,
      color-mix(in srgb, var(--accent-2) 40%, transparent) calc(80% + 1px), transparent calc(80% + 1px)
    );
  pointer-events:none; opacity:.35; border-radius:2px;
}

/* two horizontals at 1/3 and 2/3 height (across both columns) */
.field--t6::after{
  content:"";
  position:absolute; left:4%; right:4%; top:0; bottom:0;
  background-image:
    linear-gradient(to bottom,
      transparent 33.333%, color-mix(in srgb, var(--accent-2) 40%, transparent) 0,
      color-mix(in srgb, var(--accent-2) 40%, transparent) calc(33.333% + 1px), transparent calc(33.333% + 1px),
      transparent 66.666%, color-mix(in srgb, var(--accent-2) 40%, transparent) 0,
      color-mix(in srgb, var(--accent-2) 40%, transparent) calc(66.666% + 1px), transparent calc(66.666% + 1px)
    );
  pointer-events:none; opacity:.35; border-radius:2px;
}

/* Densify labels slightly for 5–6 teams */
.field--dense .cell{
  font-size: clamp(0.6rem, 0.8vw, 0.78rem);
  padding: 3px 5px;
}

/* Partial time-bands look lighter ("ghost") so users read them as lead-ins/tails */
.sess-band--partial .field{
  /* subtle tint overlay + slightly lower contrast */
  position: relative;
  filter: saturate(0.9) contrast(0.96);
}

.sess-band--partial .field::after{
  content:"";
  position:absolute; inset:0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-2) 12%, transparent); /* faint azure wash */
  pointer-events:none;
}

/* Optional: softer inner cell lines inside partial bands */
.sess-band--partial .field .cell{
  border-color: rgba(255,255,255,.04);
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.08));
}

/* Keep the band separators – they already exist via .sess-band + .sess-band::before.
   If you want an even subtler separator above partial bands, uncomment:

.sess-band--partial::before{
  background: color-mix(in srgb, var(--accent-2) 20%, transparent);
  opacity: .28;
}
*/


/* ======= Per-team columns (heterogeneous compounds) ======= */
.sess--cols{
  padding: 6px 6px 8px;              /* tighter, no header */
}

.sess--cols .sess-head,
.sess--cols .sess-sub{ display: none; }  /* remove time + pill for this card */

.sess-cols{
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  height: 100%;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(90,168,255,.05), rgba(55,225,156,.05)),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  padding: 6px;                      /* inner padding around columns */
}

.team-col{
  position: relative;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.12));
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}

.team-col--vacant {
  background: color-mix(in srgb, var(--team-1-fill) 42%, transparent);
  border: 1px dashed var(--team-1-bd);
  border-radius: 6px;
}


/* the time span bar for that team */
.team-bar{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  overflow: hidden;
  left: 6px;                        
  right: 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-2) 35%, var(--panel) 65%);
  border: 1px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

.team-bar--vacant {
  position: absolute;
  inset: 0;

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

  background: transparent;
  border: 0;
  color: var(--team-1-fg);

  font-size: 0.68rem;
  font-weight: 800;
  font-style: italic;

  pointer-events: none;
}

.team-bar__name {
  position: relative;
  z-index: 1;

  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);

  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* subtle grid (15 min) in column cards, optional */
.sess--cols .team-col::before{
  content:""; position:absolute; left:22px; right:6px; top:0; bottom:0;
  background-image:
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px);
  background-size: 100% calc(var(--px-per-min) * 15); /* every 15 min */
  opacity: .45;
  pointer-events: none;
}

/* HETERO CARDS: remove padding, borders, bg, shadow; span full column width */
.sess.sess--cols{
  left: var(--sess-xpad);
  right: var(--sess-xpad);
  padding: 0;                 /* no inner padding */
  background: transparent;
  border: none;
  box-shadow: none;
}

/* no header or pill in this mode (already hidden, keeping for safety) */
/*
.sess--cols .sess-head,
.sess--cols .sess-sub{ display: none !important; }
*/

/* columns container fills the card exactly, no padding, no border, no bg */
.sess--cols .sess-cols{
  display: flex;
  gap: var(--col-gap, 6px);
  height: 100%;
  padding: 0; 
  padding: 1px 2px 1px;   /* top/bottom breathing room; no left/right padding */
  border: none; 
  background: transparent; 
  border-radius: 0;
}

/* Each column width = (100% - gaps) / cols; add min/max so 5–6 cols still look right */
.sess--cols .team-col{
  position: relative;
  /* flex: 0 0 calc((100% - (var(--cols, 4) - 1) * var(--col-gap, 6px)) / var(--cols, 4)); */
  flex: 1 1 0; /* more robust than the calculation above */
  min-width: 20px;         /* prevents disappearing when many teams */
  background: transparent; 
  border: none; 
  /* border-radius: 4px; */
}

/* remove the optional 15-min stripe grid */
.sess--cols .team-col::before{ content: none; }

/* One unified color scheme for bars — match the session card look */
.sess--cols .team-bar{
  left: 0; right: 0;
  border: none; border-radius: 6px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-2) 38%, var(--panel) 62%) 0%,
      color-mix(in srgb, var(--accent-2) 22%, var(--panel-2) 78%) 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}

/* Vacant column in heterogeneous schedule cards */
.sess--cols .team-col--vacant {
  background: color-mix(in srgb, var(--team-1-fill) 70%, transparent);
  border: 1px dashed var(--team-1-bd);
  border-radius: 6px;
  overflow: hidden;
}

.sess--cols .team-col--vacant .team-bar--vacant {
  left: 0;
  right: 0;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--team-1-fill) 88%, var(--surface) 12%) 0%,
      color-mix(in srgb, var(--team-1-fill) 72%, var(--surface-2) 28%) 100%
    );

  border: 1px dashed var(--team-1-bd);
  border-radius: 6px;
  box-shadow: none;

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

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

  font-size: 0.68rem;
  font-weight: 900;
  font-style: italic;

  pointer-events: none;
}

/* Bottom-up vertical text, same direction as team names */
.sess--cols .team-bar--vacant {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap;
}

/* ===== Mobile: one day at a time ===== */
@media (max-width: 900px) {
  .js-modern-schedule.is-mobile {
    --px-per-min: 3.6;      /* bigger: ~54px per 15 min */
    --sess-xpad: 4px;       /* tighter gutters so cards fit */
  }

  .js-modern-schedule.is-mobile .board-head {
    grid-template-columns: 70px 1fr;   /* time + selected day */
    gap: 4px;
    padding: 10px;
  }
  .js-modern-schedule.is-mobile .board-body {
    grid-template-columns: 70px 1fr;   /* time + visible day */
    gap: 4px;
    padding: 10px;
  }

  /* Time axis tweaks */
  .js-modern-schedule.is-mobile .time-axis { padding-right: 2px; }
  .js-modern-schedule.is-mobile .tick { font-size: 0.86rem; }

  /* Mobile day switcher (a slim pill row) */
  .day-tabs-mobile{
    display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    padding: 6px 10px 0; margin-bottom: 6px;
  }
  .day-tabs-mobile .day-tab {
  flex: 0 0 auto;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color: var(--text); font-weight: 700; opacity: .85;
  }
  .day-tabs-mobile .day-tab[aria-selected="true"]{
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line) 45%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent);
  }

  /* Make cards a bit larger/legible on small screens */
  .js-modern-schedule.is-mobile .sess-time { font-size: 0.92rem; }
  .js-modern-schedule.is-mobile .field .cell { font-size: 0.78rem; }
}

/* When a drag is active: days that can be dropped on */
.day-tab--drop-target {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent-2) 70%, var(--line) 30%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-2) 45%, transparent),
    0 6px 14px rgba(0,0,0,.18);
}

/* Day tab currently hovered while dragging */
.day-tab--drop-hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-3) 60%, transparent),
    0 8px 18px rgba(0,0,0,.22);
}



/* Active facility tab: solid blue with white text */
.facility-tabs .tabx[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-2) 70%, #ffffff 30%),
    color-mix(in srgb, var(--accent-2) 85%, #000000 15%)
  );
  border-color: color-mix(in srgb, var(--accent-2) 80%, var(--line) 20%);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.18),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent);
  opacity: 1;
}

/* When dragging: non-active facility tabs that are drop targets */
.facility-tabs .tabx.tabx--drop-target:not([aria-selected="true"]) {
  background: color-mix(in srgb, var(--accent-2) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--accent-2) 60%, var(--line) 40%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-2) 45%, transparent),
    0 6px 16px rgba(0, 0, 0, 0.16);
}

/* Hovered drop target (still not the active one) */
.facility-tabs .tabx.tabx--drop-hover:not([aria-selected="true"]) {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-3) 65%, transparent),
    0 10px 22px rgba(0, 0, 0, 0.22);
}



/* Active day tab (mobile): solid blue with white text */
.day-tabs-mobile .day-tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-2) 70%, #ffffff 30%),
    color-mix(in srgb, var(--accent-2) 85%, #000000 15%)
  );
  border-color: color-mix(in srgb, var(--accent-2) 80%, var(--line) 20%);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.16),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent);
  opacity: 1;
}

/* Optional: future-proof if you add day drop-target classes from JS */
.day-tabs-mobile .day-tab.day-tab--drop-target:not([aria-selected="true"]) {
  background: color-mix(in srgb, var(--accent-2) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line) 45%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-2) 40%, transparent),
    0 6px 14px rgba(0, 0, 0, 0.14);
}

.day-tabs-mobile .day-tab.day-tab--drop-hover:not([aria-selected="true"]) {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-3) 60%, transparent),
    0 10px 20px rgba(0, 0, 0, 0.2);
}



.schedule-content {
  overflow-x: auto;
}

.board--desktop {
  min-width: max-content;
}

.board--desktop .board-head,
.board--desktop .board-body {
  grid-template-columns:
    80px
    minmax(var(--day-min-monday, 120px), 1fr)
    minmax(var(--day-min-tuesday, 120px), 1fr)
    minmax(var(--day-min-wednesday, 120px), 1fr)
    minmax(var(--day-min-thursday, 120px), 1fr)
    minmax(var(--day-min-friday, 120px), 1fr)
    minmax(var(--day-min-saturday, 120px), 1fr)
    minmax(var(--day-min-sunday, 120px), 1fr) !important;
}



/* ===========================
   Optimization Status (scoped)
   =========================== */

.opti .strip{
  --strip-accent: var(--accent-2);
  background: color-mix(in srgb, var(--panel-2) 92%, var(--strip-accent) 8%);
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--strip-accent) 14%);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
}
.opti .strip .push-end{ margin-left: auto; }

.opti .team-report{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius: 14px;
  padding: 12px;
  margin: 12px 0;
}

.opti .team-report__header{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px; margin-bottom: 10px;
}
.opti .team-name{ margin: 0; font-weight: 700; letter-spacing: .2px; }

/* Metric pills */
.opti .team-metric-pills{ display: flex; gap: 8px; flex-wrap: wrap; }
.opti .metric-pill{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; line-height: 1;
  color: color-mix(in srgb, var(--text) 85%, var(--muted) 15%);
  background: color-mix(in srgb, var(--panel-2) 84%, var(--accent) 16%);
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--accent) 30%);
  padding: 6px 8px; border-radius: 999px;
}

/* Messages */
.opti .metric-details{ margin: 0 0 8px 16px; }

/* Session cards */
.opti .sessions-title{ margin: 6px 0 8px; font-size: 1rem; opacity: .95; }
.opti .sessions-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.opti .session-card{
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 85%, var(--accent-2) 15%), var(--panel-2));
  border: 1px solid var(--line);
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.opti .session-card__top{ display: flex; gap: 8px; align-items: center; }
.opti .badge-day{
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--line) 65%);
  color: var(--text);
  font-size: .8rem; padding: 2px 8px; border-radius: 999px;
}
.opti .badge-facility{
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line) 65%);
  color: var(--text);
  font-size: .8rem; padding: 2px 8px; border-radius: 999px;
}

.opti .session-card__time{
  display: flex; align-items: center; justify-content: space-between;
}
.opti .time-range{ font-weight: 600; letter-spacing: .2px; }
.opti .duration-pill{
  font-size: .78rem; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--panel-2) 80%, var(--accent-2) 20%);
  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--line) 60%);
}

.opti .session-card__meta{ font-size: .9rem; }
.opti .part-pill{
  font-size: .78rem; padding: 2px 8px; border-radius: 8px;
  color: color-mix(in srgb, var(--accent-3) 85%, #000 15%);
  background: color-mix(in srgb, var(--accent-3) 16%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent-3) 45%, var(--line) 55%);
}

.opti .session-card__share{ display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
.opti .share-list{ font-size: .95rem; }

/* Link */
.opti .view-on-grid-link{
  font-size: .85rem; text-decoration: underline; cursor: pointer;
  opacity: .85;
}
.opti .view-on-grid-link:hover{ opacity: 1; color: var(--accent-3); }

/* Empty card */
.opti .session-card--empty{
  text-align: center; opacity: .8; font-style: italic;
}

/* Dark mode refinement */
.theme-dark .opti .metric-pill{ 
  background: color-mix(in srgb, var(--panel-2) 86%, var(--accent) 14%);
  border-color: color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
}
.theme-dark .opti .duration-pill{
  background: color-mix(in srgb, var(--panel-2) 82%, var(--accent-2) 18%);
  border-color: color-mix(in srgb, var(--accent-2) 38%, var(--line) 62%);
}

/* =========================
   Schedule layout renderer
   Uses normalized layout rects from FACILITY_LAYOUTS
   ========================= */

.field--layout {
  position: relative;
  display: block;
  min-height: 0;
}

/* Schedule usage of shared facility layout preview classes */

.schedule-layout-preview {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 10px;
  box-shadow: none;
}

.field--layout {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.schedule-layout-team-area {
  pointer-events: auto;
}

.schedule-layout-team-area .cell {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.soccer-layout-preview__area--locked,
.indoor-layout-preview__area--locked {
  border: 1px dashed color-mix(in srgb, var(--muted) 45%, var(--line) 55%);
  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);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.soccer-layout-preview__area--locked .soccer-layout-preview__area-label,
.indoor-layout-preview__area--locked .indoor-layout-preview__area-label {
  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;
  text-align: center;
}

.sess-compact-layout-btn {
  height: 22px;
  min-width: 26px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
  position: relative;
  z-index: 10;
}

.sess-compact-layout-btn:hover {
  background: var(--surface-3);
}

.soccer-layout-preview__area--vacant,
.indoor-layout-preview__area--vacant {
  background: color-mix(
    in srgb,
    var(--team-1-fill) 65%,
    transparent
  );

  border: 1px solid var(--team-1-bd);
  color: var(--team-1-fg);

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

.layout-vacant-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--team-1-fg);
}


.sess-head__right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sess-layout-select {
  max-width: 120px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0 6px;
}

.sess-layout-select {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

.sess-layout-modal-btn {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}

.sess-layout-modal-btn:hover {
  background: var(--surface-3);
}

.sess-layout-modal-btn {
  position: relative;
  z-index: 25;
  pointer-events: auto;
}

.schedule-layout-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
}

.schedule-layout-modal[hidden] {
  display: none !important;
}

.schedule-layout-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.42);
}

.schedule-layout-modal__panel {
  position: relative;
   width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  padding: 18px;
  overflow: auto;
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-2);
}

.schedule-layout-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;

  width: 40px;
  height: 40px;

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

  border-radius: 999px;

  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);

  font-size: 1.2rem;
  font-weight: 600;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease,
    box-shadow .15s ease;

  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.schedule-layout-modal__close:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.schedule-layout-modal__close:active {
  transform: translateY(0);
}

.schedule-layout-modal__preview {
  height: min(620px, 64vh);

  border-radius: 16px;
  overflow: hidden;

  background: var(--panel-2);
  border: 1px solid var(--line);

  padding: 48px 64px;
}

.schedule-layout-modal__pitch-wrapper {
  position: relative;

  width: 100%;
  height: 100%;
}

.schedule-layout-modal__preview .field {
  height: 100%;
}

.schedule-layout-modal__preview .schedule-layout-preview {
  height: 100%;
}

.schedule-layout-modal__preview .cell {
  font-size: 1rem;
}

.schedule-layout-modal__hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Larger/modal-specific soccer pitch markings */

.schedule-layout-modal__preview .soccer-layout-preview__circle {
  width: 12%;
  aspect-ratio: 1 / 1;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.schedule-layout-modal__preview .soccer-layout-preview__box {
  width: 11%;
  height: 40%;
}

.schedule-layout-modal__preview .schedule-layout-team-area {
  cursor: pointer;
  transition:
    outline .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.schedule-layout-modal__preview .schedule-layout-team-area:hover {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -3px;
}

.schedule-layout-modal__preview .schedule-layout-team-area.is-selected-for-swap {
  outline: 4px solid var(--accent-3);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-3) 70%, transparent);
}

.schedule-layout-modal__preview .pc-badge,
.schedule-layout-modal__preview .tb-badge {
  pointer-events: none;
}

.schedule-layout-modal__preview [data-hetero-modal-field] {
  width: 100%;
  height: 100%;
}

.schedule-layout-modal__preview [data-hetero-modal-field] > .field {
  width: 100%;
  height: 100%;
}

/* Modal hetero slider */

.hetero-slider-shell {
  position: relative;
  height: 30px;
  margin: 6px 0 14px;
}

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

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

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

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

.hetero-slider-window::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 4px;
  transform: translate(-50%, -50%);

  border-top: 1px solid rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.85);
}

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

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

/* Modal Timeline Lane */

.hetero-time-control {
  margin-top: 16px;
}

.hetero-time-control__label {
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--muted);
}

.hetero-time-control input[type="range"] {
  width: 100%;
}

.hetero-lanes {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.hetero-lane {
  display: grid;
  grid-template-columns: 1fr;
}

.hetero-lane__name {
  display: none;
}

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

.hetero-lane__bar {
  position: absolute;
  top: 5px;
  bottom: 5px;

  border-radius: 6px;
  border: 1px solid transparent;

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

  padding: 0 10px;

  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

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

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

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

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

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

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

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

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

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

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

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

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

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

.hetero-lane[data-slot-index="0"] .hetero-lane__track {
  background:
    color-mix(in srgb, var(--team-color-0) 8%, var(--surface-2));
}

.hetero-lane[data-slot-index="1"] .hetero-lane__track {
  background:
    color-mix(in srgb, var(--team-color-1) 8%, var(--surface-2));
}

.hetero-lane[data-slot-index="2"] .hetero-lane__track {
  background:
    color-mix(in srgb, var(--team-color-2) 8%, var(--surface-2));
}

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

.hetero-lane--vacant .hetero-lane__name {
  color: var(--team-1-fg);
  font-style: italic;
}

/* modal section divider */

.schedule-layout-modal__section-divider {
  height: 1px;
  margin: 16px 0 18px;

  background: color-mix(in srgb, var(--line) 70%, var(--muted) 30%);
}

/* Layout thumbs in modal */

.layout-thumb-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.layout-thumb-section__header {
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.layout-thumb-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.layout-thumb {
  width: 150px;
  height: 100px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}

.layout-thumb.is-selected {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 22%, transparent);
}

.layout-thumb__canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

.layout-thumb__area {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%);
  height: calc(var(--h) * 100%);
  border: 1px solid rgba(255,255,255,.85);
}

.layout-thumb__area--locked {
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,.16),
    rgba(0,0,0,.16) 3px,
    transparent 3px,
    transparent 6px
  );
}


.layout-action-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.layout-action-section__header {
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.layout-action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.layout-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 34px;
  padding: 0 12px;

  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);

  font-size: 0.82rem;
  font-weight: 800;

  cursor: pointer;
}

.layout-action-btn:hover {
  background: var(--surface-3);
}

.layout-action-btn__icon {
  font-size: 1rem;
  line-height: 1;
}


.schedule-action-menu {
  position: relative;
  display: inline-flex;
}

.schedule-action-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.schedule-action-menu__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 100;

  min-width: 190px;
  padding: 0.35rem;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12);
}

.schedule-action-menu__item {
  display: block;
  padding: 0.55rem 0.7rem;

  color: inherit;
  text-decoration: none;
  border-radius: 7px;
  white-space: nowrap;
}

.schedule-action-menu__item:hover {
  background: var(--surface-muted);
}


/* Layout modal references */

.schedule-layout-modal__preview,
.schedule-layout-modal__pitch-wrapper,
.field--layout,
.field--layout-with-references,
.schedule-layout-preview,
.soccer-layout-preview,
.indoor-layout-preview {
  overflow: visible;
}

.schedule-layout-modal__pitch-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.schedule-layout-reference {
  position: absolute;
  left: calc(var(--ref-x) * 100%);
  top: calc(var(--ref-y) * 100%);
  transform: translate(-50%, -50%);
  z-index: 50;

  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 4px 7px;
  border-radius: 999px;

  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px var(--shadow);

  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text);

  pointer-events: none;
  white-space: nowrap;
}

.schedule-layout-reference__icon {
  font-size: 0.8rem;
  line-height: 1;
}

.schedule-layout-reference__label {
  line-height: 1;
}

/*
 * Facility layout references
 *
 * References occupy one of eight positions around the pitch.
 * Left/right references are vertical; corner and top/bottom
 * references are horizontal and extend inward to remain within
 * the modal on narrow screens.
 */

/* Midpoint references */

.schedule-layout-reference--left {
  left: 0;
  top: 50%;
  transform: translate(calc(-100% - 8px), -50%);
  writing-mode: vertical-rl;
}

.schedule-layout-reference--right {
  left: 100%;
  top: 50%;
  transform: translate(8px, -50%);
  writing-mode: vertical-rl;
}

.schedule-layout-reference--top {
  left: 50%;
  top: 0;
  transform: translate(-50%, calc(-100% - 8px));
}

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


/* Corner references — always horizontal */

.schedule-layout-reference--top-left {
  left: 0;
  top: 0;
  transform: translate(8px, calc(-100% - 8px));
}

.schedule-layout-reference--top-right {
  left: 100%;
  top: 0;
  transform: translate(calc(-100% - 8px), calc(-100% - 8px));
}

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

.schedule-layout-reference--bottom-right {
  left: 100%;
  top: 100%;
  transform: translate(calc(-100% - 8px), 8px);
}


@media (max-width: 768px) {

  .schedule-layout-modal__panel {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    margin: 8px auto;
    padding: 14px;
    border-radius: 14px;
  }

  .schedule-layout-modal__preview {
    height: min(460px, 58vh);
    padding: 32px 18px;
  }

  .schedule-layout-reference {
    font-size: 0.66rem;
    padding: 3px 6px;
  }

}


/* Over-capacity list inside Layout modal */
.schedule-layout-modal .teams-fallback--pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 350px;
  overflow-y: auto;
  padding: 12px;
}

.schedule-layout-modal .teams-fallback--pills .sess-tiny-team {
  font-size: 15px;
  line-height: 1.4;
  padding: 6px 10px;
  margin: 0;
}

/* Layout modal: informational team pills, not draggable */
.schedule-layout-modal .teams-fallback--pills .sess-tiny-team {
  cursor: default;
  user-select: text;
}



/* =========================================================
   Schedule lock mode
   ========================================================= */

.schedule-lock-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;

  margin-bottom: 1rem;
  padding: 1rem 1.25rem;

  background: var(--surface, #fff);
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
}

.schedule-lock-controls__intro {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.schedule-lock-controls__intro span {
  color: #6c757d;
  font-size: 0.9rem;
}

.schedule-lock-controls__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

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