/* work.css - OCA Team Dashboard v2
   Agency Workspace: column layout, item cards, dropdowns, scrollbars.
   Design tokens come from tokens.css (light + dark via data-theme attribute).
*/

/* -------------------------------------------------------------------------
   Columns scroll area (horizontal)
   ------------------------------------------------------------------------- */
.work-cols-area {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.work-cols-area::-webkit-scrollbar {
  height: 6px;
}
.work-cols-area::-webkit-scrollbar-track {
  background: transparent;
}
.work-cols-area::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}
.work-cols-area::-webkit-scrollbar-thumb:hover {
  background: var(--ink-3);
}

/* -------------------------------------------------------------------------
   Column inner items area (vertical scroll)
   ------------------------------------------------------------------------- */
.work-col-items {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.work-col-items::-webkit-scrollbar {
  width: 4px;
}
.work-col-items::-webkit-scrollbar-track {
  background: transparent;
}
.work-col-items::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}
.work-col-items::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* -------------------------------------------------------------------------
   Item card hover lift (matches design spec: -2px + stronger shadow, 180ms)
   ------------------------------------------------------------------------- */
.work-item-card {
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.work-item-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(40, 48, 68, 0.10),
    0 0 0 1px rgba(40, 48, 68, 0.06);
}
[data-theme="dark"] .work-item-card:hover {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* -------------------------------------------------------------------------
   Focus-visible for keyboard nav on action buttons inside cards
   ------------------------------------------------------------------------- */
.work-item-card button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 7px;
}