@use '../../../styles/_globals.scss' as *;

:host {
  overflow: hidden !important;
}

h1 {
  margin: var(--s2) 0;
  text-align: center;
}

h2 {
  text-align: center;
}

.wrapper {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: var(--transition-enter);
  overflow: hidden;

  &.isFadeOut {
    transition: var(--transition-duration-xs) var(--ani-standard-timing);
    opacity: 0;
  }
}

.work-view-header {
  padding: var(--s-half);

  position: relative;
  min-height: var(--bar-height-small);
  display: flex;
  justify-content: center;
  align-items: center;
  @include mq(xs) {
    padding: var(--s2) 0;
  }

  @include smallMainContainer() {
    .label {
      display: none;
    }

    p {
      margin: 0;
    }
  }

  @include mq(xs, max) {
    .label {
      display: none;
    }
    p {
      margin: 0;
    }
  }
}

.completed-tasks-heading {
  margin: var(--s);
  margin-top: var(--s2);
  //text-align: left;
  font-size: 16px;
  //border-bottom: 1px solid var(--extra-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.backlog-heading {
  margin: var(--s);
}

.status-bar {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  padding: 5px 0;
  user-select: none;

  .item {
    margin: 0 calc(1.5 * var(--s));
    text-align: center;
    position: relative;
  }

  .controls {
    text-align: center;
    margin: var(--s) 0;
    white-space: nowrap;
  }

  .label {
    margin-right: var(--s);
  }

  .no-wrap {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.take-a-break-reset-btn {
  display: none;
  position: absolute;
  top: 50%;
  right: -8px;
  z-index: 4;
  transform: translateY(-50%) scale(0);
  transition: var(--transition-standard);
  opacity: 0;
  visibility: hidden;
  @include mq(xs) {
    display: block;
  }
}

.item:hover .take-a-break-reset-btn {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  visibility: visible;
}

.hide-controls-icon {
  transform: rotate(90deg);
}

finish-day-btn,
.finish-day-button-wrapper {
  text-align: center;
  margin: var(--s2) 0 var(--s);
  padding-top: var(--s);
  display: block;
  white-space: nowrap;

  button {
    margin: 0 var(--s);
  }
}

.backlog,
.today {
  position: absolute;
  left: 0;
  //transition: max-height, min-height 500ms ease-in-out;
  //transition: all 500ms linear;
  width: 100%;

  &.isAnimatable {
    transition: var(--transition-standard);
  }

  task-list {
    padding-top: 0;
  }

  task-list ::ng-deep > .task-list-inner {
    min-height: 50px;
  }
}

.today {
  overflow-x: hidden;
  @include scrollYImportant();
  top: 0;
  bottom: 0;
  // make space for add task bar button not overlapping 'finish day' button
  padding-bottom: var(--s8);

  // When a plugin embed is active, the iframe fills the area itself and the
  // bottom padding clips popup menus rendered inside it (slash menu, etc.).
  &:has(plugin-index) {
    padding-bottom: 0;
  }
}

.backlog {
  bottom: 0;

  .inner-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}

.add-more-or-finish {
  text-align: center;
  padding-bottom: var(--s);

  .btn-wrapper {
    display: block;

    button {
      min-width: 160px;
      @include truncateText();
      margin-left: var(--s);
      margin-bottom: var(--s);

      &:first-child {
        margin-left: 0;
      }
    }
  }
}

.no-tasks-illu-wrapper {
  position: relative;
  margin-bottom: var(--s4);

  img {
    width: 500px;
    display: block;
    margin: auto;
    border-radius: 8px;
    max-width: 100%;
  }

  .no-tasks-label {
    font-size: 17px;
    @include center;
    text-align: center;
    font-weight: 400;
    color: var(--text-color);

    @include darkTheme() {
      color: var(--text-color-most-intense);
      font-weight: 500;
      text-shadow:
        0 0 2px black,
        0 0 5px black;
    }
  }
}

// Unified collapsible section styles
.collapsible-section {
  margin-top: var(--s2);

  &:first-child {
    margin-top: 0;
  }
}

:host ::ng-deep .collapsible-header {
  font-size: 16px;
  margin-top: 0;
  min-height: var(--bar-height);
  padding: 0 var(--s);
  justify-content: flex-start;
  border-bottom: 2px solid transparent;

  .collapsible-title {
    flex-grow: 1;
    opacity: 0.8;
    text-align: left;
  }
}

:host collapsible.isExpanded ::ng-deep .collapsible-header {
  @include extraBorder('-bottom');
}

.overdue-tasks {
  margin-top: var(--s2);
}

.overdue-btn-wrapper {
  display: flex;
  gap: var(--s2);
  justify-content: center;
  align-items: center;
  padding-bottom: var(--s);
  padding-top: var(--s);
}

.repeat-cfg-list {
  padding: var(--s-half);
}

// Read-only calendar event outlines below the Later Today task list.
.later-today-cal-events {
  display: flex;
  flex-direction: column;
  gap: var(--s-half);
  margin-top: var(--s);
  padding: 0 var(--s-half);
}

.no-section,
.section-container {
  margin-bottom: var(--s3);
}

// Section header layout: title left, actions right.
.section-container {
  // Style the action-slot menu trigger only — narrow scope avoids leaking
  // resets into <task-list> descendants. The collapsible projects content
  // via `[actions]`, which lands inside `.collapsible-header`; the next
  // selector matches an icon-button that's a direct child of that header.
  ::ng-deep > collapsible > .collapsible-header > button[mat-icon-button] {
    background: transparent;
    box-shadow: none;
    color: var(--text-color-secondary);
    border: none;
    opacity: 0;
    transition: opacity var(--transition-duration-m) ease;
  }

  // Reveal on hover/focus on devices with hover capability.
  &:hover,
  &:focus-within {
    ::ng-deep > collapsible > .collapsible-header > button[mat-icon-button] {
      opacity: 1;
    }
  }

  // Touch-only devices have no hover — keep controls always visible.
  :host-context(.isTouchOnly) & {
    ::ng-deep > collapsible > .collapsible-header > button[mat-icon-button] {
      opacity: 1;
    }
  }
}
