/* === Board Modals and Overlays === */

/* === Overlay and Side Panel === */
.side-overlay {
    position: fixed;
    inset: 0;
    
    z-index: 9999;
    display: none;
    justify-content: flex-end;   
    align-items: stretch;
  }
  
  .side-overlay.open {
    display: flex;
    backdrop-filter: blur(6px) brightness(80%);
  }
  
  .side-panel {
    background: #fff;
    box-shadow: -12px 0 28px rgba(16, 24, 40, 0.18);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
  }
  
  .side-overlay.open .side-panel {
    transform: translateX(0);
    width: 520px;
    height: 830px;
    max-width: 95vw;
    border-top-left-radius: 59px;
    border-bottom-left-radius: 59px;
  }
  
/* === Task Modal (Default View) === */
  #task-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px) brightness(80%);
    z-index: 9999;
  }
  
  #task-modal.open {
    display: flex;
  }
  
  #task-modal-content {
    background: #fff;
    border-radius: 24px;
    width: 528px; 
    max-height: 90vh;
    overflow: auto;
    padding: 0;
  }
  
  #task-modal-content {
    width: min(528px, 92vw);
    max-height: 90vh;
    overflow: auto;
    overflow-x: hidden; 
    padding: 0;
    border-radius: 24px;
  }
  
  /* === Task Modal Layout and Inner Sections === */
  #task-modal-content .header-wrapper_user-story,
  #task-modal-content .title_user-story,
  #task-modal-content .h3_user-story,
  #task-modal-content .main_content_user_story {
    width: min(528px, calc(100vw - 48px));
    margin-inline: auto;
  }
  
  #task-modal-content .header-wrapper_user-story {
    padding-left: clamp(20px, 6vw, 40px);
    padding-right: clamp(20px, 6vw, 40px);
  }
  
  #task-modal-content .title_user-story {
    padding-left: clamp(20px, 6vw, 40px);
    padding-right: clamp(28px, 8vw, 60px);
  }
  
  #task-modal-content .h3_user-story {
    padding-left: clamp(20px, 6vw, 40px);
    padding-right: clamp(20px, 6vw, 40px);
  }
  
  #task-modal-content .main_content_user_story {
    padding: 0 clamp(20px, 6vw, 40px) 24px;
    overflow-x: hidden; 
  }
  
  /* === Close Buttons === */
  .close-btn-addTask_template {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: 20px;
    transition: transform 0.1s ease;
  }
  
  .close-btn_user-story:active,
  .close-btn-addTask_template:active {
    transform: scale(0.9);
  }
  
  .close-btn_user-story:hover,
  .close-btn-addTask_template:hover {
    transform: scale(1.2);
  }


/* === Compact Mode (User Story Compact View) === */
#task-modal-content.us-compact {
    width: min(480px, 92vw); 
    border-radius: 20px;
  }
  
  #task-modal-content.us-compact .header-wrapper_user-story,
  #task-modal-content.us-compact .title_user-story,
  #task-modal-content.us-compact .h3_user-story,
  #task-modal-content.us-compact .main_content_user_story {
    width: min(480px, calc(100vw - 32px));
    margin-inline: auto;
  
    box-sizing: border-box;
  }
  
  #task-modal-content.us-compact {
    overflow-x: hidden;
  }

  /* === Responsive Behavior === */
  @media (max-width: 600px) {
    .side-panel {
      width: 100vw;       
      flex-basis: 100vw;
    }
  }
  
  /* =========================================================
   Board-Karte: Vorschau-Text begrenzen
   ========================================================= */
.task-card-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.task-card {
  overflow: hidden;
}

/* =========================================================
   Gemeinsames Modal-Layout (User Story + Technical Task)
   ========================================================= */

/* Äußere Box im Overlay (id/class bei dir z.B. task-modal-content) */
.task-modal-content {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Der eigentliche Inhalt, der scrollen darf */
.task-modal-content > .main_content_user_story,
.task-modal-content > .main-container-technical-task {
  flex: 1;
  overflow-y: auto;      /* nur dieser Bereich scrollt */
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 16px;  /* etwas Platz über dem Footer */
}

/* Lange Texte dürfen umbrechen */
.title_user-story,
.h3_user-story,
.h1-technical-task,
.description-font-technical-task,
.status-font-technical-task {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* =========================================================
   USER STORY: Assigned + Subtasks scrollen
   ========================================================= */

/* eigener Scrollbereich für Kontakte */
.assigned-users_user-story {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;    /* Platz für Scrollbar */
  box-sizing: border-box;
}

/* eigener Scrollbereich für Subtasks */
.subtask-list {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  box-sizing: border-box;
}

/* Subtask-Zeilen ordentlich umbrechen */
.subtask-list label {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Delete / Edit unten „ankleben“ */
.action-buttons_user-story {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  padding: 12px 0;
  box-sizing: border-box;
}

/* =========================================================
   TECHNICAL TASK: Assigned + Subtasks scrollen
   ========================================================= */

/* der innere Block mit den Usern (das <div> in assigned-to-container) */
.assigned-to-container-technical-task > div {
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  box-sizing: border-box;
}

/* eigener Scrollbereich für Subtasks */
.subtasks-task-container-technical-task {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  box-sizing: border-box;
}

.subtasks-task-container-technical-task label {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Delete / Edit unten fix */
.delete-edit-section-technical-task {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  padding: 12px 0;
  box-sizing: border-box;
}



/* ===== ÄUSSERE MODAL-BOX ================================== */
/* Dein Wrapper: <div id="task-modal-content"> ... </div>     */

#task-modal-content {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Der Teil, der scrollen soll: User Story + Technical Task   */
#task-modal-content > .main_content_user_story,
#task-modal-content > .main-container-technical-task {
  flex: 1;
  overflow-y: auto;       /* nur der Mittelteil scrollt */
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 16px;
}
/* User Story – Assigned + Subtasks jeweils eigener Scrollbereich */
.assigned-users_user-story {
  max-height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  box-sizing: border-box;
}

.subtask-list {
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  box-sizing: border-box;
}

/* Delete / Edit bei User Story unten „ankleben“ */
.action-buttons_user-story {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  padding: 12px 0;
  box-sizing: border-box;
}

/* einzelne Subtask-Zeilen schön umbrechen */
#task-modal-content .task-input_user-story .subtask-list label {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
#task-modal-content .task-input_user-story .subtask-list {
  max-height: 92px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 8px;
  box-sizing: border-box;
  /* zum Testen: */
  /* border: 1px solid red; */
}

/* === TECHNICAL TASK: Beschreibung mit Scroll === */
#task-modal-content .description-font-technical-task {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  box-sizing: border-box;
}


/* Abstand zwischen den Subtasks – TECHNICAL TASK */
.subtasks-task-container-technical-task .label-font-technical-task {
  display: flex;          /* Checkbox + Text nebeneinander */
  align-items: center;
  gap: 8px;               /* Abstand zwischen Checkbox und Text */
  margin-bottom: 10px;    /* Abstand zum nächsten Subtask */
}

.subtasks-task-container-technical-task .label-font-technical-task:last-child {
  margin-bottom: 0;       /* unten kein extra Abstand */
}

/* (Optional) das Gleiche für User Story */
.subtask-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.subtask-list label:last-child {
  margin-bottom: 0;
}

.description-font-technical-task {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

#task-modal-content .main_content_user_story {
  max-height: none;
  overflow: visible;      
}
#task-modal-content .action-buttons_user-story {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  padding-top: 12px;
  padding-bottom: 12px;
  box-sizing: border-box;
}

#task-modal-content .action-buttons_user-story::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 8px;
  background: #e5e5e5;
}

#task-modal-content .title_user-story,
#task-modal-content .h3_user-story {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}


#task-modal-content,
.task-modal-content {
  max-height: 90vh;
  width: min(528px, 100vw - 48px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;      
  overflow-x: hidden;
  box-sizing: border-box;
}

#task-modal-content .main_content_user_story,
#task-modal-content .main-container-technical-task {
  max-height: none;
  overflow: visible;    
}


#task-modal-content .action-buttons_user-story,
#task-modal-content .delete-edit-section-technical-task {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  padding-top: 12px;
  padding-bottom: 12px;
  box-sizing: border-box;
  font-family: 'Open Sans';
}

#task-modal-content .action-buttons_user-story::before,
#task-modal-content .delete-edit-section-technical-task::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 8px;
  background: #e5e5e5;
}


#task-modal-content {
  max-height: 90vh;
  width: min(528px, 100vw - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;          
  box-sizing: border-box;
  border-radius: 24px;
}

.task-modal-scroll {
  flex: 1;
  overflow-y: auto;         
  overflow-x: hidden;
  box-sizing: border-box;
}

.title_user-story,
.h3_user-story,
.h1-technical-task,
.description-font-technical-task {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.action-buttons_user-story,
.delete-edit-section-technical-task {
  padding: 12px clamp(20px, 6vw, 40px) 16px;
  background: #ffffff;
  box-sizing: border-box;
  border-top: 1px solid #e5e5e5;
}

#task-modal-content .task-input_user-story .subtask-list {
  max-height: 120px !important;  
  overflow-x: hidden !important;  
  padding-right: 8px;
  box-sizing: border-box;
}

#task-modal-content .task-input_user-story .subtask-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

#task-modal-content .task-input_user-story .subtask-list label:last-child {
  margin-bottom: 0;
}

#task-modal-content .subtasks-task-container-technical-task {
  max-height: 120px !important;      
  overflow-y: auto !important;    
  overflow-x: hidden !important;    
  padding-right: 8px;
  box-sizing: border-box;
}

#task-modal-content .subtasks-task-container-technical-task label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

#task-modal-content .subtasks-task-container-technical-task label:last-child {
  margin-bottom: 0;
}