* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: #cbd2d9;
  min-height: 100vh;
  padding: 20px;
  font-size: 1.05rem;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.header {
  background: #2c3e50;
  color: white;
  padding: 30px;
  text-align: center;
}

.header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.header p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.main-content {
  padding: 30px;
}

.disciplines-grid {
  display: flex;
  flex-direction: row;
  gap: 25px;
  margin-bottom: 30px;
  flex-wrap: wrap; 
  justify-content: center;
}



.discipline-card {
  background: white;
  border-radius: 15px;
  padding: 0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  flex: 0 0 auto;
  max-width: 100%; /* Force wrapping on smaller screens or when content is wide */
  overflow: hidden;
}

.discipline-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.discipline-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 0;
  text-align: center;
  padding: 15px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 0;
}

.discipline-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* Custom Checkbox Styling */
.discipline-toggle-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.discipline-toggle-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.discipline-toggle-custom {
  height: 24px;
  width: 24px;
  background-color: #eee;
  border-radius: 6px;
  border: 2px solid #ccc;
  transition: all 0.2s ease-in-out;
  position: relative;
}

.discipline-toggle-label:hover .discipline-toggle-custom {
  background-color: #e2e6ea;
  border-color: #adb5bd;
}

.discipline-toggle-checkbox:checked ~ .discipline-toggle-custom {
  background-color: #2ecc71;
  border-color: #2ecc71;
}

.discipline-toggle-custom:after {
  content: "";
  position: absolute;
  display: none;
}

.discipline-toggle-checkbox:checked ~ .discipline-toggle-custom:after {
  display: block;
}

.discipline-toggle-custom:after {
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.turma-selector {
  margin-bottom: 15px;
  padding: 20px;
}

.turma-selector label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #34495e;
}

.turma-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Ensure items wrap */
  gap: 8px;
  width: 100%; /* Take full width of parent */
  justify-content: center; /* Center buttons if there is space */
}

.turma-button-container {
  max-width: 100%; /* Prevent container from overflowing */
  position: relative;
  display: inline-flex;
  align-items: center;
}

.turma-button {
  padding: 10px 15px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 0.9rem;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative; /* Added for priority badge */
}

.turma-button:hover {
  background: #f8f9fa;
}

.turma-button.selected {
  background: var(--discipline-color, #3498db);
  color: white;
  border-color: var(--discipline-color, #3498db);
}

.turma-button:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.remove-turma {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 0.8rem;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.remove-turma:hover {
  background: #c0392b;
  transform: scale(1.1);
}

.schedule-container {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
  overflow: hidden;
}

.schedule-title {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}

.schedule-scroll-container {
  overflow-x: auto;
  border-radius: 10px;
  margin: 0 -10px;
  padding: 0 10px;
}

.schedule-grid {
  display: grid;
  grid-template-columns: 80px repeat(5, minmax(120px, 1fr));
  gap: 1px 3px;
  background: #ddd;
  border-radius: 10px;
  overflow: hidden;
  min-width: 700px;
}

.schedule-header {
  background: linear-gradient(135deg, #34495e, #2c3e50);
  color: white;
  padding: 15px 10px;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
}

.time-slot {
  background: #f8f9fa;
  padding: 15px 10px;
  text-align: center;
  font-weight: 600;
  color: #2c3e50;
  border-right: 1px solid #ddd;
  font-size: 0.95rem;
}

.schedule-cell {
  background: white;
  padding: 0;
  min-height: 60px;
  position: relative;
  transition: all 0.3s ease;
  vertical-align: top;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1px;
}

.schedule-cell:hover {
  background: #f8f9fa;
}

.class-block {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 4px;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0;
  box-shadow: none;
  border-right: 1px solid rgba(255,255,255,0.2);
  border-bottom: none;
  transition: all 0.3s ease;
  /* word-break: break-word; Removed for truncation */
  height: auto; 
  flex: 1;
  display: flex;
  flex-direction: column; /* Stack top and bottom */
  justify-content: space-between; /* Space out top and bottom */
  align-items: stretch; /* detailed info spans full width */
  min-width: 0; 
  padding: 4px;
}

/* Specific truncation for the name */
/* Specific truncation for the name */
.discipline-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.class-info-top {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  overflow: hidden;
}

.class-info-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  font-size: 0.75rem; /* Slightly smaller for details */
  margin-top: 2px;
}

.class-room {
  text-align: left;
  opacity: 0.9;
  margin-right: 4px;
  white-space: nowrap;
}

.turma-name {
  text-align: right;
  white-space: nowrap;
  margin-left: auto; /* Push to right */
}

.separator-text {
  display: none; /* No longer needed */
}

/* Remove old class-text style if it exists or override it */
.class-text {
  display: none; 
}

/* .class-block:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
} */

.conflict {
  background: #e74c3c !important;
  animation: pulse 2s infinite;
}

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

.no-conflicts {
  background: #27ae60;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
}

.conflicts-warning {
  background: #e74c3c;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
}

.button-container {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.button-group-left {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.button-group-right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.control-button {
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.icon-btn {
  padding: 10px 15px; 
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3498db;
  color: white;
  border: none;
}

.icon-btn:hover:not(:disabled) {
  background-color: #2980b9;
  transform: translateY(-2px);
}

.icon-btn:disabled {
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Delete Mode Styles */
#deleteModeBtn.active {
  background-color: #e74c3c;
  border-color: #c0392b;
}

#deleteModeBtn.active:hover {
    background-color: #c0392b;
}

/* When delete mode is active, change cursor on schedule cells that have content */
body.delete-mode .class-block {
    cursor: pointer;
    position: relative;
}

/* Visual cue for delete mode selection, excluding locked items */
body.delete-mode .class-block:not(.locked):hover {
    background: #e74c3c !important; 
    opacity: 0.9;
}

body.delete-mode .class-block:not(.locked):hover::after {
    content: "×";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: white;
    font-weight: bold;
}

.control-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.control-button:active {
  transform: translateY(0);
}

.select-all {
  background-color: #3498db;
  color: white;
}

.select-all:hover {
  background-color: #2980b9;
}

.clear-all {
  background-color: #3498db;
  color: white;
}

.clear-all:hover {
  background-color: #2980b9;
}

/* Lock Mode Styles */
#lockModeBtn.active {
  background-color: #f1c40f;
  border-color: #f39c12;
}

#lockModeBtn.active:hover {
    background-color: #f39c12;
}

/* Priority Mode Styles */
#priorityModeBtn.active {
  background-color: #e67e22; 
  border-color: #d35400; 
}

#priorityModeBtn.active:hover {
    background-color: #d35400;
}

.priority-badge {
    position: absolute;
    top: -8px;
    left: -8px; /* Different from remove button (top right) */
    background-color: #e67e22; /* Warning/Priority color */
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid white;
}

/* Locked Block Styling */
.class-block.locked {
    border: 2px solid #f1c40f !important;
    position: relative;
}

.class-block.locked::after {
    content: "🔒";
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1rem;
    z-index: 10;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* Lock Mode Cursor */
body.lock-mode .class-block {
    cursor: alias; /* Or another cursor indicating "lockable" */
}

body.lock-mode .class-block:hover {
    opacity: 0.9;
}

/* Locked items shouldn't show delete hover effect */
body.delete-mode .class-block.locked {
    cursor: not-allowed;
    opacity: 1 !important; /* Prevent dimming */
}

body.delete-mode .class-block.locked:hover {
    background: linear-gradient(135deg, #3498db, #2980b9) !important; /* Reset to original or keep current color */
    /* Best to just reset the background override from delete mode */
}

/* Fix delete mode hover specific to locked items to override opacity/content */
body.delete-mode .class-block.locked:hover::after {
    content: "🔒"; /* Keep lock icon instead of X */
    font-size: 1rem;
    top: 5px;
    left: auto;
    right: 5px;
    transform: none;
}

/* Ensure original color is kept or rely on inline style. 
   Delete mode uses !important on background. We need to override that for locked items.
*/
body.delete-mode .class-block.locked:hover {
    /* We can't easily know the original color here unless we use a var or !important.
       Inline styles on element usually have high specificity, but !important in CSS overrides it.
       We will handle this better by ensuring the delete mode selector doesn't target .locked,
       or by making this one more specific.
    */
    background: inherit !important; /* Attempt to inherit, though difficult with gradients */
}
/* Better approach: Use a specific class for delete-hover that checks for :not(.locked) in the delete mode selector 
   But I previously wrote: body.delete-mode .class-block:hover
   I will update that selector in a moment to exclude locked items, 
   or just override here with specific "don't touch" styles.
*/

/* Resetting delete mode effects for locked items */


.restore-btn {
  background-color: #3498db;
  color: white;
}

.restore-btn:hover {
  background-color: #2980b9;
}

.toggle-tp {
  background-color: #3498db;
  color: white;
}

.toggle-tp:hover {
  background-color: #2980b9;
}

.copy-btn {
  background-color: #3498db;
  color: white;
  height: 44px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-btn:hover {
  background-color: #2980b9;
}

.csv-btn {
  background-color: #3498db;
  color: white;
  height: 44px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.csv-btn:hover:not(:disabled) {
  background-color: #2980b9;
}


.csv-btn:disabled, .copy-btn:disabled {
  /* background-color: #95a5a6; */ /* Removed to match undo/redo */
  /* opacity: 0.6; */ /* Removed to match undo/redo */
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Saves Section */
.saves-container {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

.saves-title {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}

.saves-wrapper {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.saves-wrapper .slot-group {
    background: #f1f2f6;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dfe4ea;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.saves-wrapper .slot-group:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-color: #ced6e0;
}

.saves-wrapper .load-btn {
  font-size: 1.1rem;
  border-right: 1px solid #dfe4ea;
  min-width: 120px; /* Specific width for better look */
  text-align: left;
  padding: 10px 15px;
}

.saves-wrapper .save-btn {
  font-size: 1.2rem;
  padding: 10px 15px;
}

.saves-wrapper .delete-btn {
  font-size: 1.2rem;
  padding: 10px 15px;
  border-left: 1px solid #dfe4ea;
  color: #e74c3c;
  opacity: 0.7;
}

.saves-wrapper .delete-btn:hover {
    background-color: #ffeaa7; /* Warning yellow */
    opacity: 1;
}

/* Reuse has-data and empty classes from before */
.slot-group.has-data {
  border-color: #2ecc71;
  background: #eafef1;
}

.slot-group.empty .load-btn {
  color: #a4b0be;
}
.toast {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 16px;
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s, bottom 0.3s;
}

.toast.show {
  visibility: visible;
  opacity: 1;
  bottom: 50px;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
  from {bottom: 30px; opacity: 0;}
  to {bottom: 50px; opacity: 1;}
}

@keyframes fadeout {
  from {bottom: 50px; opacity: 1;}
  to {bottom: 30px; opacity: 0;}
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  .container {
    border-radius: 15px;
  }

  .header {
    padding: 20px 15px;
  }

  .header h1 {
    font-size: 1.8rem;
  }

  .header p {
    font-size: 1rem;
  }

  .main-content {
    padding: 20px 15px;
  }

  .disciplines-grid {
    flex-direction: column;
    gap: 15px;
  }

  .discipline-card {
    min-width: 100%;
    padding: 15px;
  }

  .discipline-title {
    font-size: 1.2rem;
    padding: 8px;
  }

  .turma-buttons {
    justify-content: center;
  }

  .button-container {
    flex-direction: column;
    align-items: center;
  }

  .control-button {
    width: 100%;
    max-width: 300px;
  }

  .schedule-container {
    padding: 15px;
    border-radius: 12px;
    /* Remove any overflow hidden that might interfere */
    overflow: visible;
  }

  .schedule-title {
    font-size: 1.5rem;
  }

  .schedule-scroll-container {
    /* Fix the scrolling container */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    margin: 0; /* Remove negative margins */
    padding: 0; /* Remove padding that interferes */
    border-radius: 10px;
    /* Add some padding to prevent content from touching edges */
    padding-right: 15px;
  }

  .schedule-grid {
    /* Increase min-width to ensure full table is visible */
    min-width: 750px; /* Increased from 600px */
    font-size: 0.8rem;
    /* Ensure the grid doesn't shrink */
    flex-shrink: 0;
  }

  .schedule-header {
    padding: 10px 5px;
    font-size: 0.8rem;
  }

  .time-slot {
    padding: 10px 5px;
    font-size: 0.8rem;
  }

  .schedule-cell {
    padding: 8px 5px;
    min-height: 50px;
  }

  .class-block {
    font-size: 0.75rem;
    padding: 5px;
  }
}

@media (max-width: 480px) {
  .header h1 {
    font-size: 1.5rem;
  }

  .header p {
    font-size: 0.9rem;
  }

  .discipline-title {
    font-size: 1.1rem;
  }

  .turma-button {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .schedule-container {
    /* Reduce padding on very small screens */
    padding: 10px;
    /* Make sure container doesn't interfere with scrolling */
    overflow: visible;
  }

  .schedule-scroll-container {
    /* More aggressive fixes for small screens */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0;
    /* Add more right padding for very small screens */
    padding-right: 20px;
    border-radius: 10px;
  }

  .schedule-grid {
    /* Even larger min-width for small screens */
    min-width: 800px; /* Increased from 500px */
    /* Make sure each column has enough space */
    grid-template-columns: 80px repeat(5, minmax(140px, 1fr));
  }

  .schedule-header {
    font-size: 0.75rem;
    padding: 8px 3px;
  }

  .time-slot {
    font-size: 0.75rem;
    padding: 8px 3px;
  }

  .class-block {
    font-size: 0.7rem;
  }

  /* Day abbreviations for very small screens */
  .schedule-header:nth-child(2)::after {
    content: "Seg";
  }
  .schedule-header:nth-child(3)::after {
    content: "Ter";
  }
  .schedule-header:nth-child(4)::after {
    content: "Qua";
  }
  .schedule-header:nth-child(5)::after {
    content: "Qui";
  }
  .schedule-header:nth-child(6)::after {
    content: "Sex";
  }

  .schedule-header:nth-child(2) span,
  .schedule-header:nth-child(3) span,
  .schedule-header:nth-child(4) span,
  .schedule-header:nth-child(5) span,
  .schedule-header:nth-child(6) span {
    display: none;
  }
}

/* Additional fix for any remaining scroll issues */
@media (max-width: 600px) {
  .main-content {
    /* Ensure main content doesn't interfere */
    overflow-x: visible;
  }

  .container {
    /* Make sure container allows horizontal overflow */
    overflow-x: visible;
  }

  body {
    /* Ensure body allows horizontal scrolling */
    overflow-x: auto;
  }
}

.completion-message {
  padding: 10px 20px;
  border-radius: 8px;
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
  display: none;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.completion-message.show {
  display: block;
  background: #2ecc71;
  color: white;
  animation: fadeIn 0.5s ease-out;
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


.completion-message.incomplete {
  display: block;
  background: #f1c40f; /* Orange/Yellow for attention but not error */
  color: #2c3e50;
  animation: fadeIn 0.5s ease-out;
  box-shadow: 0 4px 15px rgba(241, 196, 15, 0.3);
}

.success {
    background-color: #2ecc71 !important;
    color: white !important;
    border-color: #27ae60 !important;
}

.success:hover {
    background-color: #27ae60 !important;
}


.success-slot {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    transition: background-color 0.3s ease;
}

.success-slot:hover {
    background-color: #c3e6cb !important;
}


.success-slot-btn {
    background-color: #2ecc71 !important;
    color: white !important;
    border-color: #27ae60 !important;
}

.success-slot-btn:hover {
    background-color: #27ae60 !important;
}

/* Priority Mode Styles */
#priorityModeBtn.active {
  background-color: #f1c40f; 
  border-color: #f39c12; 
  color: white;
}

#priorityModeBtn.active:hover {
    background-color: #f39c12;
}

.priority-badge {
    position: absolute;
    top: -8px;
    left: -8px; 
    background-color: #f39c12; /* Star color match */
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid white;
}

/* Logic: Can only set priority if >1 class selected */
body.priority-mode .class-block {
     /* Default state when in priority mode */
}

/* The glow for classes that CAN have priority set */
body.priority-mode .class-block.priority-target {
    cursor: pointer !important;
    box-shadow: 0 0 8px 2px rgba(241, 196, 15, 0.8) !important; /* Yellow glow */
    border: 1px solid #f1c40f !important;
    animation: priorityPulse 2s infinite;
    z-index: 5;
}

@keyframes priorityPulse {
  0% {
    box-shadow: 0 0 5px 1px rgba(241, 196, 15, 0.6);
  }
  50% {
    box-shadow: 0 0 12px 3px rgba(241, 196, 15, 0.9);
  }
  100% {
    box-shadow: 0 0 5px 1px rgba(241, 196, 15, 0.6);
  }
}

/* Modal Styles */
.modal {
  display: none; 
  position: fixed; 
  z-index: 2000; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.5); 
  animation: fadeIn 0.3s;
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto; 
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  position: relative;
  animation: slideIn 0.3s;
}

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

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

.modal h2 {
    color: #2c3e50;
    margin-bottom: 20px;
    text-align: center;
}

.modal-hint {
    text-align: center;
    color: #7f8c8d;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.priority-list {
    list-style-type: none;
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.priority-item {
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
    user-select: none;
}

.priority-item:last-child {
    border-bottom: none;
}

.priority-item:hover {
    background: #e9ecef;
}

.priority-index {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background-color: #34495e;
    color: white;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: bold;
    margin-right: 10px;
}

.priority-controls {
    display: flex;
    gap: 5px;
}

.priority-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 6px;
    color: #7f8c8d;
    font-size: 0.8rem;
}

.priority-btn:hover {
    background: #ecf0f1;
    color: #2c3e50;
}

.modal-buttons {
    margin-top: 20px;
    text-align: center;
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes slideIn {
  from {transform: translateY(-50px); opacity: 0;} 
  to {transform: translateY(0); opacity: 1;}
}