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

.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 */
  z-index: 3;
  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;
  overflow: hidden;
  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;
}

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

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

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

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

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

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