/* ============================================================
   Groups – show page layout & component styles
   Extracted from app/views/groups/show.html.erb for
   maintainability and to keep the view template clean.
   ============================================================ */

/* Task card toolbar: 2 rows default; grid areas switch to one row when sidebar collapsed (lg) */
.group-show-task-card-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0.5rem 0.75rem;
  align-items: center;
  grid-template-areas:
    "title workspace"
    "stats newtask";
}

.group-show-task-card-toolbar.task-card-toolbar--no-new {
  grid-template-areas:
    "title workspace"
    "stats stats";
}

.task-card-area-title {
  grid-area: title;
  min-width: 0;
}

.task-card-area-stats {
  grid-area: stats;
  min-width: 0;
}

.task-card-area-new {
  grid-area: newtask;
  justify-self: end;
}

.task-card-area-workspace {
  grid-area: workspace;
  justify-self: end;
}

/* Task workspace toggle: expand vs collapse */
.group-show-expand-tasks-btn,
.group-show-collapse-tasks-btn {
  display: none;
}

@media (min-width: 1024px) {
  .group-show-expand-tasks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .group-detail-grid.group-sidebar-is-collapsed .group-show-expand-tasks-btn {
    display: none !important;
  }

  .group-show-collapse-tasks-btn {
    display: none;
  }

  .group-detail-grid.group-sidebar-is-collapsed .group-show-collapse-tasks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .group-detail-grid {
    grid-template-columns: 280px 1fr 360px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
  }

  /* Expanded task workspace: chat a bit wider, tasks column a bit narrower (was ~0.68fr / ~2.5fr) */
  .group-detail-grid.group-sidebar-is-collapsed {
    grid-template-columns: 2.5rem minmax(0, 0.92fr) minmax(0, 2.05fr) !important;
  }

  .group-detail-grid.group-sidebar-is-collapsed .group-show-right-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }

  .group-detail-grid.group-sidebar-is-collapsed .group-show-task-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .group-show-task-kanban {
    display: none;
  }

  .group-detail-grid.group-sidebar-is-collapsed .group-show-task-kanban {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .group-detail-grid.group-sidebar-is-collapsed .group-show-task-kanban turbo-frame {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .group-detail-grid.group-sidebar-is-collapsed .group-show-news-feed-card {
    display: none !important;
  }

  /* Extended tasks: one row — title, counts, New task, collapse (workspace last) */
  .group-detail-grid.group-sidebar-is-collapsed .group-show-task-card-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    column-gap: 0.75rem;
    row-gap: 0;
    grid-template-areas: "title stats newtask workspace";
    align-items: center;
    /* Match chat header strip (~4rem): py-3 = 1.5rem + title line ~1.5rem + text-xs line ~1rem */
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    min-height: 4rem;
    border-bottom: 1px solid var(--theme-border, rgb(229 231 235));
  }

  .group-detail-grid.group-sidebar-is-collapsed .group-show-task-card-toolbar.task-card-toolbar--no-new {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "title stats workspace";
  }

  .group-detail-grid.group-sidebar-is-collapsed .task-card-area-stats {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Narrow rail + same grid gap can read wider than chat→tasks; pull chat slightly left. */
  .group-detail-grid.group-sidebar-is-collapsed .group-show-chat-column {
    margin-left: -0.25rem;
  }

  /* Right column: no outer scroll; only the news feed list scrolls inside the card. */
  .group-detail-grid > .group-show-right-column {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
  }

  .group-detail-grid > .group-show-right-column .group-show-news-feed-card {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .group-detail-grid > .group-show-right-column .group-show-news-feed-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior-y: contain;
  }

  .group-detail-grid > .group-show-left-column {
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
  }

  .group-detail-grid > .group-show-chat-column {
    min-height: 0;
  }
}