/* Feedback 12 design tweaks — scoped to .ds-view. Loaded last so it wins.
   Canonical status bar (pill-group), bold multi-line titles, bigger Inbox panel,
   Inbox editable-cell hover frame, and no-crop table cells. */

.ds-view {

  /* ── Canonical status bar (David's image5 — the standalone-task pill group) ──
     Used in the Inbox panel, Tasks drawer, and legacy task pop-up. Buttons carry
     data-status for color + data-move for wiring. Cancelled spans its own row. */
  /* fit-content so the full-width Cancelled row is cropped to the first pill row (fb13) */
  .status-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; width: fit-content; max-width: 100%; }
  .status-pill {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--fs-2);
    font-weight: var(--fw-medium);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  }
  .status-pill[data-status="pending"]     { background: var(--status-pending-tint);   color: var(--status-pending); }
  .status-pill[data-status="inproc-csm"],
  .status-pill[data-status="inproc-eng"]  { background: var(--status-inproc-tint);    color: var(--status-inproc); }
  .status-pill[data-status="done"],
  .status-pill[data-status="solved"]      { background: var(--status-solved-tint);    color: var(--status-solved); }
  .status-pill[data-status="closed"]      { background: var(--status-closed-tint);    color: var(--status-closed); }
  .status-pill[data-status="cancelled"]   { background: var(--status-cancelled-tint); color: var(--status-cancelled); flex-basis: 100%; text-align: center; border-radius: var(--radius-md); }
  .status-pill:hover                       { box-shadow: inset 0 0 0 1px currentColor; }
  .status-pill.is-on                       { box-shadow: inset 0 0 0 1.5px currentColor; font-weight: var(--fw-semibold); }
  .status-pill.is-on[data-status="done"],
  .status-pill.is-on[data-status="solved"] { background: var(--status-solved); color: var(--bg-canvas); box-shadow: none; }
  .status-pill.is-on[data-status="closed"] { background: var(--status-closed); color: var(--bg-canvas); box-shadow: none; }

  /* ── Bold, full, multi-line work-item title (Inbox panel + Tasks drawer) ── */
  .ds-title {
    font-size: var(--fs-5);
    font-weight: var(--fw-bold);
    color: var(--text-1);
    line-height: var(--lh-tight);
    white-space: normal;
    word-break: break-word;
    cursor: text;
    padding: var(--space-1) 0;
  }
  .ds-title:hover { box-shadow: inset 0 0 0 1px var(--border-2); border-radius: var(--radius-sm); }

  /* ── Bigger Inbox side panel (more room) ── */
  .slideover { width: 600px; }

  /* ── Inbox table: signal quick-editable cells on row hover (match Tasks) ── */
  .ds-inbox-item-row [data-inline] > * { border-radius: var(--radius-sm); }
  .ds-inbox-item-row:hover [data-inline] {
    box-shadow: inset 0 0 0 1px var(--border-3);
    border-radius: var(--radius-sm);
    background: var(--bg-raised);
  }

  /* ── Inbox table: don't crop id / ticket / short cells ── */
  .ds-inbox-table td, .ds-inbox-table th { white-space: nowrap; }
  .ds-inbox-table .title { white-space: normal; }

  /* ── colored table header (green-shaded per UX overhaul 2026-07-14; repeats per group) ── */
  .ds-inbox-table th, .ds-tasks-table th, .data-table th {
    color: var(--accent);
    border-bottom: 1px solid var(--border-2);
  }
  /* F18: sticky page-level headers (Inbox + Tasks) need an OPAQUE backdrop so
     scrolling rows don't bleed through. Keep the green tint, but over a solid base
     (canvas + the accent tint layered on top = opaque). The in-card .data-table
     (Customer View) isn't sticky, so it keeps the plain translucent tint. */
  .ds-inbox-table th, .ds-tasks-table th {
    background-color: var(--bg-canvas);
    background-image: linear-gradient(var(--accent-muted), var(--accent-muted));
  }
  .data-table th { background: var(--accent-muted); }

  /* ── fb14: Inbox event-group title back to the larger/bolder prod size ── */
  .ds-inbox-event-label { font-size: var(--fs-4); font-weight: var(--fw-bold); }

  /* ── Feedback 17: live filtered task count beside the Tasks toolbar title ── */
  .ds-tasks-toolbar__count {
    font-size: var(--fs-2);
    color: var(--text-3);
    font-weight: var(--fw-medium);
    margin-left: var(--space-2);
  }
}