/* Workspaces-Home (PRD-30, Revision 05.08.: alles ist Workspace): the
   prominent full-width input that starts a workspace with one Enter,
   the grid/list rendering of the workspace cards, and the centered
   hero on the empty state. All colors/shadows/radii via tokens (FE-1);
   view-mode state lives in the data-view-mode attribute (FE-4). */

/* --- the prominent input ------------------------------------------- */

.workspaces-home-input {
  margin-block: 0.5rem 2rem;
}

/* The shared composer, elevated into the page's primary element: ONE
   connected bar — the card wraps editor and send button, the button
   docks flush to the right edge (card clips its corners). */
.workspaces-home-input .chat-composer,
.workspaces-home-hero .chat-composer {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0;
  gap: 0;
  overflow: hidden;
  align-items: stretch;
  flex-wrap: nowrap;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.workspaces-home-input .chat-composer:focus-within,
.workspaces-home-hero .chat-composer:focus-within {
  border-color: var(--tblr-primary);
  box-shadow: var(--shadow-md), var(--shadow-focus-ring);
}

.workspaces-home-input .chat-composer-editor,
.workspaces-home-hero .chat-composer-editor {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1.0625rem;
  min-height: 3.5rem;
  padding: 0.9375rem 1.125rem;
}

.workspaces-home-input .chat-composer-editor:focus,
.workspaces-home-hero .chat-composer-editor:focus {
  outline: 0;
  box-shadow: none;
}

.workspaces-home-input .chat-composer .chat-composer-submit,
.workspaces-home-hero .chat-composer .chat-composer-submit,
.workspaces-home-input .chat-composer .chat-composer-cancel,
.workspaces-home-hero .chat-composer .chat-composer-cancel {
  align-self: stretch;
  border: 0;
  /* !important on purpose: Bootstrap's input-group corner-flattening
     (`.input-group > :not(:first-child):not(…)×5`) carries six
     class-level selectors — unbeatable without selector gymnastics.
     The card's overflow:hidden shapes the outer corners. */
  border-radius: 0 !important;
  padding-inline: 1.5rem;
  font-size: 1rem;
}

/* --- empty-state hero ---------------------------------------------- */

.workspaces-home-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 320px);
}

.workspaces-home-hero-inner {
  width: 100%;
  max-width: 860px;
  padding: 0 1rem;
  text-align: center;
}

.workspaces-home-hero-hint {
  margin-block-end: 1.5rem;
}

/* The composer itself stays left-aligned inside the centered column. */
.workspaces-home-hero .chat-composer-form {
  text-align: initial;
}

/* --- workspace grid: own layout (no Bootstrap row/col) ------------- */

.workspaces-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .workspaces-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .workspaces-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- workspace cards: shared anatomy ------------------------------- */

/* One grid, two arrangements: tiles stack icon+title over the meta
   row; list mode flattens everything onto one centered line. */
.workspace-card-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "icon main pin"
    "meta meta meta";
  column-gap: 0.5rem;
  row-gap: 0.75rem;
  align-items: start;
}

.workspace-card-icon { grid-area: icon; }

/* Brand-light identity color for the (decorative) type icon — the
   extra .workspace-card level outweighs Tabler's .avatar default,
   which loads after component CSS. */
.workspace-card .workspace-card-icon {
  background-color: var(--tblr-blue-lt);
  color: var(--tblr-blue);
}

.workspace-card-main {
  grid-area: main;
  min-width: 0;
}

.workspace-card-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-self: end;
}

.workspace-card-pin { grid-area: pin; }

/* --- view toggle + list mode --------------------------------------- */

.workspaces-view-toggle {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-block-end: 0.75rem;
}

/* Pressed state rides the button's own custom-property API (FE-3)
   instead of overriding its background/color declarations. */
.workspaces-view-toggle .btn[aria-pressed="true"] {
  --tblr-btn-bg: var(--tblr-bg-surface-tertiary);
  --tblr-btn-color: var(--tblr-body-color);
}

/* List mode: ONE contiguous list per section — flush rows with
   dividers inside a single bordered surface. Rows are exactly one
   centered line (fixed height, no padding games), the whole row is
   clickable, and the identical decorative icons stay out of the way. */
.workspaces-sections[data-view-mode="list"] .workspaces-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.workspaces-sections[data-view-mode="list"] .workspaces-grid-item + .workspaces-grid-item {
  border-block-start: 1px solid var(--tblr-border-color);
}

.workspaces-sections[data-view-mode="list"] .workspace-card {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.workspaces-sections[data-view-mode="list"] .workspace-card:hover {
  background: var(--tblr-bg-surface-secondary);
}

/* All list icons are the same chat glyph — decoration, not information. */
.workspaces-sections[data-view-mode="list"] .workspace-card-icon {
  display: none;
}

.workspaces-sections[data-view-mode="list"] .workspace-card-body {
  /* Star up front: the favorite marker leads the row; pinned rows show
     it always, unpinned rows reveal it on hover (existing pin rules). */
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  grid-template-areas: "pin main meta";
  column-gap: 0.75rem;
  row-gap: 0;
  align-items: center;
  min-height: 3.25rem;
  padding-block: 0;
  /* The star hugs the left edge of the row. */
  padding-inline-start: 0.5rem;
}

.workspaces-sections[data-view-mode="list"] .workspace-card-main {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.workspaces-sections[data-view-mode="list"] .workspace-card-main .card-title {
  font-size: 0.9375rem;
  line-height: 1.2;
}

/* Single-line rows: the description belongs to the tile view. */
.workspaces-sections[data-view-mode="list"] .workspace-card-description {
  display: none;
}

.workspaces-sections[data-view-mode="list"] .workspace-card-meta {
  align-self: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Row titles are navigation, not prose — no underline, ever. */
.workspaces-sections[data-view-mode="list"] .workspace-card-link,
.workspaces-sections[data-view-mode="list"] .workspace-card-link:hover {
  text-decoration: none;
}

/* The whole row opens the workspace: the title link's ::after overlay
   stretches across the positioned row card. */
.workspaces-sections[data-view-mode="list"] .workspace-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Above the row overlay so the star stays independently clickable. */
.workspaces-sections[data-view-mode="list"] .workspace-card-pin {
  position: relative;
  z-index: 2;
}