/*
 * Plane scannability overrides
 * Goals (from team feedback):
 *   - Easier to see who is assigned to a task
 *   - Tasks easier to read and summarise at a glance
 *   - Stronger contrast on state/priority chips
 *
 * Strategy: target Plane v1.3.0 CSS custom properties (stable across minor
 * versions) plus structural selectors. Avoid hashed utility class names.
 * Injected via nginx sub_filter — see custom/nginx.conf.
 */

:root {
  --avatar-size-sm: 22px;
  --avatar-size-md: 28px;
  --avatar-size-lg: 32px;
  --row-min-height: 44px;
}

/* --- 1. Bigger assignee avatars everywhere ----------------------------- */

[class*="avatar"] img,
[class*="Avatar"] img,
button[aria-label*="assignee" i] img,
button[aria-label*="member" i] img,
div[role="button"][aria-label*="assignee" i] img,
.rounded-full > img {
  min-width: var(--avatar-size-sm) !important;
  min-height: var(--avatar-size-sm) !important;
}

/* List + Kanban: stacked avatar containers — lift them out of tiny mode */
button[aria-label*="assignee" i],
button[aria-label*="member" i],
div[role="button"][aria-label*="assignee" i] {
  min-height: var(--avatar-size-sm) !important;
}

button[aria-label*="assignee" i] > .rounded-full,
button[aria-label*="member" i] > .rounded-full,
div[role="button"][aria-label*="assignee" i] > .rounded-full {
  width: var(--avatar-size-sm) !important;
  height: var(--avatar-size-sm) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* Spreadsheet view: assignee cell gets the larger size */
table.w-full td button[aria-label*="assignee" i] > .rounded-full,
table.w-full td button[aria-label*="member" i] > .rounded-full {
  width: var(--avatar-size-md) !important;
  height: var(--avatar-size-md) !important;
  font-size: 12px !important;
}

/* Issue detail header avatar */
[class*="issue-detail"] button[aria-label*="assignee" i] > .rounded-full,
[class*="IssueDetail"] button[aria-label*="assignee" i] > .rounded-full {
  width: var(--avatar-size-lg) !important;
  height: var(--avatar-size-lg) !important;
}

/* --- 2. Work item title — bolder, larger, easier to scan -------------- */

a[href*="/work-items/"],
a[href*="/issues/"],
[class*="issue-title"],
[class*="IssueTitle"] {
  font-weight: 600 !important;
  font-size: 14.5px !important;
  letter-spacing: -0.005em;
}

/* Spreadsheet: title cell stays prominent */
table.w-full td:first-child a[href*="/work-items/"],
table.w-full td:first-child a[href*="/issues/"] {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--text-primary, #1a1a1a) !important;
}

/* --- 3. Row density — more breathing room in lists -------------------- */

[class*="list-view"] [role="row"],
[class*="ListView"] [role="row"],
[class*="issue-row"],
[class*="IssueRow"] {
  min-height: var(--row-min-height) !important;
}

table.w-full tbody tr td {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Row hover — clearer affordance */
table.w-full tbody tr:hover td,
[class*="issue-row"]:hover,
[class*="IssueRow"]:hover {
  background-color: rgba(99, 102, 241, 0.06) !important;
}

/* Spreadsheet header — clearer column separation */
table.w-full thead th {
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background-color: var(--color-background-90, #f5f5f7) !important;
  border-bottom: 2px solid var(--color-border-200, #e4e4e7) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* --- 4. State + priority chips — stronger contrast ------------------- */

/* Priority chips: brighter borders + bolder type */
[class*="priority"] svg,
[data-priority] svg {
  width: 14px !important;
  height: 14px !important;
}

button[aria-label*="priority" i],
div[role="button"][aria-label*="priority" i] {
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 3px 8px !important;
  border-width: 1.5px !important;
}

/* State chip (Backlog / Todo / In Progress / Done): higher contrast */
button[aria-label*="state" i],
div[role="button"][aria-label*="state" i] {
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 3px 8px !important;
}

button[aria-label*="state" i] svg,
div[role="button"][aria-label*="state" i] svg {
  width: 13px !important;
  height: 13px !important;
}

/* Label chips: clearer dot + bolder text */
[class*="label-chip"],
[class*="LabelChip"] {
  font-weight: 500 !important;
  font-size: 11.5px !important;
}

/* --- 5. Sidebar nav — clearer active state --------------------------- */

nav a[aria-current="page"],
nav button[aria-current="page"] {
  font-weight: 600 !important;
}

/* --- 6. Module + Cycle chips (often the most cluttered cells) --------- */

button[aria-label*="module" i] > span,
button[aria-label*="cycle" i] > span {
  font-weight: 500 !important;
  font-size: 12px !important;
}

/* --- 7. Assignee name labels (injected by enhance.js) ----------------- */

.mb-assignee-name {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-200, #4a4a4a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Let the assignee container grow to fit the name without clipping */
button[data-mb-enhanced="1"] {
  height: auto !important;
  min-height: var(--avatar-size-sm) !important;
  width: auto !important;
  padding-right: 6px !important;
  overflow: visible !important;
}

/* The h-5 wrapper Plane uses for assignee column needs to expand */
div.h-5:has(button[data-mb-enhanced="1"]) {
  height: auto !important;
  min-height: 20px;
  overflow: visible !important;
}