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

/* Toggle switch styles - compact size */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 6px;
}

.toggle-switch label {
  display: flex; /* Makes label a flex container */
  align-items: center; /* Centers the content vertically */
  font-size: var(--fs-9, 13px);
}


.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.slider {
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 22px;
  background-color: #ccc;
  transition: .4s;
  border-radius: 22px;
  margin-left: 8px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(18px);
}

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

/* 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-row .toggle-switch {
  margin: 2px 4px;
}

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

.ms-control-toggles .toggle-switch {
  margin: 2px 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;
}

.ms-swap-mode-toggle .toggle-switch {
  margin: 0;
}

.ms-swap-mode-toggle .toggle-switch label {
  font-size: var(--fs-8, 14px);
  font-weight: 400;
  color: var(--charcoal, #3d4554);
  white-space: nowrap;
}

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

.ms-adjust-availability-toggle .toggle-switch {
  margin: 0;
}

.ms-adjust-availability-toggle .toggle-switch label {
  font-size: var(--fs-8, 14px);
  font-weight: 400;
  color: var(--charcoal, #3d4554);
  white-space: nowrap;
}

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

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

/* Group header with label and optional toggle */
.ms-settings-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: var(--fs-8, 14px);
  color: var(--charcoal, #3d4554);
}

.ms-settings-group-header strong {
  font-weight: 600;
}

/* Style toggle switch labels within group header to match */
.ms-settings-group-header .toggle-switch {
  margin: 0;
}

.ms-settings-group-header .toggle-switch label {
  font-size: var(--fs-8, 14px);
  font-weight: 400;
  color: var(--charcoal, #3d4554);
}

/* Common grid layout for both toggle rows and filter rows */
.ms-settings-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1000px;
}

/* Filter row with specific column widths: Venue/Field wide, Gender-Age/FieldSize narrow */
.ms-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 16px;
  max-width: 100%;
}

/* Stacked column: Gender on top, Age on bottom, filling the same height as adjacent multi-selects */
.ms-filter-col-stacked {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100px;
  min-width: 80px;
}

/* FieldSize filter - narrow width */
.ms-filter-row .fieldSize-input {
  width: 90px;
  min-width: 70px;
}

/* 3-column variant for rows with only 3 items — uses flex-wrap so
   toggles keep their natural width and flow to the next row gracefully
   on medium screens instead of breaking labels mid-phrase. */
.ms-settings-row-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 750px;
}

.ms-settings-row .toggle-switch,
.ms-settings-row-3 .toggle-switch {
  margin: 0;
}

/* Style toggle switch labels within settings rows */
.ms-settings-row .toggle-switch label,
.ms-settings-row-3 .toggle-switch label {
  font-size: var(--fs-8, 14px);
  font-weight: 400;
  color: var(--charcoal, #3d4554);
  white-space: nowrap;
}

/* Responsive: 2 per row on medium screens */
@media (max-width: 900px) {
  .ms-settings-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .ms-filter-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Responsive: 1 per row on small screens */
@media (max-width: 500px) {
  .ms-settings-row,
  .ms-filter-row {
    grid-template-columns: 1fr;
  }
}

.venue-input,
.age-input,
.gender-input,
.fieldSize-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.venue-input label,
.age-input label,
.gender-input label,
.fieldSize-input label {
  font-size: var(--fs-8, 14px);
  font-weight: 400;
  color: var(--charcoal, #3d4554);
}

.venue-input select,
.age-input select,
.gender-input select,
.fieldSize-input select {
  padding: 8px 12px;
  font-size: var(--fs-9, 13px);
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  border: 1px solid var(--black-coral, #636b7c);
  border-radius: var(--radius-6, 6px);
  background-color: var(--white, #fff);
  color: var(--charcoal, #3d4554);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

/* Single select dropdowns - standard height */
.age-input select:not([multiple]),
.gender-input select:not([multiple]) {
  height: auto;
  appearance: auto;
}

/* Multi-select dropdowns - stretch to fill available height */
.venue-input select[multiple],
.fieldSize-input select[multiple] {
  flex: 1;
  min-height: 80px;
  overflow-y: auto;
}

.venue-input select:hover,
.age-input select:hover,
.gender-input select:hover,
.fieldSize-input select:hover {
  border-color: var(--cinnamon-satin, #c7687f);
}

.venue-input select:focus,
.age-input select:focus,
.gender-input select:focus,
.fieldSize-input select:focus {
  outline: none;
  border-color: var(--cinnamon-satin, #c7687f);
  box-shadow: 0 0 0 2px rgba(199, 104, 127, 0.2);
}

/* Style selected options in multi-select */
.venue-input select option:checked,
.fieldSize-input select option:checked {
  background: var(--cinnamon-satin, #c7687f);
  color: white;
}

/* Age filter custom trigger - looks like a single-row select but opens a multi-select popup */
.age-input {
  position: relative;
}

.age-input-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 12px;
  font-size: var(--fs-9, 13px);
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  border: 1px solid var(--black-coral, #636b7c);
  border-radius: var(--radius-6, 6px);
  background-color: var(--white, #fff);
  color: var(--charcoal, #3d4554);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.age-input-trigger:hover {
  border-color: var(--cinnamon-satin, #c7687f);
}

.age-input-trigger:focus {
  outline: none;
  border-color: var(--cinnamon-satin, #c7687f);
  box-shadow: 0 0 0 2px rgba(199, 104, 127, 0.2);
}

.age-input-summary {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.age-input-caret {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--black-coral, #636b7c);
}

.age-input-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 50;
  margin-bottom: 4px;
  min-width: 100%;
  background-color: var(--white, #fff);
  border: 1px solid var(--black-coral, #636b7c);
  border-radius: var(--radius-6, 6px);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  padding: 4px;
}

.age-input-popup select {
  border: none;
  outline: none;
  width: 100%;
  padding: 4px;
  font-size: var(--fs-9, 13px);
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  color: var(--charcoal, #3d4554);
  background-color: transparent;
}

.age-input-popup select option:checked {
  background: var(--cinnamon-satin, #c7687f);
  color: white;
}

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

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

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

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