/*-----------------------------------*\
  #scheduling.css
  Styles for Manual Scheduling React app
  
  NOTE: This file uses ms-* prefixed classes for module isolation.
  Common patterns (modals, forms, buttons, status colors) are now
  defined in style.css. This file keeps legacy classes for backward
  compatibility while new components should use the common patterns.
\*-----------------------------------*/

@media print {
@page {
    size: landscape;
    margin: 1cm;
}

main {
    padding-top: 10px;
    padding-bottom: 35px;
}

@page:first{
    header {
    display: none;}
    }
}

/* overwriting max width for scheduling grid (standalone page only, scoped to base.html layout) */
section[aria-label="scheduling"] .container,
section[aria-label="scheduling"] .header { max-width: 100%; }


.context-menu {
    position: absolute;
    background-color: #f9f9f9;  /* Light grey background */
    border: 1px solid #ccc;      /* Subtle border */
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
    z-index: 1000;
    min-width: 160px;            /* Minimum width */
    padding: 4px 0;
    font-family: Arial, sans-serif;  /* Generic font */
    font-size: 13px;
    cursor: default;
  }
  
  .context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .context-menu li {
    padding: 8px 16px;           /* Spacing similar to browser context menu */
    background-color: transparent; /* No background by default */
    color: #000;                 /* Black text */
    cursor: pointer;
  }
  
  .context-menu li:hover {
    background-color: #e8e8e8;   /* Hover effect */
  }
  
  .context-menu-divider {
    height: 1px;
    margin: 4px 0;
    background-color: #ccc;      /* Divider between items */
  }  

  /* Modal styles 
     NOTE: Common modal patterns (.modal-overlay, .modal-container, .modal-header, etc.)
     are now defined in style.css. The classes below are kept for backward compatibility
     with existing scheduling components. For new modals, consider using:
     .modal-overlay + .modal-container + .modal-header/.modal-body/.modal-footer
  */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 700px;
  border-radius: 8px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.info-modal {
  pointer-events: none; /* used to override mouse events for info modals like game info */
  background-color: transparent;
  /* Must outrank .ms-sticky-header (z-index: 100) so the hover popover renders
     over the controls bar, not behind it. */
  z-index: 200;
}

.info-modal-content {
  max-width: 250px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*blinking animation to call attention to problem games (like overlapping)*/

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.blinking {
  animation: blink 1s infinite;
}


/* ==========================================================================
   DEAD CODE - Commented out 2026-02-25
   Navigation bar that duplicates the global nav bar. Never used.
   ========================================================================== */
/*
.nav-bar {
  background-color: #333;
  overflow: hidden;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-item {
  position: relative;
}

.nav-item a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-item a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown a:hover {
  background-color: #f1f1f1;
}

.nav-item:hover .dropdown {
  display: block;
}
*/

.small-text { font-size: var(--fs-9); }


/* ================================================
   Sticky Controls Header  (collapsible)
   ================================================ */

.ms-sticky-header {
  position: sticky;
  top: 0;              /* JS adjusts to sit below the site header */
  /* Must outrank in-grid elements (boundary handles at z-index 10, etc.) so
     the nav dropdowns (Edit Games, Conflict Reports) can render on top of the
     games when they drop down. Sticky positioning creates a stacking context,
     so the dropdown's own z-index inside this header is bounded by this value. */
  z-index: 100;
  background-color: var(--white, #fff);
  border-bottom: 1px solid var(--cadet-blue-crayola_a20, #ddd);
}

/* Full-size content — hidden when collapsed */
.ms-sticky-header-content {
  padding-bottom: 8px;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
  max-height: 500px; /* large enough to contain the content */
}

.ms-sticky-header.collapsed .ms-sticky-header-content {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  pointer-events: none;
  /* Clip content only while collapsed/animating-to-collapsed. When expanded
     we want overflow:visible so the nav dropdowns (Edit Games, Conflict
     Reports) can extend past the header bottom and render over the games
     grid — overflow:hidden here would clip them at the header boundary. */
  overflow: hidden;
}

.ms-sticky-header:not(.collapsed) .ms-sticky-header-content {
  opacity: 1;
  overflow: visible;
}

/* Slim toggle bar visible when collapsed */
.ms-sticky-toggle-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-9, 0.8rem);
  color: var(--charcoal, #3d4554);
  background-color: var(--cultured, #f5f6f8);
  border-bottom: 1px solid var(--cadet-blue-crayola_a20, #ddd);
  transition: background-color 0.15s ease;
}

.ms-sticky-toggle-bar:hover {
  background-color: var(--cadet-blue-crayola_a20, #ddd);
}

.ms-sticky-toggle-bar .ms-toggle-arrow {
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.ms-sticky-header.collapsed .ms-sticky-toggle-bar .ms-toggle-arrow {
  transform: rotate(0deg);
}

.ms-sticky-header:not(.collapsed) .ms-sticky-toggle-bar .ms-toggle-arrow {
  transform: rotate(180deg);
}

.ms-sticky-toggle-bar .ms-toggle-hint {
  opacity: 0.7;
}

/* ================================================
   Top Panel: Settings (left) + Controls (center) + Messages (right)
   ================================================ */

.ms-top-panel-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
  align-items: flex-start;
}

.ms-top-panel-left {
  flex: 0 0 auto;
  width: auto;
  max-width: 500px;
}

/* Center column for controls (toggles, undo/redo, date navigator) */
.ms-top-panel-center {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Right column for MessageLog - takes remaining space and aligns to edge */
.ms-top-panel-right {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* On wide screens, settings inside the panel row should fill their column */
.ms-top-panel-row .ms-settings-container {
  width: 100%;
}

/* On wide screens, message log fills the right column and matches
   the height of the first settings group ("Only View Fields").
   --ms-first-group-height is set by ResizeObserver in ManualScheduling. */
.ms-top-panel-right .ms-backend-log-container {
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  height: var(--ms-first-group-height, auto);
  display: flex;
  flex-direction: column;
}

/* Header stays fixed at top */
.ms-top-panel-right .ms-backend-log-header {
  flex-shrink: 0;
}

/* Messages area fills remaining space (overrides the inline max-height) */
.ms-top-panel-right .ms-backend-log-messages {
  flex: 1;
  max-height: none;
  min-height: 0;
}

/* Compact controls: two equal-height panels side by side (filters + modes),
   with a full-width System-messages strip below (was a tall empty right column). */
.ms-top-panel-row { align-items: stretch; gap: 16px; }
.ms-top-panel-left { flex: 1 1 440px; max-width: none; }
.ms-top-panel-center { flex: 1 1 340px; }
.ms-top-panel-row .ms-settings-container { height: 100%; }
.ms-msglog-full { margin-top: 12px; max-width: 720px; }
.ms-msglog-full .ms-backend-log-container { width: 100%; height: auto; margin: 0; }

/* On narrow screens, stack vertically and revert to auto height */
@media (max-width: 1100px) {
  .ms-top-panel-left {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .ms-top-panel-center {
    flex: 1 1 280px;
    min-width: 250px;
  }

  .ms-top-panel-right {
    flex: 1 1 280px;
    min-width: 250px;
  }

  .ms-top-panel-right .ms-backend-log-container {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .ms-top-panel-row {
    flex-direction: column;
    gap: 16px;
  }

  .ms-top-panel-left,
  .ms-top-panel-center,
  .ms-top-panel-right {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .ms-top-panel-right .ms-backend-log-container {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }

  .ms-top-panel-right .ms-backend-log-messages {
    max-height: var(--ms-log-max-height, 200px);
  }
}

/* ================================================
   Server Message Log Styles
   ================================================ */

.ms-backend-log-container {
  margin: 16px 0;
  border: 1px solid var(--cadet-blue-crayola_a20, #ccc);
  border-radius: var(--radius-6, 6px);
  background-color: var(--white, #fff);
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  font-size: var(--fs-9, 13px);
  /* Width: 90% standalone, or flex-controlled when inside ms-top-panel-row */
  width: 90%;
}

.ms-backend-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--cultured, #f5f6f8);
  color: var(--charcoal, #3d4554);
  border-bottom: 1px solid var(--cadet-blue-crayola_a20, #ccc);
  border-radius: var(--radius-6, 6px) var(--radius-6, 6px) 0 0;
}

.ms-backend-log-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--charcoal, #3d4554);
}

.ms-backend-log-toggle {
  background: none;
  border: none;
  color: var(--charcoal, #3d4554);
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  display: flex;
  align-items: center;
  transition: transform var(--transition-1, 0.25s ease);
}

.ms-backend-log-toggle:hover {
  opacity: 0.7;
}

.ms-backend-log-arrow {
  display: inline-block;
  transition: transform var(--transition-1, 0.25s ease);
}

.ms-backend-log-arrow.collapsed {
  transform: rotate(-90deg);
}

.ms-backend-log-count {
  font-weight: 400;
  opacity: 0.7;
  font-size: var(--fs-10, 12px);
}

.ms-backend-log-clear {
  background-color: transparent;
  border: 1px solid var(--cadet-blue-crayola_a20, #ccc);
  color: var(--charcoal, #3d4554);
  padding: 4px 10px;
  border-radius: var(--radius-6, 6px);
  font-size: var(--fs-10, 12px);
  cursor: pointer;
  transition: background-color var(--transition-1, 0.25s ease);
}

.ms-backend-log-clear:hover {
  background-color: var(--cultured, #f5f6f8);
}

.ms-backend-log-messages {
  overflow-y: auto;
  max-height: var(--ms-log-max-height, 200px);
  padding: 8px 12px;
  background-color: var(--white, #fff);
  border-radius: 0 0 var(--radius-6, 6px) var(--radius-6, 6px);
}

.ms-backend-log-empty {
  color: var(--manatee, #919cb0);
  font-style: italic;
  padding: 12px 0;
  text-align: center;
}

.ms-log-message {
  padding: 4px 0;
  border-bottom: 1px solid var(--raisin-black_a6, rgba(35, 38, 45, 0.06));
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  line-height: 1.4;
}

.ms-log-message:last-of-type {
  border-bottom: none;
}

.ms-log-timestamp {
  color: var(--manatee, #919cb0);
  font-family: 'Courier New', monospace;
  font-size: var(--fs-10, 12px);
  flex-shrink: 0;
}

.ms-log-level {
  font-weight: 600;
  flex-shrink: 0;
}

.ms-log-text {
  color: var(--raisin-black, #242632);
  word-break: break-word;
}

/* Info level (default) */
.ms-log-message-info .ms-log-level {
  color: var(--charcoal, #3d4554);
}

.ms-log-message-info .ms-log-text {
  color: var(--raisin-black, #242632);
}

/* Warning level */
.ms-log-message-warning {
  background-color: #fff8e1;
}

.ms-log-message-warning .ms-log-level {
  color: #f57c00;
}

.ms-log-message-warning .ms-log-text {
  color: #e65100;
}

/* Error level */
.ms-log-message-error {
  background-color: #ffebee;
}

.ms-log-message-error .ms-log-level {
  color: #d32f2f;
}

.ms-log-message-error .ms-log-text {
  color: #c62828;
}

/* Scrollbar styling for the log */
.ms-backend-log-messages::-webkit-scrollbar {
  width: 8px;
}

.ms-backend-log-messages::-webkit-scrollbar-track {
  background: var(--cultured, #f5f6f8);
  border-radius: 4px;
}

.ms-backend-log-messages::-webkit-scrollbar-thumb {
  background: var(--manatee, #919cb0);
  border-radius: 4px;
}

.ms-backend-log-messages::-webkit-scrollbar-thumb:hover {
  background: var(--black-coral, #636b7c);
}

/* ================================================
   Undo/Redo Panel Styles
   ================================================ */

.ms-undo-redo-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 12px;
  background-color: var(--cultured, #f5f6f8);
  border: 1px solid var(--cadet-blue-crayola_a20, #ccc);
  border-radius: var(--radius-6, 6px);
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
}

.ms-undo-redo-buttons {
  display: flex;
  gap: 8px;
}

.ms-undo-redo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  background-color: var(--white, #fff);
  border: 1px solid var(--cadet-blue-crayola_a20, #ccc);
  border-radius: var(--radius-6, 6px);
  color: var(--charcoal, #3d4554);
  cursor: pointer;
  transition: background-color var(--transition-1, 0.25s ease),
              border-color var(--transition-1, 0.25s ease);
}

.ms-undo-redo-btn:hover {
  background-color: var(--cultured, #f5f6f8);
  border-color: var(--charcoal, #3d4554);
}

.ms-undo-redo-btn:active {
  background-color: var(--cadet-blue-crayola_a20, #ccc);
}

.ms-undo-redo-icon {
  width: 16px;
  height: 16px;
}

/* Inside top-panel-right, fill width to align with MessageLog */
.ms-top-panel-right .ms-undo-redo-panel {
  width: 100%;
  flex: 0 0 auto;
  margin: 0;
}

/* ================================================
   Control Panel (center column)
   ================================================ */

.ms-control-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-control-section {
  background-color: var(--cultured, #f5f6f8);
  border: 1px solid var(--cadet-blue-crayola_a20, #ccc);
  border-radius: var(--radius-6, 6px);
  padding: 8px 12px;
}

.ms-control-section-header {
  font-size: var(--fs-9, 13px);
  color: var(--charcoal, #3d4554);
  margin-bottom: 4px;
}

.ms-control-section-header strong {
  font-weight: 600;
}

/* Control row - horizontal layout for toggles */
.ms-control-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ms-control-label {
  font-size: var(--fs-9, 13px);
  color: var(--charcoal, #3d4554);
  white-space: nowrap;
}

.ms-control-toggles {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Date navigator inline in undo-redo panel */
.ms-date-navigator-inline {
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--cadet-blue-crayola_a20, #ccc);
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 120px;
}

.ms-date-navigator-inline button {
  padding: 4px 8px;
  background-color: var(--white, #fff);
  border: 1px solid var(--cadet-blue-crayola_a20, #ccc);
  border-radius: var(--radius-6, 6px);
  color: var(--charcoal, #3d4554);
  cursor: pointer;
  font-size: var(--fs-9, 13px);
  transition: background-color var(--transition-1, 0.25s ease);
}

.ms-date-navigator-inline button:hover:not(:disabled) {
  background-color: var(--cultured, #f5f6f8);
}

.ms-date-navigator-inline button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ms-date-navigator-inline span {
  font-size: var(--fs-9, 13px);
  color: var(--charcoal, #3d4554);
  white-space: nowrap;
}

/* Swap Mode Toggle inside undo-redo panel */
.ms-swap-mode-toggle {
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--cadet-blue-crayola_a20, #ccc);
  flex: 0 0 auto;
}

/* Adjust Availability Toggle inside undo-redo panel (mirrors ms-swap-mode-toggle) */
.ms-adjust-availability-toggle {
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--cadet-blue-crayola_a20, #ccc);
  flex: 0 0 auto;
}

/* Compact legend explaining the grid's shading, right-aligned above the grid. */
.ms-shade-legend {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin: 2px 0 4px;
  font-size: 1.15rem;
  color: var(--u-muted, #7b8394);
}
.ms-shade-legend .itm { display: inline-flex; align-items: center; gap: 6px; }
.ms-shade-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ms-shade-legend .sw-dark { background: #808080; }
.ms-shade-legend .sw-light { background: lightgray; }
.ms-shade-legend .sw-related { background: #cfe2ff; }

/* Two-tone availability shading on the scheduling grid.
   Dark grey = outside real availability (impossible).
   Light grey = between real and non-real boundaries (not available to the auto-scheduler). */
.ms-shade-impossible {
  background-color: #808080;
}
.ms-shade-not-autoschedulable {
  background-color: lightgray;
}

/* Related-field occupancy: this field can't be scheduled at this time because
   a parent or descendant field is occupied. Light blue reads as informational
   rather than warning, and is clearly distinct from both the grey availability
   shades above and from real game pills on the field. */
.ms-shade-related-occupied {
  background-color: #cfe2ff;
  cursor: help;
}
/* Layering rules when both classes are applied to the same cell. */
.ms-shade-impossible.ms-shade-related-occupied {
  /* Outside real availability already means the user can't drop a game here, so
     the dark grey wins; the tooltip still attaches so the user can diagnose. */
  background-color: #808080;
}
.ms-shade-not-autoschedulable.ms-shade-related-occupied {
  /* Inside soft availability the related-field signal is the more actionable
     one for a human placing games, so light blue wins over light grey. */
  background-color: #cfe2ff;
}

/* Draggable boundary handles (Adjust Availability mode). Rendered via portal as an
   absolutely-positioned overlay spanning the timeline portion of the field row. */
.ms-boundary-handle {
  position: absolute;
  top: 0;
  height: 100%;
  width: 6px;
  margin-left: -3px;
  cursor: ew-resize;
  z-index: 10;
  pointer-events: auto;
}
.ms-boundary-handle--real {
  background: #444;
}
.ms-boundary-handle--soft {
  background: #888;
  border-left: 1px dashed #fff;
}
/* "All fields" handles rendered above the first field row in Adjust Availability mode.
   Draggable like the per-field handles (inherits cursor: ew-resize), plus double-click
   to hug — so the resize cursor is the honest affordance for both gestures. */
.ms-boundary-handle--global {
  opacity: 0.85;
}
.ms-boundary-handle:hover {
  background: #222;
}
.ms-boundary-handle-tooltip {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}

/* Responsive: undo-redo panel stacks on narrow screens */
@media (max-width: 500px) {
  .ms-undo-redo-panel {
    justify-content: center;
  }

  .ms-swap-mode-toggle {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }

  .ms-adjust-availability-toggle {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }

  .ms-date-navigator-inline {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    width: 100%;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid var(--cadet-blue-crayola_a20, #ccc);
  }
}

/* ================================================
   Swap Mode Game Styles
   ================================================ */

/* Selected game in swap mode - highlighted with border */
.ms-game-swap-selected {
  outline: 3px solid #2196f3 !important;
  outline-offset: -2px;
  box-shadow: 0 0 8px rgba(33, 150, 243, 0.5);
}

/* Swap candidate games - show as clickable */
.ms-game-swap-candidate {
  cursor: pointer !important;
  outline: 2px dashed #4caf50;
  outline-offset: -1px;
}

.ms-game-swap-candidate:hover {
  outline: 2px solid #4caf50;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
}

/* Dimmed games - not valid swap candidates */
.ms-game-swap-dimmed {
  cursor: default !important;
  opacity: 0.7;
}

/* ================================================
   Multi-Select (lasso + Ctrl-click)
   ================================================ */

/* Selected game cell — highlighted via outline so it composes with other
   states (swap-selected, sticky-source-dimmed, etc.). */
.ms-game-multi-selected {
  outline: 2px solid #1976d2 !important;
  outline-offset: -2px;
}

/* The translucent rectangle drawn while the user is dragging a lasso. */
.ms-multi-select-lasso {
  position: fixed;
  border: 1px dashed #1976d2;
  background: rgba(25, 118, 210, 0.1);
  pointer-events: none;
  z-index: 9999;
}

/* Custom HTML5 drag image. The draggable game is a <td> in a
   border-collapsed table, and the browser's default drag feedback for that
   snapshots the entire table — a giant ghost of every game on the page.
   DraggableGame.handleDragStart builds this offscreen tile instead and
   passes it to dataTransfer.setDragImage(). Parked offscreen; the browser
   only uses its rendered bitmap. */
.ms-drag-ghost {
  position: absolute;
  top: -10000px;
  left: -10000px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 4px;
  box-sizing: border-box;
  border: 1px solid var(--charcoal, #3d4554);
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  font-size: var(--fs-8, 14px);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

/* Count badge shown on the ghost when dragging a multi-selection;
   background matches the multi-select outline color. */
.ms-drag-ghost-badge {
  flex: none;
  padding: 1px 6px;
  border-radius: 8px;
  background: #1976d2;
  color: #fff;
  font-weight: 600;
}

/* ================================================
   Sticky Drag Mode
   ================================================ */

/* The picked-up game stays visible at the original location but faded,
   so the user sees where the ghost came from. */
.ms-sticky-source-dimmed {
  opacity: 0.35 !important;
  outline: 2px dashed #2196f3;
  outline-offset: -2px;
}

/* Responsive: handled by parent container */

/* ================================================
   Filter Dropdown Styles (Age, Venue, Gender, FieldSize)
   ================================================ */

/* Settings container - wraps all groups, matches scheduling grid width */
.ms-settings-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  width: 100%;
}

/* Each settings group with subtle background */
.ms-settings-group {
  background-color: var(--cultured, #f5f6f8);
  border-radius: var(--radius-6, 6px);
  padding: 12px 16px;
}

/* Kit dropdown-button multi-select filters (display_settings/MultiSelectDropdown.tsx).
   Replaces the old always-open <select multiple> list boxes and the age-input popup. */
.ms-dd {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ms-dd-trigger {
  justify-content: space-between;
  min-width: 140px;
  max-width: 260px;
}

.ms-dd-summary {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.ms-dd-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--u-primary, var(--cinnamon-satin, #c7687f));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.ms-dd-popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  margin-top: 4px;
  min-width: 100%;
  max-width: 320px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--u-surface, #fff);
  border: 1px solid var(--u-border, rgba(164, 176, 204, 0.35));
  border-radius: var(--u-radius-sm, 8px);
  box-shadow: var(--u-shadow-lg, 0 6px 24px rgba(26, 29, 34, 0.10));
  padding: 6px;
}

.ms-dd-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 1.25rem;
  color: var(--u-ink, #1a1d22);
}

/* The master "Any ..." row is a tri-state select-all/none — set it off from the
   individual options so it doesn't read as just another value. */
.ms-dd-option--any {
  border-bottom: 1px solid var(--u-border, rgba(164, 176, 204, 0.35));
  margin-bottom: 4px;
  padding-bottom: 7px;
}

.ms-dd-option-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;      /* let the label shrink so long field names ellipsize */
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* flex + min-width:0 so a long field name ellipsizes instead of collapsing to
   zero width, which is what a bare overflow:hidden flex item does. */
.ms-dd-option-label span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-dd-option:hover {
  background: var(--u-bg, #f5f7fa);
}

/* width:auto undoes the global `input, textarea { width: 100% }` reset in style.css,
   which otherwise makes the checkbox claim the whole row and squeeze out its label. */
.ms-dd-option input {
  flex: 0 0 auto;
  width: auto;
  accent-color: var(--u-primary, var(--cinnamon-satin, #c7687f));
  cursor: pointer;
}

/* "Select just this one" shortcut. Hidden until the row is hovered or the button is
   keyboard-focused, so a long option list doesn't turn into a wall of links. */
.ms-dd-only {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--u-primary, var(--cinnamon-satin, #c7687f));
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.ms-dd-option:hover .ms-dd-only,
.ms-dd-only:focus-visible {
  opacity: 1;
}

.ms-dd-only:hover {
  background: var(--u-surface-2, rgba(199, 104, 127, 0.12));
}

/* Venue heading above each block of that venue's field rows. Left-aligned and
   tinted so it reads as a divider rather than as another field, and the field
   labels under it carry only the field's own name. Same treatment as the shared
   schedule report, which is the artifact directors compare this grid against. */
.ms-venue-heading {
  text-align: left;
  padding: 6px 8px;
  font-weight: 600;
  background: var(--u-surface-2, #eceef2);
  color: var(--u-ink, #1f2430);
}

/* The field's own name, no venue prefix. Left-aligned and indented so the rows
   read as belonging to the heading above them. */
.ms-field-label {
  text-align: left;
  padding-left: 16px;
}

/* Shown in place of the field rows when the filters exclude everything */
.ms-no-fields {
  padding: 24px 12px;
  text-align: center;
  font-size: 1.4rem;
  color: var(--u-ink-muted, #6b7280);
}

/* Options bar at the top of the Related Schedules secondary window. That window
   re-links this stylesheet, so the class has to live here rather than inline. */
.ms-related-scheds-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px 0;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--u-ink, #111827);
  cursor: pointer;
  user-select: none;
}

/* style.css applies `input, textarea { width: 100% }` globally, which stretches a
   checkbox across the whole line and drops its label onto the next one. Pin the box
   back to its intrinsic size — flex-basis too, or the flex row re-stretches it. */
.ms-related-scheds-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  cursor: pointer;
}

/* ================================================
   Parking Area (games with no time / no field yet)
   ================================================ */

/* The row sits below the placeholder fields and is NOT a timeline: its games have
   no start time, so there is nothing to position them against. One wide cell holds
   a wrapping strip of fixed-size tiles instead, flowing left-to-right then down. */
.ms-parking-label {
  font-style: italic;
  color: var(--u-ink-muted, #6b7280);
}

.ms-parking-cell {
  /* The grid's cells are centered and tight; this one is a container, so it gets
     its own padding and left alignment back. */
  padding: 4px;
  text-align: left;
  vertical-align: top;
  background: var(--u-surface-2, #f5f5f5);
}

.ms-parking-lot {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: flex-start;
  /* Tall enough to stay an obvious drop target while empty. */
  min-height: 26px;
}

/* Same look as a game cell on a field row (background/text colors are set inline
   from the division), sized by content rather than by duration. */
.ms-parking-tile {
  flex: none;
  box-sizing: border-box;
  min-width: 130px;
  padding: 2px 6px;
  border: 1px solid var(--charcoal, #3d4554);
  font-size: small;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-parking-empty {
  padding: 4px 6px;
  font-size: small;
  font-style: italic;
  color: var(--u-ink-muted, #6b7280);
}

/* ============================================
   Create Schedule Modal Styles
   ============================================ */

.ms-create-schedule-modal {
  max-width: 500px;
}

.ms-schedule-mode-description {
  color: var(--black-coral, #6b7280);
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.ms-schedule-mode-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.ms-schedule-mode-choice {
  flex: 1 1 200px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: var(--white, #fff);
  border: 2px solid var(--cadet-blue-crayola_a20, hsla(222, 23%, 71%, 0.2));
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
}

.ms-schedule-mode-choice:hover {
  border-color: var(--manatee, #9ca3af);
}

.ms-schedule-mode-choice.active-mock {
  border-color: var(--cinnamon-satin, #c7687f);
  background: hsla(344, 53%, 62%, 0.08);
}

.ms-schedule-mode-choice.active-real {
  border-color: hsla(142, 53%, 45%, 1);
  background: hsla(142, 53%, 45%, 0.08);
}


.ms-schedule-mode-icon {
  font-size: 24px;
  margin-top: 2px;
}

.ms-schedule-mode-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--charcoal, #3d4554);
  display: block;
  margin-bottom: 4px;
}

.ms-schedule-mode-subtext {
  font-size: 1.3rem;
  color: var(--black-coral, #6b7280);
  margin: 0;
}

/* "Start from scratch" opt-in, shown only for a real run. Sits between the mode
   buttons and Run Scheduler. Reuses the shared .ms-checkbox-* control. */
.ms-schedule-scratch-option {
  margin-bottom: 16px;
}

.ms-schedule-scratch-hint {
  /* Line up under the checkbox text, past the 20px box and its 8px gap. */
  margin: 4px 0 0 28px;
  font-size: 1.2rem;
  color: var(--black-coral, #6b7280);
}

/* Fake-run options: what the run does, and the optional per-band game lengths. The
   durations are collapsed behind a link on the picker (the run normally reads the
   event's own) and shown outright on the fake_durations step, where they are the only
   way forward — so the grid styling below is shared by both. */
.ms-schedule-fake-options {
  margin-bottom: 16px;
}

.ms-schedule-fake-hint {
  margin: 0 0 8px 0;
  font-size: 1.2rem;
  color: var(--black-coral, #6b7280);
}

.ms-schedule-fake-durations {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ms-schedule-fake-duration {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 90px;
}

.ms-schedule-fake-band {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--charcoal, #3d4554);
}

.ms-schedule-fake-duration input {
  width: 100%;
  padding: 6px 8px;
  font-size: 1.3rem;
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  border: 1px solid var(--cadet-blue-crayola_a20, hsla(222, 23%, 71%, 0.4));
  border-radius: 6px;
}

/* ---- Field estimator wizard ---------------------------------------------------
   Its own block rather than more .ms-schedule-* rules: the estimator is a multi-step
   wizard with radio choices, a division preview table and per-day time inputs, none of
   which the two-button Create Schedule dialog has. */

.ms-estimator-section {
  margin-bottom: 20px;
}

.ms-estimator-heading {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--charcoal, #3d4554);
  margin: 0 0 10px 0;
}

/* One radio option with a title and an explanation under it. The whole block is the
   click target, which is why it is a label wrapping the input rather than a button. */
.ms-estimator-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 2px solid var(--cadet-blue-crayola_a20, hsla(222, 23%, 71%, 0.2));
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ms-estimator-choice:hover {
  border-color: var(--manatee, #9ca3af);
}

.ms-estimator-choice.active {
  border-color: hsla(258, 46%, 58%, 1);
  background: hsla(258, 46%, 58%, 0.08);
}

/* Disabled means the event cannot offer this option at all (no sized divisions, no
   booked fields). Kept visible rather than hidden: the reason is in the hint text, and
   an option that silently vanishes reads as a bug. */
.ms-estimator-choice.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ms-estimator-choice > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ms-estimator-choice strong {
  font-size: 1.4rem;
  color: var(--charcoal, #3d4554);
}

.ms-estimator-hint {
  font-size: 1.2rem;
  color: var(--black-coral, #6b7280);
}

.ms-estimator-subchoice {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 10px 0 0 14px;
}

.ms-estimator-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}

/* The estimator's "these divisions' formats cannot be trusted" panel. Warning-coloured
   rather than error-coloured on purpose: the estimate will still run, it just will not
   be answering about these divisions' real formats. */
.ms-estimator-template-gaps {
  margin: 12px 0 0 14px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--status-warning-light, #fff3cd);
  color: var(--status-warning-text, #856404);
}

.ms-estimator-template-gaps .ms-estimator-hint {
  color: inherit;
  margin: 0;
}

.ms-estimator-gap-list {
  margin: 6px 0 8px;
  padding-left: 18px;
  font-size: 1.2rem;
  line-height: 1.5;
}

/* The two sentences that frame the naming pickers: one before them saying what they
   are FOR, one after showing the names they are about to produce. The example is the
   one people actually read, so it gets the page's ink colour rather than the muted
   hint grey it inherits. */
.ms-estimator-naming-lede {
  margin: 4px 0 0;
  line-height: 1.5;
}

.ms-estimator-naming-example {
  margin: 8px 0 12px;
  line-height: 1.5;
  color: var(--charcoal, #3d4554);
}

/* Full width rather than a fourth cell in the picker grid: a typed tier list is longer
   than a dropdown and belongs under the row it modifies, not beside it. */
.ms-estimator-custom-tiers {
  margin: 0 0 4px;
}

.ms-estimator-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
}

.ms-estimator-field > span {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--charcoal, #3d4554);
}

.ms-estimator-field select,
.ms-estimator-field input {
  padding: 6px 8px;
  font-size: 1.3rem;
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  border: 1px solid var(--cadet-blue-crayola_a20, hsla(222, 23%, 71%, 0.4));
  border-radius: 6px;
}

/* The division preview and the per-day hours. Scrolls rather than growing the dialog:
   an event can plan 40 divisions, and a modal that tall cannot be dismissed. */
.ms-estimator-preview,
.ms-estimator-table {
  max-height: 300px;
  overflow-y: auto;
}

.ms-estimator-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.3rem;
  margin-top: 10px;
  display: block;
}

.ms-estimator-table th,
.ms-estimator-table td {
  text-align: left;
  padding: 5px 10px;
  border-bottom: 1px solid var(--cadet-blue-crayola_a20, hsla(222, 23%, 71%, 0.2));
}

.ms-estimator-table th {
  font-weight: 600;
  color: var(--black-coral, #6b7280);
  position: sticky;
  top: 0;
  background: var(--white, #fff);
}

/* The teams inside a previewed division, listed under it when the sizing came from
   clustering. Indented and quieter than the division rows: this is the evidence for the
   line above it, not another row of the plan. */
.ms-estimator-teams-row td {
  padding: 0 10px 8px 24px;
  background: var(--cultured, #f5f5f5);
}

.ms-estimator-teams {
  margin: 0;
  padding-left: 18px;
  font-size: 1.2rem;
  color: var(--black-coral, #6b7280);
}

.ms-estimator-teams li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 1px 0;
}

/* The rank (or the reason there isn't one) stays right-aligned and does not wrap, so a
   column of them reads as a column. */
.ms-estimator-team-note {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ms-estimator-table input[type="time"] {
  padding: 3px 6px;
  font-size: 1.2rem;
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  border: 1px solid var(--cadet-blue-crayola_a20, hsla(222, 23%, 71%, 0.4));
  border-radius: 4px;
}

/* A button that reads as a link — used for "Use different game lengths…", which
   reveals an optional control rather than doing anything. */
.ms-link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 1.3rem;
  color: var(--cinnamon-satin, #c7687f);
  text-decoration: underline;
  cursor: pointer;
}

/* Why the run could not be started (server down, timed out, rejected). Shown in
   place instead of closing the dialog, so the operator knows nothing was queued. */
.ms-schedule-error {
  background: var(--status-error-light, #f8d7da);
  color: var(--status-error-text, #721c24);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 1.3rem;
  margin-bottom: 16px;
}

.ms-schedule-submit-btn {
  display: block;
  width: 100%;
  padding: 12px 24px;
  background-color: var(--cinnamon-satin, #c7687f);
  color: var(--white, #fff);
  border: none;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ms-schedule-submit-btn:hover {
  background-color: hsla(344, 53%, 52%, 1);
}

.ms-schedule-submit-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(199, 104, 127, 0.3);
}

.ms-schedule-submit-btn:disabled {
  background-color: var(--manatee, #9ca3af);
  cursor: not-allowed;
}

/* Unprocessed-special-requests confirm step: primary "Run AI now" over a
   secondary "Continue without running AI", both full width and stacked. */
.ms-schedule-confirm-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ms-schedule-confirm-secondary-btn {
  display: block;
  width: 100%;
  padding: 12px 24px;
  background-color: var(--cultured, #f5f6f8);
  color: var(--charcoal, #3d4554);
  border: none;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ms-schedule-confirm-secondary-btn:hover {
  background-color: var(--manatee, #9ca3af);
  color: var(--white, #fff);
}

.ms-schedule-confirm-secondary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Min/max games per day prompt — shown when the event moves games to a day
   but has no per-day game limits for the solver to move against. */

.ms-min-max-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 1.4rem;
}

.ms-min-max-table th,
.ms-min-max-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--cadet-blue-crayola_a20, hsla(222, 23%, 71%, 0.2));
}

.ms-min-max-table thead th {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--black-coral, #6b7280);
}

.ms-min-max-table tbody th {
  font-weight: 600;
  color: var(--charcoal, #3d4554);
  white-space: nowrap;
}

/* Days that have no default yet — the ones that actually block the move.
   The class is on the row, so this targets that row's own header cell. */
.ms-min-max-missing th[scope='row'] {
  color: var(--cinnamon-satin, #c7687f);
}

.ms-min-max-input {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid var(--cadet-blue-crayola_a20, hsla(222, 23%, 71%, 0.2));
  border-radius: 6px;
  font-size: 1.4rem;
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  color: var(--charcoal, #3d4554);
}

.ms-min-max-input:focus {
  outline: none;
  border-color: var(--cinnamon-satin, #c7687f);
}

.ms-min-max-error {
  margin-bottom: 12px;
  font-size: 1.3rem;
  color: var(--cinnamon-satin, #c7687f);
}

/* --- day-move proposal (mock runs) ---------------------------------------
   Two stacked blocks, one per half of the proposal. Both can be present, in
   which case the required games are placed first and the day is then filled,
   so they read top to bottom in the order the run applies them. */

.ms-day-move-block {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--cinnamon-satin, #c7687f);
  background: var(--cultured, #f5f5f5);
  border-radius: 0 6px 6px 0;
}

.ms-day-move-block .ms-schedule-mode-description {
  margin-bottom: 8px;
}

.ms-day-move-team-list {
  margin: 0 0 8px 0;
  /* Sits inside a tinted block, so the markers need room without a second indent. */
  padding-left: 18px;
  font-size: 1.3rem;
  color: var(--charcoal, #3d4554);
  /* Ten teams plus an overflow line is more than fits comfortably in a dialog. */
  max-height: 160px;
  overflow-y: auto;
}

.ms-day-move-team-list li {
  margin-bottom: 2px;
}

.ms-day-move-more {
  color: var(--black-coral, #6b7280);
  font-style: italic;
}

.ms-day-move-caveat {
  margin: 0 0 4px 0;
  font-size: 1.2rem;
  color: var(--black-coral, #6b7280);
}

/* ============================================
   Expand Field Availability Modal
   ============================================ */

.ms-expand-field-availability-modal {
  max-width: 500px;
}

.ms-unlock-game-modal {
  max-width: 500px;
}

/* Muted second line in a modal, under the main question. */
.ms-modal-description-muted {
  font-size: 1.3rem;
  margin-bottom: 16px;
  opacity: 0.8;
}

.ms-modal-button-row {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.ms-schedule-cancel-btn {
  background-color: var(--cultured, #f5f6f8);
  color: var(--charcoal, #3d4554);
  width: auto;
  flex: 0 0 auto;
  padding: 12px 24px;
}

.ms-schedule-cancel-btn:hover {
  background-color: var(--manatee, #9ca3af);
  color: var(--white, #fff);
}

.ms-modal-button-row .ms-schedule-submit-btn {
  width: auto;
  flex: 0 0 auto;
}

/* ============================================
   Resolve Conflicts Modal
   ============================================ */

.ms-resolve-conflicts-modal {
  max-width: 500px;
}

.ms-modal-description {
  color: var(--black-coral, #6b7280);
  font-size: 1.4rem;
  margin-bottom: 24px;
}

.ms-modal-section {
  margin-bottom: 24px;
}

.ms-modal-section-label {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--charcoal, #3d4554);
  margin-bottom: 12px;
}

/* Checkbox Group Styles */
.ms-checkbox-group {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.ms-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
}

.ms-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ms-checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid var(--cadet-blue-crayola_a20, hsla(222, 23%, 71%, 0.4));
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: var(--white, #fff);
}

.ms-checkbox-input:checked + .ms-checkbox-custom {
  background-color: var(--cinnamon-satin, #c7687f);
  border-color: var(--cinnamon-satin, #c7687f);
}

.ms-checkbox-input:checked + .ms-checkbox-custom::after {
  content: '✓';
  color: var(--white, #fff);
  font-size: 14px;
  font-weight: 600;
}

.ms-checkbox-input:focus + .ms-checkbox-custom {
  box-shadow: 0 0 0 3px rgba(199, 104, 127, 0.3);
}

.ms-checkbox-label:hover .ms-checkbox-custom {
  border-color: var(--cinnamon-satin, #c7687f);
}

.ms-checkbox-text {
  font-size: 1.5rem;
  color: var(--charcoal, #3d4554);
}

.ms-validation-error {
  color: #dc3545;
  font-size: 1.3rem;
  margin-top: 8px;
  margin-bottom: 0;
}

/* Generic active-selected state for mode buttons */
.ms-schedule-mode-choice.active-selected {
  border-color: var(--cinnamon-satin, #c7687f);
  background: hsla(344, 53%, 62%, 0.08);
}

/* Navigation dropdown styles for Conflict Reports */
.ms-nav-dropdown {
  position: relative;
}

.ms-nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--white, #fff);
  border: 1px solid var(--platinum, #ddd);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 220px;
  padding: 4px 0;
  margin-top: 4px;
  list-style: none;
}

.ms-nav-dropdown-menu li {
  margin: 0;
}

.ms-nav-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--charcoal, #3d4554);
  cursor: pointer;
  transition: background-color 0.2s;
}

.ms-nav-dropdown-item:hover {
  background-color: var(--cultured, #f5f6f8);
  color: var(--cinnamon-satin, #c7687f);
}

/*-----------------------------------*\
  #TASK STATUS INDICATOR
  Styles for async heavy task status display
\*-----------------------------------*/

.ms-task-status-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--cultured, #f5f6f8);
  border-bottom: 1px solid var(--platinum, #ddd);
}

.ms-task-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 1.3rem;
  background-color: var(--white, #fff);
  border: 1px solid var(--platinum, #ddd);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ms-task-status-running {
  background-color: #e3f2fd;
  border-color: #90caf9;
}

.ms-task-status-completed {
  background-color: #e8f5e9;
  border-color: #a5d6a7;
}

.ms-task-status-failed {
  background-color: #ffebee;
  border-color: #ef9a9a;
}

.ms-task-status-cancelled {
  background-color: #fff3e0;
  border-color: #ffcc80;
}

.ms-task-status-icon {
  font-size: 1.4rem;
  font-weight: bold;
}

.ms-task-status-running .ms-task-status-icon {
  color: #1976d2;
}

.ms-task-status-completed .ms-task-status-icon {
  color: #388e3c;
}

.ms-task-status-failed .ms-task-status-icon {
  color: #d32f2f;
}

.ms-task-status-cancelled .ms-task-status-icon {
  color: #f57c00;
}

.ms-task-status-icon-spin {
  animation: ms-task-spin 1s linear infinite;
}

@keyframes ms-task-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ms-task-status-label {
  font-weight: 500;
  color: var(--charcoal, #3d4554);
}

.ms-task-status-state {
  color: var(--sonic-silver, #6b7280);
  font-size: 1.2rem;
}

.ms-task-status-message {
  color: var(--sonic-silver, #6b7280);
  font-size: 1.2rem;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-task-status-error {
  color: #d32f2f;
  font-size: 1.2rem;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ============================================
   Move Day Candidates Modal Styles
   ============================================ */

.ms-move-day-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ms-move-day-label {
  font-weight: 500;
  min-width: 50px;
}

.ms-move-day-select {
  flex: 1;
  min-width: 180px;
}

.ms-move-day-sep {
  color: #555;
}

.ms-move-day-age {
  width: 70px;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.ms-move-day-checkbox-row {
  margin-bottom: 8px;
  text-align: left;
}

.ms-move-day-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.ms-move-day-checkbox-text {
  font-weight: 500;
}

.ms-move-day-checkbox input[type="checkbox"] {
  margin: 0;
  width: auto;
  flex: 0 0 auto;
}

.ms-move-day-submit-row {
  text-align: center;
  margin-top: 24px;
}

.ms-move-day-submit {
  display: inline-block;
  padding: 12px 32px;
  background-color: #3d4554;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.ms-move-day-submit:hover {
  background-color: #2c333f;
}

/* ============================================
   Generic Modal Helpers (shared across modals)
   ============================================ */

.ms-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ms-modal-label {
  font-weight: 500;
  min-width: 80px;
}

.ms-modal-sep {
  color: #555;
}

.ms-modal-num {
  width: 70px;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.ms-modal-select {
  flex: 1;
  min-width: 180px;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.ms-modal-submit-row {
  text-align: center;
  margin-top: 24px;
}

.ms-modal-submit {
  display: inline-block;
  padding: 12px 32px;
  background-color: #3d4554;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.ms-modal-submit:hover {
  background-color: #2c333f;
}

/* ==========================================================================
   "Allow Anything" banner
   Persistent warning while the solver bypass is on. The toggle survives a page
   reload, so this is what keeps the mode from being a silent surprise — it is
   the only warning the mode gives (there is no per-move message), so it is
   loud on purpose. Lives outside .ms-sticky-header-content so collapsing the
   controls can't hide it.
   ========================================================================== */
.ms-allow-anything-banner {
  align-items: center;
  background-color: var(--cinnamon-satin);
  color: var(--white);
  display: flex;
  flex-wrap: wrap;
  font-size: 1.3rem;
  gap: 8px;
  padding: 6px 12px;
}

.ms-allow-anything-banner-label {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ms-allow-anything-banner-text {
  flex: 1 1 300px;
}

.ms-allow-anything-banner-btn {
  background-color: transparent;
  border: 1px solid var(--white);
  border-radius: 4px;
  color: var(--white);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 2px 10px;
  white-space: nowrap;
}

.ms-allow-anything-banner-btn:hover {
  background-color: var(--white);
  color: var(--cinnamon-satin);
}

/* Missing game durations prompt — shown when a division has no game duration, which
   the C++ solver refuses to run without. Reuses .ms-min-max-table for the grid; only
   the extra column, the bulk-fill row and the scroll container are new, because this
   table can be one row per division rather than one per day. */

.ms-create-schedule-modal--wide {
  max-width: 640px;
}

.ms-duration-bulk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--cultured, #f5f6f8);
  border-radius: 6px;
}

.ms-duration-bulk-label {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--charcoal, #3d4554);
}

.ms-duration-bulk-btn {
  padding: 6px 14px;
  background: var(--white, #fff);
  color: var(--charcoal, #3d4554);
  border: 1px solid var(--cadet-blue-crayola_a20, hsla(222, 23%, 71%, 0.2));
  border-radius: 6px;
  font-size: 1.3rem;
  font-weight: 600;
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  cursor: pointer;
}

.ms-duration-bulk-btn:hover:not(:disabled) {
  border-color: var(--cinnamon-satin, #c7687f);
  color: var(--cinnamon-satin, #c7687f);
}

.ms-duration-bulk-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* An event can be short a duration on every one of its divisions, so the list
   scrolls inside the dialog rather than pushing the save button off screen. */
.ms-duration-scroll {
  max-height: 40vh;
  overflow-y: auto;
  margin-bottom: 12px;
}

.ms-duration-table tbody th {
  /* Overrides the min/max table's nowrap: a division name plus its suggestion
     source is a two-line cell by design. */
  white-space: normal;
}

.ms-duration-source {
  display: block;
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--black-coral, #6b7280);
}

.ms-duration-day {
  font-size: 1.3rem;
  color: var(--black-coral, #6b7280);
  white-space: nowrap;
}

.ms-duration-footnote {
  margin: 10px 0 0 0;
  font-size: 1.2rem;
  color: var(--black-coral, #6b7280);
}

/* Missing gap-between-games prompt — shown when a division has no gap rule on some
   play date, which the C++ solver refuses to run without. Reuses .ms-min-max-table
   for the grid and .ms-duration-footnote for the "where this is saved" line; only
   the deficiency summary and the units warning are new. */

.ms-gap-missing {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--cultured, #f5f6f8);
  border-radius: 6px;
}

.ms-gap-missing-list {
  margin: 0;
  padding-left: 18px;
  font-size: 1.3rem;
  color: var(--charcoal, #3d4554);
}

/* The names sit under their day rather than inline: an event with nothing set
   lists every division it has, which would otherwise wrap through the summary. */
.ms-gap-missing-names {
  display: block;
  margin-top: 2px;
  font-size: 1.2rem;
  color: var(--black-coral, #6b7280);
}

.ms-gap-names-toggle {
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  font-size: 1.2rem;
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  font-weight: 600;
  color: var(--cinnamon-satin, #c7687f);
  cursor: pointer;
}

.ms-gap-names-toggle:hover {
  text-decoration: underline;
}

/* Slots-not-minutes. A warning, not a refusal — a very large minimum gap is legal,
   it is just far more likely to be a units mistake. */
.ms-gap-units-warning {
  margin-bottom: 12px;
  padding: 8px 10px;
  border-left: 3px solid var(--cinnamon-satin, #c7687f);
  background: var(--cultured, #f5f6f8);
  font-size: 1.3rem;
  color: var(--charcoal, #3d4554);
}

/* ================================================
   Focus ("spotlight") — division + game-number dimming
   ================================================

   Two controls that grey out everything the operator is not looking at. They are
   worth a lot when needed and unused nearly all the time, so at rest they cost one
   small button on the Swap Mode / Adjust Availability row — no new row of their
   own, sitting with the other transient view modes. See FocusControl.tsx. */

/* Ruled off from the date navigator ahead of it, the same way that is ruled off
   from the toggles. flex:0 0 auto so the row wraps this whole item onto a second
   line rather than squeezing it — see the placement note in UndoRedoPanel. */
.ms-focus-inline {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--cadet-blue-crayola_a20, #ccc);
}

.ms-focus {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-9, 1.3rem);
  cursor: default;
}

/* Small enough to sit inside the 4px-padded toggle bar without growing it. */
.ms-focus-trigger.u-btn {
  padding: 3px 9px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--u-body, #5c6472);
}

.ms-focus-trigger.u-btn .i {
  width: 13px;
  height: 13px;
}

/* Focused: the trigger stops being background furniture, because a grey grid
   must always point at the thing that greyed it. */
.ms-focus-trigger.u-btn.is-active {
  color: var(--u-primary, #d4708a);
}

/* Never wraps internally. A division with a long name plus the jump note would
   otherwise stack inside the row and push the grid down; long names truncate
   instead (the chip's title still carries the full one). The row itself may still
   wrap the date navigator to a second line when focus is active and space is
   tight, which is the right trade — that only happens while something is focused. */
.ms-focus-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

/* One chip per active token, each naming what it lit and carrying its own off
   switch — so "why is the grid grey" and "make it stop" are both answered from
   the bar itself, with no need to reopen the popover. */
.ms-focus-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 4px 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--u-primary, #d4708a);
  background: hsla(344, 53%, 62%, .10);
  color: var(--u-primary-dark, #c05473);
  font-weight: 600;
  white-space: nowrap;
}

.ms-focus-chip .i {
  width: 12px;
  height: 12px;
  flex: none;
}

.ms-focus-chip-label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-focus-chip-x {
  border: none;
  background: none;
  padding: 0 2px;
  font-size: 1.4rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  opacity: .7;
}

.ms-focus-chip-x:hover {
  opacity: 1;
}

/* "The day under you changed, and here is the way back." Rendered as text rather
   than a toast on purpose: a toast that has faded cannot answer the question the
   operator asks a minute later, when they notice they are on the wrong day. */
.ms-focus-jumped {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--u-primary-dark, #c05473);
  font-weight: 600;
}

.ms-focus-back {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--u-body, #5c6472);
  text-decoration: underline;
  cursor: pointer;
}

.ms-focus-back:hover {
  color: var(--u-ink, #1f232b);
}

/* The pickers exist only while the popover is open. Anchored right so a long
   division name grows into the page rather than off the edge of it. */
.ms-focus-popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  /* Above .ms-sticky-header-content, which is unpositioned, so this paints over
     the controls block when the header is expanded. */
  z-index: 200;
  width: 300px;
  padding: 12px;
  border: 1px solid var(--u-border, #ddd);
  border-radius: var(--u-radius, 10px);
  background: var(--u-surface, #fff);
  box-shadow: var(--u-shadow-lg, 0 6px 24px rgba(31, 35, 43, .1));
  cursor: auto;
}

.ms-focus-row + .ms-focus-row {
  margin-top: 10px;
}

.ms-focus-label {
  display: block;
  margin-bottom: 4px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--u-muted, #949aa6);
}

.ms-focus-game-input.u-input {
  padding: 6px 10px;
  font-size: 1.3rem;
}

.ms-focus-error {
  margin-top: 8px;
  font-size: 1.2rem;
  color: var(--admin-error, #e74c3c);
}

.ms-focus-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--u-border, #ddd);
}

/* Says what the controls do rather than what they are called: the grid is about to
   go grey, and the operator should know that is the control's doing. */
.ms-focus-hint {
  font-size: 1.1rem;
  color: var(--u-muted, #949aa6);
}

.ms-focus-clear {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--u-primary-dark, #c05473);
  cursor: pointer;
}

.ms-focus-clear:disabled {
  color: var(--u-muted, #949aa6);
  cursor: default;
}

/* Games outside the focus are greyed by DraggableGame's inline style rather than
   from here: their normal colour is inline too, and one flat pair of colours has to
   win over it. See FOCUS_DIM_BG there.

   The one game hunted by number gets a ring, because on a 35-field grid "which of
   the lit cells is it" is a real question. */
.ms-game-focus-hit {
  outline: 3px solid var(--u-primary, #d4708a) !important;
  outline-offset: -1px;
  box-shadow: 0 0 10px hsla(344, 53%, 62%, .65);
}

/* The date navigator while the grid sits on a day the operator did not pick.
   Persistent, not a flash: the whole point is that they can still tell, later,
   that the day under them was changed for them. */
.ms-date-jumped {
  padding: 2px 6px;
  border-radius: var(--u-radius-sm, 8px);
  background: hsla(344, 53%, 62%, .10);
  box-shadow: 0 0 0 2px hsla(344, 53%, 62%, .45);
}