/* ============================================================================
   jj-legacy.css — Re-skin layer for legacy .rr-*, .task-*, .board-*, etc.
   This file maps existing markup to the Atelier design system without
   requiring view-level rewrites. Loaded LAST to win the cascade.
   ============================================================================ */

/* ---------- Theme-aware hover/scrim tints ---------- */
:root {
  --rr-hover-tint:    oklch(22% 0.015 248 / 0.04);
  --rr-hover-tint-2:  oklch(22% 0.015 248 / 0.08);
  --rr-scrim:         oklch(22% 0.015 248 / 0.10);
  --rr-scrim-strong:  oklch(22% 0.015 248 / 0.25);
}
[data-theme="dark"] {
  --rr-hover-tint:    oklch(95% 0.006 248 / 0.04);
  --rr-hover-tint-2:  oklch(95% 0.006 248 / 0.08);
  --rr-scrim:         oklch(95% 0.006 248 / 0.10);
  --rr-scrim-strong:  oklch(95% 0.006 248 / 0.20);
}

/* ---------- Reset legacy palette references ---------- */
:root {
  --rr-navbar-bg: var(--jj-paper);
  --rr-navbar-text: var(--jj-ink);
  --rr-navbar-muted: var(--jj-ink-3);
  --rr-brand-red: var(--jj-persimmon);
  --rr-primary: var(--jj-persimmon);
  --rr-primary-hover: var(--jj-persimmon-2);
  --rr-primary-dark: var(--jj-persimmon-2);
  --rr-teal: var(--jj-moss);
  --rr-teal-soft: var(--jj-success-soft);
  --rr-red: var(--jj-rust);
  --rr-amber: var(--jj-warning);
  --rr-yellow: var(--jj-citron);
  --rr-green: var(--jj-moss);
  --rr-bg: var(--jj-bone);
  --rr-surface: var(--jj-paper);
  --rr-text: var(--jj-ink-2);
  --rr-text-strong: var(--jj-ink);
  --rr-text-muted: var(--jj-ink-3);
  --rr-border: var(--jj-rule);
  --rr-border-strong: var(--jj-rule-strong);
  --rr-tag-bg: var(--jj-success-soft);
  --rr-tag-border: color-mix(in oklch, var(--jj-success) 30%, transparent);
  --rr-tag-text: var(--jj-moss);
  --rr-shadow-sm: var(--sh-1);
  --rr-shadow-md: var(--sh-1);
  --rr-shadow-lg: var(--sh-2);
  --rr-radius-sm: var(--r-soft);
  --rr-radius: var(--r-soft);
  --rr-radius-lg: var(--r-soft);
}

/* ---------- Hide legacy header chrome (replaced by sidebar/topbar) ---------- */
.shell-header,
.shell-header-authenticated,
.shell-nav,
.shell-nav-authenticated { display: none !important; }

/* Container reset */
.container, .app-main-content > .container,
.app-main-content,
.app-main-shell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--sp-4) var(--sp-5) !important;
  max-width: none !important;
}

/* ---------- Page sections (Workspace, Me, Bulletin, Search etc.) ---------- */
.page-section,
.workspace-card,
.team-card,
.panel {
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  box-shadow: none !important;
  padding: var(--sp-4) !important;
  margin-bottom: var(--sp-4);
}

.section-heading,
.me-heading,
.bulletin-heading,
.workspace-heading {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: var(--fw-medium) !important;
  font-size: var(--t-3xl) !important;
  color: var(--jj-ink) !important;
  margin: 0 0 var(--sp-3) !important;
  letter-spacing: -0.01em;
}

/* ---------- Sub-tabs / page-tabs ---------- */
.sub-tabs,
.page-tabs {
  display: flex !important;
  align-items: center;
  gap: 0 !important;
  border-bottom: 1px solid var(--jj-rule) !important;
  margin: 0 0 var(--sp-4) !important;
  padding: 0 !important;
  background: transparent !important;
}
.sub-tabs a,
.page-tabs a,
.sub-tabs button,
.page-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px !important;
  font-size: var(--t-md) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--jj-ink-3) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  text-decoration: none !important;
  border-radius: 0 !important;
}
.sub-tabs a:hover,
.page-tabs a:hover { color: var(--jj-ink) !important; }
.sub-tabs a.is-active,
.page-tabs a.is-active,
.sub-tabs a.active,
.page-tabs a.active,
.sub-tabs [aria-selected="true"],
.page-tabs [aria-selected="true"] {
  color: var(--jj-ink) !important;
  border-bottom-color: var(--jj-persimmon) !important;
  background: transparent !important;
}

/* ---------- Buttons (Bootstrap legacy) ---------- */
.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px !important;
  font-size: var(--t-md) !important;
  font-weight: var(--fw-semibold) !important;
  border-radius: var(--r-soft) !important;
  border: 1px solid transparent !important;
  line-height: 1 !important;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease) !important;
  box-shadow: none !important;
}
.btn-primary,
.btn.btn-primary {
  background: var(--jj-persimmon) !important;
  color: var(--jj-bone) !important;
  border-color: var(--jj-persimmon) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--jj-persimmon-2) !important;
  border-color: var(--jj-persimmon-2) !important;
  color: var(--jj-bone) !important;
}
.btn-secondary,
.btn.btn-secondary {
  background: var(--jj-bone-2) !important;
  color: var(--jj-ink) !important;
  border-color: var(--jj-rule) !important;
}
.btn-secondary:hover,
.btn.btn-secondary:hover {
  background: var(--jj-bone) !important;
  border-color: var(--jj-rule-strong) !important;
  color: var(--jj-ink) !important;
}
.btn-danger,
.btn.btn-danger {
  background: var(--jj-rust) !important;
  color: var(--jj-bone) !important;
  border-color: var(--jj-rust) !important;
}
.btn-outline-primary {
  background: transparent !important;
  color: var(--jj-persimmon) !important;
  border-color: var(--jj-persimmon) !important;
}
.btn-outline-primary:hover {
  background: var(--jj-persimmon-wash) !important;
  color: var(--jj-persimmon-2) !important;
}
.btn-link {
  background: transparent !important;
  color: var(--jj-persimmon) !important;
  border: none !important;
  padding: 0 8px !important;
}
.btn-link:hover { color: var(--jj-persimmon-2) !important; }
.btn-sm { height: 28px !important; padding: 0 10px !important; font-size: var(--t-sm) !important; }
.btn-lg { height: 36px !important; padding: 0 16px !important; font-size: var(--t-base) !important; }

/* ---------- Form controls ---------- */
.form-control,
.form-select {
  height: 36px !important;
  padding: 0 12px !important;
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule-strong) !important;
  border-radius: var(--r-soft) !important;
  color: var(--jj-ink) !important;
  font-size: var(--t-base) !important;
  box-shadow: none !important;
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease) !important;
}
textarea.form-control { height: auto !important; min-height: 96px !important; padding: 10px 12px !important; }
.form-control:focus,
.form-select:focus {
  border-color: var(--jj-persimmon) !important;
  box-shadow: var(--sh-focus) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--jj-ink-4) !important; }
.form-label {
  font-size: var(--t-sm) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--jj-ink-2) !important;
  margin-bottom: 4px !important;
}
.form-check-input {
  border: 1.5px solid var(--jj-rule-strong) !important;
  background: var(--jj-paper) !important;
}
.form-check-input:checked {
  background-color: var(--jj-persimmon) !important;
  border-color: var(--jj-persimmon) !important;
}
.form-check-label { color: var(--jj-ink-2) !important; }

/* ---------- Alerts ---------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) !important;
  border-radius: var(--r-soft) !important;
  font-size: var(--t-md) !important;
  border: 1px solid !important;
}
.alert-success {
  background: var(--jj-success-soft) !important;
  color: var(--jj-moss) !important;
  border-color: color-mix(in oklch, var(--jj-success) 30%, transparent) !important;
}
.alert-danger {
  background: var(--jj-danger-soft) !important;
  color: var(--jj-rust) !important;
  border-color: color-mix(in oklch, var(--jj-danger) 30%, transparent) !important;
}
.alert-warning {
  background: var(--jj-warning-soft) !important;
  color: var(--jj-citron-2) !important;
  border-color: color-mix(in oklch, var(--jj-warning) 30%, transparent) !important;
}
.alert-info {
  background: var(--jj-info-soft) !important;
  color: var(--jj-slate) !important;
  border-color: color-mix(in oklch, var(--jj-info) 20%, transparent) !important;
}

/* ---------- Tables (Bootstrap) ---------- */
.table {
  background: transparent !important;
  color: var(--jj-ink-2) !important;
  font-size: var(--t-md) !important;
  border-collapse: collapse !important;
}
.table thead th {
  background: var(--jj-bone) !important;
  height: 36px !important;
  padding: 0 var(--sp-3) !important;
  font-size: var(--t-xs) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-uppercase) !important;
  color: var(--jj-ink-3) !important;
  border-bottom: 1px solid var(--jj-rule-strong) !important;
}
.table tbody td {
  padding: var(--sp-2) var(--sp-3) !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--jj-rule) !important;
  color: var(--jj-ink-2) !important;
}
.table tbody tr:hover { background: var(--jj-bone-2) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }

/* ---------- Modal (Bootstrap) ---------- */
.modal-content {
  background: var(--jj-paper-raised) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  box-shadow: var(--sh-2) !important;
}
.modal-header {
  border-bottom: 1px solid var(--jj-rule) !important;
  padding: var(--sp-3) var(--sp-4) !important;
}
.modal-title {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: var(--fw-medium) !important;
  font-size: var(--t-xl) !important;
  color: var(--jj-ink) !important;
}
.modal-body { padding: var(--sp-4) !important; }
.modal-footer {
  border-top: 1px solid var(--jj-rule) !important;
  padding: var(--sp-3) var(--sp-4) !important;
}
.modal-backdrop { background: var(--jj-ink) !important; }
.modal-backdrop.show { opacity: 0.40 !important; }

/* ---------- Dropdown ---------- */
.dropdown-menu {
  background: var(--jj-paper-raised) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  box-shadow: var(--sh-2) !important;
  padding: 4px !important;
}
.dropdown-item {
  padding: 6px 8px !important;
  border-radius: 4px !important;
  font-size: var(--t-md) !important;
  color: var(--jj-ink-2) !important;
  cursor: pointer;
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--jj-bone-2) !important; color: var(--jj-ink) !important; }
.dropdown-divider { border-top: 1px solid var(--jj-rule) !important; margin: 4px 0 !important; }

/* ---------- Board layout (.board-page, .board-surface, etc.) ---------- */
.board-page { background: var(--jj-bone) !important; }
.board-surface { background: transparent !important; }

.board-shell-top,
.board-surface > .board-shell-top {
  background: var(--jj-paper) !important;
  border-bottom: 1px solid var(--jj-rule) !important;
  padding: 0 var(--sp-4) !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--sp-4) !important;
}
/* Two-cluster layout: context (board + view tabs) on the left, actions
   (filters + new task) on the right. Replaces the previous 4-item
   space-between layout that left items floating in the middle. */
.board-shell-top .board-shell-left {
  display: flex !important;
  align-items: stretch !important;
  gap: var(--sp-2) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
}
.board-shell-top .board-shell-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  flex-shrink: 0 !important;
}
.board-shell-divider {
  display: inline-block;
  width: 1px;
  align-self: center;
  height: 20px;
  background: var(--jj-rule);
  margin: 0 var(--sp-2);
  flex-shrink: 0;
}
/* Tabs sit inline within the left cluster, sharing the bar's height so
   the active underline lines up with the bottom border of .board-shell-top. */
.board-shell-top .board-tabs {
  display: inline-flex !important;
  align-items: stretch !important;
  border-bottom: 0 !important;
  height: 100% !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}
.board-shell-top .board-tabs .board-tab,
.board-shell-top .board-tabs a,
.board-shell-top .board-tabs button {
  height: 100% !important;
  margin-bottom: 0 !important;
  padding: 0 var(--sp-3) !important;
  border-bottom-width: 2px !important;
}
.board-shell-top .board-tabs .is-active,
.board-shell-top .board-tabs .active,
.board-shell-top .board-tabs [aria-selected="true"] {
  color: var(--jj-ink) !important;
  border-bottom-color: var(--jj-brand) !important;
}
/* Board switcher trigger gets a subtle leading icon and tighter chrome */
.board-switcher-trigger__icon {
  width: 14px !important;
  height: 14px !important;
  color: var(--jj-ink-3) !important;
  margin-right: 4px;
}
.board-switcher-links {
  display: flex !important;
  gap: 0 !important;
  background: transparent !important;
}
.board-switcher-link {
  padding: 0 12px !important;
  height: 32px !important;
  font-size: var(--t-md) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--jj-ink-3) !important;
  border: none !important;
  background: transparent !important;
  border-radius: var(--r-soft) !important;
  display: inline-flex !important;
  align-items: center !important;
}
.board-switcher-link:hover { background: var(--jj-bone-2) !important; color: var(--jj-ink) !important; }
.board-switcher-link.is-active {
  color: var(--jj-ink) !important;
  background: var(--jj-bone-2) !important;
  font-weight: var(--fw-semibold) !important;
}

.board-tabs {
  display: flex !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--jj-rule) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.board-tabs .board-tab,
.board-tabs a,
.board-tabs button {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 40px !important;
  padding: 0 14px !important;
  font-size: var(--t-md) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--jj-ink-3) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  border-radius: 0 !important;
}
.board-tabs .is-active,
.board-tabs .active,
.board-tabs [aria-selected="true"],
.me-tabs .is-active,
.me-tabs .active,
.me-tabs [aria-selected="true"],
.workspace-tabs .is-active,
.workspace-tabs .active,
.workspace-tabs [aria-selected="true"] {
  color: var(--jj-ink) !important;
  border-bottom-color: var(--jj-persimmon) !important;
}

/* Tabs containers that style direct children */
.me-tabs,
.workspace-tabs {
  display: flex !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--jj-rule) !important;
  padding: 0 !important;
  background: transparent !important;
}
.me-tabs > a,
.me-tabs > button,
.workspace-tabs > a,
.workspace-tabs > button {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 40px !important;
  padding: 0 14px !important;
  font-size: var(--t-md) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--jj-ink-3) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  text-decoration: none !important;
  border-radius: 0 !important;
}
.me-tabs > a:hover,
.workspace-tabs > a:hover { color: var(--jj-ink) !important; }
.me-tabs > a.active,
.me-tabs > a.is-active,
.workspace-tabs > a.active,
.workspace-tabs > a.is-active {
  color: var(--jj-ink) !important;
  border-bottom-color: var(--jj-persimmon) !important;
}

/* Generic .board-tab (not under .board-tabs) — common in Me page */
.board-tab {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 40px !important;
  padding: 0 14px !important;
  font-size: var(--t-md) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--jj-ink-3) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  text-decoration: none !important;
}
.board-tab:hover { color: var(--jj-ink) !important; }
.board-tab.active,
.board-tab.is-active {
  color: var(--jj-ink) !important;
  border-bottom-color: var(--jj-persimmon) !important;
}
.board-tab-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--jj-bone-2) !important;
  border: 1px solid var(--jj-rule) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--t-xs) !important;
  color: var(--jj-ink-3) !important;
}

/* Filtros: popover oculto por padrão. Botão dispara via JS (jj-filter-toggle).
   A board-sidebar inteira fica num popover flutuante. */
.board-stage-layout {
  display: block !important;
  background: var(--jj-bone);
  height: calc(100vh - var(--jj-topbar-h) - 48px);
  position: relative;
}
.board-sidebar {
  position: fixed !important;
  z-index: var(--jj-popover-z) !important;
  top: calc(var(--jj-topbar-h) + 48px + 8px) !important;
  right: var(--sp-4) !important;
  left: auto !important;
  width: 320px !important;
  max-height: calc(100vh - var(--jj-topbar-h) - 48px - 32px) !important;
  background: var(--jj-paper-raised) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  box-shadow: var(--sh-2) !important;
  padding: var(--sp-3) !important;
  overflow-y: auto !important;
  display: none !important;
}
[data-board-filters="open"] .board-sidebar {
  display: block !important;
}
.board-sidebar.is-visible { display: block !important; }
.board-filter-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sp-3) !important;
}
.board-filter-card form {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sp-3) !important;
  width: 100%;
  margin: 0 !important;
}
/* Compact filter toolbar — hide verbose intro entirely */
.board-filter-header {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 var(--sp-2) 0 0 !important;
  flex-shrink: 0;
}
.board-filter-header strong {
  font-size: var(--t-xs) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-uppercase) !important;
  color: var(--jj-ink-3) !important;
}
/* Replace verbose strong text with compact "FILTROS" via ::before + hide original */
.board-filter-header strong { font-size: 0 !important; }
.board-filter-header strong::before {
  content: "Filtros";
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--jj-ink-3);
}
.board-filter-header span,
.board-filter-card .form-text,
.board-filter-card p,
.board-filter-card > .text-muted,
.board-filter-card > small {
  display: none !important;
}
/* Compact d-grid → flex row */
.board-filter-card .d-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--sp-2) !important;
  align-items: center;
}
/* Each filter row vertical inside popover */
.board-filter-card .form-label {
  display: block !important;
  font-size: var(--t-xs) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-uppercase) !important;
  color: var(--jj-ink-3) !important;
  margin: 0 0 4px 0 !important;
}
.board-filter-card .mb-3 {
  display: block !important;
  margin: 0 !important;
}
.board-filter-card select.form-select,
.board-filter-card .form-select {
  height: 32px !important;
  width: 100% !important;
  padding: 0 28px 0 10px !important;
  font-size: var(--t-md) !important;
  background-color: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule-strong) !important;
}
.board-filter-card select.form-select:focus {
  border-color: var(--jj-persimmon) !important;
  box-shadow: var(--sh-focus) !important;
}
.board-filter-card .btn,
.board-filter-card button[type="submit"] {
  width: 100% !important;
  height: 32px !important;
  padding: 0 12px !important;
  font-size: var(--t-md) !important;
  margin: var(--sp-2) 0 0 0 !important;
}
.board-filter-summary,
.board-filter-card > div:last-child {
  font-size: var(--t-sm) !important;
  color: var(--jj-ink-3) !important;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--jj-rule);
}
.board-filter-summary p,
.board-filter-summary small { display: block !important; margin: 0 !important; }
.board-filter-summary strong { color: var(--jj-ink) !important; }

.board-canvas { background: var(--jj-bone) !important; padding: 0 !important; }
.board-columns {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  /* padding-bottom enxuto p/ a scrollbar horizontal ficar logo abaixo das colunas. */
  padding: var(--sp-3) 0 6px !important;
  overflow-x: auto;
  min-height: 0 !important;
}

/* ---------- Kanban column ---------- */
.column-card {
  width: 300px !important;
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--jj-rule) !important;
  border-radius: 0 !important;
  padding: 0 var(--sp-3) !important;
  box-shadow: none !important;
}
.column-card:last-child { border-right: none !important; }
.column-header {
  display: flex !important;
  align-items: center;
  gap: 8px;
  height: 40px !important;
  padding: 0 4px !important;
  background: transparent !important;
  border: none !important;
}
.column-title {
  /* cabecalho de coluna = subtitulo de secao (--t-lg). Destaque por tamanho+peso. */
  font-size: var(--t-lg) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--jj-ink) !important;
  flex: 1 !important;
  margin: 0 !important;
}
.column-count-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--jj-bone-2) !important;
  border: 1px solid var(--jj-rule) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--t-xs) !important;
  color: var(--jj-ink-3) !important;
}
.column-body {
  padding: 4px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent !important;
  min-height: 80px;
}
.column-footer,
.column-add-task,
.column-add-button {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--jj-rule) !important;
  margin-top: 8px !important;
  padding: 8px 0 !important;
  color: var(--jj-ink-3) !important;
  font-size: var(--t-sm) !important;
  font-weight: var(--fw-medium) !important;
  text-align: left !important;
  width: 100%;
  cursor: pointer;
  transition: color var(--d-fast) var(--ease);
}
.column-add-button:hover { color: var(--jj-persimmon) !important; }
.column-add-button::before { content: "+ " !important; font-weight: var(--fw-semibold); }
.column-show-more {
  background: transparent !important;
  border: 1px dashed var(--jj-rule-strong) !important;
  color: var(--jj-ink-3) !important;
  border-radius: var(--r-soft);
  padding: 6px 10px;
  font-size: var(--t-sm);
  cursor: pointer;
}
.column-show-more:hover { border-color: var(--jj-persimmon) !important; color: var(--jj-persimmon) !important; }

/* ---------- Task card ---------- */
.task-card {
  position: relative !important;
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  padding: var(--sp-3) !important;
  padding-left: calc(var(--sp-3) + 4px) !important;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease) !important;
  cursor: grab;
  box-shadow: none !important;
}
.task-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: var(--r-soft) 0 0 var(--r-soft);
  background: var(--jj-ink-3);
}
.task-card[data-priority="Urgente"]::before,
.task-card.priority-urgente::before { background: var(--jj-rust); }
.task-card[data-priority="Alta"]::before,
.task-card.priority-alta::before    { background: var(--jj-persimmon); }
.task-card[data-priority="Media"]::before,
.task-card.priority-media::before   { background: var(--jj-citron); }
.task-card[data-priority="Baixa"]::before,
.task-card.priority-baixa::before   { background: var(--jj-ink-3); }
.task-card:hover {
  border-color: var(--jj-rule-strong) !important;
  box-shadow: none !important;
}
.task-card-shell:not(.is-menu-open) .task-card:hover {
  transform: translateY(-1px) !important;
}
.task-card.is-timer-running {
  border-color: var(--jj-persimmon) !important;
  border-width: 2px !important;
  animation: jjPulse 1.5s ease-in-out infinite;
}
@keyframes jjPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--jj-persimmon-wash); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

.task-title-row { padding-right: 22px; }
.task-title,
.task-title.js-open-task-detail {
  font-size: var(--t-base) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--jj-ink) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  text-decoration: none;
}
.task-title:hover { color: var(--jj-persimmon) !important; }
.task-description {
  font-size: var(--t-sm) !important;
  color: var(--jj-ink-3) !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
}
.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--t-xs);
  color: var(--jj-ink-3);
}
.task-card-hash {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--t-xs) !important;
  color: var(--jj-ink-3) !important;
  letter-spacing: 0.04em;
}
.task-card-type-chip,
.task-type-badge,
.type-badge,
.tag-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 2px 8px !important;
  font-size: var(--t-xs) !important;
  font-weight: var(--fw-medium) !important;
  border-radius: var(--r-pill) !important;
  border: 1px solid color-mix(in oklch, var(--jj-success) 30%, transparent) !important;
  background: var(--jj-success-soft) !important;
  color: var(--jj-moss) !important;
  line-height: 1.4 !important;
  white-space: nowrap;
  width: auto !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}

.task-card-avatars-row { display: inline-flex; align-items: center; gap: 0; }
.task-card-avatar,
.task-assignee-avatar,
.user-avatar,
.avatar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  border-radius: var(--r-pill) !important;
  background: var(--tag-slate) !important;
  color: var(--jj-bone) !important;
  font-size: var(--t-xs) !important;
  font-weight: var(--fw-semibold) !important;
  border: 2px solid var(--jj-paper) !important;
  text-transform: uppercase;
  margin-left: -6px;
}
.task-card-avatars-row > .task-card-avatar:first-child,
.task-assignee-avatar:first-child { margin-left: 0; }

/* Variante com foto: usa CSS variable --avatar-url setada inline pra ganhar do !important acima */
.task-card-avatar--photo {
  background-color: var(--jj-bone-2) !important;
  background-image: var(--avatar-url) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  color: transparent !important;
}
/* Variante com cor inline (CSS var --avatar-bg / --avatar-fg do usuário) */
.task-card-avatar[style*="--avatar-bg"] {
  background: var(--avatar-bg) !important;
  color: var(--avatar-fg, #fff) !important;
}

.task-card-icon-chips { display: inline-flex; gap: 4px; }
.task-card-icon {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border-radius: 4px;
  color: var(--jj-ink-3) !important;
  filter: none !important;
  opacity: 1 !important;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.task-card-icon:hover { background: var(--jj-bone-2) !important; color: var(--jj-ink) !important; }
.task-card-priority-icon[data-priority="Urgente"] { color: var(--jj-rust) !important; }
.task-card-priority-icon[data-priority="Alta"]    { color: var(--jj-persimmon) !important; }
.task-card-priority-icon[data-priority="Media"]   { color: var(--jj-citron) !important; }
.task-card-urgency-badge { color: var(--jj-rust) !important; }
.task-card-duedate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace !important;
  font-feature-settings: "tnum";
  font-size: var(--t-xs) !important;
  color: var(--jj-ink-3) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.task-card-duedate.is-overdue { color: var(--jj-rust) !important; font-weight: var(--fw-semibold); }
.task-card-duedate.is-today { color: var(--jj-persimmon) !important; font-weight: var(--fw-semibold); }

.task-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid var(--jj-rule);
  font-size: var(--t-xs);
  color: var(--jj-ink-3);
}
.task-card-footer-play {
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule-strong) !important;
  border-radius: 50% !important;
  width: 22px !important; height: 22px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--jj-brand) !important;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.task-card-footer-play .rr-icon { width: 12px; height: 12px; }
.task-card-footer-play:hover {
  background: var(--jj-brand) !important;
  color: var(--jj-paper) !important;
  border-color: var(--jj-brand) !important;
}
.task-card-footer-play.is-running {
  background: var(--jj-danger) !important;
  border-color: var(--jj-danger) !important;
  color: var(--jj-paper) !important;
}
.task-card-footer-play.is-running:hover { filter: brightness(1.08); }
.task-card-footer-timer {
  font-family: 'JetBrains Mono', monospace !important;
  font-feature-settings: "tnum";
  font-size: var(--t-sm) !important;
  color: var(--jj-ink-2) !important;
}

.task-card-dots {
  background: transparent !important;
  border: none !important;
  color: var(--jj-ink-3) !important;
  width: 22px; height: 22px;
  border-radius: 4px;
}
.task-card-dots:hover { background: var(--jj-bone-2) !important; color: var(--jj-ink) !important; }

.task-priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px !important;
  border-radius: var(--r-pill) !important;
  font-size: var(--t-xs) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jj-bone) !important;
}
.task-priority-badge[data-priority="Urgente"] { background: var(--jj-rust) !important; }
.task-priority-badge[data-priority="Alta"]    { background: var(--jj-persimmon) !important; }
.task-priority-badge[data-priority="Media"]   { background: var(--jj-citron) !important; color: #15171C !important; }
.task-priority-badge[data-priority="Baixa"]   { background: var(--jj-ink-3) !important; }

/* ---------- Task composer (inline form on column) ---------- */
.task-card-shell > form,
.column-card form.task-composer {
  background: var(--jj-paper) !important;
  border: 2px solid var(--jj-persimmon) !important;
  border-radius: var(--r-soft) !important;
  padding: var(--sp-3) !important;
  box-shadow: none !important;
}
.task-composer-input,
.column-card form input[name="Title"] {
  background: transparent !important;
  border: none !important;
  font-size: var(--t-base) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--jj-ink) !important;
  padding: 0 !important;
  height: 28px !important;
}
.task-composer-input:focus { box-shadow: none !important; outline: none !important; }
.task-composer-textarea {
  background: transparent !important;
  border: none !important;
  font-size: var(--t-sm) !important;
  color: var(--jj-ink-2) !important;
  padding: 0 !important;
  min-height: 48px !important;
  resize: none !important;
}
.task-composer-actions { display: flex; align-items: center; gap: 6px; }
.task-composer-actions .form-select,
.task-composer-actions select {
  height: 26px !important;
  font-size: var(--t-sm) !important;
  padding: 0 22px 0 8px !important;
}
.task-composer-buttons { display: flex; gap: 6px; margin-left: auto; }
.task-composer-buttons .btn {
  height: 26px !important;
  padding: 0 10px !important;
  font-size: var(--t-sm) !important;
}

/* ---------- Task card actions menu ---------- */
.task-card-actions {
  background: var(--jj-paper-raised) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  box-shadow: var(--sh-2) !important;
  padding: 4px !important;
}
.task-card-action {
  display: block;
  padding: 6px 10px !important;
  border-radius: 4px;
  font-size: var(--t-md) !important;
  color: var(--jj-ink-2) !important;
  background: transparent !important;
  text-decoration: none;
  cursor: pointer;
}
.task-card-action:hover { color: var(--jj-ink) !important; background: var(--jj-bone-2) !important; }
.task-card-action-danger { color: var(--jj-rust) !important; }
.task-card-action-danger:hover { color: var(--jj-bone) !important; background: var(--jj-rust) !important; }

/* ---------- Generic .rr-popover ---------- */
.rr-popover {
  position: fixed !important;
  z-index: var(--jj-popover-z) !important;
  background: var(--jj-paper-raised) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  box-shadow: var(--sh-2) !important;
  padding: 4px !important;
  width: 280px !important;
  max-height: 360px !important;
  overflow: hidden !important;
}
.rr-popover[hidden] { display: none !important; }
.rr-popover .rr-popover-list {
  max-height: 240px !important;
  overflow-y: auto !important;
}
.rr-popover-title,
.rr-popover-header {
  padding: 6px 8px !important;
  font-size: var(--t-xs) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-uppercase) !important;
  color: var(--jj-ink-3) !important;
  border-bottom: 1px solid var(--jj-rule);
}
.rr-popover-search {
  padding: 6px !important;
  border-bottom: 1px solid var(--jj-rule);
}
.rr-popover-search input {
  height: 32px !important;
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule-strong) !important;
  border-radius: var(--r-soft) !important;
  padding: 0 10px !important;
  font-size: var(--t-md) !important;
  width: 100%;
  color: var(--jj-ink);
}
.rr-popover-search input:focus {
  outline: none !important;
  border-color: var(--jj-persimmon) !important;
  box-shadow: var(--sh-focus) !important;
}
.rr-popover-list { max-height: 280px; overflow-y: auto; padding: 4px !important; }
.rr-popover-item,
.rr-popover-option {
  padding: 6px 8px !important;
  border-radius: 4px !important;
  font-size: var(--t-md) !important;
  color: var(--jj-ink-2) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 2px solid transparent !important;
  padding-left: 6px !important;
  background: transparent !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
.rr-popover-item:hover,
.rr-popover-option:hover { background: var(--jj-bone-2) !important; color: var(--jj-ink) !important; }
.rr-popover-item.is-selected,
.rr-popover-item[aria-selected="true"],
.rr-popover-option.is-selected,
.rr-popover-option[aria-selected="true"] {
  border-left-color: var(--jj-persimmon) !important;
  color: var(--jj-ink) !important;
  font-weight: var(--fw-medium) !important;
  background: transparent !important;
}
.rr-popover-footer {
  padding: 6px !important;
  border-top: 1px solid var(--jj-rule);
}
.rr-popover-create {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--jj-persimmon) !important;
  font-size: var(--t-md);
  font-weight: var(--fw-medium);
  border-radius: 4px;
  cursor: pointer;
}
.rr-popover-create:hover { background: var(--jj-persimmon-wash) !important; }

/* ---------- People picker (alocados / seguidores) ---------- */
.rr-people-popover { width: 300px !important; }
.rr-people-item {
  gap: 9px !important;
  padding: 5px 8px !important;
  transition: background .12s ease-out, color .12s ease-out;
}
/* Selecionado: fundo tintado + checkmark (sem o side-stripe banido). */
.rr-people-item.is-selected {
  border-left-color: transparent !important;
  background: var(--jj-persimmon-wash) !important;
  color: var(--jj-ink) !important;
}
.rr-people-item.is-selected:hover { background: var(--jj-persimmon-wash) !important; filter: brightness(.97); }
.rr-people-avatar {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: var(--fw-semibold);
  line-height: 1;
  background: var(--avatar-bg, #3D5A6C);
  color: var(--avatar-fg, #fff);
  overflow: hidden;
}
.rr-people-avatar--photo {
  background-image: var(--avatar-url);
  background-size: cover; background-position: center;
  color: transparent;
}
.rr-people-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-md);
}
.rr-people-check {
  flex: none; margin-left: 6px;
  width: 16px; height: 16px;
  color: var(--jj-persimmon);
  opacity: 0; transform: scale(.8);
  transition: opacity .12s ease-out, transform .12s ease-out;
}
.rr-people-item.is-selected .rr-people-check { opacity: 1; transform: scale(1); }
/* Dica de remover: ao passar o mouse num selecionado, o check vira "×" avermelhado. */
.rr-people-item.is-selected:hover .rr-people-check { color: var(--jj-persimmon); }
.rr-people-empty {
  padding: 14px 8px !important;
  text-align: center;
  color: var(--jj-ink-3);
  font-size: var(--t-sm);
  cursor: default;
}
/* Stack de avatares clicável (abre o picker). */
.task-detail-assignees-stack[role="button"] { cursor: pointer; border-radius: 999px; transition: opacity .12s ease-out; }
.task-detail-assignees-stack[role="button"]:hover { opacity: .85; }
.task-detail-assignees-stack[role="button"]:focus-visible { outline: 2px solid var(--jj-persimmon); outline-offset: 2px; }
.task-detail-assignees-stack.is-empty .add-link { font-size: var(--t-sm); color: var(--jj-persimmon); }

/* Popover list submit buttons (move-to-stage forms) — flat, NOT primary CTA.
   Uses :not() chains (8+) to outscore rr-theme's 6-:not() submit selector. */
body .rr-popover button[type="submit"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h),
body .rr-popover-list button[type="submit"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h),
body .rr-popover form button:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 6px 8px 6px 6px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-left: 2px solid transparent !important;
  color: var(--jj-ink-2) !important;
  font-size: var(--t-md) !important;
  font-weight: var(--fw-regular) !important;
  text-align: left !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  white-space: normal !important;
  margin: 0 !important;
  filter: none !important;
}
body .rr-popover button[type="submit"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):hover,
body .rr-popover form button:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):hover {
  background: var(--jj-bone-2) !important;
  background-color: var(--jj-bone-2) !important;
  color: var(--jj-ink) !important;
  filter: none !important;
}

/* Feedback visual no drag-and-drop de arquivos (editor da descrição e composer
   do comentário compartilham o mesmo padrão de classe). */
.rr-editor.is-drag-over,
.task-comment-composer-form.is-drag-over {
  outline: 2px dashed var(--jj-persimmon, #FF6F3C);
  outline-offset: 2px;
  background: var(--jj-persimmon-wash, rgba(255, 111, 60, 0.08));
}

/* Stack de avatares no card do board: múltiplos alocados ficam colados
   (com leve overlap estilo Linear/GitHub) em vez de espalharem pelo card.
   Sem este wrapper, o `space-between` do .task-card-avatars-row empurra
   um avatar pra cada extremo deixando um gap enorme entre eles. */
.task-card-avatars-stack { display: inline-flex; align-items: center; }
.task-card-avatars-stack > .task-card-avatar + .task-card-avatar {
  margin-left: -6px;
  box-shadow: 0 0 0 2px var(--jj-bone, #fff);
}

/* Filtro multi-seleção do board (Alocados). Lista com scroll + busca acima. */
.board-filter-multi { display: flex; flex-direction: column; gap: 6px; }
.board-filter-multi-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--jj-rule, #d1d5db);
  border-radius: 4px;
  padding: 4px;
  background: var(--jj-bone, #f9fafb);
}
.board-filter-multi-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: var(--t-md, 13px);
}
.board-filter-multi-item:hover { background: var(--jj-bone-2, #f3f4f6); }
.board-filter-multi-item input[type="checkbox"] { margin: 0; cursor: pointer; }
.board-filter-multi-item.is-hidden { display: none; }

/* Checklist inline na descrição (botão de toolbar do rich-text). */
.rr-editor .rr-checklist {
  list-style: none;
  padding-left: 0;
  margin: 0.4em 0;
}
/* IMPORTANTE: não use flex aqui — em item vazio recém-criado o caret rende
   numa posição ambígua dentro do flex container ("piscando no lugar errado").
   Layout inline natural funciona pros itens com e sem texto. */
.rr-editor .rr-checklist > li {
  margin: 2px 0;
  list-style: none;
  min-height: 1.4em;
}
.rr-editor .rr-checklist > li > input[type="checkbox"] {
  margin: 0 6px 0 0;
  cursor: pointer;
  vertical-align: middle;
}
.rr-editor .rr-checklist > li:has(> input[type="checkbox"]:checked) {
  text-decoration: line-through;
  color: var(--jj-ink-2, #888);
}

/* Stage popover items wrap in <li class=rr-popover-item> with form inside */
.rr-popover-list .rr-popover-item {
  display: block !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
/* Permite que o filtro de busca esconda itens (sem esta regra,
   o `display: block !important` acima derrota o `[hidden]`/`display: none`
   aplicado via JS, e a busca no popover de Alocados não filtra). */
.rr-popover-list .rr-popover-item[hidden],
.rr-popover-list .rr-popover-item[style*="display: none"],
.rr-popover-list .rr-popover-item[style*="display:none"] {
  display: none !important;
}
.rr-popover-list .rr-popover-item.is-selected form button,
.rr-popover-list .rr-popover-item[aria-selected="true"] form button {
  border-left-color: var(--jj-persimmon) !important;
  color: var(--jj-ink) !important;
  font-weight: var(--fw-medium) !important;
}

/* ---------- Generic .rr-modal ---------- */
/* Padrão global de modais (antes só o sprint/sla tinham esses valores via override
   inline). Wrapper full-screen SEMPRE transparente; só o backdrop escurece; só o
   dialog é o painel opaco. */
.rr-modal {
  background: transparent !important;
}
.rr-modal-backdrop,
.rr-modal-overlay {
  background: rgba(0, 0, 0, 0.40) !important;
}
.rr-modal-dialog {
  background: var(--jj-paper-raised) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  box-shadow: var(--sh-2) !important;
  color: var(--jj-ink-2) !important;
}
.rr-modal-header {
  padding: var(--sp-3) var(--sp-4) !important;
  border-bottom: 1px solid var(--jj-rule) !important;
  background: transparent !important;
}
.rr-modal-title,
.rr-modal-header h2,
.rr-modal-header h3 {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: var(--fw-medium) !important;
  font-size: var(--t-xl) !important;
  color: var(--jj-ink) !important;
}
.rr-modal-body { padding: var(--sp-4) !important; background: transparent !important; }
.rr-modal-footer {
  padding: var(--sp-3) var(--sp-4) !important;
  border-top: 1px solid var(--jj-rule) !important;
  background: transparent !important;
}
.rr-modal-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--r-soft) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--jj-ink-3) !important;
  background: transparent !important;
  border: none !important;
}
.rr-modal-close:hover { background: var(--jj-bone-2) !important; color: var(--jj-ink) !important; }

/* Modal tabs (board settings: General/Participants/Columns) */
.rr-modal-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  border-right: 1px solid var(--jj-rule);
  padding-right: var(--sp-3);
  min-width: 140px;
  background: transparent !important;
}
.rr-modal-tabs button,
.rr-modal-tabs a {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 12px !important;
  font-size: var(--t-md) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--jj-ink-2) !important;
  background: transparent !important;
  border: none !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 4px 4px 0 !important;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.rr-modal-tabs button:hover,
.rr-modal-tabs a:hover { background: var(--jj-bone-2) !important; color: var(--jj-ink) !important; }
.rr-modal-tabs button.is-active,
.rr-modal-tabs a.is-active,
.rr-modal-tabs button[aria-selected="true"] {
  background: var(--jj-persimmon-wash) !important;
  color: var(--jj-persimmon-2) !important;
  border-left-color: var(--jj-persimmon) !important;
  font-weight: var(--fw-semibold) !important;
}
.rr-modal-tab-content { background: transparent !important; }

/* Dark mode: só o dialog (painel) leva bg. O wrapper .rr-modal fica transparente
   pra não esconder o conteúdo atrás do backdrop. */
[data-theme="dark"] .rr-modal-dialog {
  background: var(--jj-paper-raised) !important;
  color: var(--jj-ink-2) !important;
}

/* ---------- Task Detail (.task-detail-*) ---------- */
.task-detail-page,
.task-detail-shell {
  background: var(--jj-bone) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  max-width: 1280px;
  margin: 0 auto;
}
.task-detail-hero {
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  padding: var(--sp-4) !important;
  margin-bottom: var(--sp-4) !important;
}
.task-detail-breadcrumb { color: var(--jj-ink-3) !important; font-size: var(--t-sm) !important; }
.task-detail-title {
  font-size: var(--t-2xl) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--jj-ink) !important;
  line-height: 1.25 !important;
  margin: 6px 0 var(--sp-3) !important;
}
.task-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.task-detail-action,
.task-detail-action-button {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 32px !important;
  padding: 0 12px !important;
  background: var(--jj-bone-2) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  font-size: var(--t-sm) !important;
  color: var(--jj-ink-2) !important;
  cursor: pointer;
  text-decoration: none;
}
.task-detail-action:hover { background: var(--jj-bone) !important; border-color: var(--jj-rule-strong) !important; color: var(--jj-ink) !important; }
.task-detail-action-primary,
.task-detail-metadata-item .inline-form-ml button[type="submit"] {
  background: var(--jj-persimmon) !important;
  color: var(--jj-bone) !important;
  border-color: var(--jj-persimmon) !important;
}

/* Padronizar linha Quadro com as outras metas: só o chip clicável,
   sem "Abrir" e "Colunas" (esses têm outras vias: breadcrumb e gear na subbar) */
.task-detail-metadata-item dd > a.task-detail-action-button { display: none !important; }
.task-detail-action-primary:hover,
.task-detail-metadata-item .inline-form-ml button[type="submit"]:hover {
  background: var(--jj-persimmon-2) !important;
  color: var(--jj-bone) !important;
}
.task-detail-action-danger {
  color: var(--jj-rust) !important;
}

.task-detail-play-button {
  width: 36px; height: 36px;
  border-radius: var(--r-pill) !important;
  background: var(--jj-persimmon) !important;
  color: var(--jj-bone) !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.task-detail-play-button:hover { background: var(--jj-persimmon-2) !important; }
.task-detail-timer-display {
  font-family: 'JetBrains Mono', monospace !important;
  font-feature-settings: "tnum";
  font-size: var(--t-xl) !important;
  color: var(--jj-ink) !important;
}

.task-detail-tabs {
  display: flex !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--jj-rule) !important;
  margin-bottom: var(--sp-4) !important;
}
.task-detail-tab {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 40px !important;
  padding: 0 14px !important;
  font-size: var(--t-md) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--jj-ink-3) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  cursor: pointer;
}
.task-detail-tab:hover { color: var(--jj-ink) !important; }
.task-detail-tab.is-active,
.task-detail-tab[aria-selected="true"] {
  color: var(--jj-ink) !important;
  border-bottom-color: var(--jj-persimmon) !important;
}

.task-detail-sidebar {
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  padding: var(--sp-2) !important;
  box-shadow: none !important;
}
.task-detail-meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  padding: 0 var(--sp-2);
  border-bottom: 1px solid var(--jj-rule);
  cursor: pointer;
  border-radius: 4px;
}
.task-detail-meta-row:last-child { border-bottom: none; }
.task-detail-meta-row:hover { background: var(--jj-bone-2); }
.task-detail-meta-label {
  font-size: var(--t-xs) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-uppercase) !important;
  color: var(--jj-ink-3) !important;
  width: 100px;
  flex-shrink: 0;
}
.task-detail-meta-value {
  font-size: var(--t-md) !important;
  color: var(--jj-ink) !important;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Task detail sidebar (legacy markup .task-detail-metadata-*) ---------- */
.task-detail-metadata-dl {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
}
.task-detail-metadata-item {
  display: grid !important;
  grid-template-columns: 110px 1fr !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 4px var(--sp-2) !important;
  border-bottom: 1px solid var(--jj-rule) !important;
  margin: 0 !important;
}
.task-detail-metadata-item:last-child { border-bottom: none !important; }
.task-detail-metadata-item dt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: var(--t-xs) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-uppercase) !important;
  color: var(--jj-ink-3) !important;
  margin: 0 !important;
}
.task-detail-metadata-item dt svg,
.task-detail-metadata-item dt [data-lucide] {
  width: 13px !important;
  height: 13px !important;
  color: var(--jj-ink-3) !important;
  flex-shrink: 0;
}
.task-detail-metadata-item dd {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap;
  font-size: var(--t-md) !important;
  color: var(--jj-ink) !important;
  margin: 0 !important;
  min-width: 0;
}
/* Chip de valor */
.task-detail-metadata-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 22px !important;
  padding: 0 8px !important;
  font-size: var(--t-xs) !important;
  font-weight: var(--fw-medium) !important;
  border-radius: var(--r-pill) !important;
  background: var(--jj-success-soft) !important;
  border: 1px solid color-mix(in oklch, var(--jj-success) 30%, transparent) !important;
  color: var(--jj-moss) !important;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-detail-metadata-badge:hover { filter: brightness(1.05); }
/* "Adicionar" link / placeholder em vazios */
.task-detail-metadata-item dd .task-detail-metadata-add,
.task-detail-metadata-item dd a:not(.task-detail-metadata-badge),
.task-detail-metadata-item dd button.task-detail-metadata-empty {
  font-size: var(--t-md) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--jj-persimmon) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  text-decoration: none;
}
.task-detail-metadata-item dd a:not(.task-detail-metadata-badge):hover { color: var(--jj-persimmon-2) !important; }
/* "Mover para próxima" — compacto inline */
.task-detail-metadata-item .inline-form-ml button[type="submit"] {
  height: 24px !important;
  padding: 0 10px !important;
  font-size: var(--t-xs) !important;
  font-weight: var(--fw-semibold) !important;
  border-radius: var(--r-soft) !important;
  border: none !important;
  background: var(--jj-persimmon) !important;
  color: var(--jj-bone) !important;
}
/* Inputs date/number na sidebar */
.task-detail-metadata-item dd input[type="date"],
.task-detail-metadata-item dd input[type="datetime-local"],
.task-detail-metadata-item dd input[type="number"],
.task-detail-metadata-item dd select {
  height: 24px !important;
  font-size: var(--t-sm) !important;
  padding: 0 6px !important;
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: 4px !important;
  color: var(--jj-ink) !important;
}
/* Date forms (Início desejado / Entrega desejada / Horas estimadas / Prioridade): kicker label + valor inline */
.task-detail-form-compact {
  display: grid !important;
  grid-template-columns: 110px 1fr !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  padding: 4px var(--sp-2) !important;
  border-bottom: 1px solid var(--jj-rule) !important;
  margin: 0 !important;
}
.task-detail-form-compact .form-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: var(--t-xs) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-uppercase) !important;
  color: var(--jj-ink-3) !important;
  margin: 0 !important;
}
.task-detail-form-compact .form-control,
.task-detail-form-compact .form-select,
.task-detail-form-compact input,
.task-detail-form-compact select {
  height: 24px !important;
  font-size: var(--t-sm) !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
}

/* Tempo nesta tarefa: barra de progresso slim */
.task-detail-metadata-progress {
  flex: 1;
  height: 4px !important;
  background: var(--jj-bone-2) !important;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.task-detail-metadata-progress > div { background: var(--jj-persimmon) !important; height: 100%; }

/* ---------- Hero da tarefa: timer + actions menores e mais sóbrios ---------- */
.task-detail-hero,
.task-detail-page > .task-detail-hero {
  padding: var(--sp-3) var(--sp-4) !important;
  border-bottom: 1px solid var(--jj-rule) !important;
}
.task-detail-play-button {
  width: 32px !important;
  height: 32px !important;
}
.task-detail-timer-display {
  font-size: var(--t-base) !important;
  letter-spacing: 0.02em !important;
}
.task-detail-action-button,
.task-detail-action-button.sm {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: var(--t-sm) !important;
  font-weight: var(--fw-medium) !important;
  border-radius: var(--r-soft) !important;
  border: 1px solid var(--jj-rule) !important;
  background: var(--jj-bone-2) !important;
  color: var(--jj-ink-2) !important;
}
.task-detail-action-button.primary {
  background: var(--jj-moss) !important;
  border-color: var(--jj-moss) !important;
  color: var(--jj-bone) !important;
}

/* Title + meta */
.task-detail-title-row { padding: var(--sp-3) var(--sp-4) 0 !important; }
.task-detail-title-text,
.task-detail-page h1,
.task-detail-page .task-detail-title-text {
  font-size: var(--t-2xl) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: 1.25 !important;
  color: var(--jj-ink) !important;
  margin: 0 !important;
}
.task-detail-meta-line,
.task-detail-page .task-detail-meta {
  font-size: var(--t-sm) !important;
  color: var(--jj-ink-3) !important;
  padding: 4px var(--sp-4) var(--sp-3) !important;
}
.task-detail-meta strong { color: var(--jj-ink-2) !important; font-weight: var(--fw-semibold) !important; }

/* Tabs do task detail (Descrição/Requisitos/Comentários/Emails/Anexos/Subtarefas/Regras) */
.task-detail-tabs .task-detail-tab,
.task-detail-page [role="tab"] {
  height: 36px !important;
  padding: 0 12px !important;
  font-size: var(--t-md) !important;
}

/* Comment thread */
.task-comment {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0 !important;
  border-bottom: 1px solid var(--jj-rule) !important;
  background: transparent !important;
}
.task-comment:last-child { border-bottom: none !important; }
.task-comment-author { font-weight: var(--fw-semibold) !important; color: var(--jj-ink) !important; }
.task-comment-time { font-size: var(--t-sm) !important; color: var(--jj-ink-3) !important; }
.task-comment-body {
  font-size: var(--t-md) !important;
  color: var(--jj-ink-2) !important;
  line-height: 1.55 !important;
}
.task-comment-body blockquote {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-style: normal;
  border-left: 2px solid var(--jj-persimmon);
  padding-left: var(--sp-3);
  margin: var(--sp-2) 0;
  color: var(--jj-ink);
}

/* ---------- Bulletin (mural) ---------- */
.bulletin-container,
.bulletin-shell { max-width: 720px; margin: 0 auto; padding: var(--sp-4); }
.bulletin-composer {
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  padding: var(--sp-4) !important;
  margin-bottom: var(--sp-5) !important;
}
.bulletin-post,
.bulletin-post-card {
  padding: var(--sp-4) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  background: var(--jj-paper) !important;
  margin-bottom: var(--sp-3) !important;
  box-shadow: none !important;
}
.bulletin-post:last-child { border-bottom: 1px solid var(--jj-rule) !important; }
.bulletin-post-card:last-child { margin-bottom: 0 !important; }
.bulletin-post-author { font-weight: var(--fw-semibold) !important; color: var(--jj-ink) !important; }
.bulletin-post-time { font-size: var(--t-sm) !important; color: var(--jj-ink-3) !important; }
.bulletin-post-body {
  font-size: var(--t-lg) !important;
  line-height: 1.6 !important;
  color: var(--jj-ink-2) !important;
}

/* ---------- Search ---------- */
.search-container,
.search-shell { max-width: 800px; margin: 0 auto; padding: var(--sp-4); }
.search-result-card {
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  padding: var(--sp-3) !important;
  margin-bottom: var(--sp-2) !important;
  box-shadow: none !important;
  transition: border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.search-result-card:hover { border-color: var(--jj-rule-strong) !important; transform: translateY(-1px); }

/* ---------- Me dashboard ---------- */
.me-tab-panel { padding: var(--sp-4) 0; }

/* ---------- Footer (unauthenticated) ---------- */
.footer {
  background: var(--jj-paper) !important;
  border-top: 1px solid var(--jj-rule) !important;
  color: var(--jj-ink-3) !important;
  padding: var(--sp-4) !important;
  font-size: var(--t-sm);
}

/* ---------- Old Auth (legacy auth.css classes - hidden inside new auth-shell) ---------- */
.auth-split {
  display: block !important;
  background: transparent !important;
  min-height: 0 !important;
}
.auth-hero { display: none !important; }
.auth-pane {
  background: transparent !important;
  padding: 0 !important;
  display: block !important;
}
.auth-card {
  background: var(--jj-paper-raised) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  padding: var(--sp-7) var(--sp-6) !important;
  max-width: 440px;
  margin: 0 auto;
  box-shadow: none !important;
}
.auth-header h1, .auth-header h2 {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: var(--fw-medium) !important;
  font-size: var(--t-3xl) !important;
  color: var(--jj-ink) !important;
  margin: 0 0 6px !important;
}
.auth-sub { font-size: var(--t-md) !important; color: var(--jj-ink-3) !important; }
.auth-label { font-size: var(--t-sm) !important; font-weight: var(--fw-medium) !important; color: var(--jj-ink-2) !important; }
.auth-input {
  height: 36px !important;
  padding: 0 12px !important;
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule-strong) !important;
  border-radius: var(--r-soft) !important;
  color: var(--jj-ink) !important;
  font-size: var(--t-base) !important;
  width: 100%;
}
.auth-input:focus {
  outline: none !important;
  border-color: var(--jj-persimmon) !important;
  box-shadow: var(--sh-focus) !important;
}
.auth-error { font-size: var(--t-sm) !important; color: var(--jj-rust) !important; }
.auth-submit {
  height: 40px !important;
  background: var(--jj-persimmon) !important;
  color: var(--jj-bone) !important;
  border: none !important;
  border-radius: var(--r-soft) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: var(--t-base) !important;
  width: 100%;
  cursor: pointer;
}
.auth-submit:hover { background: var(--jj-persimmon-2) !important; }
.auth-link { color: var(--jj-persimmon) !important; }
.auth-link:hover { color: var(--jj-persimmon-2) !important; }

/* ---------- Lookup page ---------- */
.lookup-list {
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  padding: 0 !important;
}
.lookup-item {
  padding: var(--sp-2) var(--sp-3) !important;
  border-bottom: 1px solid var(--jj-rule) !important;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.lookup-item:last-child { border-bottom: none !important; }

/* ---------- Mention ---------- */
.rr-mention,
.task-mention {
  background: var(--jj-persimmon-wash) !important;
  color: var(--jj-persimmon-2) !important;
  font-weight: var(--fw-medium) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
  text-decoration: none;
}
.rr-mention--self,
.task-mention--self {
  background: color-mix(in oklch, var(--jj-warning) 20%, transparent) !important;
  color: var(--jj-citron-2) !important;
}

/* ---------- Workspace ---------- */
.workspace-shell, .workspace-page {
  padding: 0 var(--sp-5) !important;
  max-width: 1280px;
  margin: 0 auto;
}

/* Stage requirements / checklist drawer / stuff using .rr-drawer */
.rr-drawer,
.task-detail-drawer {
  background: var(--jj-paper-raised) !important;
  border-left: 1px solid var(--jj-rule) !important;
  box-shadow: var(--sh-2) !important;
}
.rr-drawer-header,
.task-detail-drawer-header {
  padding: var(--sp-3) var(--sp-4) !important;
  border-bottom: 1px solid var(--jj-rule) !important;
}

/* Hide old footer when authenticated */
.app-main-shell + .footer { display: none !important; }

/* Task detail modal: usar margin auto em vez de transform translateX
   para que popovers position:fixed dentro NÃO sejam ancorados ao modal */
.task-detail-modal {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  max-width: min(1540px, calc(100vw - 16px)) !important;
  width: calc(100vw - 16px) !important;
  top: 8px !important;
  height: calc(100vh - 16px) !important;
}
.task-detail-modal-backdrop { backdrop-filter: none !important; }

/* Catch-all for hardcoded white surfaces in dark mode */
/* Bootstrap card always uses Atelier surface */
.card {
  background: var(--jj-paper) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  color: var(--jj-ink-2) !important;
  box-shadow: none !important;
}
.card-header { background: transparent !important; border-bottom: 1px solid var(--jj-rule) !important; color: var(--jj-ink) !important; }
.card-body { background: transparent !important; }
.card-footer { background: transparent !important; border-top: 1px solid var(--jj-rule) !important; }
.card-title, .card h3, .card h4, .card h5 { color: var(--jj-ink) !important; }

/* Generic catch-all: any descendant of .jj-app__main with white bg → paper.
   Excluding buttons, links, inputs, badges, chips, and create CTAs. */
[data-theme="dark"] .jj-app__main div.card,
[data-theme="dark"] .jj-app__main section[class*="-card"]:not([class*="task-card"]),
[data-theme="dark"] .jj-app__main section[class*="-header"],
[data-theme="dark"] .jj-app__main section[class*="-panel"],
[data-theme="dark"] .jj-app__main section[class*="-section"],
[data-theme="dark"] .jj-app__main article[class*="-card"],
[data-theme="dark"] .jj-app__main article[class*="-post"],
[data-theme="dark"] .bulletin-post-card,
[data-theme="dark"] .bulletin-header,
[data-theme="dark"] .bulletin-composer-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .workspace-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .page-section,
[data-theme="dark"] .me-summary-card,
[data-theme="dark"] .me-stat-card,
[data-theme="dark"] .stack-card,
[data-theme="dark"] .hero-panel,
[data-theme="dark"] .search-result-card,
[data-theme="dark"] .lookup-list,
[data-theme="dark"] .ob-card,
[data-theme="dark"] .auth-card {
  background: var(--jj-paper) !important;
  border-color: var(--jj-rule) !important;
  color: var(--jj-ink-2) !important;
}
/* Headings inside dark cards */
[data-theme="dark"] .jj-app__main h1,
[data-theme="dark"] .jj-app__main h2,
[data-theme="dark"] .jj-app__main h3,
[data-theme="dark"] .jj-app__main h4,
[data-theme="dark"] .jj-app__main strong { color: var(--jj-ink) !important; }
[data-theme="dark"] .bulletin-post-card h1,
[data-theme="dark"] .bulletin-post-card h2,
[data-theme="dark"] .bulletin-post-card h3,
[data-theme="dark"] .bulletin-post-card .bulletin-post-author,
[data-theme="dark"] .panel h1,
[data-theme="dark"] .panel h2,
[data-theme="dark"] .workspace-card h1,
[data-theme="dark"] .me-summary-card h1,
[data-theme="dark"] .me-stat-card h1 {
  color: var(--jj-ink) !important;
}

/* Board switcher gear button (board settings) */
.board-switcher-gear,
.js-board-settings-open {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  background: var(--jj-bone-2) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  color: var(--jj-ink-2) !important;
  cursor: pointer;
}
.board-switcher-gear:hover,
.js-board-settings-open:hover {
  background: var(--jj-bone) !important;
  border-color: var(--jj-rule-strong) !important;
  color: var(--jj-ink) !important;
}

.board-switcher-trigger,
.js-popover-trigger.board-switcher-trigger {
  background: var(--jj-bone-2) !important;
  border: 1px solid var(--jj-rule) !important;
  border-radius: var(--r-soft) !important;
  color: var(--jj-ink) !important;
  height: 32px !important;
  padding: 0 12px !important;
}
.board-switcher-trigger:hover { background: var(--jj-bone) !important; border-color: var(--jj-rule-strong) !important; }

.board-switcher-new {
  background: var(--jj-persimmon) !important;
  color: var(--jj-bone) !important;
  border: none !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: var(--r-soft) !important;
}
.board-switcher-new:hover { background: var(--jj-persimmon-2) !important; }

/* Board subnav filters trigger — secondary style */
.board-subnav-filters {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px !important;
  background: var(--jj-paper) !important;
  color: var(--jj-ink-2) !important;
  border: 1px solid var(--jj-rule-strong) !important;
  border-radius: var(--r-soft) !important;
  font-size: var(--t-md) !important;
  font-weight: var(--fw-medium) !important;
  cursor: pointer;
  /* margin-right was 8px from when this was loose in space-between. The
     parent .board-shell-right now handles spacing via gap. */
  margin-right: 0 !important;
}
.board-subnav-filters:hover {
  background: var(--jj-bone) !important;
  border-color: var(--jj-rule-strong) !important;
}
.board-subnav-filters[aria-expanded="true"] {
  background: var(--jj-persimmon-wash) !important;
  color: var(--jj-persimmon-2) !important;
  border-color: var(--jj-persimmon) !important;
}

/* Board subnav create button — uses its own class, was Atlassian blue */
.board-subnav-create,
.js-open-backlog-composer {
  background: var(--jj-persimmon) !important;
  color: var(--jj-bone) !important;
  border: none !important;
  border-radius: var(--r-soft) !important;
  height: 32px !important;
  padding: 0 14px !important;
  font-size: var(--t-md) !important;
  font-weight: var(--fw-semibold) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: none !important;
}
.board-subnav-create:hover,
.js-open-backlog-composer:hover {
  background: var(--jj-persimmon-2) !important;
  color: var(--jj-bone) !important;
}

/* ---------- Notification panel (rr-notif-*) ---------- */
.rr-notif-badge {
  display: none;
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--jj-rust);
  color: var(--jj-bone);
  font-size: var(--t-xs);
  font-weight: var(--fw-bold);
  font-family: 'JetBrains Mono', monospace;
  align-items: center;
  justify-content: center;
}
.rr-notif-badge.is-visible { display: inline-flex; }
#jj-notifications-trigger { position: relative; }

.rr-notif-panel {
  display: none;
  flex-direction: column;
}
[data-sidebar="expanded"] .rr-notif-panel { /* no-op: panel is now in header, not sidebar-relative */ }
.rr-notif-panel.is-open { display: flex; }
.rr-notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--jj-rule);
}
.rr-notif-panel-header h3 {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-style: normal;
  font-weight: var(--fw-medium);
  font-size: var(--t-lg);
  color: var(--jj-ink);
  margin: 0;
}
.rr-notif-panel-header button {
  background: transparent;
  border: none;
  color: var(--jj-persimmon);
  font-size: var(--t-sm);
  cursor: pointer;
}
.rr-notif-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}
.rr-notif-item {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 4px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--d-fast) var(--ease);
}
.rr-notif-item:hover { background: var(--jj-bone-2); }
.rr-notif-item.is-unread { border-left-color: var(--jj-persimmon); background: var(--jj-persimmon-wash); }
.rr-notif-title { font-size: var(--t-md); font-weight: var(--fw-semibold); color: var(--jj-ink); margin: 0 0 2px; }
.rr-notif-message { font-size: var(--t-sm); color: var(--jj-ink-2); margin: 0 0 2px; line-height: 1.4; }
.rr-notif-preview {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-style: normal;
  font-size: var(--t-sm);
  color: var(--jj-ink-3);
  margin: 4px 0;
}
.rr-notif-meta { font-size: var(--t-xs); color: var(--jj-ink-3); margin: 2px 0 0; }
.rr-notif-empty { padding: var(--sp-5); text-align: center; color: var(--jj-ink-3); font-size: var(--t-md); }

/* ---------- Toasts (rr-toast-stack) ---------- */
.rr-toast-stack {
  position: fixed;
  bottom: var(--sp-4);
  right: var(--sp-4);
  z-index: var(--jj-toast-z);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
  max-width: 360px;
}
.rr-toast {
  pointer-events: auto;
  width: 320px;
  /* Cores FIXAS (nao usar --jj-ink/--jj-bone): essas variaveis invertem no tema escuro,
     deixando o toast branco com texto claro (ilegivel — bug #19305). O design do toast
     pressupoe fundo escuro + texto claro, entao fixamos para ficar legivel nos 2 temas. */
  background: #1f2733 !important;
  color: #f4efe6 !important;
  border-radius: var(--r-soft) !important;
  padding: var(--sp-3) var(--sp-4) !important;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-md);
  animation: jj-toast-in var(--d-base) var(--ease);
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: var(--sh-2);
  transition: opacity .3s ease, transform .3s ease;
}
/* fade-out do auto-dismiss */
.rr-toast--leaving {
  opacity: 0 !important;
  transform: translateX(12px) !important;
}
.rr-toast::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--jj-citron);
  border-radius: var(--r-soft) 0 0 var(--r-soft);
}
.rr-toast--mention::before { background: var(--jj-persimmon); }
.rr-toast--card::before { background: var(--jj-moss); }
.rr-toast--board::before { background: var(--jj-citron); }
.rr-toast--removed::before { background: var(--jj-rust); }
.rr-toast a { color: #f4efe6; text-decoration: none; display: block; }
.rr-toast-title { font-weight: var(--fw-semibold); margin: 0; color: #f4efe6; }
.rr-toast-message { font-size: var(--t-sm); color: rgba(244, 239, 230, 0.85); margin: 2px 0; }
.rr-toast-preview {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-style: normal;
  font-size: var(--t-sm);
  color: rgba(244, 239, 230, 0.7);
  margin: 4px 0;
}
.rr-toast-meta { font-size: var(--t-xs); color: rgba(244, 239, 230, 0.55); margin: 0; }
.rr-toast-close {
  position: absolute;
  top: 6px; right: 8px;
  background: transparent;
  border: none;
  color: rgba(244, 239, 230, 0.6);
  font-size: var(--t-xl);
  cursor: pointer;
  width: 22px; height: 22px;
  border-radius: 4px;
  line-height: 1;
}
.rr-toast-close:hover { background: rgba(244, 239, 230, 0.1); color: #f4efe6; }

/* ─────────────────────────────────────────────────────────────────────────────
   Densidade do card do Kanban
   Descricao removida da view; aqui apertamos padding/gaps/tipografia para caber
   mais cartoes por coluna sem perder respiro. Valores moderados (estilo Linear):
   reducao real de altura, ainda confortavel ao toque e legivel.
   ───────────────────────────────────────────────────────────────────────────── */
.task-card {
  padding: 9px 10px 8px !important;
  padding-left: 13px !important; /* folga p/ a stripe de prioridade (::before 3px) */
  gap: 6px !important;
}
.task-card-shell { gap: 0.4rem; }
/* titulo: um pouco menor e mais justo, ainda com 2 linhas confortaveis */
.task-title,
.task-title.js-open-task-detail {
  font-size: var(--t-md) !important;
  line-height: 1.3 !important;
}
.task-title-row { padding-right: 20px; }
/* chip "Padrao" / tipo: menor, menos volume vertical */
.task-card-type-chip {
  font-size: var(--t-xs) !important;
  padding: 1px 6px !important;
  letter-spacing: 0.02em;
}
/* linha de avatares + prazo: menos respiro */
.task-card-avatars-row { gap: 6px; }
.task-card-avatar,
.task-card-avatar--photo {
  width: 22px !important;
  height: 22px !important;
  font-size: var(--t-xs) !important;
}
.task-card-duedate { font-size: var(--t-xs) !important; }
/* rodape (timer / subtarefas / prioridade): compacto, mesma altura de toque */
.task-card-footer { gap: 6px !important; margin-top: 1px; }
.task-card-footer-timer,
.task-card-footer-sub,
.task-card-footer-priority { font-size: var(--t-xs) !important; }
/* botao de menu (3 pontos) levemente mais perto do topo */
.task-card-dots { top: 6px !important; right: 6px !important; }