/*-----------------------------------*\
  #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-kit-filters select.u-select[multiple] { min-height: 56px; }
.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;
}
/* "Hug all" handles rendered above the first field row in Adjust Availability mode. */
.ms-boundary-handle--global {
  opacity: 0.85;
  cursor: pointer;
}
.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;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 1.25rem;
  color: var(--u-ink, #1a1d22);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.ms-dd-option input {
  flex: 0 0 auto;
  accent-color: var(--u-primary, var(--cinnamon-satin, #c7687f));
  cursor: pointer;
}

/* ============================================
   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;
}

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

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