/* ══════════════════════════════════════════════════════════════
   WORK HUB — THE TWO VIEWS
   List and Card are the only views in this app. The heat map is gone.

   Every panel used to bring its own radius, border, gap and hover, so
   moving between panels moved between design languages. This file is
   the house standard for both views and is loaded LAST, so it is the
   final word on chrome: radius, border, shadow, hover, grid metrics.

   What it deliberately does NOT touch: each card's own accent colour
   and its content layout. A task card still tints by priority and an
   account card still tints by health — the signal stays, the frame
   becomes identical.

   Three classes mean "card view", and all three are handled here:
     .gl-view-card   task / focus panels (severity Kanban inside)
     .gl-view-grid2  record panels laid out two-up
     [data-ha-list-view="card"] / [data-ha-view="card"]  Accounts
   ══════════════════════════════════════════════════════════════ */

:root {
  /* List view — a row */
  --wkv-row-radius: 10px;
  --wkv-row-border: 1px solid rgba(203, 213, 225, .6);
  --wkv-row-gap: 6px;
  --wkv-row-hover-shadow: 0 6px 18px rgba(15, 23, 42, .08);

  /* Card view — a tile */
  --wkv-card-radius: 16px;
  --wkv-card-border: 1px solid rgba(203, 213, 225, .6);
  --wkv-card-gap: 14px;
  --wkv-pad: 16px;
  --wkv-card-min: 280px;
  --wkv-card-min-wide: 340px;   /* rich tiles (accounts) — same frame, more room */
  --wkv-card-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  --wkv-card-hover-shadow: 0 10px 24px rgba(15, 23, 42, .10);

  --wkv-t: .16s;
}

/* ── The toggle itself: one control, everywhere ───────────────── */
.wk-ha-dt-views,
.gl-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: 7px;
  background: var(--border-s, #f4f4f4);
  box-shadow: none;
  flex-shrink: 0;
}
.wk-ha-dt-views .gl-vt-btn,
.gl-view-toggle .gl-vt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px;
  border: 0; border-radius: 5px;
  background: none; color: var(--ink3, #8d8d8d);
  cursor: pointer;
  transition: all var(--wkv-t) ease;
}
.wk-ha-dt-views .gl-vt-btn svg,
.gl-view-toggle .gl-vt-btn svg { width: 13px; height: 13px; pointer-events: none; }
.wk-ha-dt-views .gl-vt-btn:hover,
.gl-view-toggle .gl-vt-btn:hover { color: var(--ink, #161616); }
.wk-ha-dt-views .gl-vt-btn.is-active,
.gl-view-toggle .gl-vt-btn.is-active {
  background: #fff;
  color: var(--c-blue, #004b7c);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ══ LIST VIEW ════════════════════════════════════════════════ */

/* Containers — one stacked column, one gap, one padding. */
.gl-view-list .wk-focus-list,
.gl-view-list .mw-task-list,
.gl-view-list .gl-all-list,
.gl-view-list .wk-pc-grid,
.gl-view-list .wk-gc-grid,
.gl-view-list .mw-projects-grid,
.gl-view-list .wk-prog-card-grid,
#wkHomeAcctGrid[data-ha-list-view="list"],
.wk-account-detail-grid[data-ha-view="list"] .wk-account-list-scroll,
.wh-goal-dashboard[data-view="list"] {
  display: flex;
  flex-direction: column;
  gap: var(--wkv-row-gap);
  max-height: none;
}
.gl-view-list .wk-focus-list,
.gl-view-list .mw-task-list,
.gl-view-list .gl-all-list,
.gl-view-list .wk-pc-grid,
.gl-view-list .wk-gc-grid,
.gl-view-list .mw-projects-grid,
.gl-view-list .wk-prog-card-grid,
#wkHomeAcctGrid[data-ha-list-view="list"] {
  padding: var(--wkv-pad);
}

/* Rows — one frame. */
.gl-view-list .mw-task-card,
.gl-view-list .wk-focus-item,
.gl-view-list .gl-card,
.gl-view-list .wk-goal-card,
.gl-view-list .wk-pc-card,
.gl-view-list .wk-gc-card,
.gl-view-list .wk-dp-card--program,
#wkHomeAcctGrid[data-ha-list-view="list"] .wk-cl-card,
.wk-account-detail-grid[data-ha-view="list"] .wk-account-profile-row,
.wh-goal-dashboard[data-view="list"] .wh-goal-card {
  margin: 0;
  border-radius: var(--wkv-row-radius);
  border: var(--wkv-row-border);
  box-shadow: none;
  transition:
    border-color var(--wkv-t) ease,
    transform var(--wkv-t) ease,
    box-shadow var(--wkv-t) ease;
}
.gl-view-list .mw-task-card:hover,
.gl-view-list .wk-focus-item:hover,
.gl-view-list .gl-card:hover,
.gl-view-list .wk-goal-card:hover,
.gl-view-list .wk-pc-card:hover,
.gl-view-list .wk-gc-card:hover,
.gl-view-list .wk-dp-card--program:hover,
#wkHomeAcctGrid[data-ha-list-view="list"] .wk-cl-card:hover,
.wk-account-detail-grid[data-ha-view="list"] .wk-account-profile-row:hover,
.wh-goal-dashboard[data-view="list"] .wh-goal-card:hover {
  transform: translateX(2px);
  box-shadow: var(--wkv-row-hover-shadow);
}

/* A row is a row: the full-bleed top accent bar belongs to the tile. */
.gl-view-list .mw-task-card::before,
.gl-view-list .wk-focus-item::before,
.gl-view-list .wk-goal-card::before,
.gl-view-list .wk-pc-card::before,
.gl-view-list .wk-gc-card::before,
#wkHomeAcctGrid[data-ha-list-view="list"] .wk-cl-card::before {
  display: none;
}

/* ══ CARD VIEW ════════════════════════════════════════════════ */

/* Containers — one gap, one padding. Column width tracks content
   density, so a rich account tile isn't squeezed to task width. */
.gl-view-card .wk-focus-list,
.gl-view-card .mw-task-list,
.gl-view-card .gl-all-list,
.gl-view-card .wk-pc-grid,
.gl-view-card .wk-gc-grid,
.gl-view-card .mw-projects-grid,
.gl-view-card .wk-prog-card-grid,
.wk-account-detail-grid[data-ha-view="card"] .wk-account-list-scroll,
.wh-goal-dashboard[data-view="card"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--wkv-card-min), 1fr));
  grid-auto-rows: auto;
  align-items: stretch;
  gap: var(--wkv-card-gap);
  padding: var(--wkv-pad);
  max-height: none;
}
#wkHomeAcctGrid[data-ha-list-view="card"],
#wkHomeAcctGrid:not([data-ha-list-view]) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--wkv-card-min-wide), 1fr));
  align-items: stretch;
  gap: var(--wkv-card-gap);
  padding: var(--wkv-pad);
}
/* Two-up record panels keep their two columns — same gap, same padding. */
.gl-view-grid2 .wk-focus-list {
  gap: var(--wkv-card-gap);
  padding: var(--wkv-pad);
}

/* Tiles — one frame. */
.gl-view-card .mw-task-card,
.gl-view-card .wk-focus-item,
.gl-view-card .gl-card,
.gl-view-card .wk-goal-card,
.gl-view-card .wk-pc-card,
.gl-view-card .wk-gc-card,
.gl-view-card .wk-dp-card--program,
.gl-view-grid2 .wk-goal-card,
.gl-view-grid2 .wk-focus-item,
.gl-view-grid2 .mw-task-card,
#wkHomeAcctGrid[data-ha-list-view="card"] .wk-cl-card,
#wkHomeAcctGrid:not([data-ha-list-view]) .wk-cl-card,
.wk-account-detail-grid[data-ha-view="card"] .wk-account-profile-row,
.wh-goal-dashboard[data-view="card"] .wh-goal-card {
  margin: 0;
  border-radius: var(--wkv-card-radius);
  border: var(--wkv-card-border);
  box-shadow: var(--wkv-card-shadow);
  transition:
    border-color var(--wkv-t) ease,
    transform var(--wkv-t) ease,
    box-shadow var(--wkv-t) ease;
}
.gl-view-card .mw-task-card:hover,
.gl-view-card .wk-focus-item:hover,
.gl-view-card .gl-card:hover,
.gl-view-card .wk-goal-card:hover,
.gl-view-card .wk-pc-card:hover,
.gl-view-card .wk-gc-card:hover,
.gl-view-card .wk-dp-card--program:hover,
.gl-view-grid2 .wk-goal-card:hover,
.gl-view-grid2 .wk-focus-item:hover,
.gl-view-grid2 .mw-task-card:hover,
#wkHomeAcctGrid[data-ha-list-view="card"] .wk-cl-card:hover,
#wkHomeAcctGrid:not([data-ha-list-view]) .wk-cl-card:hover,
.wk-account-detail-grid[data-ha-view="card"] .wk-account-profile-row:hover,
.wh-goal-dashboard[data-view="card"] .wh-goal-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--wkv-card-hover-shadow);
}

/* The severity Kanban IS the card view for task panels. Its columns keep
   their own structure, but the cards inside wear the same frame as every
   other tile. */
.mw-kanban-wrap { gap: var(--wkv-card-gap); padding: var(--wkv-pad); }
.mw-kanban-col .mw-task-card,
.mw-kanban-col .wk-focus-item,
.mw-kanban-col .gl-card,
.mw-kanban-col .wk-goal-card,
.mw-kanban-col .wk-pc-card,
.mw-kanban-col .wk-gc-card,
.mw-kanban-col .wk-dp-card--program {
  border-radius: var(--wkv-card-radius);
  border: var(--wkv-card-border);
  box-shadow: var(--wkv-card-shadow);
}
.mw-kanban-col .mw-task-card:hover,
.mw-kanban-col .wk-focus-item:hover,
.mw-kanban-col .gl-card:hover,
.mw-kanban-col .wk-goal-card:hover,
.mw-kanban-col .wk-pc-card:hover,
.mw-kanban-col .wk-gc-card:hover,
.mw-kanban-col .wk-dp-card--program:hover {
  transform: translateY(-2px);
  box-shadow: var(--wkv-card-hover-shadow);
}

/* ── Narrow screens: card view collapses, list view stays a list ── */
@media (max-width: 900px) {
  .gl-view-card .wk-focus-list,
  .gl-view-card .mw-task-list,
  .gl-view-card .gl-all-list,
  .gl-view-card .wk-pc-grid,
  .gl-view-card .wk-gc-grid,
  .gl-view-card .mw-projects-grid,
  .gl-view-card .wk-prog-card-grid,
  .gl-view-grid2 .wk-focus-list,
  #wkHomeAcctGrid[data-ha-list-view="card"],
  #wkHomeAcctGrid:not([data-ha-list-view]),
  .wk-account-detail-grid[data-ha-view="card"] .wk-account-list-scroll,
  .wh-goal-dashboard[data-view="card"] {
    grid-template-columns: 1fr;
  }
}