/* ---- “Tasks” icon styling (same look as Info icon) ---- */
#admin-hero-modal .admin-hero-tasks-icon i {
  font-size: 15px;
  color: #aaaaaa;
}
#admin-hero-modal .admin-hero-tasks-icon:hover i {
  color: #56ff00;
}

#admin-hero-modal .admin-hero-close-btn.ah-close-task-popup {
  right: 5px !important;
  top: 5px !important;
}

/* ---- Panel Content ---- */
#admin-hero-modal #admin-hero-tasks-panel .admin-hero-tasks-content {
  background: transparent;
  border: none;
  color: #eee;
  margin-top: 0;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px !important;
}

/* ---- Task Overlay ---- */
#admin-hero-modal #admin-hero-add-task-overlay {
  display: none; /* Controlled by JS */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8); /* Increase opacity for darker backdrop */
  z-index: 100020; /* Higher to avoid conflicts */
  align-items: center;
  justify-content: center;
  opacity: 1; /* Fully visible when shown */
  transition: opacity 200ms ease-in-out;
}

/* Ensure form container is solid */
#admin-hero-modal #admin-hero-add-task-form-container {
  background: #282828 !important; /* Solid dark background */
  padding: 15px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  color: #fff !important;
  z-index: 100021; /* Higher than overlay */
  opacity: 1 !important; /* Prevent transparency */
  position: relative;
}

#admin-hero-modal #admin-hero-form-header {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 12px;
  text-align: center;
}

#admin-hero-modal .ah-task-filters {
  padding: 4px 0;
  z-index: 100003;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  gap: 8px;
}

#admin-hero-modal .ah-task-filters input#ah-task-search {
  width: 60% !important;
  flex-grow: 1;
}

#admin-hero-modal .ah-task-filters ::placeholder {
  color: #999999 !important;
  opacity: 1; /* Firefox */
}

#admin-hero-modal .ah-task-filters select#ah-task-user-filter {
  width: 30% !important;
  flex-grow: 1;
}

#admin-hero-modal #admin-hero-add-task-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

#admin-hero-modal #admin-hero-add-task-form label {
  width: 100%;
  display: block;
  padding: 4px 0;
}

#admin-hero-modal #admin-hero-add-task-form .ah-form-100 {
  width: 100%;
}

#admin-hero-modal #admin-hero-add-task-form .ah-form-40 {
  width: 40%;
  flex-grow: 1;
}

/* Ensure form elements are visible and solid */
#admin-hero-modal #admin-hero-add-task-form input,
#admin-hero-modal #admin-hero-add-task-form select,
#admin-hero-modal #admin-hero-add-task-form textarea {
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: none !important;
  background: #444; /* match other inputs’ background */
  color: #fff; /* match text color */
  padding: 6px; /* add some padding for textarea/inputs */
  border: 1px solid #555;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Notes textarea specific styling */
#admin-hero-modal #ah-task-notes {
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
  font-size: 0.9em;
}

#admin-hero-modal #ah-assigned-by {
  text-align: center;
  padding: 8px 0 0 0;
  color: #888888;
}

/* Form footer (buttons) */
#admin-hero-modal .ah-task-form-footer {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px 0 0 0;
  gap: 8px;
}

#admin-hero-modal #admin-hero-cancel-add-task {
  color: #aaaaaa;
  background: transparent;
  border: 0;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: bold;
  padding-top: 2px;
}

#admin-hero-modal #admin-hero-cancel-add-task:hover {
  color: red;
}

/* Fade effect for saving (matches Info feature) */
#admin-hero-modal #admin-hero-add-task-overlay.admin-hero-visible {
  opacity: 1 !important;
}
#admin-hero-modal #admin-hero-add-task-overlay:not(.admin-hero-visible) {
  opacity: 0; /* Fully hidden when not visible */
}

#admin-hero-modal .ah-task-buttons-header {
  z-index: 100003;
  max-width: 960px;
  width: auto;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
  position: absolute;
  right: 0;
}

#admin-hero-modal .ah-task-buttons-filter {
  z-index: 100003;
  width: auto;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  gap: 4px;
}

#admin-hero-modal button#admin-hero-add-task {
  padding: 5px 10px !important;
  font-size: 24px !important;
  margin-bottom: 1px !important;
}

/* Fieldset */
#admin-hero-modal #admin-hero-tasks-panel fieldset.ah-taskboard-fieldset {
  width: 100% !important;
  max-width: 960px !important;
}

#admin-hero-modal #admin-hero-tasks-panel fieldset.ah-admin-only-fieldset {
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

/* Taskboard Table */
#admin-hero-modal .admin-hero-tasks-table {
  text-align: left;
  width: 100%;
  border-collapse: collapse;
}

#admin-hero-modal .admin-hero-tasks-table thead,
#admin-hero-modal .admin-hero-tasks-table tr {
  border-bottom: 1px solid #444444 !important;
}

#admin-hero-modal .admin-hero-tasks-table tr:last-child {
  border-bottom: 0 solid #777 !important;
}

#admin-hero-modal .admin-hero-tasks-table th {
  color: #cccccc !important;
  font-weight: bold;
  cursor: pointer !important;
  padding: 8px;
  text-transform: uppercase;
}

#admin-hero-modal .admin-hero-tasks-table th:hover {
  color: #ffffff !important;
}

#admin-hero-modal .admin-hero-tasks-table td {
  padding: 8px;
  color: #cccccc;
}

#admin-hero-modal .admin-hero-tasks-table td.task-title {
  color: #cccccc;
  cursor: pointer;
  font-weight: bold;
}

#admin-hero-modal .admin-hero-tasks-table td.task-title:hover {
  color: #ffffff;
}

#admin-hero-modal tr#admin-hero-no-tasks-row td {
  color: #999999;
  font-size: 0.9em;
  text-align: center;
}

#admin-hero-modal input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8); /* adjust brightness */
  opacity: 1;
  cursor: pointer;
}

#admin-hero-modal .ah-task-count-badge {
  position: absolute;
  top: -2px;
  right: 0;
  background: #333333;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  border-radius: 20%;
  padding: 2px;
}

#admin-hero-modal #ah-task-search {
  padding-right: 24px; /* space for the clear button */
}

#admin-hero-modal .ah-task-search-clear {
  position: absolute;
  right: 55px;
  top: 10px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  font-size: 24px;
  display: none;
}

#admin-hero-modal .ah-task-search-clear:hover {
  color: red;
}

/* always hide these columns on mobile */
#admin-hero-modal .admin-hero-tasks-table th[data-sort="createdDate"],
#admin-hero-modal .admin-hero-tasks-table th[data-sort="priority"],
#admin-hero-modal .admin-hero-tasks-table td:nth-child(2),
#admin-hero-modal .admin-hero-tasks-table td:nth-child(3) {
  display: none !important;
}

/* only show them again on desktop/fullscreen */
@media (min-width: 768px) {
  #admin-hero-modal.admin-hero-fullscreen
    .admin-hero-tasks-table
    th[data-sort="createdDate"],
  #admin-hero-modal.admin-hero-fullscreen
    .admin-hero-tasks-table
    th[data-sort="priority"],
  #admin-hero-modal.admin-hero-fullscreen
    .admin-hero-tasks-table
    td:nth-child(2),
  #admin-hero-modal.admin-hero-fullscreen
    .admin-hero-tasks-table
    td:nth-child(3) {
    display: table-cell !important;
  }
}