/* === Global Reset & Fonts === */
addtask_template.css * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Open Sans";
  src: url("../assets/img/open_sans/static/OpenSans-Regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url("../assets/img/open_sans/static/OpenSans-Bold.ttf")
    format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url("../assets/img/open_sans/static/OpenSans-Italic.ttf")
    format("truetype");
  font-weight: 400;
  font-style: italic;
}

/* === Labels & Header === */
.label-addTask_template {
  display: none;
}

.header-wrapper-addTask_template {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 518px;
  height: 100px;
  padding: 40px 40px;
  margin-left: 20px;
  margin-bottom: 24px;
}

.h1-addTask_template {
  font-family: "open sans";
  font-size: 40px;
  font-weight: 700px;
}

.close-btn-addTask_template {
  color: #4589ff;
  border: none;
  background-color: transparent;
  font-size: 32px;
}

/* === Main Container === */
.main-addTask_template {
  position: relative;
  width: 440px;
  padding-left: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  left: 36px;
}

.main-addTask_template::-webkit-scrollbar {
  display: none;
}

/* === Task Title & Description === */
.task-title-addTask_template {
  font-size: 28px;
  border: none;
  border-bottom: 1px solid #d1d1d1;
  padding: 12px;
  width: 100%;
  font-family: "open sans";
  line-height: 120%;
  margin-bottom: 4px;
}

.task-title-addTask_template:focus {
  outline: none;
  box-shadow: none;
}

.section-heading-addTask_template {
  color: #42526e;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 19px;
  margin-top: 24px;
  margin-bottom: 8px;
}

.task-description-addTask_template {
  border: 1px solid #d1d1d1;
  border-radius: 8px;
  padding-top: 18px;
  padding-left: 16px;
  margin-bottom: 18px;
  font-size: 19px;
  background-color: white;
  width: 100%;
  height: 103px;
  resize: vertical;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 120%;
  margin-top: 8px;
}

.task-title-addTask_template::placeholder,
.task-description-addTask_template::placeholder,
.task-subtask-addTask_template::placeholder,
.task-date-addTask_template::placeholder {
  color: #bfbfbf;
  opacity: 1;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  line-height: 120%;
}

.task-title-addTask_template::placeholder {
  font-size: 28px;
}

/* === Date & Select Inputs === */
.task-date-addTask_template,
.task-select-addTask_template,
.task-subtask-addTask_template {
  width: 100%;
  border: none;
  border-bottom: 1px solid #d1d1d1;
  border-radius: 0;
  padding: 12px;
  font-size: 19px;
  background-color: white;
}

.date-input-wrapper-addTask_template {
  position: relative;
  display: inline-block;
  width: 100%;
}

.date-field-addTask_template {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d1d1d1;
  background-color: white;
  margin-bottom: 4px;
}

.task-date-addTask_template {
  border: none;
  outline: none;
  flex: 1;
  padding: 12px;
  font-size: 19px;
  font-family: "Open Sans", sans-serif;
}

.event-icon-addTask_template {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  cursor: pointer;
}

.task-select-addTask_template {
  appearance: none;
  background-image: url("/addTask_code/icons_addTask/separatedAddTaskIcons/arrow_drop_down.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 120%;
  margin-bottom: 24px;
}

.task-select-addTask_template:focus {
  outline: none;
  box-shadow: none;
}

/* === Priority Buttons === */
.priority-group-addTask_template {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.priority-btn-medium-addTask_template,
.priority-btn-urgent-addTask_template,
.priority-btn-low-addTask_template {
  flex: 1;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #d1d1d1;
  background-color: white;
  cursor: pointer;
  font-size: 17px;
  transition: 0.2s;
  margin-bottom: 24px;
  width: 120px;
  height: 50px;
}

.priority-btn-medium-addTask_template {
  background-color: #ffa800;
  color: white;
}

.priority-btn-addTask_template:hover {
  background-color: #e6e6e6;
}
.priority-btn-urgent-addTask_template:hover {
  border-bottom: 3px solid #ff3d00;
}

.priority-btn-low-addTask_template:hover {
  border-bottom: 3px solid #00c853;
}

.priority-btn-medium-addTask_template:hover {
  border-bottom: 3px solid #ffa800;
}

/* === Task Input Layout & subtasks === */
.task-input-addTask_template {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 416px;
}

.addTask-icons-addTask_template {
  align-items: center;
  width: 20px;
  height: 15px;
}

.subtask-wrapper-addTask_template {
  position: relative;
}

.subtask-wrapper-addTask_template .task-subtask-addTask_template {
  padding-right: 70px;
}

.subtask-item-addTask_template .subtask-value-addTask_template {
  padding-right: 70px; 
}

/* === Buttons & Footer === */
.task-buttons-addTask_template {
  position: absolute;
  bottom: -350px;
  right: 15px;
}

.btn-done-wrapper-addTask_template {
  bottom: 36px;
  right: 10px;
  width: calc(100% - 72px);
  max-width: 440px;
  display: flex;
  justify-content: flex-end;
  z-index: 10;
}

.btn-done-addTask_template {
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-family: "open sans";
  background-color: #4589ff;
  color: white;
  width: 155px;
  height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.btn-done-wrapper-addTask_template::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -36px;
  height: 36px;
  background: white;
  pointer-events: none;
}

.check-icon-addTask_template {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  filter: brightness(0) invert(1);
}

/* === Error Messages === */
.error-text {
  color: red;
  font-size: 14px;
  font-family: "Open Sans";
}

/* === Toast Error (AddTask Template) === */
.toast--error {
  background: #ff3d00 !important;
  color: #ffffff !important;
}