/* ============================================================================================
   TeamBoard design layer (2026-10-15)

   Brings TeamBoard to the standard of monday.com's own interface by building on monday.com's
   open-source design system, Vibe (tokens in /css/vendor/vibe-style-4.1.0.css, MIT licence):
   its colours, type scale (Figtree), radii, shadows and motion. TeamBoard keeps its own name and
   the dawl logo; no monday.com logo, icon or artwork is used.

   Loaded after app.css and theme.css. Every rule is scoped under html[data-theme] so it outranks
   the older theme overrides by order, not by !important. Build new UI on these classes and
   tokens; the older files are being retired screen by screen.
   ============================================================================================ */

/* ---------- tokens: TeamBoard's variables expressed in Vibe tokens ---------- */
html[data-theme] {
  --tb-chrome: #eceff8;                       /* app background around the board card */
  --tb-row-h: 36px;                           /* monday table row height */
  --tb-ctrl-h: 32px;                          /* buttons, inputs, toolbar controls */
  --tb-ctrl-h-lg: 40px;
  --tb-hover: var(--primary-background-hover-color);
  --tb-focus: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(0, 115, 234, 0.5);

  --accent: var(--primary-color);
  --accent-strong: var(--primary-hover-color);
  --accent-soft: var(--primary-selected-color);
  --accent-text: var(--primary-color);
  --accent-ink: var(--text-color-on-primary);
  --ink: var(--primary-text-color);
  --ink-soft: var(--secondary-text-color);
  --ink-faint: #9699a6;
  --line: var(--layout-border-color);
  --line-strong: var(--ui-border-color);
  --paper: var(--allgrey-background-color);
  --paper-2: #f5f6f8;
  --surface: var(--primary-background-color);
  --surface-raised: var(--primary-background-color);
  --danger: var(--negative-color);
  --danger-soft: #fbe9ec;
  --success: var(--positive-color);
  --warn: var(--warning-color);
  --overdue: var(--negative-color);
  --btn-hover: var(--tb-hover);
  --cell-hover: var(--tb-hover);
  --focus-ring: var(--tb-focus);
  --radius: var(--border-radius-medium);
  --radius-sm: var(--border-radius-small);
  --radius-lg: var(--border-radius-big);
  --shadow-sm: var(--box-shadow-xs);
  --shadow: var(--box-shadow-small);
  --shadow-lg: var(--box-shadow-medium);
  --font-display: var(--font-family);
  --font-ui: var(--font-family);
  --font-mono: var(--font-family);
  --ease: var(--motion-timing-transition);

  --rail: var(--tb-chrome);
  --rail-2: var(--tb-hover);
  --rail-ink: var(--primary-text-color);
  --rail-ink-soft: var(--secondary-text-color);
  --rail-line: transparent;
  --rail-accent: var(--primary-selected-color);
}

/* ---------- type ---------- */
html[data-theme] body {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 20px;
  color: var(--primary-text-color);
  background: var(--tb-chrome);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
html[data-theme] button,
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea { font-family: var(--font-family); }
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3 { font-family: var(--font-family); letter-spacing: normal; }

/* ---------- buttons: Vibe button sizes and kinds ----------
   .btn = secondary (outlined), .btn-primary, .btn-ghost = tertiary, .btn-danger, .btn-sm, .btn-icon */
html[data-theme] .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--tb-ctrl-h); padding: 0 12px;
  border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small);
  background: transparent; color: var(--primary-text-color);
  font: var(--font-text2-normal); white-space: nowrap; cursor: pointer;
  box-shadow: none; transform: none;
  transition: background var(--motion-productive-medium) var(--motion-timing-transition),
              border-color var(--motion-productive-medium) var(--motion-timing-transition);
}
html[data-theme] .btn:hover { background: var(--tb-hover); border-color: var(--ui-border-color); }
html[data-theme] .btn:active { transform: scale(0.98); }
html[data-theme] .btn:focus-visible { outline: none; box-shadow: var(--tb-focus); }
html[data-theme] .btn:disabled { opacity: var(--disabled-component-opacity); cursor: not-allowed; }
html[data-theme] .btn svg { flex-shrink: 0; }
html[data-theme] .btn-primary { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-color-on-primary); }
html[data-theme] .btn-primary:hover { background: var(--primary-hover-color); border-color: var(--primary-hover-color); }
html[data-theme] .btn-ghost { border-color: transparent; background: transparent; }
html[data-theme] .btn-ghost:hover { background: var(--tb-hover); border-color: transparent; }
html[data-theme] .btn-danger { background: var(--negative-color); border-color: var(--negative-color); color: #fff; }
html[data-theme] .btn-danger:hover { background: #b63546; border-color: #b63546; }
html[data-theme] .btn-sm { height: 24px; padding: 0 8px; font: var(--font-text2-normal); }
html[data-theme] .btn-icon { width: var(--tb-ctrl-h); padding: 0; border-color: transparent; }
html[data-theme] .btn-icon.btn-sm { width: 24px; }
html[data-theme] .btn-lg { height: var(--tb-ctrl-h-lg); padding: 0 16px; font: var(--font-text1-normal); }

/* ---------- fields ---------- */
html[data-theme] .field { gap: 4px; margin-bottom: 16px; }
html[data-theme] .field label { font: var(--font-text2-normal); color: var(--primary-text-color); text-transform: none; letter-spacing: normal; }
html[data-theme] .input,
html[data-theme] .select,
html[data-theme] .textarea {
  min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small);
  background: var(--primary-background-color); color: var(--primary-text-color);
  font: var(--font-text1-normal); box-shadow: none;
}
html[data-theme] .input:hover, html[data-theme] .select:hover, html[data-theme] .textarea:hover { border-color: var(--primary-text-color); }
html[data-theme] .input:focus, html[data-theme] .select:focus, html[data-theme] .textarea:focus {
  outline: none; border-color: var(--primary-color); box-shadow: none;
}
html[data-theme] ::placeholder { color: var(--placeholder-color); opacity: 1; }

/* ---------- menus (every dropdown, picker and context menu) ---------- */
html[data-theme] .menu {
  min-width: 200px; padding: 8px;
  background: var(--primary-background-color); border: 0; border-radius: var(--border-radius-medium);
  box-shadow: var(--box-shadow-medium);
  font: var(--font-text2-normal); color: var(--primary-text-color);
  animation: tb-pop var(--motion-productive-medium) var(--motion-timing-transition);
}
html[data-theme] .menu-head {
  padding: 4px 8px 8px; margin: 0;
  font: var(--font-text2-normal); color: var(--secondary-text-color);
  text-transform: none; letter-spacing: normal; border: 0;
}
html[data-theme] .menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 32px; padding: 4px 8px;
  border: 0; border-radius: var(--border-radius-small); background: transparent;
  font: var(--font-text2-normal); color: var(--primary-text-color); text-align: left; cursor: pointer;
}
html[data-theme] .menu-item:hover,
html[data-theme] .menu-item.focused { background: var(--tb-hover); }
html[data-theme] .menu-item.selected { background: var(--primary-selected-color); font-weight: 400; }
html[data-theme] .menu-item .check { margin-left: auto; color: var(--primary-color); }
html[data-theme] .menu-item svg { color: var(--icon-color); flex-shrink: 0; }
html[data-theme] .menu-item.danger span { color: var(--negative-color) !important; }
html[data-theme] .menu-item.danger svg { color: var(--negative-color); }
html[data-theme] .menu-divider { height: 1px; margin: 8px 0; background: var(--layout-border-color); border: 0; }
@keyframes tb-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- dialogs ---------- */
html[data-theme] .modal-card {
  padding: 32px; border: 0; border-radius: var(--border-radius-big);
  background: var(--primary-background-color); box-shadow: var(--box-shadow-large);
}
html[data-theme] .modal-card h2 { font: 500 24px/32px var(--font-family); margin-bottom: 8px; }
html[data-theme] .modal-card .sub { font: var(--font-text1-normal); color: var(--secondary-text-color); margin-bottom: 24px; }
html[data-theme] .modal-actions { gap: 8px; margin-top: 24px; }
html[data-theme] .modal-actions .btn { height: var(--tb-ctrl-h-lg); padding: 0 16px; font: var(--font-text1-normal); }

/* ---------- toasts (Vibe toast: dark, or green on success) ---------- */
html[data-theme] .toast {
  min-height: 48px; padding: 12px 16px; gap: 8px;
  border: 0; border-radius: var(--border-radius-small);
  background: var(--inverted-color-background); color: var(--text-color-on-inverted);
  font: var(--font-text1-normal); box-shadow: var(--box-shadow-medium);
}
html[data-theme] .toast.success { background: var(--positive-color); }
html[data-theme] .toast.error { background: var(--negative-color); }
html[data-theme] .toast .ico { color: inherit; }

/* ============================================================================================
   App frame: grey chrome around a white board card (monday.com layout)
   ============================================================================================ */
html[data-theme] .layout { background: var(--tb-chrome); }
html[data-theme] .rail { background: var(--tb-chrome); border-right: 0; box-shadow: none; }
html[data-theme] .main {
  background: var(--primary-background-color);
  border: 0; border-radius: var(--border-radius-big) 0 0 0;
  box-shadow: var(--box-shadow-xs);
  margin: 8px 0 0 0;
}
@media (max-width: 920px) { html[data-theme] .main { border-radius: 0; margin: 0; } }

/* ---------- sidebar ---------- */
html[data-theme] .rail-label, html[data-theme] .rail-label-toggle {
  font: var(--font-text2-normal); color: var(--secondary-text-color);
  text-transform: none; letter-spacing: normal;
}
html[data-theme] .rail-link {
  height: 32px; padding: 0 8px; gap: 8px; border-radius: var(--border-radius-small);
  font: var(--font-text2-normal); color: var(--primary-text-color); border: 0; box-shadow: none;
}
html[data-theme] .rail-link svg { color: var(--icon-color); }
html[data-theme] .rail-link:hover { background: var(--tb-hover); }
html[data-theme] .rail-link.active { background: var(--primary-selected-color); color: var(--primary-text-color); font-weight: 400; box-shadow: none; }
html[data-theme] .rail-link.active::before { display: none; }

/* ============================================================================================
   Board header: name, actions, view tabs
   ============================================================================================ */
html[data-theme] .topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; column-gap: 8px;
  padding: 16px 24px 0; min-height: 0;
  background: var(--primary-background-color); border-bottom: 0; box-shadow: none;
}
html[data-theme] .topbar:not(.has-tabs) { padding-bottom: 16px; border-bottom: 1px solid var(--layout-border-color); }
html[data-theme] .topbar .title-wrap { min-width: 0; }
html[data-theme] .topbar > .spacer { display: none; }
html[data-theme] .topbar .crumb { display: none; }
html[data-theme] .topbar h1 {
  font: 500 24px/32px var(--font-family); color: var(--primary-text-color);
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme] .topbar .desc {
  font: var(--font-text2-normal); color: var(--secondary-text-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch;
}
html[data-theme] .topbar .desc:empty::after { content: none; }
html[data-theme] .topbar .actions { gap: 4px; flex-wrap: nowrap; }
html[data-theme] .topbar .board-private-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px;
  border-radius: var(--border-radius-small); background: var(--allgrey-background-color);
  color: var(--secondary-text-color); font: var(--font-text3-normal);
}
html[data-theme] .topbar-search-wrap { height: var(--tb-ctrl-h); border-radius: var(--border-radius-small); border: 1px solid var(--ui-border-color); background: var(--primary-background-color); }
html[data-theme] .topbar-tabs {
  grid-column: 1 / -1; margin-top: 8px;
  border-bottom: 1px solid var(--layout-border-color);
}

/* view tabs */
html[data-theme] .viewtoggle {
  display: flex; gap: 0; padding: 0; margin: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
html[data-theme] .viewtoggle button {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px; margin: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font: var(--font-text2-normal); color: var(--primary-text-color); cursor: pointer;
}
html[data-theme] .viewtoggle button span { display: inline !important; }
html[data-theme] .viewtoggle button svg { color: var(--icon-color); }
html[data-theme] .viewtoggle button:hover::before {
  content: ""; position: absolute; inset: 4px 0; border-radius: var(--border-radius-small); background: var(--tb-hover); z-index: -1;
}
html[data-theme] .viewtoggle button.active { background: transparent; color: var(--primary-text-color); font-weight: 400; }
html[data-theme] .viewtoggle button.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary-color);
}

/* ============================================================================================
   Board toolbar: New task | Search | Person | Filter | Sort | Hide
   ============================================================================================ */
html[data-theme] .board-toolbar-host {
  position: sticky; top: 0; z-index: 6;
  margin: -18px -24px 16px; padding: 12px 24px;
  background: var(--primary-background-color);
}
html[data-theme] .tb-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
html[data-theme] .split-btn { display: inline-flex; margin-right: 12px; }
html[data-theme] .split-btn .btn:first-child { border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); }
html[data-theme] .split-btn .split-arrow {
  width: 28px; padding: 0; border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
html[data-theme] .tb-tool { gap: 6px; color: var(--primary-text-color); }
html[data-theme] .tb-tool svg { color: var(--icon-color); }
html[data-theme] .tb-tool.active { background: var(--primary-selected-color); }
html[data-theme] .tb-tool.active:hover { background: var(--primary-selected-color); }
html[data-theme] .tb-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--primary-color); color: #fff; font: var(--font-text3-normal);
  display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme] .tb-search {
  display: inline-flex; align-items: center; gap: 6px; height: var(--tb-ctrl-h); padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--border-radius-small); cursor: text;
}
html[data-theme] .tb-search:hover { background: var(--tb-hover); }
html[data-theme] .tb-search:focus-within, html[data-theme] .tb-search.active {
  border-color: var(--primary-color); background: var(--primary-background-color);
}
html[data-theme] .tb-search svg { color: var(--icon-color); }
html[data-theme] .tb-search-input {
  width: 64px; border: 0; outline: 0; background: transparent; padding: 0;
  font: var(--font-text2-normal); color: var(--primary-text-color);
  transition: width var(--motion-productive-medium) var(--motion-timing-transition);
}
html[data-theme] .tb-search:focus-within .tb-search-input, html[data-theme] .tb-search.active .tb-search-input { width: 180px; }
html[data-theme] .tb-search-input::-webkit-search-cancel-button { cursor: pointer; }
html[data-theme] .tb-result { margin-left: 8px; color: var(--secondary-text-color); font: var(--font-text2-normal); display: inline-flex; gap: 8px; align-items: center; }
html[data-theme] .tb-clear { border: 0; background: none; color: var(--primary-color); cursor: pointer; font: var(--font-text2-normal); padding: 0; }
html[data-theme] .tb-clear:hover { text-decoration: underline; }

/* toolbar panels */
html[data-theme] .popover { position: fixed; z-index: 1000; }
html[data-theme] .people-pop { width: 320px; }
html[data-theme] .people-pick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 4px; }
html[data-theme] .people-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 4px;
  border: 1px solid transparent; border-radius: 16px; background: var(--allgrey-background-color);
  font: var(--font-text2-normal); color: var(--primary-text-color); cursor: pointer;
}
html[data-theme] .people-chip:hover { background: var(--ui-background-color); }
html[data-theme] .people-chip.on { background: var(--primary-selected-color); border-color: var(--primary-color); }
html[data-theme] .people-chip .avatar.empty { display: inline-grid; place-items: center; background: var(--ui-background-color); color: var(--icon-color); }
html[data-theme] .filter-pop { width: min(640px, calc(100vw - 32px)); padding: 16px; }
html[data-theme] .filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font: var(--font-text1-medium); }
html[data-theme] .filter-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html[data-theme] .filter-col { display: flex; flex-direction: column; gap: 4px; }
html[data-theme] .filter-col-title { font: var(--font-text2-normal); color: var(--secondary-text-color); margin-bottom: 4px; }
html[data-theme] .filter-opt {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--border-radius-small); background: var(--allgrey-background-color);
  font: var(--font-text2-normal); color: var(--primary-text-color); text-align: left; cursor: pointer;
}
html[data-theme] .filter-opt:hover { background: var(--ui-background-color); }
html[data-theme] .filter-opt.on { background: var(--primary-selected-color); border-color: var(--primary-color); }
html[data-theme] .filter-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 600px) { html[data-theme] .filter-cols { grid-template-columns: 1fr; } }

/* ============================================================================================
   Board table (monday.com table): groups, 36 px rows, light grid, full-cell labels
   ============================================================================================ */
html[data-theme] .section-group {
  margin: 0 0 40px; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
html[data-theme] .section-group::before { display: none; }
html[data-theme] .section-head {
  display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 0 4px; margin: 0;
  background: transparent; border: 0; box-shadow: none;
}
html[data-theme] .section-head .caret {
  width: 24px; height: 24px; display: inline-grid; place-items: center;
  border: 0; border-radius: var(--border-radius-small); background: transparent;
  color: var(--group-color); cursor: pointer;
}
html[data-theme] .section-head .caret:hover { background: var(--tb-hover); }
html[data-theme] .section-head .caret svg { color: var(--group-color); stroke-width: 2.5; }
html[data-theme] .section-head .section-swatch {
  width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0;
  opacity: 0; transition: opacity var(--motion-productive-medium);
}
html[data-theme] .section-head:hover .section-swatch, html[data-theme] .section-head .section-swatch:focus-visible { opacity: 1; }
html[data-theme] .section-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
html[data-theme] .section-title h3 {
  margin: 0; font: 500 18px/24px var(--font-family); color: var(--group-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme] .section-title .item-count {
  display: inline; padding: 0; background: none; border: 0;
  font: var(--font-text2-normal); color: var(--secondary-text-color);
}
html[data-theme] .section-title .item-count-dot { display: none; }
html[data-theme] .section-head .sec-summary { display: none; }
html[data-theme] .section-head .sec-actions { opacity: 0; margin-left: 4px; transition: opacity var(--motion-productive-medium); }
html[data-theme] .section-head:hover .sec-actions { opacity: 1; }

html[data-theme] .grid-wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; overflow-x: auto; }
html[data-theme] table.grid {
  border-collapse: separate; border-spacing: 0;
  font: var(--font-text2-normal); color: var(--primary-text-color);
  background: var(--primary-background-color);
}
html[data-theme] table.grid th,
html[data-theme] table.grid td {
  height: var(--tb-row-h); padding: 0 8px;
  border: 0; border-right: 1px solid var(--layout-border-color); border-bottom: 1px solid var(--layout-border-color);
  background: var(--primary-background-color);
  font: var(--font-text2-normal); color: var(--primary-text-color);
  vertical-align: middle; box-shadow: none;
}
html[data-theme] table.grid th {
  text-align: center; text-transform: none; letter-spacing: normal;
  border-top: 1px solid var(--layout-border-color);
}
html[data-theme] table.grid th.col-title, html[data-theme] table.grid th.col-title * { text-align: left; }
/* the group's colour runs down the left edge, monday style */
html[data-theme] table.grid th.col-expand,
html[data-theme] table.grid td.col-expand {
  /* app.css sets border: none !important on this column */
  border-left: 6px solid var(--group-color) !important;
  border-bottom: 1px solid var(--layout-border-color) !important;
  border-right: 0 !important;
  overflow: visible;
}
html[data-theme] table.grid th.col-expand { border-top: 1px solid var(--layout-border-color) !important; }
html[data-theme] table.grid thead th.col-expand { border-top-left-radius: var(--border-radius-small); }
html[data-theme] table.grid tbody tr:last-child td.col-expand,
html[data-theme] table.grid tbody tr:last-child td:first-child { border-bottom-left-radius: var(--border-radius-small); }
html[data-theme] table.grid td.col-title { border-left: 0; }
html[data-theme] table.grid .col-head-inner { justify-content: center; gap: 4px; }
html[data-theme] table.grid th.col-title .col-head-inner { justify-content: flex-start; }
html[data-theme] table.grid .col-head-name { font: var(--font-text2-normal); color: var(--primary-text-color); }
html[data-theme] table.grid th.col-addcol, html[data-theme] table.grid td.col-addcol-cell,
html[data-theme] table.grid th.col-actions, html[data-theme] table.grid td.col-actions { border-right: 0; }

html[data-theme] table.grid tbody tr.item-row:hover td,
html[data-theme] table.grid tbody tr.sub-row:hover td { background: #f5f6f8; }
html[data-theme] table.grid tbody tr.item-row:hover td.col-status,
html[data-theme] table.grid tbody tr.item-row:hover td.col-priority { background: var(--primary-background-color); }

/* task name */
html[data-theme] table.grid td.col-title { padding: 0 8px 0 4px; }
html[data-theme] textarea.cell-edit.cell-wrap,
html[data-theme] table.grid .cell-edit.cell-title {
  min-height: 28px; padding: 4px 6px; border: 1px solid transparent; border-radius: var(--border-radius-small);
  font: var(--font-text2-normal); color: var(--primary-text-color); background: transparent;
}
html[data-theme] table.grid .cell-edit.cell-title:hover { border-color: var(--ui-border-color); background: var(--primary-background-color); }
html[data-theme] table.grid .cell-edit.cell-title:focus { border-color: var(--primary-color); background: var(--primary-background-color); box-shadow: none; }
html[data-theme] .item-title-cell { gap: 4px; }
html[data-theme] .item-comment-flag {
  margin-left: auto; width: 28px; height: 28px; flex-shrink: 0; position: relative;
  color: var(--icon-color); background: transparent; border-radius: var(--border-radius-small);
}
html[data-theme] .item-comment-flag:not(.has-comments) { opacity: 0; }
html[data-theme] tr.item-row:hover .item-comment-flag { opacity: 1; }
html[data-theme] .item-comment-flag:hover { background: var(--tb-hover); color: var(--primary-color); }
html[data-theme] .item-comment-flag.has-comments svg { color: var(--primary-color); }
html[data-theme] .item-comment-flag .comment-count {
  position: absolute; right: -2px; bottom: 0; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px; background: var(--primary-color); color: #fff;
  font: 500 10px/14px var(--font-family); text-align: center;
}
html[data-theme] .item-comment-flag:not(.has-comments) .comment-count { display: none; }
html[data-theme] .item-title-cell .sub-badge {
  display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--allgrey-background-color); color: var(--secondary-text-color); font: var(--font-text3-normal);
}
html[data-theme] .item-title-cell .expand-btn { color: var(--icon-color); }

/* status and priority: the label colour fills the cell */
html[data-theme] table.grid td.col-status,
html[data-theme] table.grid td.col-priority { padding: 0; }
html[data-theme] table.grid td.col-status .cell-trigger,
html[data-theme] table.grid td.col-priority .cell-trigger {
  display: flex; width: 100%; height: calc(var(--tb-row-h) - 1px); padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer;
}
html[data-theme] table.grid td.col-status .chip,
html[data-theme] table.grid td.col-priority .chip {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 0 8px; margin: 0;
  border: 0; border-radius: 0; box-shadow: none;
  font: var(--font-text2-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: filter var(--motion-productive-medium);
}
html[data-theme] table.grid td.col-status .cell-trigger:hover .chip,
html[data-theme] table.grid td.col-priority .cell-trigger:hover .chip { filter: brightness(0.94); }
html[data-theme] table.grid td.col-status .chip.empty { background: var(--color-explosive); color: transparent; }
html[data-theme] table.grid td.col-priority .chip.empty { background: transparent; color: transparent; }
html[data-theme] table.grid td.col-priority .cell-trigger:hover .chip.empty { background: var(--allgrey-background-color); filter: none; }

/* people: avatars only, the name on hover (monday People column) */
html[data-theme] table.grid td.col-owner, html[data-theme] table.grid td.col-reporter { text-align: center; }
html[data-theme] table.grid td.col-owner .cell-trigger,
html[data-theme] table.grid td.col-reporter .owner-cell {
  display: inline-flex; justify-content: center; width: 100%; padding: 0; border: 0; background: transparent;
}
html[data-theme] table.grid .owner-cell { justify-content: center; gap: 0; }
html[data-theme] table.grid .owner-cell .nm { display: none; }
html[data-theme] .avatar.sm { width: 28px; height: 28px; font-size: 11px; }

/* dates: plain text, red when overdue */
html[data-theme] table.grid td.col-due .cell-trigger {
  justify-content: center; width: 100%; padding: 0; border: 0; background: transparent;
  font: var(--font-text2-normal); color: var(--primary-text-color);
}
html[data-theme] table.grid td.col-due .cell-trigger svg { display: none; }
html[data-theme] table.grid td.col-due .overdue, html[data-theme] table.grid td.col-due .cell-trigger.overdue { color: var(--negative-color); }

/* progress: monday battery */
html[data-theme] .progress .track { height: 8px; border-radius: 4px; background: var(--ui-background-color); }
html[data-theme] .progress .fill { border-radius: 4px; background: var(--color-done-green); }
html[data-theme] .progress .pct { font: var(--font-text3-normal); color: var(--secondary-text-color); }

/* add a task */
html[data-theme] table.grid tr.add-row td { height: var(--tb-row-h); padding: 0; border-left: 6px solid var(--group-color); opacity: 1; }
html[data-theme] table.grid tr.add-row td { border-left-color: color-mix(in srgb, var(--group-color) 45%, white); }
html[data-theme] .add-item-btn {
  display: flex; align-items: center; gap: 6px; width: 100%; height: 100%; padding: 0 12px 0 40px;
  border: 0; border-radius: 0; background: transparent;
  font: var(--font-text2-normal); color: var(--secondary-text-color); cursor: text; text-align: left;
}
html[data-theme] .add-item-btn:hover { background: #f5f6f8; color: var(--primary-text-color); }
html[data-theme] .add-item-btn svg { display: none; }
html[data-theme] .add-item-btn::before { content: "+"; margin-right: 2px; }
html[data-theme] .add-col-btn { width: 28px; height: 28px; border: 0; border-radius: var(--border-radius-small); background: transparent; color: var(--icon-color); }
html[data-theme] .add-col-btn:hover { background: var(--tb-hover); color: var(--primary-text-color); }

/* sub-tasks */
html[data-theme] table.grid tr.sub-row td { background: var(--primary-background-color); }
html[data-theme] table.grid tr.sub-row td.col-expand { border-left-color: color-mix(in srgb, var(--group-color) 45%, white) !important; }
html[data-theme] .tb-result[hidden] { display: none; }

/* ---------- label picker (status, priority): monday.com label buttons ---------- */
html[data-theme] .menu.label-menu { padding: 12px; }
html[data-theme] .menu-item.label-item {
  justify-content: center; min-height: 32px; margin: 0 0 6px; padding: 4px 12px;
  border-radius: var(--border-radius-small); font: var(--font-text2-normal);
  transition: filter var(--motion-productive-medium), box-shadow var(--motion-productive-medium);
}
html[data-theme] .menu-item.label-item:hover,
html[data-theme] .menu-item.label-item.focused { filter: brightness(0.92); }
html[data-theme] .menu-item.label-item.selected { box-shadow: 0 0 0 2px var(--primary-background-color), 0 0 0 4px var(--primary-color); }

/* ============================================================================================
   Kanban (monday.com Kanban: a coloured header per status, white cards on a tinted column)
   ============================================================================================ */
html[data-theme] .kanban { display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; padding: 0 0 16px; }
html[data-theme] .kcol {
  flex: 0 0 272px; display: flex; flex-direction: column; max-height: calc(100vh - 240px);
  background: color-mix(in srgb, var(--kcol) 10%, var(--primary-background-color));
  border: 0; border-radius: var(--border-radius-medium); box-shadow: none; overflow: hidden;
}
html[data-theme] .kcol-head {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin: 0;
  background: var(--kcol); color: var(--kcol-ink); border: 0;
  font: var(--font-text1-medium);
}
html[data-theme] .kcol-head .swatch { display: none; }
html[data-theme] .kcol-head .lbl { color: inherit; font: inherit; }
html[data-theme] .kcol-head .cnt {
  margin-left: auto; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.3); color: inherit; font: var(--font-text3-normal);
  display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme] .kcol-body { display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow-y: auto; min-height: 60px; }
html[data-theme] .kcol.drop-active { box-shadow: inset 0 0 0 2px var(--primary-color); }
html[data-theme] .kcard {
  padding: 12px; margin: 0; border: 0; border-radius: var(--border-radius-medium);
  background: var(--primary-background-color); box-shadow: var(--box-shadow-xs);
  cursor: pointer; transition: box-shadow var(--motion-productive-medium);
}
html[data-theme] .kcard:hover { box-shadow: var(--box-shadow-small); }
html[data-theme] .kcard .ktitle { font: var(--font-text2-normal); color: var(--primary-text-color); margin-bottom: 8px; }
html[data-theme] .kcard .kmeta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
html[data-theme] .kcard .chip { height: 24px; padding: 0 8px; border-radius: var(--border-radius-small); font: var(--font-text3-normal); display: inline-flex; align-items: center; }
html[data-theme] .kcard .due { font: var(--font-text3-normal); color: var(--secondary-text-color); }
html[data-theme] .kcard .due.overdue { color: var(--negative-color); }
html[data-theme] .kcard .kfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
html[data-theme] .kcard .kbd-move { height: 24px; padding: 0 8px; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); background: transparent; font: var(--font-text3-normal); color: var(--secondary-text-color); }
html[data-theme] .kcard .kbd-move:hover { background: var(--tb-hover); }

/* ============================================================================================
   Task panel (monday.com item panel): editable fields, underlined tabs, update cards
   ============================================================================================ */
html[data-theme] .drawer {
  width: min(760px, 100vw); border: 0; border-radius: 0;
  background: var(--primary-background-color); box-shadow: var(--box-shadow-large);
}
html[data-theme] .drawer-head { padding: 20px 24px 0; border: 0; background: var(--primary-background-color); }
html[data-theme] .drawer-head .top { gap: 8px; align-items: flex-start; }
html[data-theme] .drawer-head .crumb { font: var(--font-text3-normal); color: var(--secondary-text-color); text-transform: none; letter-spacing: normal; margin-bottom: 2px; }
html[data-theme] .drawer-head h2 { margin: 0 0 16px; font: 500 24px/32px var(--font-family); }
html[data-theme] .drawer-title-edit.cell-edit.cell-wrap {
  font: 500 24px/32px var(--font-family); padding: 0 6px; margin-left: -7px; min-height: 34px;
  border: 1px solid transparent; border-radius: var(--border-radius-small); background: transparent;
}
html[data-theme] .drawer-title-edit.cell-edit.cell-wrap:hover { border-color: var(--ui-border-color); }
html[data-theme] .drawer-title-edit.cell-edit.cell-wrap:focus { border-color: var(--primary-color); outline: 0; box-shadow: none; }
html[data-theme] .drawer-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); overflow: hidden;
}
html[data-theme] .drawer-meta .m {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; min-height: 64px;
  border-right: 1px solid var(--layout-border-color); border-bottom: 1px solid var(--layout-border-color);
}
html[data-theme] .drawer-meta .m:nth-child(3n) { border-right: 0; }
html[data-theme] .drawer-meta .m:nth-last-child(-n+3) { border-bottom: 0; }
html[data-theme] .drawer-meta .k { font: var(--font-text3-normal); color: var(--secondary-text-color); text-transform: none; letter-spacing: normal; }
html[data-theme] .drawer-meta .v .cell-trigger { width: 100%; justify-content: flex-start; padding: 0; border: 0; background: transparent; min-height: 28px; }
html[data-theme] .drawer-meta .m-status .v .cell-trigger .chip,
html[data-theme] .drawer-meta .m-priority .v .cell-trigger .chip {
  width: 100%; height: 30px; justify-content: center; border-radius: var(--border-radius-small); font: var(--font-text2-normal);
}
html[data-theme] .drawer-meta .m-priority .chip.empty { background: var(--allgrey-background-color); color: var(--secondary-text-color); }
html[data-theme] .drawer-meta .owner-cell .nm { display: inline; }
html[data-theme] .drawer-meta .v .cell-trigger svg { color: var(--icon-color); }
@media (max-width: 600px) { html[data-theme] .drawer-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

html[data-theme] .drawer-tabs {
  display: flex; gap: 0; margin: 16px 0 0; padding: 0 24px;
  border-bottom: 1px solid var(--layout-border-color); background: var(--primary-background-color);
}
html[data-theme] .drawer-tabs button {
  position: relative; height: 40px; padding: 0 12px; gap: 6px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font: var(--font-text2-normal); color: var(--primary-text-color);
}
html[data-theme] .drawer-tabs button svg { color: var(--icon-color); }
html[data-theme] .drawer-tabs button[aria-selected="true"]::after, html[data-theme] .drawer-tabs button.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary-color);
}
html[data-theme] .drawer-tabs button[aria-selected="true"], html[data-theme] .drawer-tabs button.active { color: var(--primary-text-color); background: transparent; font-weight: 400; }
html[data-theme] .drawer-tabs .tcount { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ui-background-color); color: var(--secondary-text-color); font: var(--font-text3-normal); }
html[data-theme] .drawer-body { padding: 16px 24px; background: var(--primary-background-color); }

/* updates (comments) as cards */
html[data-theme] .comment {
  display: flex; gap: 12px; padding: 16px; margin: 0 0 12px;
  border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium);
  background: var(--primary-background-color); box-shadow: none;
}
html[data-theme] .comment .c-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
html[data-theme] .comment .c-author { font: var(--font-text2-medium); color: var(--primary-text-color); }
html[data-theme] .comment .c-time { font: var(--font-text3-normal); color: var(--secondary-text-color); }
html[data-theme] .comment .c-body { font: var(--font-text2-normal); color: var(--primary-text-color); white-space: pre-wrap; overflow-wrap: anywhere; }
html[data-theme] .comment-compose { padding: 12px 24px 16px; border-top: 1px solid var(--layout-border-color); background: var(--primary-background-color); }
html[data-theme] .comment-compose textarea {
  width: 100%; min-height: 72px; padding: 12px; resize: vertical;
  border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-medium);
  font: var(--font-text2-normal); color: var(--primary-text-color); background: var(--primary-background-color);
}
html[data-theme] .comment-compose textarea:focus { outline: 0; border-color: var(--primary-color); box-shadow: none; }
html[data-theme] .comment-compose .hint { font: var(--font-text3-normal); color: var(--secondary-text-color); }
html[data-theme] .drawer-section-label { font: var(--font-text2-medium); color: var(--primary-text-color); text-transform: none; letter-spacing: normal; margin-bottom: 8px; }
html[data-theme] .drawer-desc {
  width: 100%; padding: 12px; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-medium);
  font: var(--font-text2-normal); background: var(--primary-background-color);
}
html[data-theme] .drawer-desc:focus { outline: 0; border-color: var(--primary-color); box-shadow: none; }

/* ============================================================================================
   Selecting tasks and changing them together (monday.com selection bar)
   ============================================================================================ */
html[data-theme] .row-check {
  width: 16px; height: 16px; margin: 0 4px 0 2px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--primary-color); opacity: 0.55;
}
html[data-theme] tr.item-row:hover .row-check, html[data-theme] .row-check:checked,
html[data-theme] .row-check:indeterminate, html[data-theme] th .row-check:hover { opacity: 1; }
html[data-theme] table.grid th.col-title .col-head-inner { gap: 6px; }
html[data-theme] table.grid tbody tr.item-row.selected td:not(.col-status):not(.col-priority) { background: var(--primary-selected-color); }
html[data-theme] .bulk-bar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 900;
  display: flex; align-items: stretch; height: 64px; max-width: calc(100vw - 32px);
  background: var(--primary-background-color); border-radius: var(--border-radius-medium);
  box-shadow: var(--box-shadow-large); overflow: hidden;
  animation: tb-rise var(--motion-productive-medium) var(--motion-timing-transition);
}
html[data-theme] .bulk-bar[hidden] { display: none; }
html[data-theme] .bulk-count {
  display: flex; align-items: center; gap: 12px; padding: 0 20px 0 0;
  font: var(--font-text1-normal); color: var(--primary-text-color); white-space: nowrap;
}
html[data-theme] .bulk-num {
  display: grid; place-items: center; width: 64px; height: 100%;
  background: var(--primary-color); color: #fff; font: 400 24px/1 var(--font-family);
}
html[data-theme] .bulk-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 72px; padding: 0 12px; border: 0; background: transparent; cursor: pointer;
  font: var(--font-text3-normal); color: var(--primary-text-color);
}
html[data-theme] .bulk-action svg { color: var(--icon-color); }
html[data-theme] .bulk-action:hover { background: var(--tb-hover); }
html[data-theme] .bulk-close {
  display: grid; place-items: center; width: 56px; border: 0; border-left: 1px solid var(--layout-border-color);
  background: transparent; color: var(--icon-color); cursor: pointer;
}
html[data-theme] .bulk-close:hover { background: var(--tb-hover); color: var(--primary-text-color); }
html[data-theme] .bulk-date { display: flex; gap: 8px; padding: 0 4px 8px; }
html[data-theme] .bulk-date .input { min-height: 32px; padding: 4px 8px; font: var(--font-text2-normal); }
@keyframes tb-rise { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 600px) {
  html[data-theme] .bulk-bar { left: 8px; right: 8px; transform: none; overflow-x: auto; }
  html[data-theme] .bulk-count span:last-child { display: none; }
}
html[data-theme] .bulk-action span { white-space: nowrap; }

/* ============================================================================================
   Embedded in the Payment Partner back office (?embed=1): the board alone, no sidebar or
   account controls (the portal provides both), edge to edge on white.
   ============================================================================================ */
html.tb-embed[data-theme] body { background: var(--primary-background-color); }
html.tb-embed[data-theme] .rail,
html.tb-embed[data-theme] .rail-backdrop,
html.tb-embed[data-theme] .rail-toggle,
html.tb-embed[data-theme] .topbar .global-actions { display: none !important; }
html.tb-embed[data-theme] .layout { grid-template-columns: minmax(0, 1fr) !important; background: var(--primary-background-color); }
html.tb-embed[data-theme] .main { margin: 0; border-radius: 0; box-shadow: none; }
html.tb-embed[data-theme] .topbar { grid-template-columns: minmax(0, 1fr) auto; padding-top: 12px; }

/* dates: red only when overdue and not done; an empty date shows only on hover (monday style) */
html[data-theme] .date-trigger { font: var(--font-text2-normal); color: var(--primary-text-color); gap: 6px; }
html[data-theme] .date-trigger.overdue { color: var(--negative-color); }
html[data-theme] .date-trigger .date-empty { color: var(--secondary-text-color); }
html[data-theme] table.grid td.col-due .date-trigger.empty .date-empty { visibility: hidden; }
html[data-theme] table.grid tr:hover td.col-due .date-trigger.empty .date-empty,
html[data-theme] table.grid td.col-due .date-trigger.empty:focus-visible .date-empty { visibility: visible; }

/* ============================================================================================
   Timeline (monday.com Timeline/Gantt): names on the left, day grid on the right, one row per task
   ============================================================================================ */
html[data-theme] .tl-wrap {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium);
  background: var(--primary-background-color); overflow: hidden;
}
html[data-theme] .tl-names { border-right: 1px solid var(--layout-border-color); min-width: 0; }
html[data-theme] .tl-names-head, html[data-theme] .tl-head { height: 64px; border-bottom: 1px solid var(--layout-border-color); }
html[data-theme] .tl-names-head { display: flex; align-items: center; padding: 0 12px; }
html[data-theme] .tl-group, html[data-theme] .tl-row-group { height: 40px; }
html[data-theme] .tl-group {
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border-bottom: 1px solid var(--layout-border-color);
}
html[data-theme] .tl-group-name { font: 500 16px/24px var(--font-family); color: var(--group-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme] .tl-group-count { font: var(--font-text3-normal); color: var(--secondary-text-color); white-space: nowrap; }
html[data-theme] .tl-name {
  display: block; width: 100%; height: 36px; padding: 0 12px 0 14px; margin: 0;
  border: 0; border-left: 4px solid var(--group-color); border-bottom: 1px solid var(--layout-border-color);
  background: var(--primary-background-color); color: var(--primary-text-color);
  font: var(--font-text2-normal); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
html[data-theme] .tl-name:hover { background: #f5f6f8; }
html[data-theme] .tl-scroll { overflow-x: auto; min-width: 0; }
html[data-theme] .tl-grid { position: relative; }
html[data-theme] .tl-months, html[data-theme] .tl-units { position: relative; height: 32px; }
html[data-theme] .tl-units { border-top: 1px solid var(--layout-border-color); }
html[data-theme] .tl-month {
  position: absolute; top: 0; height: 32px; padding: 0 8px; line-height: 32px;
  border-left: 1px solid var(--layout-border-color);
  font: 500 14px/32px var(--font-family); color: var(--primary-text-color); white-space: nowrap; overflow: hidden;
}
html[data-theme] .tl-unit {
  position: absolute; top: 0; height: 31px; line-height: 31px; text-align: center;
  font: var(--font-text3-normal); line-height: 31px; color: var(--secondary-text-color); white-space: nowrap; overflow: hidden;
}
html[data-theme] .tl-unit.weekend { color: var(--ink-faint); }
html[data-theme] .tl-unit.today { color: #fff; }
html[data-theme] .tl-unit.today::before { content: ""; position: absolute; inset: 5px 4px; border-radius: 10px; background: var(--primary-color); z-index: -1; }
html[data-theme] .tl-body { position: relative; }
html[data-theme] .tl-row { position: relative; height: 36px; border-bottom: 1px solid var(--layout-border-color); }
html[data-theme] .tl-row-group { background: transparent; }
html[data-theme] .tl-shade { position: absolute; inset: 0; pointer-events: none; }
html[data-theme] .tl-weekend { position: absolute; top: 0; bottom: 0; background: var(--allgrey-background-color); }
html[data-theme] .tl-bar {
  position: absolute; top: 8px; height: 20px; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
  transition: filter var(--motion-productive-medium);
}
html[data-theme] .tl-bar:hover { filter: brightness(0.92); }
html[data-theme] .tl-bar.late { box-shadow: 0 0 0 2px var(--primary-background-color), 0 0 0 4px var(--negative-color); }
html[data-theme] .tl-bar-label {
  position: absolute; top: 8px; line-height: 20px; pointer-events: none;
  font: var(--font-text3-normal); line-height: 20px; color: var(--primary-text-color); white-space: nowrap;
}
html[data-theme] .tl-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--primary-color); border: 0; z-index: 2; pointer-events: none; }
html[data-theme] .tl-zoom { display: inline-flex; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); overflow: hidden; }
html[data-theme] .tl-zoom-btn { height: 28px; padding: 0 10px; border: 0; background: transparent; font: var(--font-text2-normal); color: var(--primary-text-color); cursor: pointer; }
html[data-theme] .tl-zoom-btn + .tl-zoom-btn { border-left: 1px solid var(--ui-border-color); }
html[data-theme] .tl-zoom-btn:hover { background: var(--tb-hover); }
html[data-theme] .tl-zoom-btn.active { background: var(--primary-selected-color); }
html[data-theme] .tl-note { margin: 12px 0 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
html[data-theme] .tl-empty {
  display: grid; gap: 4px; justify-items: center; padding: 48px 24px; text-align: center;
  border: 1px dashed var(--layout-border-color); border-radius: var(--border-radius-medium);
  font: var(--font-text2-normal); color: var(--secondary-text-color);
}
html[data-theme] .tl-empty strong { font: var(--font-text1-medium); color: var(--primary-text-color); }
@media (max-width: 600px) { html[data-theme] .tl-wrap { grid-template-columns: 132px minmax(0, 1fr); } }

/* ============================================================================================
   Calendar (monday.com Calendar): one grid with shared lines, status-coloured labels
   ============================================================================================ */
html[data-theme] .cal-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
html[data-theme] .cal-nav-group { display: inline-flex; align-items: center; gap: 4px; }
html[data-theme] .cal-nav-group .btn-icon { font-size: 20px; line-height: 1; }
html[data-theme] .cal-title { font: 500 18px/24px var(--font-family); color: var(--primary-text-color); }
html[data-theme] .cal-count { margin-left: auto; font: var(--font-text2-normal); color: var(--secondary-text-color); }
html[data-theme] .cal-hint {
  margin: 0 0 12px; padding: 8px 12px; border-radius: var(--border-radius-small);
  background: var(--primary-highlighted-color); font: var(--font-text2-normal); color: var(--primary-text-color);
}
html[data-theme] .cal-month { border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); overflow: hidden; }
html[data-theme] .cal-dow, html[data-theme] .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin: 0; }
html[data-theme] .cal-dow { border-bottom: 1px solid var(--layout-border-color); background: var(--primary-background-color); }
html[data-theme] .cal-dow-cell { padding: 8px; text-align: center; font: var(--font-text3-normal); color: var(--secondary-text-color); text-transform: none; letter-spacing: normal; }
html[data-theme] .cal-cell {
  display: flex; flex-direction: column; gap: 4px; min-height: 104px; min-width: 0; padding: 6px;
  border: 0; border-right: 1px solid var(--layout-border-color); border-bottom: 1px solid var(--layout-border-color);
  border-radius: 0; background: var(--primary-background-color); box-shadow: none; overflow: hidden; opacity: 1;
}
html[data-theme] .cal-cell:nth-child(7n) { border-right: 0; }
html[data-theme] .cal-grid .cal-cell:nth-last-child(-n+7) { border-bottom: 0; }
html[data-theme] .cal-cell.out { background: var(--allgrey-background-color); }
html[data-theme] .cal-cell.out .cal-date { color: var(--ink-faint); }
html[data-theme] .cal-date { display: flex; font: var(--font-text3-normal); color: var(--secondary-text-color); }
html[data-theme] .cal-date span { min-width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 12px; }
html[data-theme] .cal-cell.today .cal-date span { background: var(--primary-color); color: #fff; }
html[data-theme] .cal-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html[data-theme] .cal-item {
  display: block; width: 100%; height: 22px; padding: 0 8px; border: 0; border-radius: var(--border-radius-small);
  font: var(--font-text3-normal); line-height: 22px; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme] .cal-item:hover { filter: brightness(0.94); }
html[data-theme] .cal-more { align-self: flex-start; padding: 0 4px; border: 0; background: none; font: var(--font-text3-normal); color: var(--primary-color); cursor: pointer; }
html[data-theme] .cal-more:hover { text-decoration: underline; }
html[data-theme] .cal-day-pop { width: 260px; }
html[data-theme] .cal-day-list { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 600px) {
  html[data-theme] .cal-cell { min-height: 64px; padding: 3px; }
  html[data-theme] .cal-item { height: 8px; padding: 0; font-size: 0; }
  html[data-theme] .cal-head { flex-wrap: wrap; }
}

/* ============================================================================================
   One page padding, and everything aligned to it (2026-10-15)
   app.css set the content padding three ways (24/28, 14/48, 10/34 px) and the sticky toolbar's
   offsets matched none of them, so it sat 2 to 10 px over the content.
   ============================================================================================ */
html[data-theme] .content { --pad-x: 24px; --pad-top: 16px; padding: var(--pad-top) var(--pad-x) 80px; background: var(--primary-background-color); }
html[data-theme] .topbar { padding-left: 24px; padding-right: 24px; }
html[data-theme] .board-toolbar-host {
  margin: calc(-1 * var(--pad-top)) calc(-1 * var(--pad-x)) 16px;
  padding: 12px var(--pad-x);
}
@media (max-width: 600px) {
  html[data-theme] .content { --pad-x: 12px; --pad-top: 8px; padding-bottom: 96px; }
  html[data-theme] .topbar { padding-left: 12px; padding-right: 12px; }
}

/* ---------- table groups: the arrow next to the name; the colour swatch at the end, on hover ---------- */
html[data-theme] .section-head { gap: 6px; }
html[data-theme] .section-head .caret { order: 0; }
html[data-theme] .section-head .section-title { order: 1; }
html[data-theme] .section-head .section-swatch { order: 2; width: 0; margin: 0; overflow: hidden; }
html[data-theme] .section-head:hover .section-swatch,
html[data-theme] .section-head .section-swatch:focus-visible { width: 14px; height: 14px; }
html[data-theme] .section-head .sec-actions { order: 3; }
html[data-theme] .section-group { margin-bottom: 32px; }
html[data-theme] table.grid th.col-owner { width: 120px; min-width: 120px; }
html[data-theme] table.grid th.col-reporter { width: 104px; min-width: 104px; }

/* ============================================================================================
   Dashboard (monday.com dashboard widgets): even rows of number cards, then panels
   ============================================================================================ */
html[data-theme] .dash-wrap { container-type: inline-size; }
html[data-theme] .dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
@container (min-width: 640px) { html[data-theme] .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1100px) { html[data-theme] .dash-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
html[data-theme] .dash-card {
  min-height: 104px; padding: 16px; gap: 8px;
  border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); box-shadow: none;
}
html[data-theme] .dash-card-label { font: var(--font-text2-normal); color: var(--secondary-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme] .dash-card-value { font: 500 32px/40px var(--font-family); letter-spacing: normal; color: var(--primary-text-color); }
html[data-theme] .dash-card-sub { font: var(--font-text3-normal); color: var(--secondary-text-color); }
html[data-theme] .dash-donut-txt { font-family: var(--font-family); font-weight: 500; }
html[data-theme] .dash-panel {
  margin: 0 0 16px; padding: 16px 20px;
  border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); box-shadow: none;
}
html[data-theme] .dash-panel-title { font: var(--font-text1-medium); color: var(--primary-text-color); margin: 0 0 12px; }
html[data-theme] .dash-2col { gap: 16px; margin: 0 0 16px; }
html[data-theme] .dash-2col > .dash-panel { margin: 0; }
@container (max-width: 720px) { html[data-theme] .dash-2col { grid-template-columns: minmax(0, 1fr); } }
html[data-theme] .dash-row { grid-template-columns: 10px minmax(0, 1fr) 72px minmax(72px, 1.2fr) 44px; gap: 10px; }
html[data-theme] .dash-row-name { font: var(--font-text2-normal); }
html[data-theme] .dash-row-count, html[data-theme] .dash-row-pct { font: var(--font-text3-normal); color: var(--secondary-text-color); }
html[data-theme] .dash-row-track { height: 8px; border: 0; background: var(--ui-background-color); }
html[data-theme] .dash-row-fill { background: var(--color-done-green); }
html[data-theme] .dash-empty { font: var(--font-text2-normal); color: var(--secondary-text-color); }

/* task names: one line per row (monday.com), "…" when longer, the full name on hover and in the panel */
html[data-theme] table.grid input.cell-edit.cell-title,
html[data-theme] table.grid .sub-title-cell input.cell-edit {
  height: 28px; min-height: 28px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: var(--font-text2-normal);
}
html[data-theme] table.grid input.cell-edit.cell-title:focus { text-overflow: clip; }

/* ============================================================================================
   Phones (2026-10-15): the board name gets the header, tabs scroll, task cards in two columns
   ============================================================================================ */
@media (max-width: 600px) {
  /* header: icon-only actions so the board name is readable; tabs scroll sideways */
  html[data-theme] .topbar .view-actions .btn > span,
  html[data-theme] .topbar .board-private-badge { font-size: 0; gap: 0; }
  html[data-theme] .topbar .view-actions .btn { padding: 0; width: var(--tb-ctrl-h); }
  html[data-theme] .topbar .board-private-badge { padding: 0 6px; }
  html[data-theme] .topbar h1 { font-size: 20px; line-height: 28px; }
  html[data-theme] .topbar .desc { display: none; }
  html[data-theme] .topbar-tabs { overflow-x: auto; scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding: 0 12px; }
  html[data-theme] .topbar-tabs::-webkit-scrollbar { display: none; }
  html[data-theme] .viewtoggle button { flex: none; }
  html[data-theme] .tb-toolbar { gap: 2px; }
  html[data-theme] .split-btn { margin-right: 4px; }

  /* task cards: name on top, then fields two by two with a small label above each value */
  html[data-theme] table.grid tbody tr.item-row { gap: 8px 12px; padding: 10px 12px; margin-bottom: 8px; }
  html[data-theme] table.grid tbody tr.item-row td.col-status,
  html[data-theme] table.grid tbody tr.item-row td.col-owner,
  html[data-theme] table.grid tbody tr.item-row td.col-due,
  html[data-theme] table.grid tbody tr.item-row td.col-priority {
    flex: 1 1 calc(50% - 6px) !important; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0;
  }
  html[data-theme] table.grid tbody tr.item-row td.col-status::before,
  html[data-theme] table.grid tbody tr.item-row td.col-owner::before,
  html[data-theme] table.grid tbody tr.item-row td.col-due::before,
  html[data-theme] table.grid tbody tr.item-row td.col-priority::before,
  html[data-theme] table.grid tbody tr.item-row td.col-progress::before {
    flex: none; font: var(--font-text3-normal); color: var(--secondary-text-color); text-transform: none; letter-spacing: normal;
  }
  html[data-theme] table.grid tbody tr.item-row td.col-reporter { display: none !important; }
  html[data-theme] table.grid tbody tr.item-row td.col-progress { flex: 1 1 100% !important; gap: 8px; }
  html[data-theme] table.grid tbody tr.item-row td.col-status .cell-trigger,
  html[data-theme] table.grid tbody tr.item-row td.col-priority .cell-trigger { height: 28px; border-radius: var(--border-radius-small); overflow: hidden; }
  html[data-theme] table.grid tbody tr.item-row td.col-priority .chip.empty { background: var(--allgrey-background-color); }
  html[data-theme] table.grid tbody tr.item-row td.col-owner .cell-trigger,
  html[data-theme] table.grid tbody tr.item-row td.col-owner .owner-cell { justify-content: flex-start; }
  html[data-theme] table.grid tbody tr.item-row td.col-due .cell-trigger { justify-content: flex-start; height: 28px; }
  html[data-theme] table.grid tbody tr.item-row td.col-due .date-trigger.empty .date-empty { visibility: visible; }
  html[data-theme] table.grid tbody tr.item-row td.col-actions { order: 9; flex: 0 0 auto; }

  /* dashboard: labels may wrap rather than lose their end */
  html[data-theme] .dash-card-label { white-space: normal; }
}
/* a group's row in the bar grid must match its header in the names column (40 px), or every group
   shifts the bars 4 px further from their names */
html[data-theme] .tl-body > .tl-row.tl-row-group { height: 40px; }
html[data-theme] .tl-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
html[data-theme] .tl-range { font: var(--font-text2-normal); color: var(--secondary-text-color); }
html[data-theme] .tl-names-head { font: var(--font-text2-normal); color: var(--primary-text-color); }

/* ---------- My tasks: stat cards and rows ---------- */
html[data-theme] .my-stat {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-width: 0;
  background: var(--primary-background-color); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium);
}
html[data-theme] .my-stat-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--border-radius-small); background: var(--primary-selected-color); color: var(--primary-color); flex-shrink: 0; }
html[data-theme] .my-stat.alert .my-stat-ico { background: var(--danger-soft); color: var(--negative-color); }
html[data-theme] .my-stat-val { font: 500 24px/28px var(--font-family); color: var(--primary-text-color); }
html[data-theme] .my-stat.alert .my-stat-val { color: var(--negative-color); }
html[data-theme] .my-stat-label { font: var(--font-text3-normal); color: var(--secondary-text-color); }
html[data-theme] .lrow .chip.status.empty { background: var(--color-explosive); color: #fff; border: 0; }

@media (max-width: 600px) {
  /* My tasks: three small stats in one row; each task on two lines: name, then where and its labels */
  html[data-theme] .my-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  html[data-theme] .my-stat { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; }
  html[data-theme] .my-stat-ico { display: none; }
  html[data-theme] .my-stat-val { font-size: 20px; line-height: 24px; }
  html[data-theme] .my-stat-label { white-space: normal; }
  html[data-theme] .lrow { flex-wrap: wrap; row-gap: 6px; }
  html[data-theme] .lrow .lr-main { flex: 1 1 100%; min-width: 0; }
  html[data-theme] .lrow .lr-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  html[data-theme] .lrow .lr-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  html[data-theme] .lrow .lr-sub .pip { display: inline; }
  html[data-theme] .lrow .lr-meta { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  html[data-theme] .lrow .lr-meta .chip { height: 24px; font: var(--font-text3-normal); }
  /* task panel: tabs scroll, no keyboard hint */
  html[data-theme] .drawer-tabs { overflow-x: auto; scrollbar-width: none; padding: 0 12px; }
  html[data-theme] .drawer-tabs::-webkit-scrollbar { display: none; }
  html[data-theme] .drawer-tabs button { flex: none; }
  html[data-theme] .comment-compose .hint { display: none; }
  html[data-theme] .drawer-head { padding: 16px 16px 0; }
  html[data-theme] .drawer-body { padding: 12px 16px; }
  html[data-theme] .comment-compose { padding: 12px 16px; }
}

/* ============================================================================================
   Spacing pass 2 (2026-10-15), from the screenshot review of every tab at 1440, 1024 and 375 px
   ============================================================================================ */

/* ---------- sidebar: rows on a 32 px pitch, sections in order (Views was pushed to the bottom) ---------- */
html[data-theme] .rail-link { min-height: 32px; height: 32px; padding: 0 8px; gap: 8px; font-size: 14px; }
html[data-theme] .rail-views { margin-top: 12px; }
html[data-theme] .rail-section { padding: 4px 12px 0; }
html[data-theme] .rail-label { margin: 8px 0 2px; }
html[data-theme] .rail-fav-body .rail-nav, html[data-theme] .rail-nav { padding: 0; gap: 0; }
html[data-theme] .rail-user .meta { min-width: 0; }
/* one way to open and close the sidebar: its own arrow; the header button only when it is closed */
@media (min-width: 921px) {
  html:not(.rail-collapsed)[data-theme] .topbar .rail-toggle { display: none; }
}

/* ---------- board header: tighter, one search (the toolbar's) ---------- */
html[data-theme] .topbar { padding-top: 12px; row-gap: 0; }
html[data-theme] .topbar-tabs { margin-top: 4px; }
html[data-theme] .topbar.has-tabs .topbar-search-wrap { display: none; }
html[data-theme] .board-toolbar-host { padding-top: 8px; padding-bottom: 8px; margin-bottom: 12px; }

/* ---------- table ---------- */
html[data-theme] .section-group { margin-bottom: 24px; }
html[data-theme] .section-head { min-height: 36px; padding-bottom: 2px; }
/* header checkbox and "Task" line up with the rows' checkbox and names */
html[data-theme] table.grid th.col-title { padding: 0 8px 0 4px; }
html[data-theme] table.grid th.col-title .col-head-inner { gap: 4px; padding-left: 0; }
html[data-theme] table.grid th.col-title .row-check { margin: 0 4px 0 2px; }
html[data-theme] table.grid th.col-title .col-head-name { padding-left: 7px; }
/* row actions only on hover (monday shows none until you point at a row) */
html[data-theme] table.grid th.col-actions { width: 44px; min-width: 44px; }
html[data-theme] table.grid th.col-addcol { width: 64px; min-width: 64px; }
html[data-theme] table.grid td.col-actions > * { opacity: 0; transition: opacity var(--motion-productive-medium); }
html[data-theme] table.grid tr:hover td.col-actions > *, html[data-theme] table.grid td.col-actions :focus-visible { opacity: 1; }
html[data-theme] table.grid td.col-actions .btn-icon { width: 20px; height: 24px; }
/* the add-task row carries the group colour, faded, like monday */
html[data-theme] table.grid tr.add-row td { border-left: 6px solid color-mix(in srgb, var(--group-color) 40%, white) !important; }
html[data-theme] .add-item-btn { padding-left: 34px; }
/* the progress cell: no tiny "auto" under the percentage (the tooltip says it) */
html[data-theme] .progress.rolled .pct::after { content: none; display: none; }
/* narrower default columns below 1200 px so a laptop shows them all */
@media (max-width: 1200px) and (min-width: 601px) {
  html[data-theme] table.grid th.col-title, html[data-theme] table.grid td.col-title { min-width: 240px; }
  html[data-theme] table.grid th.col-status { width: 120px; min-width: 120px; }
  html[data-theme] table.grid th.col-owner { width: 96px; min-width: 96px; }
  html[data-theme] table.grid th.col-due { width: 96px; min-width: 96px; }
  html[data-theme] table.grid th.col-priority { width: 108px; min-width: 108px; }
  html[data-theme] table.grid th.col-progress { width: 112px; min-width: 112px; }
}
/* when a table is wider than the screen, its scrollbar shows (macOS hides it until scrolling) */
html[data-theme] .grid-wrap { scrollbar-width: thin; scrollbar-color: var(--ui-border-color) transparent; padding-bottom: 2px; }
html[data-theme] .grid-wrap::-webkit-scrollbar { height: 8px; }
html[data-theme] .grid-wrap::-webkit-scrollbar-thumb { background: var(--ui-border-color); border-radius: 4px; }

/* ---------- Kanban: lanes the height of the screen, equal headers, quiet cards ---------- */
html[data-theme] .kanban { height: calc(100vh - 210px); min-height: 360px; align-items: stretch; }
html[data-theme] .kcol { max-height: none; height: 100%; }
html[data-theme] .kcol-head { flex: none; height: 40px; }
html[data-theme] .kcol-body { flex: 1; min-height: 0; }
html[data-theme] .kcol-empty { padding: 12px 4px; text-align: center; font: var(--font-text2-normal); color: var(--secondary-text-color); }
html[data-theme] .kcard .kbd-move { opacity: 0; transition: opacity var(--motion-productive-medium); }
html[data-theme] .kcard:hover .kbd-move, html[data-theme] .kcard .kbd-move:focus-visible, html[data-theme] .kcard:focus-within .kbd-move { opacity: 1; }
html[data-theme] .kcard .kmeta .chip, html[data-theme] .kcard .chip.priority { height: 22px; min-height: 0; padding: 0 8px; font: var(--font-text3-normal); line-height: 22px; border-radius: var(--border-radius-small); }
html[data-theme] .kcard .kfoot { margin-top: 8px; min-height: 24px; }
html[data-theme] .kanban { scrollbar-width: thin; scrollbar-color: var(--ui-border-color) transparent; }

/* ---------- Dashboard: cards in a row the height of their content, smaller rings ---------- */
html[data-theme] .dash-2col { align-items: start; }
html[data-theme] .dash-card-ring svg { width: 48px; height: 48px; }
html[data-theme] .dash-card { min-height: 88px; }

/* ---------- phones ---------- */
@media (max-width: 600px) {
  /* the toolbar on one line that scrolls; Search opens when tapped */
  html[data-theme] .tb-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  html[data-theme] .tb-toolbar::-webkit-scrollbar { display: none; }
  html[data-theme] .tb-toolbar > * { flex: none; }
  html[data-theme] .tb-search-input { width: 0; }
  html[data-theme] .tb-search:focus-within .tb-search-input, html[data-theme] .tb-search.active .tb-search-input { width: 140px; }
  html[data-theme] .tb-tool > span:not(.tb-count) { font-size: 13px; }
  html[data-theme] .topbar { padding-top: 8px; }
  html[data-theme] .topbar-tabs { margin-top: 0; }
  html[data-theme] .viewtoggle button { height: 36px; padding: 0 10px; }
  html[data-theme] .board-toolbar-host { padding-top: 6px; padding-bottom: 6px; margin-bottom: 8px; }
  /* task cards use the full width; no table fragments on them */
  html[data-theme] .section-group { margin-bottom: 16px; }
  html[data-theme] .grid-wrap { margin: 0; overflow: visible; }
  html[data-theme] table.grid tbody tr.item-row { margin-left: 0; margin-right: 0; }
  html[data-theme] table.grid tbody tr.item-row td.col-expand { border: 0 !important; width: auto; min-width: 0; max-width: none; }
  html[data-theme] table.grid tbody tr.item-row td { border: 0 !important; }
  html[data-theme] table.grid tbody tr.item-row { border: 1px solid var(--layout-border-color); border-left: 4px solid var(--group-color); border-radius: var(--border-radius-medium); }
  html[data-theme] table.grid tbody tr.item-row td.col-actions > * { opacity: 1; }
  html[data-theme] table.grid tr.add-row td { border: 0 !important; }
  html[data-theme] .add-item-btn { padding-left: 4px; }
  /* Kanban: one lane at a time, swiping to the next */
  html[data-theme] .kanban { height: calc(100vh - 200px); scroll-snap-type: x mandatory; gap: 8px; margin: 0 -12px; padding: 0 12px 12px; }
  html[data-theme] .kcol { flex: 0 0 82vw; scroll-snap-align: start; }
}
/* The toolbar sits in the flow (no negative top margin: sticky positioning pushed it back down by
   the content padding, over the first 4 px of the board) and docks flush to the top when scrolled. */
html[data-theme] .board-toolbar-host { margin-top: 0; top: calc(-1 * var(--pad-top)); }
/* the row-actions column must hold its two icons at the same width in every group (empty groups
   had a narrower one, shifting every column by up to 40 px between groups) */
html[data-theme] table.grid th.col-actions { width: 60px; min-width: 60px; max-width: 60px; }
html[data-theme] table.grid td.col-actions { padding: 0 4px; }
html[data-theme] table.grid td.col-actions > div { gap: 2px; justify-content: center !important; }
/* the progress bar fits its column (it had a fixed minimum width that widened the column in groups
   with tasks, shifting every column after it) */
html[data-theme] table.grid td.col-progress .progress { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
html[data-theme] table.grid td.col-progress .progress .track { flex: 1 1 auto; width: auto; min-width: 24px; }
html[data-theme] table.grid td.col-progress .progress .pct { flex: none; min-width: 0; width: auto; }
html[data-theme] table.grid th.col-progress { max-width: 112px; }
@media (min-width: 1201px) { html[data-theme] table.grid th.col-progress { max-width: 132px; } }

/* ============================================================================================
   Other screens (2026-10-16): Users and Tenants tables, list rows, task panel comment box on top
   ============================================================================================ */
/* admin tables are plain tables: names next to avatars, nothing sticky, emails as text */
html[data-theme] table.grid.admin-grid td.col-title, html[data-theme] table.grid.admin-grid th.col-title { position: static; min-width: 0; }
html[data-theme] table.grid.admin-grid .owner-cell { justify-content: flex-start; gap: 8px; }
html[data-theme] table.grid.admin-grid .owner-cell .nm { display: inline; }
html[data-theme] table.grid.admin-grid td, html[data-theme] table.grid.admin-grid th { text-align: left; }
html[data-theme] table.grid.admin-grid td > * { margin-left: 0; margin-right: 0; }
html[data-theme] table.grid.admin-grid th.col-title { width: 32%; }
html[data-theme] .user-email { font: var(--font-text2-normal); color: var(--secondary-text-color); }
html[data-theme] table.grid.admin-grid .chip.empty { background: var(--allgrey-background-color); color: var(--secondary-text-color); border: 0; }

/* My tasks and Find: labels in fixed columns; the name gets the width */
html[data-theme] .lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 48px; padding: 6px 16px; }
html[data-theme] .lrow .lr-meta { display: grid; grid-template-columns: 96px 72px 128px; gap: 8px; align-items: center; }
html[data-theme] .lrow .lr-meta > * { justify-self: stretch; text-align: center; }
html[data-theme] .lrow .lr-meta .chip { display: flex; align-items: center; justify-content: center; height: 28px; border-radius: var(--border-radius-small); font: var(--font-text3-normal); }
html[data-theme] .lrow .lr-meta .due-tag { font: var(--font-text2-normal); color: var(--primary-text-color); }
html[data-theme] .lrow .lr-meta .due-tag.overdue { color: var(--negative-color); }
html[data-theme] .lrow .lr-title { font: var(--font-text2-normal); color: var(--primary-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme] .lrow .lr-sub { display: flex; gap: 8px; align-items: center; font: var(--font-text3-normal); color: var(--secondary-text-color); white-space: nowrap; overflow: hidden; }
html[data-theme] .lrow .lr-sub .lr-owner { display: inline-flex; align-items: center; gap: 4px; }
html[data-theme] .lrow .lr-sub .avatar.sm { width: 18px; height: 18px; font-size: 9px; }
html[data-theme] .list-card .lc-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; min-height: 0; background: var(--primary-background-color); }
html[data-theme] .list-card .lc-head .cnt { margin-left: 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
html[data-theme] .list-card .lc-head h3 { font: 500 16px/24px var(--font-family); }
html[data-theme] .list-card { border-radius: var(--border-radius-medium); border: 1px solid var(--layout-border-color); box-shadow: none; margin-bottom: 16px; overflow: hidden; }
html[data-theme] .my-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); }
html[data-theme] .topbar select, html[data-theme] .topbar .actions select {
  height: var(--tb-ctrl-h); padding: 0 28px 0 10px; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small);
  background: var(--primary-background-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23676879' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  font: var(--font-text2-normal); color: var(--primary-text-color); appearance: none; -webkit-appearance: none; cursor: pointer;
}
@media (max-width: 600px) {
  html[data-theme] .lrow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  html[data-theme] .lrow .lr-meta { grid-template-columns: 80px 64px minmax(0, 1fr); }
  html[data-theme] .my-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* task panel: the comment box above the comments */
html[data-theme] .comment-compose { border-top: 0; border-bottom: 1px solid var(--layout-border-color); padding: 12px 24px; }
html[data-theme] .comment-compose textarea { min-height: 56px; }

/* ---------- Find: filters as one row of compact controls, Clear inline ---------- */
html[data-theme] .filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; background: transparent; box-shadow: none; }
html[data-theme] .filterbar .search-wrap {
  flex: 1 1 220px; display: flex; align-items: center; gap: 6px; height: var(--tb-ctrl-h); padding: 0 8px;
  border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color);
}
html[data-theme] .filterbar .search-wrap:focus-within { border-color: var(--primary-color); }
html[data-theme] .filterbar .search-wrap svg { color: var(--icon-color); flex: none; }
html[data-theme] .filterbar .search-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: var(--font-text2-normal); color: var(--primary-text-color); padding: 0; height: auto; }
html[data-theme] .filterbar select, html[data-theme] .filterbar input[type="date"] {
  flex: none; max-width: 180px; height: var(--tb-ctrl-h); padding: 0 28px 0 10px;
  border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small);
  background: var(--primary-background-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23676879' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  font: var(--font-text2-normal); color: var(--primary-text-color); appearance: none; -webkit-appearance: none; cursor: pointer;
}
html[data-theme] .filterbar input[type="date"] { padding: 0 8px; background-image: none; }
html[data-theme] .filterbar select:hover, html[data-theme] .filterbar input[type="date"]:hover { border-color: var(--primary-text-color); }
html[data-theme] .filterbar .clear-filters { flex: none; height: var(--tb-ctrl-h); padding: 0 6px; border: 0; background: none; color: var(--primary-color); font: var(--font-text2-normal); cursor: pointer; }
html[data-theme] .filterbar .clear-filters:hover { text-decoration: underline; }
@media (max-width: 600px) {
  html[data-theme] .filterbar .search-wrap { flex: 1 1 100%; }
  html[data-theme] .filterbar select, html[data-theme] .filterbar input[type="date"] { flex: 1 1 calc(50% - 4px); max-width: none; }
}
html[data-theme] .find-count { margin: 0 0 12px; font: var(--font-text2-normal); color: var(--secondary-text-color); }
@media (max-width: 600px) {
  /* phones: a task name may take two lines in lists (the one-line rule above is for wider screens) */
  html[data-theme] .lrow .lr-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
/* app.css gave every table a 1080 px minimum width (light theme), so on a 1024 px laptop each board
   overflowed by its last columns and the Users table hid its Status column. Columns size the table. */
html[data-theme] table.grid { min-width: 0 !important; }
html[data-theme] table.grid.admin-grid td, html[data-theme] table.grid.admin-grid th { text-align: left !important; }
html[data-theme] table.grid.admin-grid td:last-child, html[data-theme] table.grid.admin-grid th:last-child { text-align: right !important; }

/* ============================================================================================
   Trash (2026-10-16) and the Undo button on toasts
   ============================================================================================ */
html[data-theme] .toast.has-action { padding-right: 8px; }
/* a long message wraps beside the button; the button keeps its label on one line (it overflowed) */
html[data-theme] .toast { max-width: min(560px, calc(100vw - 32px)); }
html[data-theme] .toast > span { flex: 1 1 auto; min-width: 0; }
html[data-theme] .toast .ico { flex: none; }
html[data-theme] .toast-action {
  flex: none; white-space: nowrap;
  margin-left: 12px; height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--border-radius-small);
  background: transparent; color: inherit; font: var(--font-text2-medium); cursor: pointer;
}
html[data-theme] .toast-action:hover { background: rgba(255, 255, 255, 0.15); }
html[data-theme] .trash-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
html[data-theme] .trash-bar .tb-search { border-color: var(--ui-border-color); }
html[data-theme] .trash-bar .tb-search-input { width: 220px; }
html[data-theme] .trash-bar select {
  height: var(--tb-ctrl-h); padding: 0 28px 0 10px; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small);
  background: var(--primary-background-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23676879' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  font: var(--font-text2-normal); color: var(--primary-text-color); appearance: none; -webkit-appearance: none; max-width: 240px;
}
html[data-theme] .trash-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 180px auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 16px; border-top: 1px solid var(--layout-border-color);
}
html[data-theme] .trash-kind { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--border-radius-small); background: var(--allgrey-background-color); color: var(--icon-color); }
html[data-theme] .trash-title { font: var(--font-text2-normal); color: var(--primary-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme] .trash-sub { display: flex; gap: 12px; font: var(--font-text3-normal); color: var(--secondary-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme] .trash-who { font: var(--font-text3-normal); color: var(--secondary-text-color); }
html[data-theme] .trash-when { color: var(--ink-faint); }
html[data-theme] .trash-actions { display: flex; gap: 6px; justify-content: flex-end; }
html[data-theme] .trash-actions .btn-sm { height: 28px; padding: 0 10px; }
html[data-theme] .trash-purge { color: var(--negative-color); }
html[data-theme] .trash-purge:hover { background: var(--danger-soft); }
@media (max-width: 600px) {
  html[data-theme] .trash-row { grid-template-columns: 32px minmax(0, 1fr); }
  html[data-theme] .trash-who { grid-column: 2; }
  html[data-theme] .trash-actions { grid-column: 1 / -1; justify-content: flex-start; }
  html[data-theme] .trash-bar .tb-search { flex: 1 1 100%; }
  html[data-theme] .trash-bar .tb-search-input { width: 100%; }
}

/* ---------- dropdown label editor (monday "Edit labels") ---------- */
html[data-theme] .modal-card.labels-card { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 64px); display: flex; flex-direction: column; }
html[data-theme] .labels-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; margin: 0 -8px; padding: 0 8px; }
html[data-theme] .labels-row {
  display: grid; grid-template-columns: 20px 32px 1fr 56px 32px; align-items: center; gap: 8px;
  padding: 4px; border-radius: var(--border-radius-small); background: var(--primary-background-color);
}
html[data-theme] .labels-row:hover { background: var(--primary-background-hover-color); }
html[data-theme] .labels-row.dragging { opacity: .45; }
html[data-theme] .labels-row.drop { box-shadow: inset 0 2px 0 var(--primary-color); }
html[data-theme] .labels-grip { display: flex; color: var(--icon-color); cursor: grab; }
html[data-theme] .labels-grip:active { cursor: grabbing; }
html[data-theme] .labels-swatch {
  width: 32px; height: 32px; border: 0; border-radius: var(--border-radius-small); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
html[data-theme] .labels-swatch:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
html[data-theme] .labels-name { height: var(--tb-ctrl-h); min-width: 0; }
html[data-theme] .labels-count { font: var(--font-text2-normal); color: var(--secondary-text-color); white-space: nowrap; text-align: right; }
html[data-theme] .labels-del { color: var(--icon-color); }
html[data-theme] .labels-del:hover { color: var(--negative-color); }
html[data-theme] .labels-add { align-self: flex-start; margin-top: 8px; color: var(--primary-color); }
html[data-theme] .labels-orphans:not(:empty) { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--layout-border-color); display: flex; flex-direction: column; gap: 6px; }
html[data-theme] .labels-orphans-head { font: var(--font-text2-bold); color: var(--secondary-text-color); }
html[data-theme] .labels-orphan { display: flex; align-items: center; gap: 8px; }
html[data-theme] .labels-orphan .chip { flex: 0 1 auto; width: auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; height: 24px; display: inline-flex; align-items: center; border-radius: var(--border-radius-small); font: var(--font-text2-normal); }
html[data-theme] .labels-orphan .btn { margin-left: auto; }
html[data-theme] .labels-error:not(:empty) { margin-top: 12px; color: var(--negative-color); font: var(--font-text2-normal); }

/* attachment chips in the comment box: remove one before posting */
html[data-theme] .comment-file-pill .pill-x {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px;
  border: 0; border-radius: 50%; background: transparent; color: var(--icon-color); cursor: pointer;
}
html[data-theme] .comment-file-pill .pill-x:hover { background: var(--primary-background-hover-color); color: var(--primary-text-color); }