/* =========================================================
   JumpJump — RunRun-inspired theme
   Carregado DEPOIS de app.css para reskinagem do shell.
   ========================================================= */

:root {
    --rr-bg: #F0F4F9;
    --rr-surface: var(--rr-surface);
    --rr-border: #E0E6ED;
    --rr-border-strong: var(--rr-border-strong);
    --rr-text: #54677B;
    --rr-text-strong: #13232E;
    --rr-text-muted: #8492A6;
    --rr-navbar-bg: #132D42;
    --rr-navbar-text: var(--rr-surface);
    --rr-navbar-muted: #8FA3B8;
    --rr-brand-red: var(--rr-brand-red);
    --rr-primary: var(--rr-primary);
    --rr-primary-hover: #007DBB;
    --rr-primary-dark: #0064A0;
    --rr-teal: #00B494;
    --rr-teal-soft: #E0F5EF;
    --rr-yellow: #FFC940;
    --rr-red: var(--rr-brand-red);
    --rr-amber: var(--rr-amber);
    --rr-green: #2ECC71;
    --rr-tag-bg: #F3F7EF;
    --rr-tag-border: #BDD4A5;
    --rr-tag-text: #4A6A2D;
    --rr-shadow-sm: 0 1px 2px rgba(16, 32, 48, 0.06);
    --rr-shadow-md: 0 2px 8px rgba(16, 32, 48, 0.08);
    --rr-shadow-lg: 0 8px 24px rgba(16, 32, 48, 0.15);
    --rr-radius-sm: 3px;
    --rr-radius: 4px;
    --rr-radius-lg: 8px;
    --rr-navbar-height: 48px;
    --rr-subbar-height: 44px;
}

html, body {
    font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--t-base);
    color: var(--jj-ink-2);
    background: var(--jj-surface);
    letter-spacing: 0;
}

/* ========== Lucide icons ========== */
.rr-icon, [data-lucide] {
    display: inline-block;
    width: 14px;
    height: 14px;
    stroke-width: 2;
    vertical-align: -2px;
    flex-shrink: 0;
}
.rr-icon-lg { width: 18px !important; height: 18px !important; }
button > .rr-icon, .rr-tb-btn > .rr-icon { pointer-events: none; }
.task-detail-play-button .rr-icon { width: 16px; height: 16px; }
.shell-icon-button .rr-icon { width: 16px; height: 16px; color: var(--jj-bone); }
.task-card .rr-icon { width: 12px; height: 12px; }
.rr-popover-item .rr-icon { color: var(--rr-text-muted); }
.rr-popover-item.is-selected .rr-icon { color: var(--rr-primary-hover); }

body {
    margin: 0;
}

* { box-sizing: border-box; }

a { color: var(--rr-primary-hover); text-decoration: none; }
a:hover { color: var(--rr-primary); text-decoration: none; }

h1, h2, h3, h4, h5 {
    color: var(--rr-text-strong);
    font-weight: 700;
}

/* =========================================================
   HEADER / SHELL
   ========================================================= */

.shell-header,
.shell-header-authenticated {
    background: var(--rr-navbar-bg) !important;
    color: var(--rr-navbar-text);
    height: var(--rr-navbar-height);
    border: 0;
    box-shadow: 0 1px 0 var(--rr-scrim-strong);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.shell-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: var(--rr-navbar-height);
    max-width: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

.shell-brand-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 1 1 auto;
}

.shell-nav-authenticated .shell-brand,
.shell-header-authenticated .shell-brand,
.shell-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: var(--rr-navbar-height) !important;
    background: var(--rr-brand-red) !important;
    color: transparent !important;
    font-size: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
.shell-brand::before {
    content: "J";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jj-bone);
    font-family: 'Pacifico', 'Inter', cursive;
    font-size: var(--t-3xl);
    font-weight: 700;
    letter-spacing: -1px;
}

.shell-links {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0 8px;
    gap: 0;
}

.shell-links li { display: flex; align-items: stretch; }

.shell-nav-authenticated .shell-links .nav-link,
.shell-nav-authenticated .app-nav .nav-link,
.shell-links .nav-link,
.shell-links a.nav-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    height: var(--rr-navbar-height) !important;
    color: var(--rr-navbar-text) !important;
    font-weight: 600 !important;
    font-size: var(--t-md) !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    text-decoration: none !important;
    transition: background .15s !important;
    margin: 0 !important;
}
.shell-nav-authenticated .app-nav { gap: 0 !important; margin-left: 0 !important; }

.shell-links .nav-link:hover {
    background: rgba(255,255,255,0.05);
    color: var(--jj-bone) !important;
}

.shell-links .nav-link.active,
.shell-links .nav-link[aria-current="page"] {
    color: var(--rr-primary) !important;
    border-bottom-color: var(--rr-primary);
    background: rgba(0,154,231,0.06);
}

.shell-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px 0 8px;
    color: var(--rr-navbar-text);
}

.shell-nav-authenticated .shell-cycle-chip,
.shell-cycle-chip {
    background: var(--rr-teal) !important;
    color: var(--jj-bone) !important;
    border: 0 !important;
    height: 24px !important;
    padding: 0 10px !important;
    border-radius: 2px !important;
    font-size: var(--t-xs) !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    cursor: default !important;
    white-space: nowrap !important;
    line-height: 24px !important;
}

.shell-nav-authenticated .shell-search,
.shell-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 3px !important;
    height: 30px !important;
    min-width: 260px !important;
    width: 260px !important;
    padding: 0 8px 0 30px !important;
    transition: background .15s, border-color .15s !important;
    margin: 0 !important;
    gap: 0 !important;
}
.shell-search:focus-within {
    background: var(--rr-surface);
}
.shell-search input,
.shell-search input[type="search"] {
    background: transparent;
    border: 0;
    outline: 0;
    color: inherit;
    font-size: var(--t-md);
    height: 100%;
    width: 100%;
    padding: 0;
}
.shell-search:focus-within input { color: var(--rr-text-strong); }
.shell-search input::placeholder { color: rgba(255,255,255,0.55); }
.shell-search:focus-within input::placeholder { color: var(--rr-text-muted); }

.shell-search-submit {
    position: absolute;
    left: 0; top: 0;
    width: 30px; height: 100%;
    background: transparent; border: 0; padding: 0;
    color: rgba(255,255,255,0.7);
    display: inline-flex; align-items: center; justify-content: center;
}
.shell-search:focus-within .shell-search-submit { color: var(--rr-text-muted); }
.shell-search-icon { font-size: var(--t-base); }

.shell-nav-authenticated .shell-icon-button,
.shell-icon-button,
a.shell-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--jj-bone) !important;
    border: 0 !important;
    border-radius: 3px !important;
    font-size: 0 !important;
    cursor: pointer !important;
    transition: background .15s !important;
    position: relative !important;
}
.shell-icon-button::before {
    font-size: var(--t-lg);
    font-weight: 400;
    line-height: 1;
}
.shell-nav-authenticated .shell-icon-button:hover,
.shell-icon-button:hover { background: rgba(255,255,255,0.08) !important; }

/* ícones do shell-icon-button agora via Lucide SVG */

.shell-nav-authenticated .shell-create-button,
.shell-create-button,
a.shell-create-button {
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    padding: 0 14px !important;
    background: var(--rr-primary) !important;
    color: var(--jj-bone) !important;
    border: 0 !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    font-size: var(--t-md) !important;
    text-decoration: none !important;
    margin-left: 4px !important;
    white-space: nowrap !important;
    line-height: 32px !important;
}
.shell-nav-authenticated .shell-create-button:hover,
.shell-create-button:hover { background: var(--rr-primary-hover) !important; color: var(--jj-bone) !important; }

/* LoginPartial ajustes */
.shell-tools .navbar-nav { flex-direction: row; gap: 4px; align-items: center; margin: 0 0 0 8px; }
.shell-tools .nav-item { list-style: none; }
.shell-tools .nav-item a,
.shell-tools .nav-item button,
.shell-tools .nav-link {
    color: var(--rr-navbar-text) !important;
    font-size: var(--t-md);
    padding: 4px 8px;
}

/* shell-icon-button children já vêm como SVG */

/* =========================================================
   MAIN SHELL
   ========================================================= */

.app-main-shell {
    background: var(--rr-bg);
    min-height: calc(100vh - var(--rr-navbar-height));
}

.app-main-content {
    padding: 0;
    max-width: none;
}

/* =========================================================
   BOARD PAGE
   ========================================================= */

.board-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--rr-navbar-height));
    background: var(--rr-bg);
}

.board-alert {
    margin: 12px 16px 0;
}

.board-surface {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background: var(--rr-bg);
    min-height: 0;
}

.board-page-heading { display: none; } /* título vai no sub-bar */

.board-shell-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--rr-surface);
    border-bottom: 1px solid var(--rr-border);
    padding: 0 16px;
    height: var(--rr-subbar-height);
    gap: 16px;
}

.board-switcher-links {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-base);
    font-weight: 700;
    color: var(--rr-text-strong);
}

.board-switcher-link {
    color: var(--rr-text);
    padding: 4px 8px;
    border-radius: 3px;
    text-decoration: none;
}
.board-switcher-link.is-active {
    color: var(--rr-text-strong);
    font-weight: 700;
}
.board-switcher-link:hover { background: var(--rr-bg); }

.board-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    height: var(--rr-subbar-height);
}

.board-tabs .board-tab,
.board-tabs a,
.board-tabs button {
    display: inline-flex;
    align-items: center;
    height: var(--rr-subbar-height);
    padding: 0 14px;
    color: var(--rr-text);
    font-size: var(--t-base);
    font-weight: 600;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}
.board-tabs .is-active,
.board-tabs .active,
.board-tabs [aria-selected="true"] {
    color: var(--rr-primary-hover);
    border-bottom-color: var(--rr-primary-hover);
}
.board-tab-badge {
    margin-left: 6px;
    background: var(--rr-primary);
    color: var(--jj-bone);
    font-size: var(--t-xs);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    letter-spacing: 0.3px;
}

/* board body: sidebar + canvas */
.board-stage-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.board-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--rr-surface);
    border-right: 1px solid var(--rr-border);
    padding: 16px 14px;
    overflow-y: auto;
}

.board-filter-card { background: transparent; box-shadow: none; padding: 0; border: 0; }
.board-filter-header {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--rr-text-muted);
    margin-top: 14px;
    margin-bottom: 6px;
}
.board-filter-card .form-label {
    font-size: var(--t-xs);
    color: var(--rr-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.board-filter-card .form-select,
.board-filter-card .form-control {
    height: 32px;
    font-size: var(--t-md);
    border: 1px solid var(--rr-border);
    border-radius: 3px;
    color: var(--rr-text-strong);
}

.board-canvas {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 16px;
}

/* columns */
.board-columns {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-height: calc(100vh - var(--rr-navbar-height) - var(--rr-subbar-height) - 32px);
    padding-bottom: 16px;
}

.column-card {
    display: flex;
    flex-direction: column;
    width: 280px;
    flex-shrink: 0;
    background: var(--rr-bg);
    border-radius: var(--rr-radius);
    padding: 0;
    max-height: calc(100vh - var(--rr-navbar-height) - var(--rr-subbar-height) - 48px);
}

.column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid transparent;
}
.column-title {
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--rr-text-strong);
    letter-spacing: 0.2px;
    text-transform: none;
    margin: 0;
}
.column-count-badge {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--rr-text-muted);
    background: transparent;
    padding: 0;
}

.column-body {
    padding: 4px 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* cards */
.task-card-shell { display: block; }

.task-card-type-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--t-xs);
    font-weight: 600;
    padding: 1px 6px;
    background: var(--rr-tag-bg);
    color: var(--rr-tag-text);
    border: 1px solid var(--rr-tag-border);
    border-radius: 3px;
    margin-bottom: 6px;
}
.task-card-type-chip::before { content: ""; }

/* Vínculo com a tarefa pai exibido no card (Kanban) e na célula de título (Lista). */
.task-card-parent {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    margin: 2px 0 4px;
    padding: 1px 6px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--rr-text-muted);
    background: var(--rr-bg);
    border: 1px solid var(--rr-border);
    border-radius: 3px;
    text-decoration: none;
    line-height: 1.3;
}
.task-card-parent:hover { color: var(--rr-text-strong); border-color: var(--rr-text-muted); }
.task-card-parent .rr-icon { width: 12px; height: 12px; flex: 0 0 auto; }
.task-card-parent-hash { font-weight: 700; flex: 0 0 auto; }
.task-card-parent-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.task-list-parent { max-width: 320px; }

.task-card-hash {
    color: var(--rr-text-muted);
    font-weight: 700;
    margin-right: 2px;
}

.task-card-avatars-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 6px;
}
.task-card-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--rr-red);
    color: var(--jj-bone);
    font-size: var(--t-xs);
    font-weight: 700;
    flex-shrink: 0;
}
.task-card-avatar--photo {
    color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.task-card-icon-chips {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.task-card-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-xs);
    color: var(--rr-text-muted);
    cursor: pointer;
    border-radius: 3px;
    filter: grayscale(0.4);
    opacity: 0.7;
}
.task-card-icon:hover { background: var(--rr-bg); opacity: 1; }
.task-card-priority-icon[data-priority="Urgente"] { color: var(--rr-red); opacity: 1; filter: none; }
.task-card-priority-icon[data-priority="Alta"]    { color: var(--rr-amber); opacity: 1; filter: none; }

.task-card-urgency-badge { color: var(--rr-red) !important; opacity: 1 !important; filter: none !important; cursor: default; }

.task-card-duedate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--jj-bone-2);
    border: 1px solid var(--jj-rule-strong);
    color: var(--jj-citron-2);
    border-radius: 12px;
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: lowercase;
}

/* Chip de SLA no cartão. Reusa o formato pill do due-date, variando a cor pelo estado. */
.task-card-sla {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--t-xs);
    font-weight: 700;
    border: 1px solid transparent;
}
.task-card-sla .rr-icon { width: 12px; height: 12px; }
.task-card-sla.sla-ontrack { color: var(--rr-text-muted); border-color: var(--rr-border); }
.task-card-sla.sla-warning { color: #8a6d00; background: #fff4cc; border-color: var(--rr-amber); }
.task-card-sla.sla-breach  { color: #fff; background: var(--rr-red); border-color: var(--rr-red); }

/* Relatório de SLA */
.sla-metric {
    min-width: 120px;
    padding: 14px 16px;
    border: 1px solid var(--rr-border);
    border-radius: 10px;
    background: var(--rr-surface);
    text-align: center;
}
.sla-warning { color: #8a6d00; font-weight: 700; }
.sla-breach { color: var(--rr-red); font-weight: 700; }

.task-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.task-card-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--r-pill);
    background: color-mix(in oklch, var(--tag-color, var(--jj-brand)) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--tag-color, var(--jj-brand)) 35%, transparent);
    color: var(--jj-ink);
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-card-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tag-color, var(--jj-brand));
    flex-shrink: 0;
}
.task-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--rr-border);
    font-size: var(--t-xs);
    color: var(--rr-text-muted);
}
.task-card-footer-play {
    width: 22px; height: 22px;
    padding: 0;
    border: 1px solid var(--rr-border);
    background: var(--rr-surface);
    border-radius: 50%;
    color: var(--jj-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    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);
    color: var(--jj-paper);
    border-color: var(--jj-brand);
}
.task-card-footer-play.is-running {
    background: var(--jj-danger);
    border-color: var(--jj-danger);
    color: var(--jj-paper);
}
.task-card-footer-play.is-running:hover { filter: brightness(1.08); }
.task-card-footer-play:focus-visible {
    outline: 2px solid var(--jj-focus-ring);
    outline-offset: 2px;
}
.task-card-footer-timer {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    font-weight: 600;
    color: var(--jj-ink-2);
    font-feature-settings: "tnum";
}
.task-card.is-timer-running { border: 2px solid var(--jj-danger) !important; animation: rrPulse 1.2s infinite; }
@keyframes rrPulse {
    0%,100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--jj-danger) 50%, transparent); }
    50%     { box-shadow: 0 0 0 5px color-mix(in oklch, var(--jj-danger) 0%, transparent); }
}
.task-card-footer-sub { color: var(--rr-text-muted); }

.task-card-priority-wrap {
    margin-left: auto;
    position: relative;
    display: inline-flex;
}
.task-card-footer-priority {
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    color: var(--jj-paper);
    border: 0;
    cursor: pointer;
    transition: filter var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.task-card-footer-priority:hover { filter: brightness(1.08); }
.task-card-footer-priority:focus-visible {
    outline: 2px solid var(--jj-focus-ring);
    outline-offset: 2px;
}
.task-card-footer-priority[data-priority="Urgente"],
.task-card-priority-dot[data-priority="Urgente"] { background: var(--jj-danger); }
.task-card-footer-priority[data-priority="Alta"],
.task-card-priority-dot[data-priority="Alta"]    { background: oklch(62% 0.16 50); }
.task-card-footer-priority[data-priority="Media"],
.task-card-priority-dot[data-priority="Media"]   { background: var(--jj-warning); }
.task-card-footer-priority[data-priority="Baixa"],
.task-card-priority-dot[data-priority="Baixa"]   { background: var(--jj-ink-3); }

.task-card-priority-popover {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    z-index: 50;
    min-width: 140px;
    background: var(--jj-paper-raised);
    border: 1px solid var(--jj-rule);
    border-radius: var(--r-soft);
    box-shadow: var(--sh-2);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.task-card-priority-popover[hidden] { display: none; }
.task-card-priority-option-form { display: contents; }
.task-card-priority-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: var(--jj-ink);
    font-size: var(--t-sm);
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    text-transform: none;
    letter-spacing: 0;
}
.task-card-priority-option:hover { background: var(--jj-surface-2); }
.task-card-priority-option.is-selected {
    background: var(--jj-brand-soft);
    color: var(--jj-brand-ink);
    font-weight: 600;
}
.task-card-priority-option.is-selected::after {
    content: "✓";
    margin-left: auto;
    color: var(--jj-brand);
    font-weight: 700;
}
.task-card-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* Column editor: highlight the row marked as "Final" so it's obvious which
   column is the delivery target. Renaming/reordering does not affect this. */
.rr-col-row.is-final {
    background: var(--jj-success-soft) !important;
    border-color: color-mix(in oklch, var(--jj-success) 35%, transparent) !important;
}
.rr-col-row.is-final input[data-col-final] { accent-color: var(--jj-success); }
.rr-col-row.is-final .rr-col-final-toggle { color: var(--jj-success) !important; font-weight: 600; }

/* Share button feedback */
.js-task-share {
    transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.js-task-share .rr-icon { width: 14px; height: 14px; margin-right: 4px; }
.js-task-share.is-copied {
    background: var(--jj-success-soft) !important;
    border-color: color-mix(in oklch, var(--jj-success) 35%, transparent) !important;
    color: var(--jj-success) !important;
}
.js-task-share.is-error {
    background: var(--jj-danger-soft) !important;
    border-color: color-mix(in oklch, var(--jj-danger) 35%, transparent) !important;
    color: var(--jj-danger) !important;
}

.task-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    padding: 10px 12px;
    box-shadow: var(--rr-shadow-sm);
    position: relative;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s, transform .1s;
}
.task-card:hover {
    box-shadow: var(--rr-shadow-md);
    border-color: var(--rr-border-strong);
}

.task-card-dots {
    position: absolute;
    top: 6px; right: 6px;
    width: 22px; height: 22px;
    background: transparent;
    border: 0;
    color: var(--rr-text-muted);
    font-size: var(--t-lg);
    cursor: pointer;
    border-radius: 3px;
    line-height: 1;
}
.task-card-dots:hover { background: var(--rr-bg); color: var(--rr-text-strong); }

.task-title-row { padding-right: 22px; }
.task-title,
.task-title.js-open-task-detail {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    font-size: var(--t-md);
    font-weight: 600;
    color: var(--rr-text-strong);
    line-height: 1.35;
    cursor: pointer;
}
.task-title:hover { color: var(--rr-primary-hover); }

.task-description {
    font-size: var(--t-sm);
    color: var(--rr-text);
    margin: 6px 0 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    align-items: center;
}

.task-priority-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 10px;
    color: var(--jj-bone);
}
.task-priority-badge[data-priority="Urgente"] { background: var(--rr-red); }
.task-priority-badge[data-priority="Alta"]    { background: var(--rr-amber); }
.task-priority-badge[data-priority="Media"]   { background: var(--rr-yellow); color: #5c4100; }
.task-priority-badge[data-priority="Baixa"]   { background: var(--rr-text-muted); }

/* Composer inline (+ Adicionar tarefa) */
.task-card-shell > form,
form.column-add-form,
.column-card form.task-composer {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px !important;
    background: var(--rr-surface) !important;
    border: 1px solid var(--rr-border) !important;
    border-radius: 4px !important;
    margin-bottom: 6px !important;
}
.task-composer-input,
.column-card form input[name="Title"] {
    width: 100% !important;
    height: 32px !important;
    padding: 0 10px !important;
    border: 1px solid var(--rr-border) !important;
    border-radius: 3px !important;
    font-size: var(--t-md) !important;
}
.task-composer-textarea,
.column-card form textarea[name="Description"] {
    width: 100% !important;
    min-height: 50px !important;
    padding: 6px 10px !important;
    border: 1px solid var(--rr-border) !important;
    border-radius: 3px !important;
    font-size: var(--t-sm) !important;
    resize: vertical !important;
}
.task-composer-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}
.task-composer-actions .form-select,
.task-composer-actions select {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: 90px !important;
    height: 28px !important;
    padding: 0 20px 0 6px !important;
    font-size: var(--t-xs) !important;
    border: 1px solid var(--rr-border) !important;
    border-radius: 3px !important;
    min-height: 28px !important;
}
.task-composer-buttons {
    display: inline-flex !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
}
.task-composer-buttons .btn,
.task-composer-buttons button {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: var(--t-xs) !important;
    border-radius: 3px !important;
}
.task-composer-buttons .btn-link {
    background: transparent !important;
    border: 0 !important;
    color: var(--rr-text-muted) !important;
}
.task-composer-buttons .btn-link:hover { color: var(--rr-text-strong) !important; }

.task-meta-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--t-xs);
    color: var(--rr-text-muted);
    background: transparent;
    padding: 1px 6px 1px 0;
    border-radius: 2px;
}

.task-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--rr-border);
}
.task-card-action,
button.task-card-action,
a.task-card-action {
    font-size: var(--t-xs);
    color: var(--rr-text-muted);
    background: transparent;
    border: 0;
    padding: 2px 4px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 2px;
}
.task-card-action:hover { color: var(--rr-primary-hover); background: var(--rr-bg); }
.task-card-action-danger { color: var(--rr-red); }
.task-card-action-danger:hover { color: var(--jj-bone); background: var(--rr-red); }

/* "Ver mais N tarefas" button */
.column-show-more {
    display: block;
    width: 100%;
    margin: 4px 0;
    background: transparent;
    border: 1px dashed var(--rr-border-strong);
    color: var(--rr-primary-hover);
    font-size: var(--t-sm);
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
}
.column-show-more:hover {
    background: var(--rr-surface);
    border-color: var(--rr-primary);
    color: var(--rr-primary);
}
.column-show-more[disabled] { opacity: 0.6; cursor: wait; }

/* "Adicionar tarefa" */
.column-footer,
.column-add-task,
.column-add-button {
    padding: 8px 10px;
    color: var(--rr-primary-hover);
    font-size: var(--t-md);
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
}
.column-add-button::before { content: "+ "; font-weight: 700; }

/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
button.btn,
button[type="submit"].btn-primary {
    border-radius: 3px !important;
    font-weight: 600 !important;
    font-size: var(--t-md) !important;
    padding: 8px 16px !important;
    border: 1px solid var(--rr-primary) !important;
    background: var(--rr-primary) !important;
    color: var(--jj-bone) !important;
    transition: background .15s, border-color .15s, color .15s !important;
    cursor: pointer;
    min-height: 34px;
    line-height: 1.2;
}
.btn:hover,
button.btn:hover,
button[type="submit"].btn-primary:hover {
    background: var(--rr-primary-hover) !important;
    border-color: var(--rr-primary-hover) !important;
    color: var(--jj-bone) !important;
}
.btn-primary,
.btn.btn-primary {
    background: var(--rr-primary) !important;
    border-color: var(--rr-primary) !important;
    color: var(--jj-bone) !important;
}
.btn-secondary,
.btn.btn-secondary {
    background: var(--rr-surface) !important;
    border-color: var(--rr-border-strong) !important;
    color: var(--rr-text-strong) !important;
}
.btn-secondary:hover,
.btn.btn-secondary:hover {
    background: var(--rr-bg) !important;
    color: var(--rr-text-strong) !important;
}
/* Botão "fantasma" (cancelar em modais). Global — antes era redefinido por página. */
.btn-ghost { background: var(--jj-surface-1); color: var(--jj-ink-2); border: 1px solid var(--jj-rule); }
.btn-ghost:hover { background: var(--jj-surface-2); color: var(--jj-ink); }
.btn-danger,
.btn.btn-danger {
    background: var(--rr-red) !important;
    border-color: var(--rr-red) !important;
    color: var(--jj-bone) !important;
}
.btn-outline-primary {
    background: var(--rr-surface) !important;
    border-color: var(--rr-primary) !important;
    color: var(--rr-primary) !important;
}
.btn-outline-primary:hover {
    background: var(--rr-primary) !important;
    color: var(--jj-bone) !important;
}

/* =========================================================
   FORMS
   ========================================================= */

.form-control, .form-select {
    border: 1px solid var(--rr-border);
    border-radius: 3px;
    font-size: var(--t-md);
    color: var(--rr-text-strong);
    background: var(--rr-surface);
    height: 34px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--rr-primary);
    box-shadow: 0 0 0 3px rgba(0,154,231,0.15);
    outline: 0;
}

/* =========================================================
   ALERTS
   ========================================================= */

.alert {
    border-radius: var(--rr-radius);
    font-size: var(--t-md);
    padding: 10px 14px;
    border: 1px solid transparent;
}
.alert-success { background: var(--rr-teal-soft); color: #0A6A56; border-color: #A8E0D2; }
.alert-danger  { background: #FCE8E6; color: #8A1F17; border-color: #F5B7AE; }

/* =========================================================
   ME / BULLETIN / TEAMS tweaks (generic white cards)
   ========================================================= */

.container, .app-main-content > .container {
    padding-left: 24px;
    padding-right: 24px;
}

.page-section,
.card,
.panel,
.workspace-card,
.team-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    box-shadow: var(--rr-shadow-sm);
    padding: 16px;
}

/* Section headings */
.section-heading,
.me-heading,
.bulletin-heading,
.workspace-heading {
    font-size: var(--t-2xl);
    font-weight: 700;
    color: var(--rr-text-strong);
    margin: 0 0 12px;
}

/* Sub-navigation tabs on Me/Workspace/Bulletin */
.sub-tabs,
.page-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--rr-border);
    margin: 0 0 16px;
}
.sub-tabs a,
.page-tabs a {
    padding: 10px 16px;
    color: var(--rr-text);
    font-weight: 600;
    font-size: var(--t-md);
    border-bottom: 3px solid transparent;
    text-decoration: none;
}
.sub-tabs a.is-active,
.page-tabs a.is-active,
.sub-tabs a.active,
.page-tabs a.active {
    color: var(--rr-primary-hover);
    border-bottom-color: var(--rr-primary-hover);
}

/* Tables */
table.board-list-table,
table.data-table,
table.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    overflow: hidden;
    font-size: var(--t-md);
}
table thead th {
    background: #F8FAFC;
    color: var(--rr-text-muted);
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--rr-border);
}
table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--rr-border);
    color: var(--rr-text-strong);
}
table tbody tr:last-child td { border-bottom: 0; }
table tbody tr:hover { background: var(--rr-bg); }

/* ── Modo Lista do board: visuais de overdue/delivered + toggle + sort ─── */
/* Toggle "Ocultar entregues" sobe na toolbar, alinhado a direita. */
.board-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.board-list-hide-delivered {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--t-sm); color: var(--rr-text-muted); cursor: pointer; user-select: none;
}
.board-list-hide-delivered input { margin: 0; cursor: pointer; }

/* Linhas vencidas ficam com faixa lateral vermelha discreta. */
table.board-list-table tbody tr.is-overdue td:first-child {
    box-shadow: inset 3px 0 0 0 #DC2626;
}
table.board-list-table tbody tr.is-overdue td:first-child a { color: #DC2626; font-weight: 600; }

/* Entregues ficam acinzentadas (quando o toggle ta desligado e a row aparece). */
table.board-list-table tbody tr.is-delivered td { color: var(--rr-text-muted); }
table.board-list-table tbody tr.is-delivered td:first-child a { text-decoration: line-through; }

/* Hide via toggle "Ocultar entregues". */
table.board-list-table tbody tr.is-hidden-by-toggle { display: none; }

/* Headers clicaveis: cursor + hover + setinha alinhada. */
table.board-list-table thead th[data-sortable] a {
    color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 2px;
}
table.board-list-table thead th[data-sortable] a:hover { color: var(--rr-text-strong); }

/* Avatar circle */
.avatar,
.user-avatar,
.task-assignee-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--rr-red);
    color: var(--jj-bone);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Tag "Padrão" style for type badges */
.task-type-badge,
.type-badge,
.tag-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--t-xs);
    padding: 1px 8px;
    background: var(--rr-tag-bg);
    color: var(--rr-tag-text);
    border: 1px solid var(--rr-tag-border);
    border-radius: 3px;
    font-weight: 600;
}

/* Scrollbars slim */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rr-border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Visually-hidden retained */
.visually-hidden {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* Home / landing anonymous */
body > .container > main {
    padding-top: 32px;
}

/* =========================================================
   BOARD — overrides específicos (vencer app.css)
   ========================================================= */

.board-page-heading { display: none !important; }

/* Sub-bar */
.board-surface > .board-shell-top {
    background: var(--rr-surface) !important;
    border-bottom: 1px solid var(--rr-border) !important;
    padding: 0 16px !important;
    height: var(--rr-subbar-height) !important;
    min-height: var(--rr-subbar-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}
.board-shell-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.board-switcher-links {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: var(--t-md) !important;
    font-weight: 600 !important;
    overflow-x: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    scrollbar-width: thin;
}
.board-switcher-links::-webkit-scrollbar { height: 4px; }
.board-switcher-link {
    color: var(--rr-text) !important;
    padding: 6px 10px !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
    border: 0 !important;
    background: transparent !important;
    font-weight: 600 !important;
}
.board-switcher-link.is-active {
    color: var(--rr-text-strong) !important;
    background: var(--rr-bg) !important;
}

.board-tabs {
    height: var(--rr-subbar-height) !important;
    gap: 0 !important;
    flex-shrink: 0;
}
.board-tabs > * {
    height: var(--rr-subbar-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    font-size: var(--t-md) !important;
    font-weight: 600 !important;
    color: var(--rr-text) !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    text-decoration: none !important;
}
.board-tabs .is-active,
.board-tabs .active,
.board-tabs [aria-selected="true"] {
    color: var(--rr-primary-hover) !important;
    border-bottom-color: var(--rr-primary-hover) !important;
}

/* Sidebar */
.board-sidebar {
    width: 220px !important;
    flex-shrink: 0 !important;
    background: var(--rr-surface) !important;
    border-right: 1px solid var(--rr-border) !important;
    padding: 14px !important;
    overflow-y: auto !important;
}
.board-filter-card {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: 0 !important;
}
.board-filter-header {
    font-size: var(--t-xs) !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: var(--rr-text-muted) !important;
    margin: 0 0 4px !important;
}
.board-filter-card p, .board-filter-card .board-filter-summary {
    font-size: var(--t-sm) !important;
    color: var(--rr-text-muted) !important;
    margin: 0 0 14px !important;
    line-height: 1.4;
}
.board-filter-card .form-label {
    font-size: var(--t-xs) !important;
    color: var(--rr-text-muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin: 12px 0 4px !important;
    display: block;
}
.board-filter-card .form-select,
.board-filter-card .form-control {
    height: 32px !important;
    font-size: var(--t-md) !important;
    border: 1px solid var(--rr-border) !important;
    border-radius: 3px !important;
    color: var(--rr-text-strong) !important;
    padding: 0 8px !important;
    background: var(--rr-surface) !important;
}

/* Columns */
.board-canvas {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 16px !important;
    background: var(--rr-bg) !important;
}
.board-columns {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    padding-bottom: 16px;
}
.column-card {
    width: 280px !important;
    min-width: 280px !important;
    flex: 0 0 280px !important;
    background: var(--rr-bg) !important;
    border: 0 !important;
    border-radius: var(--rr-radius) !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.column-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    background: transparent !important;
    border-bottom: 0 !important;
}
.column-title {
    font-size: var(--t-md) !important;
    font-weight: 700 !important;
    color: var(--rr-text-strong) !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.column-count-badge {
    font-size: var(--t-xs) !important;
    font-weight: 600 !important;
    color: var(--rr-text-muted) !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0 !important;
}
.column-body {
    padding: 4px 8px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    max-height: calc(100vh - var(--rr-navbar-height) - var(--rr-subbar-height) - 96px);
    overflow-y: auto !important;
}

/* Cards */
.task-card-shell { display: block !important; padding: 0 !important; }
.task-card {
    background: var(--rr-surface) !important;
    border: 1px solid var(--rr-border) !important;
    border-radius: var(--rr-radius) !important;
    padding: 10px 12px !important;
    box-shadow: var(--rr-shadow-sm) !important;
    position: relative !important;
    cursor: pointer !important;
    transition: box-shadow .15s, border-color .15s !important;
}
.task-card:hover {
    box-shadow: var(--rr-shadow-md) !important;
    border-color: var(--rr-border-strong) !important;
}
.task-title {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: var(--t-md) !important;
    font-weight: 600 !important;
    color: var(--rr-text-strong) !important;
    line-height: 1.35 !important;
}
.task-description {
    font-size: var(--t-sm) !important;
    color: var(--rr-text) !important;
    margin: 6px 0 0 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
/* task-meta (old layout) — não usamos mais no card, footer novo toma o lugar */
.task-card .task-meta { display: none !important; }

/* Priority badge — pill colorido estilo RunRun */
.task-priority-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: var(--t-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    color: var(--jj-bone) !important;
    border: 0 !important;
}
.task-priority-badge[data-priority="Urgente"] { background: var(--rr-brand-red) !important; }
.task-priority-badge[data-priority="Alta"]    { background: var(--rr-amber) !important; }
.task-priority-badge[data-priority="Media"]   { background: var(--rr-green) !important; color: var(--jj-bone) !important; }
.task-priority-badge[data-priority="Baixa"]   { background: var(--rr-text-muted) !important; }

.task-meta-chip {
    display: inline-flex !important;
    align-items: center !important;
    font-size: var(--t-xs) !important;
    color: var(--rr-text-muted) !important;
    background: transparent !important;
    padding: 0 4px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.task-card-shell:not(.is-menu-open) .task-card-actions { display: none !important; }
.task-card-shell.is-menu-open .task-card-actions { display: flex !important; }

.task-card-dots {
    position: absolute !important;
    top: 6px !important; right: 6px !important;
    width: 22px !important; height: 22px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--rr-text-muted) !important;
    font-size: var(--t-xl) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    border-radius: 3px !important;
    opacity: 0;
    transition: opacity .15s, background .15s;
}
.task-card:hover .task-card-dots { opacity: 1; }
.task-card-dots:hover { background: var(--rr-bg) !important; color: var(--rr-text-strong) !important; }

/* Adicionar tarefa */
.column-footer,
.column-add-task,
.column-add-button,
.column-card form.column-add-form,
.column-card [data-testid*="add-task"],
.column-card button[class*="add"] {
    padding: 8px 10px !important;
    color: var(--rr-primary-hover) !important;
    font-size: var(--t-md) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 0 !important;
    width: 100% !important;
    text-align: left !important;
    box-shadow: none !important;
}
/* Botao "Adicionar tarefa" FIXO no rodape da coluna (igual RunRun): gruda na base
   enquanto os cards rolam atras. Precisa de fundo OPACO (a regra acima forca transparent,
   o que deixaria os cards aparecerem por tras do botao sticky). Mesmo arquivo/ordem que a
   regra coringa -> vence. */
.column-card button.board-add-card {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    background: var(--rr-surface) !important;
    border: 1px dashed var(--rr-border-strong) !important;
    border-radius: 3px !important;
    text-align: center !important;
    margin-top: 4px !important;
}
.column-card button.board-add-card:hover {
    background: var(--rr-surface) !important;
    border-color: var(--rr-primary) !important;
    color: var(--rr-primary) !important;
}
.column-card form input[type="text"],
.column-card form .form-control {
    height: 32px !important;
    font-size: var(--t-md) !important;
    border: 1px solid var(--rr-border) !important;
    background: var(--rr-surface) !important;
    border-radius: 3px !important;
}

/* Aplicar filtros button */
.board-filter-card .btn,
.board-filter-card button[type="submit"] {
    margin-top: 14px !important;
    width: 100% !important;
    background: var(--rr-primary) !important;
    border-color: var(--rr-primary) !important;
    color: var(--jj-bone) !important;
    height: 34px !important;
    font-size: var(--t-md) !important;
    font-weight: 600 !important;
    border-radius: 3px !important;
}
.board-filter-card .btn:hover {
    background: var(--rr-primary-hover) !important;
    border-color: var(--rr-primary-hover) !important;
}

/* =========================================================
   TASK DETAIL (reskin para parecer modal RunRun)
   ========================================================= */

/* Backdrop e modal centralizado (comportamento de popup igual RunRun) */
.task-detail-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 1040;
    backdrop-filter: blur(2px);
    cursor: pointer;
}
/* header fica visível mas sob o backdrop */
body.task-detail-modal-open .shell-header { z-index: 1030 !important; }

.task-detail-modal {
    position: fixed !important;
    top: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 40px) !important;
    max-width: 1240px !important;
    height: calc(100vh - 48px) !important;
    margin: 0 !important;
    background: var(--rr-surface) !important;
    border-radius: 10px !important;
    box-shadow: 0 30px 80px var(--rr-scrim-strong) !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: 1050 !important;
    display: flex !important;
    flex-direction: column !important;
    animation: rrModalIn .2s ease;
}
@keyframes rrModalIn {
    from { opacity: 0; transform: translateX(-50%) scale(0.96); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Responsivo: fullscreen em <900 + sidebar empilhada */
@media (max-width: 900px) {
    .task-detail-modal {
        inset: 0 !important;
        top: 0 !important; left: 0 !important;
        transform: none !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
    .task-detail-layout {
        display: block !important;
        grid-template-columns: none !important;
        overflow-y: auto !important;
    }
    .task-detail-main {
        border-right: 0 !important;
        border-bottom: 1px solid var(--rr-border) !important;
        padding: 0 16px 16px !important;
    }
    .task-detail-sidebar {
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .task-detail-hero {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .task-detail-hero-actions .task-detail-action-button {
        font-size: var(--t-xs) !important;
        padding: 0 8px !important;
    }
    .task-detail-hero-actions .task-detail-action-button:not(.primary) span,
    .task-detail-hero-actions [data-share-toggle] { display: none !important; }
    .task-detail-tabs {
        overflow-x: auto !important;
        scrollbar-width: thin;
    }
    .task-detail-tab { padding: 0 10px !important; font-size: var(--t-sm) !important; white-space: nowrap; }
    .task-detail-title-editable, .task-detail-title-section h1 { font-size: var(--t-xl) !important; }
    .rr-popover { width: min(320px, 90vw) !important; max-width: 90vw !important; }
    .rr-editor-toolbar { overflow-x: auto; scrollbar-width: thin; }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .task-detail-layout {
        grid-template-columns: 1fr 380px !important;
    }
    .task-detail-sidebar { width: 380px !important; }
    .task-detail-metadata-item,
    .task-detail-form-compact {
        grid-template-columns: 120px 1fr !important;
        padding: 6px 14px !important;
    }
}

/* Mobile modal do tempo / drawer checklist */
@media (max-width: 600px) {
    .rr-time-modal-dialog { width: 96vw; max-height: 90vh; }
    .rr-checklist-drawer-panel { width: 100%; }
    .rr-time-table { font-size: var(--t-sm); }
    .rr-time-table thead th:nth-child(2),
    .rr-time-table thead th:nth-child(3),
    .rr-time-table tbody td:nth-child(2),
    .rr-time-table tbody td:nth-child(3) { display: none; }
}

/* Esconder header/navbar principal quando modal aberto — opcional: mantemos visível */
body.task-detail-modal-open {
    overflow: hidden;
}

.task-detail-breadcrumb {
    display: none !important;
}

.task-detail-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--rr-border) !important;
    background: var(--rr-surface) !important;
    gap: 16px !important;
}
.task-detail-hero-left { display: flex !important; align-items: center !important; gap: 12px !important; }
.task-detail-timer-section { display: flex !important; align-items: center !important; gap: 10px !important; }

.task-detail-play-button {
    background: var(--rr-primary) !important;
    color: var(--jj-bone) !important;
    border: 0 !important;
    width: 36px !important; height: 32px !important;
    border-radius: 3px !important;
    font-size: var(--t-md) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.task-detail-play-button:hover { background: var(--rr-primary-hover) !important; }
.task-detail-play-button.is-running { background: var(--rr-red) !important; }
.task-detail-play-button.is-running:hover { background: #c0392b !important; }

.task-detail-timer-display {
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace !important;
    font-size: var(--t-lg) !important;
    font-weight: 600 !important;
    color: var(--rr-text-strong) !important;
    letter-spacing: 0.5px !important;
}

.task-detail-assignee-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.task-detail-assignee-avatar {
    width: 26px !important; height: 26px !important;
    border-radius: 50% !important;
    background: var(--rr-red) !important;
    color: var(--jj-paper) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--t-xs) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.task-detail-assignee-avatar--more {
    background: var(--jj-ink-3) !important;
}
/* Variante com foto: CSS var --avatar-url setada inline */
.task-detail-assignee-avatar--photo {
    background-image: var(--avatar-url) !important;
    background-color: var(--jj-bone-2) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    color: transparent !important;
}
/* Variante com cor inline: CSS vars --avatar-bg/--avatar-fg do usuário */
.task-detail-assignee-avatar[style*="--avatar-bg"] {
    background: var(--avatar-bg) !important;
    color: var(--avatar-fg, #fff) !important;
}
/* Seguidores mostram o avatar REAL da pessoa (foto ou cor+iniciais), igual aos
   alocados — só um pouco menores. NAO sobrescrever o background (matava foto/cor). */
[data-followers-stack] .task-detail-assignee-avatar {
    width: 22px !important; height: 22px !important;
    font-size: var(--t-xs) !important;
}

/* Tag chips inline preview on the metadata row */
.task-detail-tags-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.task-detail-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--r-pill);
    background: color-mix(in oklch, var(--tag-color, var(--jj-brand)) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--tag-color, var(--jj-brand)) 35%, transparent);
    color: var(--jj-ink);
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.task-detail-tag-chip-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--r-pill);
    background: color-mix(in oklch, var(--tag-color, var(--jj-brand)) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--tag-color, var(--jj-brand)) 35%, transparent);
    color: var(--jj-ink);
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    cursor: pointer;
}
a.task-detail-tag-chip-link:hover {
    background: color-mix(in oklch, var(--tag-color, var(--jj-brand)) 24%, transparent);
}
[data-sprints-chips] { max-width: 100%; }
[data-sprints-chips] .task-detail-tag-chip {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
.task-detail-tag-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tag-color, var(--jj-brand));
    flex-shrink: 0;
}
.task-detail-assignee-chip > span:last-child { display: none !important; }

.task-detail-hero-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.task-detail-action-button {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: var(--t-md) !important;
    font-weight: 600 !important;
    border-radius: 3px !important;
    border: 1px solid var(--rr-border) !important;
    background: var(--rr-surface) !important;
    color: var(--rr-text-strong) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.task-detail-action-button:hover { background: var(--rr-bg) !important; }
.task-detail-action-button.primary,
.task-detail-action-button[type="submit"].primary {
    background: var(--rr-teal) !important;
    border-color: var(--rr-teal) !important;
    color: var(--jj-bone) !important;
}
.task-detail-action-button.primary:hover { filter: brightness(0.95); }
.task-detail-action-button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* VCCode CTA — cor da propria marca VCCode (rgb(172,83,54), extraida do botao
   "Contratar agora" em vccode.ai), pulso continuo e permanente (a pedido —
   destaque maximo, sem "acalmar" depois do primeiro clique). Literal, nao
   token do design system: e a marca de um parceiro, nao a paleta do JumpJump.
   IMPORTANTE: nao mover essa cor pra uma custom property redefinida num
   seletor descendente tipo `[data-theme="dark"] .js-vccode-launch { --x: .. }`
   — confirmado que isso nao invalida corretamente num toggle de tema AO VIVO
   (botao ja aberto, usuario clica no ciclo claro/escuro/sistema da sidebar):
   o elemento existente fica preso na cor antiga ate reload. Como e cor fixa
   da marca (nao muda entre tema claro/escuro), isso nem entra em jogo aqui. */
.task-detail-action-button.js-vccode-launch {
    position: relative;
    background: #ac5336 !important;
    border-color: #ac5336 !important;
    color: #fff !important;
}
.task-detail-action-button.js-vccode-launch .rr-icon { color: #fff; }
.task-detail-action-button.js-vccode-launch:hover { filter: brightness(1.12); }
.task-detail-action-button.js-vccode-launch::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: vccode-pulse-ring 1.8s ease-in-out infinite;
}
@keyframes vccode-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(172, 83, 54, 0.65), 0 0 0 0 rgba(172, 83, 54, 0.35); }
    70% { box-shadow: 0 0 0 6px rgba(172, 83, 54, 0.25), 0 0 0 14px rgba(172, 83, 54, 0); }
    100% { box-shadow: 0 0 0 6px rgba(172, 83, 54, 0), 0 0 0 14px rgba(172, 83, 54, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .task-detail-action-button.js-vccode-launch { animation: none; }
}

/* --- VCCode embed overlay --- */
.vccode-embed-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 1070;
    cursor: pointer;
}
.vccode-embed-overlay {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 80px);
    max-width: 1040px;
    height: calc(100vh - 48px);
    background: var(--rr-surface);
    border-radius: var(--rr-radius-lg);
    box-shadow: var(--rr-shadow-lg);
    z-index: 1071;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.vccode-embed-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rr-border);
    flex-shrink: 0;
}
.vccode-embed-overlay-title {
    font-weight: 600;
    color: var(--rr-text-strong);
    font-size: var(--t-md);
}
.vccode-embed-overlay-close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--rr-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}
.vccode-embed-overlay-close:hover { background: var(--rr-bg); }
.vccode-embed-overlay-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}
.vccode-embed-overlay-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.vccode-embed-overlay-status {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: var(--rr-text-muted);
}
.vccode-embed-overlay-status.is-error { color: var(--jj-danger); }
.vccode-embed-overlay-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--rr-border);
    border-top-color: var(--rr-teal);
    animation: vccode-spin 0.8s linear infinite;
}
@keyframes vccode-spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
    .vccode-embed-overlay {
        top: 0;
        left: 0;
        transform: none;
        width: 100vw;
        max-width: none;
        height: 100vh;
        border-radius: 0;
    }
}

.task-detail-more-actions,
.task-detail-close-button {
    width: 32px !important; height: 32px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--rr-text-muted) !important;
    border-radius: 3px !important;
    font-size: var(--t-lg) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}
.task-detail-more-actions:hover,
.task-detail-close-button:hover { background: var(--rr-bg) !important; color: var(--rr-text-strong) !important; }
.task-detail-more-actions.is-urgent {
    background: rgba(231,76,60,0.12) !important;
    border: 1px solid var(--rr-red) !important;
}
.task-detail-more-actions.is-urgent:hover { background: rgba(231,76,60,0.22) !important; }

.task-detail-assignee-plus {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px dashed var(--rr-border-strong);
    background: var(--rr-surface);
    color: var(--rr-text-muted);
    font-size: var(--t-base);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 0;
}
.task-detail-assignee-plus:hover { background: var(--rr-bg); color: var(--rr-primary-hover); border-color: var(--rr-primary-hover); }

/* Avatars stack */
.task-detail-assignees-stack {
    display: inline-flex;
    align-items: center;
}
.task-detail-assignees-stack .task-detail-assignee-avatar {
    border: 2px solid var(--jj-paper);
    margin-left: -6px;
}
.task-detail-assignees-stack .task-detail-assignee-avatar:first-child { margin-left: 0; }

/* Popover item selected — visual indicators */
.rr-popover-item.is-selected {
    background: var(--jj-persimmon-wash) !important;
    color: var(--rr-primary-hover);
    font-weight: 600;
    position: relative;
}
/* Visual divider between selected (top) and unselected (rest) groups in
   multi-select popovers. Targets the LAST selected item that's followed by
   a non-selected sibling — i.e. the boundary between groups. */
.rr-popover-item.is-selected:has(+ .rr-popover-item:not(.is-selected)) {
    margin-bottom: 6px;
    padding-bottom: 8px;
    box-shadow: 0 1px 0 0 var(--jj-rule-strong);
}
/* Default ✓ on the <li> for items with inline text (tags, tipo, projeto, etc.) */
.rr-popover-item.is-selected::after {
    content: "✓";
    margin-left: auto;
    color: var(--rr-primary);
    font-weight: 700;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--t-md);
}
/* When the <li> wraps an interactive flex child (board switcher's <a>, stage popover's
   form>button), the ✓ goes on the inner element so it lands on the same row. */
.rr-popover-item.is-selected > a::after,
.rr-popover-item.is-selected > button::after,
.rr-popover-item.is-selected > form > button::after {
    content: "✓";
    margin-left: auto;
    color: var(--rr-primary);
    font-weight: 700;
    font-size: var(--t-md);
}
/* Don't double up: when an interactive child is present, hide the LI ::after. */
.rr-popover-item.is-selected:has(> a)::after,
.rr-popover-item.is-selected:has(> button)::after,
.rr-popover-item.is-selected:has(> form)::after {
    content: none;
}

.rr-popover-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 2px;
}

/* ========== Subtarefas ========== */
.rr-subtasks { padding: 8px 0; }
.rr-subtasks-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 8px; }
.rr-subtasks-header h3 { margin: 0; font-size: var(--t-md); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--rr-text-muted); }
.rr-subtasks-table { width: 100%; border-collapse: collapse; font-size: var(--t-md); background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: 6px; overflow: hidden; }
.rr-subtasks-table thead th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--rr-text-muted); background: var(--rr-bg); padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--rr-border); font-weight: 700; }
.rr-subtasks-table tbody td { padding: 10px; border-bottom: 1px solid var(--rr-border); color: var(--rr-text-strong); }
.rr-subtasks-table tbody tr:last-child td { border-bottom: 0; }
.rr-subtasks-table tbody tr:hover { background: var(--rr-bg); }
.rr-subtasks-empty { text-align: center; color: var(--rr-text-muted); padding: 18px !important; font-size: var(--t-md); }
.rr-subtasks-table a { color: var(--rr-primary-hover); text-decoration: none; font-weight: 600; }
.rr-subtasks-table a:hover { text-decoration: underline; }
.rr-subtasks-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rr-subtasks-arrow { color: var(--rr-text-muted); font-size: var(--t-xl); font-weight: 700; }
.rr-subtasks-add input {
    flex: 1; height: 36px; padding: 0 12px;
    border: 1px solid var(--rr-border);
    border-radius: 6px;
    font-size: var(--t-md);
    background: var(--rr-surface);
}
.rr-subtasks-add input:focus { border-color: var(--rr-primary); outline: 0; box-shadow: 0 0 0 3px rgba(0,154,231,0.12); }

/* ========== Mention autocomplete ========== */
/* z-index no wrap + form: cria stacking context próprio para o dropdown
   ficar acima da lista de comentários (que sobrepunha o popup do @). */
.rr-mention-wrap { position: relative; z-index: 1200; }
.task-comment-composer-form { position: relative; z-index: 1200; }
.rr-mention-list {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 4px;
    min-width: 240px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(16,32,48,0.18);
    z-index: 1200;
    list-style: none;
    padding: 4px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}
.rr-mention-list[hidden] { display: none !important; }
.rr-mention-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: var(--t-md);
    color: var(--rr-text-strong);
}
.rr-mention-list li.is-focus,
.rr-mention-list li:hover { background: var(--jj-persimmon-wash); color: var(--rr-primary-hover); }
.rr-mention-list .rr-mention-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--rr-red); color: var(--jj-bone);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--t-xs); font-weight: 700;
}

/* ========== Editor Rich-Text ========== */
.rr-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--rr-border);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: var(--rr-bg);
    margin-top: 4px;
}
.rr-tb-btn {
    min-width: 28px; height: 28px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--rr-text-strong);
    font-size: var(--t-md);
    border-radius: 3px;
    cursor: pointer;
}
.rr-tb-btn:hover { background: var(--rr-surface); border-color: var(--rr-border); }
.rr-tb-btn.is-active { background: var(--jj-persimmon-wash); color: var(--rr-primary-hover); border-color: #B6DEF2; }
.rr-tb-sep { width: 1px; height: 18px; background: var(--rr-border); margin: 0 4px; }
.rr-tb-heading {
    height: 28px; font-size: var(--t-sm);
    border: 1px solid var(--rr-border);
    border-radius: 3px;
    background: var(--rr-surface);
    padding: 0 4px;
}

.rr-editor[contenteditable="true"] {
    min-height: 200px;
    border: 1px solid var(--rr-border) !important;
    border-radius: 0 0 6px 6px !important;
    padding: 14px 18px !important;
    outline: 0 !important;
    color: var(--rr-text-strong) !important;
    line-height: 1.55 !important;
    font-size: var(--t-base) !important;
    background: var(--rr-surface) !important;
}
.rr-editor[contenteditable="true"]:focus {
    border-color: var(--rr-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,154,231,0.12) !important;
}
.rr-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--rr-text-muted);
    pointer-events: none;
}
.rr-editor h1 { font-size: var(--t-2xl); font-weight: 800; margin: 10px 0 6px; }
.rr-editor h2 { font-size: var(--t-xl); font-weight: 700; margin: 10px 0 6px; }
.rr-editor h3 { font-size: var(--t-lg); font-weight: 700; margin: 8px 0 4px; }
.rr-editor p { margin: 0 0 8px; }
.rr-editor ul, .rr-editor ol { margin: 0 0 8px 24px; }
.rr-editor blockquote {
    border-left: 2px solid var(--rr-border-strong);
    padding: 4px 12px;
    color: var(--rr-text-muted);
    margin: 0 0 8px;
}
.rr-editor pre {
    background: #F3F7FA;
    border: 1px solid var(--rr-border);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: Menlo, Consolas, monospace;
    font-size: var(--t-md);
    overflow-x: auto;
}
.rr-editor a { color: var(--rr-primary-hover); text-decoration: underline; }
.rr-editor b, .rr-editor strong { font-weight: 700 !important; }
.rr-editor i, .rr-editor em { font-style: italic !important; }
.rr-editor u { text-decoration: underline !important; }
.rr-editor s, .rr-editor strike, .rr-editor del { text-decoration: line-through !important; }
.rr-editor span[style*="font-weight"] { font-weight: 700 !important; }

.rr-editor-status {
    font-size: var(--t-xs);
    color: var(--rr-text-muted);
    padding: 4px 8px;
    height: 18px;
}
.rr-editor-status.is-saving { color: var(--rr-primary-hover); }
.rr-editor-status.is-saved { color: var(--rr-teal); }

/* ========== Modal Tempo na tarefa ========== */
.rr-time-modal[hidden] { display: none !important; }
.rr-time-modal {
    position: fixed; inset: 0; z-index: 1500;
    display: flex; align-items: center; justify-content: center;
}
.rr-time-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.40);
    cursor: pointer;
}
.rr-time-modal-dialog {
    position: relative; z-index: 1;
    width: min(720px, 94vw);
    max-height: 80vh;
    background: var(--rr-surface);
    border-radius: 10px;
    box-shadow: 0 30px 80px var(--rr-scrim-strong);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: rrModalIn .18s ease;
}
.rr-time-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rr-border);
}
.rr-time-modal-header h2 { margin: 0; font-size: var(--t-lg); font-weight: 700; color: var(--rr-text-strong); }
.rr-time-modal-close {
    width: 32px; height: 32px; border: 0; background: transparent;
    color: var(--rr-text-muted); cursor: pointer; border-radius: 50%;
}
.rr-time-modal-close:hover { background: var(--rr-bg); color: var(--rr-text-strong); }
.rr-time-modal-body { padding: 16px 20px; overflow-y: auto; }
.rr-time-table {
    width: 100%; border-collapse: collapse; font-size: var(--t-md);
}
.rr-time-table thead th {
    font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--rr-text-muted);
    padding: 6px 8px; border-bottom: 1px solid var(--rr-border);
    text-align: left;
}
.rr-time-table tbody td { padding: 12px 8px; border-bottom: 1px solid var(--rr-border); color: var(--rr-text-strong); }
.rr-time-table tfoot td { padding: 12px 8px; border-top: 2px solid var(--rr-border-strong); color: var(--rr-text-strong); }
.rr-time-user { display: inline-flex; align-items: center; gap: 8px; }
.rr-time-invested { color: var(--rr-primary-hover); font-weight: 700; }
.rr-time-add {
    width: 26px; height: 26px; border-radius: 4px;
    background: var(--rr-primary); color: var(--jj-bone);
    border: 0; cursor: pointer;
    font-size: var(--t-base); font-weight: 700;
}
.rr-time-add:hover { background: var(--rr-primary-hover); }

/* ========== Drawer Checklist ========== */
.rr-empty { color: var(--rr-text-muted); font-size: var(--t-md); text-align: center; padding: 20px; }

/* Sidebar summary as link to inline checklist */
.task-detail-checklist-summary-link {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 6px 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    transition: background var(--d-fast) var(--ease);
}
.task-detail-checklist-summary-link:hover { background: var(--rr-bg); }
.task-detail-checklist-summary-link:focus-visible {
    outline: 2px solid var(--jj-focus-ring);
    outline-offset: 2px;
}

/* ==========================================================
   Inline checklist (in the description tab, replacing drawer)
   ========================================================== */
.jj-checklist {
    margin: 28px 0 8px;
    padding-top: 20px;
    border-top: 1px solid var(--rr-border);
}
.jj-checklist-head {
    display: flex; align-items: baseline; gap: 12px;
    margin: 0 0 10px;
}
.jj-checklist-head h2 {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0;
    font-size: var(--t-sm); font-weight: 700;
    color: var(--rr-text-strong);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.jj-checklist-head h2 .rr-icon { width: 14px; height: 14px; color: var(--jj-brand); }
.jj-checklist-count {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--rr-text-muted);
    font-variant-numeric: tabular-nums;
}
.jj-checklist.is-all-complete .jj-checklist-count {
    color: var(--jj-success);
}

.jj-checklist-bar {
    position: relative;
    height: 3px;
    background: var(--rr-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 14px;
}
.jj-checklist-bar > span {
    display: block;
    height: 100%;
    background: var(--jj-brand);
    border-radius: 2px;
    transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.jj-checklist.is-all-complete .jj-checklist-bar > span { background: var(--jj-success); }

.jj-checklist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.jj-checklist-row {
    display: grid;
    grid-template-columns: 20px 1fr 28px;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid color-mix(in oklch, var(--rr-border) 60%, transparent);
    transition: background 140ms ease-out;
}
.jj-checklist-row:last-child { border-bottom: 0; }
.jj-checklist-row:hover {
    background: color-mix(in oklch, var(--jj-brand) 4%, transparent);
}

/* Custom checkbox */
.jj-checklist-check {
    position: relative;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 18px; height: 18px;
    cursor: pointer;
}
.jj-checklist-check input {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}
.jj-checklist-tick {
    width: 18px; height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--jj-rule-strong);
    background: var(--jj-paper);
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: background 160ms ease-out, border-color 160ms ease-out, transform 120ms ease-out;
}
.jj-checklist-check input:hover + .jj-checklist-tick { border-color: var(--jj-brand); }
.jj-checklist-check input:focus-visible + .jj-checklist-tick {
    outline: 2px solid var(--jj-focus-ring);
    outline-offset: 2px;
}
.jj-checklist-check input:checked + .jj-checklist-tick {
    background: var(--jj-brand);
    border-color: var(--jj-brand);
}
.jj-checklist-check input:checked + .jj-checklist-tick::after {
    content: "";
    width: 10px; height: 5px;
    border-left: 2px solid var(--jj-paper);
    border-bottom: 2px solid var(--jj-paper);
    transform: rotate(-45deg) translate(1px, -1px);
}
.jj-checklist-row.is-pending .jj-checklist-tick {
    opacity: 0.55;
}

.jj-checklist-text {
    font-size: var(--t-base);
    line-height: 1.45;
    color: var(--rr-text-strong);
    cursor: text;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 4px;
    outline: none;
    overflow-wrap: anywhere;
    transition: background 140ms ease-out, color 220ms ease-out, text-decoration-color 220ms ease-out;
    text-decoration: line-through transparent;
    text-decoration-thickness: 1.5px;
}
.jj-checklist-text:hover { background: var(--jj-surface-2); }
.jj-checklist-text:focus { background: var(--jj-paper); box-shadow: 0 0 0 2px var(--jj-focus-ring); }
.jj-checklist-row.is-complete .jj-checklist-text {
    color: var(--jj-ink-3);
    text-decoration-color: var(--jj-ink-3);
}

.jj-checklist-del {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--jj-ink-4);
    width: 28px; height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease-out, background 140ms ease-out, color 140ms ease-out;
}
.jj-checklist-row:hover .jj-checklist-del,
.jj-checklist-row:focus-within .jj-checklist-del { opacity: 1; }
.jj-checklist-del:hover { background: var(--jj-danger-soft); color: var(--jj-danger); }
.jj-checklist-del:focus-visible {
    opacity: 1;
    outline: 2px solid var(--jj-focus-ring);
    outline-offset: 2px;
}
.jj-checklist-del .rr-icon { width: 14px; height: 14px; }

.jj-checklist-empty {
    margin: 4px 0 0;
    padding: 16px 4px;
    font-size: var(--t-md);
    color: var(--rr-text-muted);
    font-style: italic;
}

.jj-checklist-add {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 0 4px;
    margin-top: 6px;
    border-top: 1px dashed var(--rr-border);
}
.jj-checklist-add-icon {
    width: 18px; height: 18px;
    border-radius: 5px;
    border: 1.5px dashed var(--jj-rule-strong);
    display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--jj-ink-4);
    font-size: var(--t-base); line-height: 1;
    transition: border-color 140ms ease-out, color 140ms ease-out;
}
.jj-checklist-add:focus-within .jj-checklist-add-icon {
    border-color: var(--jj-brand);
    color: var(--jj-brand);
}
.jj-checklist-add input {
    appearance: none;
    border: 0;
    background: transparent;
    font-size: var(--t-base);
    color: var(--rr-text-strong);
    padding: 6px 0;
    outline: none;
    width: 100%;
}
.jj-checklist-add input::placeholder { color: var(--jj-ink-4); }

/* Row remove animation */
@keyframes jjChecklistRowOut {
    to { opacity: 0; transform: translateX(-6px); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; }
}
.jj-checklist-row.is-removing {
    overflow: hidden;
    animation: jjChecklistRowOut 180ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes jjChecklistRowIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.jj-checklist-row.is-new {
    animation: jjChecklistRowIn 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Button "time-worked" com aparência clicável */
.task-detail-time-worked {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--rr-text-strong) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: underline dotted;
    text-decoration-color: var(--rr-text-muted);
}
.task-detail-time-worked:hover { color: var(--rr-primary-hover) !important; }

.rr-popover-menu .rr-popover-item { gap: 10px; padding: 8px 10px; }
.rr-popover-menu .rr-popover-item > span:first-child { width: 18px; display: inline-flex; justify-content: center; }
.rr-popover-item-danger { color: var(--rr-red) !important; }
.rr-popover-item-danger:hover { background: rgba(231,76,60,0.08) !important; }

.task-detail-title-section {
    padding: 16px 24px 8px !important;
    border-bottom: 0 !important;
}
.task-detail-heading-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
.task-detail-title-editable,
.task-detail-title-section h1 {
    font-size: var(--t-2xl) !important;
    font-weight: 800 !important;
    color: var(--rr-text-strong) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    flex: 1 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
}
.task-detail-collapse-button {
    width: 28px !important; height: 28px !important;
    background: transparent !important;
    border: 1px solid var(--rr-border) !important;
    color: var(--rr-text-muted) !important;
    border-radius: 3px !important;
    font-size: var(--t-base) !important;
    cursor: pointer !important;
}

.task-detail-subtitle,
.task-detail-created-by {
    font-size: var(--t-sm) !important;
    color: var(--rr-text-muted) !important;
    margin: 6px 0 0 !important;
}
.task-detail-id {
    color: var(--rr-text) !important;
    font-weight: 700 !important;
    margin-right: 4px !important;
}
.task-detail-parent-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 2px 8px;
    background: var(--jj-bone-2);
    border: 1px solid var(--jj-rule-strong);
    color: var(--jj-citron-2);
    border-radius: 12px;
    font-size: var(--t-xs);
    font-weight: 600;
    text-decoration: none;
}
.task-detail-parent-link:hover { background: var(--jj-rule-strong); color: #5a4200; }

/* ========== Task entregue: destaque verde ========== */
.task-detail-modal.is-delivered { border-top: 4px solid var(--rr-teal) !important; }
.task-detail-modal.is-delivered .task-detail-play-button {
    background: var(--rr-teal) !important;
    color: var(--jj-bone) !important;
}
.task-detail-modal.is-delivered .task-detail-play-button::before { content: "✓"; }
.task-detail-modal.is-delivered .task-detail-play-button { font-size: 0 !important; }
.task-detail-modal.is-delivered .task-detail-play-button::before { font-size: var(--t-lg); font-weight: 700; color: var(--jj-bone); }
.task-detail-modal.is-delivered .task-detail-title-editable {
    color: var(--rr-teal) !important;
}
.task-detail-modal.is-delivered [data-field="etapa"],
.task-detail-modal.is-delivered .task-detail-metadata-badge.stage {
    background: var(--rr-teal) !important;
    border-color: var(--rr-teal) !important;
    color: var(--jj-bone) !important;
}
.task-detail-delivered-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--rr-teal);
    color: var(--jj-bone);
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 12px;
    margin-left: 12px;
    align-self: center;
    box-shadow: 0 2px 6px rgba(0,180,148,0.25);
}

/* Card entregue no Kanban: linha verde + título esmaecido */
.task-card[data-delivered="true"] { opacity: 0.7; }
.task-card[data-delivered="true"] .task-card-title::after { content: " ✓"; color: var(--jj-success); font-weight: 700; }
.task-card[data-delivered="true"] .task-title { color: var(--rr-teal) !important; }

/* Card atrasado no Kanban: fundo avermelhado */
.task-card.is-overdue {
    background: color-mix(in oklch, var(--jj-danger) 22%, var(--rr-surface)) !important;
    border-color: color-mix(in oklch, var(--jj-danger) 55%, transparent) !important;
}
.task-card.is-overdue .task-title { color: var(--jj-danger) !important; }

.task-detail-layout {
    display: grid !important;
    grid-template-columns: 1fr 480px !important;
    gap: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}
.task-detail-modal {
    display: flex !important;
    flex-direction: column !important;
}
.task-detail-modal .task-detail-hero,
.task-detail-modal .task-detail-title-section {
    flex-shrink: 0 !important;
}
.task-detail-main {
    padding: 0 24px 24px !important;
    border-right: 1px solid var(--rr-border) !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

/* Task tabs */
.task-detail-tabs {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--rr-border) !important;
    margin: 0 -24px 16px !important;
    padding: 0 24px !important;
}
.task-detail-tab {
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
    padding: 0 14px !important;
    color: var(--rr-text) !important;
    font-size: var(--t-md) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
}
.task-detail-tab.is-active {
    color: var(--rr-primary-hover) !important;
    border-bottom-color: var(--rr-primary-hover) !important;
}
.task-detail-tab:hover { color: var(--rr-text-strong) !important; }

/* Description block */
.task-detail-tab-panel[hidden] { display: none !important; }
.task-detail-description-block {
    min-height: 240px !important;
    padding: 12px 0 !important;
    color: var(--rr-text-strong) !important;
    font-size: var(--t-base) !important;
    line-height: 1.5 !important;
}
.task-detail-empty-state {
    color: var(--rr-text-muted) !important;
    font-size: var(--t-md) !important;
    padding: 8px 0 !important;
}

/* Comments */
.task-detail-section-header {
    display: flex; align-items: baseline; gap: 8px;
    margin: 0 0 12px;
}
.task-detail-section-header h2 {
    font-size: var(--t-base) !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: var(--rr-text-strong) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.task-detail-section-header span {
    font-size: var(--t-sm);
    color: var(--rr-text-muted);
    font-weight: 600;
}
.task-detail-comment-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-areas: "avatar header" "avatar body";
    column-gap: 12px;
    row-gap: 4px;
    border: 1px solid var(--rr-border);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--rr-surface);
}
.task-detail-comment-item > .jj-avatar {
    grid-area: avatar;
    margin-top: 2px;
}
/* Respostas (aninhamento de 1 nível): indenta abaixo do comentário-raiz */
.task-detail-comment-replies {
    margin-left: 44px;
    padding-left: 12px;
    border-left: 2px solid var(--rr-border);
}
.task-detail-comment-reply-bar {
    margin: 0 0 8px 44px;
}
.task-detail-comment-reply-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--t-sm); color: var(--rr-text-muted);
    background: none; border: none; cursor: pointer; padding: 2px 4px;
}
.task-detail-comment-reply-toggle:hover { color: var(--rr-text); }
.task-detail-comment-reply-form {
    margin: 0 0 12px 44px;
}
.task-detail-comment-item header {
    grid-area: header;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px;
    font-size: var(--t-sm); color: var(--rr-text-muted);
    margin-bottom: 2px;
}
.task-detail-comment-item strong {
    color: var(--rr-text-strong);
    font-weight: 600;
}
.task-detail-comment-item .task-detail-comment-body,
.task-detail-comment-item p {
    grid-area: body;
    margin: 0; font-size: var(--t-md); color: var(--rr-text-strong);
    line-height: 1.5;
    white-space: pre-wrap; /* respeita quebras de linha e espacos do corpo (ex.: comentarios importados do RunRun) */
    overflow-wrap: anywhere;
}
.task-detail-comment-item .task-detail-email-subject,
.task-detail-comment-item .task-detail-email-from,
.task-detail-comment-item .task-detail-email-body {
    grid-column: 2 / -1;
}

/* Reações com emoji */
.task-detail-comment-reactions {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.task-detail-comment-reaction-chips {
    display: contents;
}
.task-detail-comment-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border: 1px solid var(--rr-border);
    border-radius: 999px;
    background: var(--rr-surface);
    color: var(--rr-text);
    font-size: var(--t-sm);
    line-height: 1.6;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.task-detail-comment-reaction-chip:hover {
    border-color: var(--rr-accent, #009AE7);
}
.task-detail-comment-reaction-chip.is-mine {
    background: color-mix(in srgb, var(--rr-accent, #009AE7) 14%, transparent);
    border-color: var(--rr-accent, #009AE7);
}
.task-detail-comment-reaction-count {
    font-variant-numeric: tabular-nums;
    color: var(--rr-text-muted);
}
.task-detail-comment-reaction-chip.is-mine .task-detail-comment-reaction-count {
    color: var(--rr-text-strong);
    font-weight: 600;
}
.task-detail-comment-reaction-add-wrap {
    position: relative;
    display: inline-flex;
}
.task-detail-comment-reaction-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--rr-border);
    border-radius: 999px;
    background: var(--rr-surface);
    color: var(--rr-text-muted);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.task-detail-comment-reaction-add:hover {
    color: var(--rr-text);
    border-color: var(--rr-accent, #009AE7);
}
.task-detail-comment-reaction-add .rr-icon {
    width: 15px;
    height: 15px;
}
.task-detail-comment-reaction-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: flex;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--rr-border);
    border-radius: 10px;
    background: var(--rr-surface);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.task-detail-comment-reaction-option {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
    transition: background 120ms ease, transform 120ms ease;
}
.task-detail-comment-reaction-option:hover {
    background: var(--rr-surface-muted, rgba(0, 0, 0, 0.06));
    transform: scale(1.15);
}

.task-detail-form textarea {
    border: 1px solid var(--rr-border) !important;
    border-radius: 6px !important;
    font-size: var(--t-md) !important;
    padding: 10px !important;
    min-height: 80px !important;
    resize: vertical;
    width: 100%;
}
.task-detail-form-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px;
    font-size: var(--t-sm);
    color: var(--rr-text-muted);
}

/* SIDEBAR — reskin inteiro */
.task-detail-sidebar {
    width: 480px !important;
    background: var(--rr-surface) !important;
    padding: 4px 0 !important;
    border-left: 0 !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    min-width: 0 !important;
    height: 100% !important;
    scrollbar-width: thin;
}
.task-detail-sidebar::-webkit-scrollbar { width: 4px; }
.task-detail-sidebar::-webkit-scrollbar-thumb { background: transparent; }
.task-detail-sidebar:hover::-webkit-scrollbar-thumb { background: var(--rr-border-strong); }
.task-detail-sidebar .task-detail-sidebar-section:empty,
.task-detail-sidebar .task-detail-sidebar-section[hidden] { display: none !important; }
.task-detail-sidebar-section {
    padding: 8px 0 !important;
}

.task-detail-metadata-dl {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.task-detail-metadata-item {
    display: grid !important;
    grid-template-columns: 150px 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 20px !important;
    min-height: 34px;
    border: 0 !important;
    position: relative;
}
/* Tall rows (checklist, time log) need the label pinned to the top
   so it doesn't float in the middle of a multi-row value. */
.task-detail-metadata-item[data-testid="task-detail-checklist"],
.task-detail-metadata-item[data-testid="task-detail-time"],
.task-detail-metadata-item.is-tall {
    align-items: start !important;
}
.task-detail-metadata-item[data-testid="task-detail-checklist"] > dt,
.task-detail-metadata-item[data-testid="task-detail-time"] > dt,
.task-detail-metadata-item.is-tall > dt {
    padding-top: 4px;
}
.task-detail-metadata-item dt {
    font-size: var(--t-md) !important;
    font-weight: 500 !important;
    color: var(--rr-text-muted) !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.task-detail-metadata-item dd {
    font-size: var(--t-md) !important;
    color: var(--rr-primary-hover) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    word-break: break-word !important;
    justify-content: flex-start !important;
}
.task-detail-metadata-item dd > * {
    min-width: 0;
    max-width: 100%;
}
.task-detail-metadata-item dd > a { color: var(--rr-primary-hover) !important; font-weight: 600; }
.task-detail-metadata-item dd > span:not(.task-detail-metadata-badge) { color: var(--rr-primary-hover) !important; font-weight: 600; }
.add-link { color: var(--rr-primary-hover) !important; font-weight: 600 !important; cursor: pointer; text-decoration: none; }
.add-link:hover { text-decoration: underline; }

.task-detail-metadata-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    background: var(--rr-tag-bg) !important;
    color: var(--rr-tag-text) !important;
    border: 1px solid var(--rr-tag-border) !important;
    border-radius: 3px !important;
    font-size: var(--t-xs) !important;
    font-weight: 600 !important;
}
.task-detail-metadata-badge.stage {
    background: var(--rr-surface) !important;
    color: var(--rr-text-strong) !important;
    border-color: var(--rr-border-strong) !important;
}

.task-detail-metadata-separator {
    height: 1px;
    background: var(--rr-border);
    margin: 10px 16px !important;
}

/* Button "Mover para próxima" — escopo só para o botão inline-form-ml, NÃO popovers */
.task-detail-metadata-item .inline-form-ml button[type="submit"] {
    height: 24px !important;
    padding: 0 8px !important;
    font-size: var(--t-xs) !important;
    font-weight: 600 !important;
    background: var(--rr-primary) !important;
    border-color: var(--rr-primary) !important;
    color: var(--jj-bone) !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
    min-height: 24px !important;
    line-height: 24px !important;
    flex-shrink: 0 !important;
}
.task-detail-metadata-item .inline-form-ml {
    display: inline-flex;
    flex-shrink: 0;
}
/* Inline compact forms on sidebar — auto-save style */
.task-detail-form-compact {
    display: grid !important;
    grid-template-columns: 150px 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 20px !important;
    margin: 0 !important;
    position: relative;
}
.task-detail-form-compact label.form-label {
    display: inline-block !important;
    font-size: var(--t-xs) !important;
    font-weight: 600 !important;
    color: var(--jj-ink-3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    min-width: 100px !important;
    flex-shrink: 0 !important;
    display: flex; align-items: center;
}
.task-detail-form-compact .form-control,
.task-detail-form-compact .form-select {
    height: 30px !important;
    font-size: var(--t-md) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    border-radius: 3px !important;
    color: var(--rr-text-strong) !important;
    padding: 0 8px !important;
    transition: background .15s, border-color .15s;
}
.task-detail-form-compact .form-control:hover,
.task-detail-form-compact .form-select:hover,
.task-detail-form-compact .form-control:focus,
.task-detail-form-compact .form-select:focus {
    border-color: var(--rr-border) !important;
    background: var(--rr-surface) !important;
}
/* auto-save: esconde botões Salvar */
.task-detail-form-compact[data-autosave] button[type="submit"],
.task-detail-form-compact[data-autosave] .btn-primary { display: none !important; }
.task-detail-form-compact[data-autosave]::after {
    content: attr(data-autosave-status);
    font-size: var(--t-xs);
    color: var(--rr-teal);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.task-detail-form-compact[data-autosave].is-saving::after { content: "salvando…"; color: var(--rr-text-muted); opacity: 1; }
.task-detail-form-compact[data-autosave].is-saved::after { content: "✓"; color: var(--rr-teal); opacity: 1; font-size: var(--t-md); }

.task-detail-form-compact .form-control,
.task-detail-form-compact .form-select {
    width: 100% !important;
    max-width: 100% !important;
}

.task-detail-dates-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    grid-column: 2 / 3;
}
.task-detail-dates-grid label {
    font-size: var(--t-xs) !important;
    text-transform: uppercase !important;
    color: var(--rr-text-muted) !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
    display: block;
}

/* Time progress */
.task-detail-time-worked {
    font-weight: 700 !important;
    color: var(--rr-text-strong) !important;
}
.task-detail-progress-label {
    color: var(--rr-text-muted) !important;
    font-size: var(--t-xs) !important;
}
.task-detail-time-progress { flex: 1; }
.task-detail-time-bar {
    width: 100%;
    height: 6px;
    background: var(--rr-bg);
    border-radius: 3px;
    overflow: hidden;
}
.task-detail-time-bar-fill {
    height: 100%;
    background: var(--rr-primary);
}

/* Checklist — layout especial: dd ocupa full-width */
[data-testid="task-detail-checklist"] {
    display: block !important;
    padding: 10px 20px !important;
    border-top: 1px solid var(--rr-border);
    margin-top: 6px;
}
[data-testid="task-detail-checklist"] dt {
    font-size: var(--t-xs) !important;
    font-weight: 700 !important;
    color: var(--rr-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
[data-testid="task-detail-checklist"] dd {
    display: block !important;
    margin: 0 !important;
}

.task-detail-checklist-summary {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.task-detail-checklist-count {
    font-size: var(--t-xs); color: var(--rr-text-muted);
}
.task-detail-checklist-progress-mini {
    flex: 1; height: 4px; background: var(--rr-bg); border-radius: 2px; overflow: hidden;
}
.task-detail-checklist-progress-mini > span {
    display: block; height: 100%; background: var(--rr-primary);
}
.task-detail-dates-grid input[type="date"],
.task-detail-dates-grid input[type="datetime-local"] {
    min-width: 0 !important;
    width: 100% !important;
}
.task-detail-picker-field {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
}
.task-detail-picker-field > input {
    flex: 1 1 auto !important;
}
.task-detail-picker-field--compact {
    max-width: 100% !important;
}
.task-detail-picker-button {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border: 1px solid var(--rr-border) !important;
    background: var(--rr-surface) !important;
    color: var(--rr-text) !important;
    flex: 0 0 auto !important;
    cursor: pointer !important;
}
.task-detail-picker-button:hover {
    background: var(--rr-surface-alt) !important;
}
.task-detail-picker-button .rr-icon {
    width: 16px !important;
    height: 16px !important;
}
input[type="date"].form-control,
input[type="datetime-local"].form-control {
    min-width: 0 !important;
    width: 100% !important;
    padding-right: 28px !important;
}
input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    margin-left: 4px;
}
input[type="date"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Auto-save indicator */
.task-detail-form-compact.is-saved::after {
    content: "✓";
    color: var(--rr-teal);
    font-size: var(--t-sm);
    grid-column: 3;
}

/* =========================================================
   TASK DETAIL — QUICK PANEL (lateral drawer)
   ========================================================= */

.task-detail-panel[hidden],
.task-detail-layer[hidden],
[hidden] { display: none !important; }

.task-detail-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1050 !important;
    pointer-events: none !important;
}
.task-detail-panel:not([hidden]) {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    background: rgba(16, 32, 48, 0.35) !important;
    backdrop-filter: blur(2px);
    pointer-events: auto !important;
}
.task-detail-dialog {
    width: min(640px, 92vw) !important;
    height: 100% !important;
    background: var(--rr-surface) !important;
    box-shadow: -20px 0 40px rgba(16,32,48,0.25) !important;
    border-left: 1px solid var(--rr-border) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 0 !important;
    animation: rrSlideInRight .2s ease !important;
}
@keyframes rrSlideInRight {
    from { transform: translateX(40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.task-detail-header {
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--rr-border) !important;
    background: var(--rr-surface) !important;
    position: sticky; top: 0; z-index: 1;
}
.task-detail-header > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.task-detail-panel .task-detail-stage-chip,
.task-detail-panel [class*="stage"] {
    font-size: var(--t-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: var(--rr-text-muted) !important;
}
.task-detail-panel h1,
.task-detail-panel h2.task-detail-title {
    font-size: var(--t-2xl) !important;
    font-weight: 800 !important;
    color: var(--rr-text-strong) !important;
    margin: 6px 0 8px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
}
.task-detail-panel .task-detail-meta-row,
.task-detail-panel .task-detail-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-size: var(--t-sm) !important;
    color: var(--rr-text-muted) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.task-detail-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 12px !important;
}
.task-detail-full-page-link,
a.task-detail-full-page-link {
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    padding: 0 14px !important;
    background: var(--rr-primary) !important;
    color: var(--jj-bone) !important;
    font-size: var(--t-md) !important;
    font-weight: 600 !important;
    border-radius: 3px !important;
    text-decoration: none !important;
}
.task-detail-full-page-link:hover {
    background: var(--rr-primary-hover) !important;
    color: var(--jj-bone) !important;
}

.task-detail-close,
button.task-detail-close {
    position: absolute !important;
    top: 12px !important; right: 12px !important;
    width: 32px !important; height: 32px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--rr-text-muted) !important;
    border-radius: 50% !important;
    font-size: var(--t-lg) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.task-detail-close:hover { background: var(--rr-bg) !important; color: var(--rr-text-strong) !important; }

.task-detail-body,
.task-detail-panel > section,
.task-detail-dialog > section {
    padding: 16px 20px !important;
}

.task-detail-panel section[class*="task-detail-"] > h2,
.task-detail-panel .task-detail-section-title {
    font-size: var(--t-xs) !important;
    font-weight: 700 !important;
    color: var(--rr-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin: 16px 0 8px !important;
}

.task-detail-panel .task-detail-description,
.task-detail-panel [class*="description"] {
    font-size: var(--t-base) !important;
    color: var(--rr-text-strong) !important;
    line-height: 1.55 !important;
    background: var(--rr-bg) !important;
    padding: 12px 14px !important;
    border-radius: 6px !important;
    border: 1px solid var(--rr-border) !important;
}

.task-detail-panel .task-detail-mentions-hint {
    background: var(--jj-bone-2) !important;
    border: 1px solid var(--jj-rule-strong) !important;
    color: var(--jj-citron-2) !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    font-size: var(--t-sm) !important;
    line-height: 1.5 !important;
}

.task-detail-panel input[type="text"],
.task-detail-panel select,
.task-detail-panel textarea {
    border: 1px solid var(--rr-border) !important;
    border-radius: 6px !important;
    font-size: var(--t-md) !important;
    padding: 8px 10px !important;
    color: var(--rr-text-strong) !important;
    background: var(--rr-surface) !important;
}
.task-detail-panel input[type="text"]:focus,
.task-detail-panel select:focus,
.task-detail-panel textarea:focus {
    border-color: var(--rr-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,154,231,0.15) !important;
    outline: 0 !important;
}

.task-detail-panel form {
    margin: 0 !important;
}
.task-detail-panel form button[type="submit"] {
    border-radius: 4px !important;
}

/* =========================================================
   POPOVER (combobox style)
   ========================================================= */

.rr-popover {
    position: fixed;
    z-index: 1200;
    width: 280px;
    max-width: 90vw;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(16,32,48,0.22);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(320px, calc(100vh - 60px));
    overflow: hidden;
}
.rr-popover .rr-popover-list {
    overflow-y: auto;
    max-height: 220px;
}
.rr-popover[hidden] { display: none !important; }
/* .task-detail-modal cria stacking context via transform; popovers precisam de
   z-index acima do comment composer (z-index: 1200). Especificidade (0,2,0)
   vence o !important de jj-legacy.css em (0,1,0). */
.task-detail-modal .rr-popover {
    z-index: 1300 !important;
}

.rr-popover-search input,
.rr-popover-search .form-control {
    height: 32px !important;
    border: 1px solid var(--rr-border) !important;
    border-radius: 3px !important;
    font-size: var(--t-md) !important;
    padding: 0 10px 0 28px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238492A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 8px center !important;
}

.rr-popover-empty {
    font-size: var(--t-md);
    color: var(--rr-text-muted);
    text-align: center;
    padding: 28px 8px;
}

.rr-popover-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}
.rr-popover-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: var(--t-md);
    color: var(--rr-text-strong);
}
.rr-popover-item:hover { background: var(--rr-bg); }
.rr-popover-item { min-width: 0; overflow-wrap: anywhere; }
.rr-popover-item > .rr-popover-dot { flex-shrink: 0; }
.rr-popover-item.is-disabled {
    cursor: default;
    opacity: 0.6;
}
.rr-popover-item.is-disabled:hover { background: transparent; }
.rr-popover-item.is-disabled .rr-icon-sm { width: 13px; height: 13px; margin-left: auto; }
.rr-popover-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--rr-red);
    color: var(--jj-bone);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.rr-popover-cancel {
    width: 100%;
    height: 32px;
    background: var(--rr-surface);
    border: 0;
    border-top: 1px solid var(--rr-border);
    color: var(--rr-primary-hover);
    font-size: var(--t-md);
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    padding-top: 8px;
}

.rr-popover-create-btn {
    width: calc(100% - 16px);
    margin: 8px;
    height: 32px;
    background: var(--rr-primary, var(--rr-primary));
    border: 0;
    border-radius: 4px;
    color: var(--jj-bone);
    font-size: var(--t-md);
    font-weight: 600;
    cursor: pointer;
}
.rr-popover-create-btn:hover { filter: brightness(1.05); }

.rr-popover-recurrence { width: 320px; padding: 0; max-height: min(560px, calc(100vh - 96px)); display: flex; flex-direction: column; }
.rr-popover-recurrence .js-recurrence-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rr-popover-recurrence .rr-rec-scroll { padding: 12px; overflow-y: auto; flex: 1; min-height: 0; }
.rr-popover-recurrence .rr-rec-actions { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--rr-border, #e3e6ea); background: var(--rr-paper, #fff); position: sticky; bottom: 0; margin-top: 0; }
.rr-popover-recurrence .rr-rec-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: var(--t-md); }
.rr-popover-recurrence .rr-rec-row > label { flex: 0 0 96px; color: var(--rr-text-muted, #666); }
.rr-popover-recurrence .rr-rec-row select,
.rr-popover-recurrence .rr-rec-row input[type=number],
.rr-popover-recurrence .rr-rec-row input[type=date] {
    height: 28px; padding: 2px 6px; border: 1px solid var(--rr-border, #e3e6ea); border-radius: 4px; background: var(--rr-paper, #fff); font: inherit; min-width: 0; flex: 1;
}
.rr-popover-recurrence .rr-rec-weekdays-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.rr-popover-recurrence .rr-rec-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--rr-border, #e3e6ea); border-radius: 12px; font-size: var(--t-sm); cursor: pointer; }
.rr-popover-recurrence .rr-rec-chip input { margin: 0; }
.rr-popover-recurrence .rr-rec-fieldset { border: 1px solid var(--rr-border, #e3e6ea); border-radius: 6px; padding: 8px; margin: 8px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: var(--t-sm); }
.rr-popover-recurrence .rr-rec-fieldset legend { padding: 0 4px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--rr-text-muted, #666); }
.rr-popover-recurrence .rr-rec-fieldset label { display: flex; align-items: center; gap: 4px; }
.rr-popover-recurrence .rr-rec-actions { display: flex; gap: 6px; margin-top: 8px; }
.rr-popover-recurrence .rr-popover-confirm {
    flex: 1; height: 32px; background: var(--rr-primary, #009AE7); color: #fff; border: 0; border-radius: 4px; font-weight: 600; cursor: pointer;
}
.rr-popover-recurrence .rr-popover-cancel { flex: 0 0 auto; width: auto; padding: 0 12px; height: 32px; margin: 0; border-top: 0; border: 1px solid var(--rr-border, #e3e6ea); border-radius: 4px; }

button.add-link.js-popover-trigger {
    background: transparent;
    border: 0;
    padding: 0;
}

/* Workspace (Empresa) */
.ws-page { max-width: none; margin: 32px 0; padding: 0 60px; }
.ws-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.ws-header h1 { font-size: var(--t-3xl); font-weight: 800; color: var(--rr-text-strong); margin: 0; letter-spacing: -0.01em; }
.ws-subtitle { color: var(--rr-text-muted); font-size: var(--t-base); margin: 4px 0 0; }
.ws-stats { display: flex; gap: 16px; }
.ws-stat { background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: 8px; padding: 12px 20px; text-align: center; }
.ws-stat strong { display: block; font-size: var(--t-3xl); font-weight: 800; color: var(--rr-text-strong); }
.ws-stat span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--rr-text-muted); }

.ws-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rr-border); margin-bottom: 20px; }
.ws-tab { padding: 12px 20px; color: var(--rr-text); font-weight: 600; font-size: var(--t-base); border-bottom: 3px solid transparent; text-decoration: none; }
.ws-tab:hover { color: var(--rr-text-strong); }
.ws-tab.is-active { color: var(--rr-primary-hover); border-bottom-color: var(--rr-primary-hover); }

.ws-panel { display: none; }
.ws-panel.is-active { display: block; }
.ws-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ws-panel-header h2 { margin: 0; font-size: var(--t-xl); font-weight: 700; color: var(--rr-text-strong); }

.ws-table { width: 100%; border-collapse: collapse; background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: 8px; overflow: hidden; font-size: var(--t-md); }
.ws-table thead th { background: var(--rr-bg); text-transform: uppercase; letter-spacing: 0.5px; font-size: var(--t-xs); color: var(--rr-text-muted); padding: 12px; text-align: left; border-bottom: 1px solid var(--rr-border); font-weight: 700; }
.ws-table tbody td { padding: 14px 12px; border-bottom: 1px solid var(--rr-border); color: var(--rr-text-strong); }
.ws-table tbody tr:last-child td { border-bottom: 0; }
.ws-table tbody tr:hover { background: var(--rr-bg); }
.ws-muted { color: var(--rr-text-muted); font-size: var(--t-sm); }
.ws-link { color: var(--rr-primary-hover); text-decoration: none; font-weight: 600; }
.ws-link:hover { text-decoration: underline; }
.ws-empty { padding: 32px; background: var(--rr-surface); border: 1px dashed var(--rr-border); border-radius: 8px; text-align: center; color: var(--rr-text-muted); }
.ws-role-chip {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 10px;
    font-size: var(--t-xs); font-weight: 600;
    background: var(--rr-bg); color: var(--rr-text);
}
.ws-role-chip.is-admin { background: var(--jj-warning-soft); color: var(--jj-citron-2); }

/* Board switcher dropdown (RunRun-like) */
.board-switcher-dropdown { position: relative; display: inline-flex; align-items: center; }
.board-switcher-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0;
    font-size: var(--t-base); font-weight: 700; color: var(--rr-text-strong);
    padding: 6px 10px; border-radius: 3px; cursor: pointer;
}
.board-switcher-trigger:hover { background: var(--rr-bg); }
.board-switcher-arrow { color: var(--rr-text-muted); font-size: var(--t-xs); }
.board-switcher-popover { min-width: 320px; padding: 0 !important; }
.board-switcher-popover .rr-popover-search { padding: 8px; border-bottom: 1px solid var(--rr-border); }
.board-switcher-popover .rr-popover-list { padding: 4px; margin: 0; max-height: 320px; }
.board-switcher-popover .rr-popover-item { padding: 8px 12px; border-radius: 3px; }
.board-switcher-popover .rr-popover-item.is-selected { background: var(--jj-persimmon-wash); color: var(--rr-primary-hover); font-weight: 600; }
.board-switcher-new {
    display: block;
    width: 100%;
    padding: 12px;
    border: 0;
    border-top: 1px solid var(--rr-border);
    background: var(--rr-primary);
    color: var(--jj-bone);
    font-weight: 700;
    cursor: pointer;
    border-radius: 0 0 6px 6px;
}
.board-switcher-new:hover { background: var(--rr-primary-hover); }

.board-switcher-config { display: inline-flex; margin-left: 4px; }
.board-switcher-gear {
    width: 32px; height: 32px;
    border: 1px solid var(--rr-border);
    background: var(--rr-surface);
    color: var(--rr-text-strong);
    cursor: pointer; border-radius: 3px;
    font-size: var(--t-lg);
    display: inline-flex; align-items: center; justify-content: center;
}
.board-switcher-gear:hover { background: var(--rr-bg); color: var(--rr-primary-hover); border-color: var(--rr-primary-hover); }

/* Modal simples para Novo quadro / Config do quadro */
.rr-modal[hidden] { display: none !important; }
.rr-modal {
    position: fixed; inset: 0; z-index: 1500;
    display: flex; align-items: center; justify-content: center;
}
.rr-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.40);
    cursor: pointer;
}
.rr-modal-dialog {
    position: relative; z-index: 1;
    width: min(560px, 94vw);
    max-height: 86vh;
    background: var(--rr-surface);
    border-radius: 10px;
    box-shadow: 0 30px 80px var(--rr-scrim-strong);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: tagModalIn .12s ease-out;
}
.rr-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--rr-border); }
.rr-modal-header h2 { margin: 0; font-size: var(--t-lg); font-weight: 700; }
.rr-modal-close { width: 32px; height: 32px; background: transparent; border: 0; cursor: pointer; color: var(--rr-text-muted); border-radius: 50%; }
.rr-modal-close:hover { background: var(--rr-bg); }
.rr-modal-body { padding: 16px 20px; overflow-y: auto; }
.rr-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--rr-border); }

/* Keyframe padrão de entrada dos modais do sistema (usado por .rr-modal-dialog):
   scale-in curto, sem deslocamento lateral. */
@keyframes tagModalIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
/* Campos do corpo do modal de cadastro de tag (conteúdo específico). */
.tag-modal-field { display: flex; flex-direction: column; gap: 5px; }
.tag-modal-field + .tag-modal-field { margin-top: 12px; }
.tag-modal-field > label { font-size: 0.75rem; font-weight: 600; color: var(--jj-ink-2); }
.tag-modal-field input[type="text"],
.tag-modal-field input[type="email"] {
    padding: 8px 11px;
    border: 1px solid var(--jj-rule);
    border-radius: var(--r-soft);
    font-size: 0.8125rem;
    background: var(--jj-surface-1);
    color: var(--jj-ink);
    outline: none;
    font-family: inherit;
}
.tag-modal-field input[type="text"]:focus,
.tag-modal-field input[type="email"]:focus { border-color: var(--jj-brand); }
.tag-modal-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-modal-swatch {
    width: 28px; height: 28px; padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--sw, var(--jj-brand));
    cursor: pointer;
    position: relative;
    box-shadow: inset 0 0 0 1px var(--rr-scrim-strong);
}
.tag-modal-swatch.is-selected {
    border-color: var(--rr-text-strong);
    box-shadow: 0 0 0 2px var(--rr-surface), 0 0 0 4px color-mix(in oklch, var(--sw) 55%, transparent);
}
.tag-modal-swatch:focus-visible { outline: 2px solid var(--jj-brand); outline-offset: 2px; }
.tag-modal-swatch-custom {
    display: inline-flex; align-items: center; justify-content: center;
    background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    overflow: hidden;
}
.tag-modal-swatch-custom input[type="color"] {
    width: 200%; height: 200%; margin: -50%;
    padding: 0; border: 0; background: transparent; cursor: pointer; opacity: 0;
}

/* Modal layout com tabs esq */
.rr-modal-tabs-layout { display: grid; grid-template-columns: 180px 1fr; gap: 0; min-height: 300px; }
.rr-modal-tabs { border-right: 1px solid var(--rr-border); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.rr-modal-tabs button { padding: 8px 12px; border: 0; background: transparent; text-align: left; border-radius: 3px; cursor: pointer; font-size: var(--t-md); color: var(--rr-text); }
.rr-modal-tabs button:hover { background: var(--rr-bg); }
.rr-modal-tabs button.is-active { background: var(--jj-persimmon-wash); color: var(--rr-primary-hover); font-weight: 600; }
.rr-modal-tab-content { padding: 16px 20px; }
.rr-modal-tab-content[hidden] { display: none !important; }

/* Board switcher overflow handling */
.board-switcher-links > a:nth-child(n+5) { display: none !important; }
.board-switcher-links::after {
    content: "···";
    padding: 0 6px;
    color: var(--rr-text-muted);
    font-weight: 700;
    align-self: center;
}

/* User dropdown top right (login partial) */
.shell-tools .app-user-trigger,
.shell-tools .btn-outline-secondary,
.shell-tools form[action*="Logout"] button,
.shell-tools a[href*="Identity"] {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: var(--jj-bone) !important;
    font-size: var(--t-md) !important;
    font-weight: 600 !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.shell-tools .app-user-trigger:hover,
.shell-tools a[href*="Identity"]:hover {
    background: rgba(255,255,255,0.08) !important;
}

/* Workspace team card */
.ws-team-card { background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,38,62,0.04); }
.ws-team-head { display:flex; align-items:center; justify-content:space-between; gap: 16px; padding: 12px 18px; background: var(--rr-bg); border-bottom: 1px solid var(--rr-border); }
.ws-team-title { display:flex; align-items:center; gap: 10px; font-size: var(--t-base); color: var(--rr-text-strong); }
.ws-team-title strong { font-size: var(--t-base); font-weight: 700; }
.ws-team-meta { font-size: var(--t-sm); color: var(--rr-text-muted); font-weight: 500; }
.ws-team-add { display:flex; align-items:center; gap: 8px; }
.ws-team-add select { min-width: 240px; height: 34px; font-size: var(--t-md); border: 1px solid var(--rr-border); border-radius: 6px; padding: 0 10px; background: var(--rr-surface); color: var(--rr-text); cursor: pointer; }
.ws-team-add select:hover { border-color: var(--rr-primary); }
.ws-team-card .ws-table { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.ws-team-card .ws-table thead th { background: var(--rr-surface); padding: 10px 18px; font-size: var(--t-xs); }
.ws-team-card .ws-table tbody td { padding: 12px 18px; vertical-align: middle; }
.ws-team-empty { padding: 20px 18px; text-align: center; color: var(--rr-text-muted); font-size: var(--t-md); font-style: italic; background: var(--rr-bg); }
.ws-avatar-inline { display:inline-flex; align-items:center; gap:10px; }
.ws-avatar-chip { width: 28px; height: 28px; border-radius: 50%; background: var(--rr-primary); color: var(--jj-bone); font-size: var(--t-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ws-leader-toggle { display:inline-flex; align-items:center; gap:6px; font-size: var(--t-sm); color: var(--rr-text-muted); cursor: pointer; user-select: none; }
.ws-leader-toggle input { accent-color: var(--rr-primary); width: 14px; height: 14px; }
.ws-action-link { background: none; border: 0; padding: 0; color: #d23b3b; font-weight: 600; font-size: var(--t-sm); cursor: pointer; }
.ws-action-link:hover { text-decoration: underline; }
.ws-leader-badge { display:inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(0,154,231,0.12); color: var(--rr-primary); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; }

/* Projeto/Quadro/Usuário padronização */
.ws-project-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.ws-key-chip { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-xs); background: var(--rr-bg); color: var(--rr-text-muted); padding: 3px 8px; border-radius: 4px; letter-spacing: 0.5px; font-weight: 600; }
.ws-count-chip { display: inline-block; min-width: 32px; padding: 3px 10px; background: var(--rr-bg); color: var(--rr-text-strong); border-radius: 999px; font-size: var(--t-sm); font-weight: 700; text-align: center; }
.ws-action-link.is-neutral { color: var(--rr-primary); }
.ws-action-link.is-neutral:hover { text-decoration: underline; }
.ws-role-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--rr-bg); color: var(--rr-text-muted); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.ws-empty { padding: 32px 24px; text-align: center; color: var(--rr-text-muted); background: var(--rr-surface); border: 1px dashed var(--rr-border); border-radius: 10px; font-size: var(--t-md); }
.ws-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 12px; }
.ws-panel-header h2 { font-size: var(--t-lg); font-weight: 700; margin: 0; color: var(--rr-text-strong); }

/* Empty state gourmet */
.board-empty-state { max-width: 520px; margin: 80px auto; text-align: center; padding: 48px 32px; background: var(--rr-surface); border-radius: 16px; border: 1px solid var(--rr-border); box-shadow: 0 2px 8px rgba(15,38,62,0.06); }
.board-empty-state .board-space-pill { display: none; }
.board-empty-illustration { width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 50%; background: linear-gradient(135deg, #e6f4fb 0%, #d0ebf7 100%); display: flex; align-items: center; justify-content: center; color: var(--rr-primary); }
.board-empty-illustration svg { width: 40px; height: 40px; }
.board-empty-state h1 { font-size: var(--t-2xl); font-weight: 700; color: var(--rr-text-strong); margin: 0 0 12px; line-height: 1.3; }
.board-empty-state p { color: var(--rr-text-muted); font-size: var(--t-base); line-height: 1.6; margin: 0 0 24px; }
.board-empty-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.board-empty-actions .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.board-empty-actions .btn svg { width: 16px; height: 16px; }

.rr-mention { display: inline-block; padding: 1px 8px; margin: 0 1px; border-radius: 999px; background: #e6f1fb; color: #0a69b5; font-weight: 600; font-size: 0.92em; line-height: 1.4; border: 1px solid #bddff4; transition: background-color 0.15s ease; }
.rr-mention:hover { background: #d6e8f7; }
.rr-mention--self { background: linear-gradient(135deg, #fff4d6 0%, #ffe9a8 100%); color: var(--jj-citron-2); border-color: var(--rr-yellow); box-shadow: 0 0 0 1px rgba(245, 201, 107, 0.35); font-weight: 700; }
.rr-mention--self::before { content: "@"; display: none; }

/* ============ Notificações ============ */
.shell-icon-button { position: relative; }
.rr-notif-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rr-red); color: var(--jj-bone); font-size: var(--t-xs); font-weight: 700; line-height: 18px; text-align: center; display: none; box-shadow: 0 0 0 2px var(--jj-paper); }
.rr-notif-badge.is-visible { display: inline-flex; align-items: center; justify-content: center; }

.rr-notif-panel { display: none; flex-direction: column; overflow: hidden; }
.rr-notif-panel.is-open { display: flex; }
.rr-notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--rr-border); }
.rr-notif-panel-header h3 { margin: 0; font-size: var(--t-lg); font-weight: 700; }
.rr-notif-panel-header button { background: none; border: 0; color: var(--rr-primary); font-size: var(--t-sm); font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.rr-notif-panel-header button:hover { background: var(--rr-bg); }
.rr-notif-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.rr-notif-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--rr-bg); cursor: pointer; text-decoration: none; color: inherit; transition: background 0.15s ease; }
.rr-notif-item:hover { background: var(--rr-bg); text-decoration: none; color: inherit; }
.rr-notif-item.is-unread { background: #f3f8fe; }
.rr-notif-item.is-unread:hover { background: #e9f2fc; }
.rr-notif-title { font-size: var(--t-md); font-weight: 600; color: var(--rr-text-strong); margin: 0 0 2px; }
.rr-notif-message { font-size: var(--t-md); color: var(--rr-text); margin: 0 0 4px; }
.rr-notif-preview { font-size: var(--t-sm); color: var(--rr-text-muted); margin: 0 0 4px; font-style: italic; }
.rr-notif-meta { font-size: var(--t-xs); color: var(--rr-text-muted); }
.rr-notif-empty { padding: 40px 16px; text-align: center; color: var(--rr-text-muted); font-size: var(--t-md); }

/* ============ Toasts (estilo Teams) ============ */
.rr-toast-stack { position: fixed; bottom: 24px; right: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 12px; max-width: 380px; pointer-events: none; }
.rr-toast { pointer-events: auto; background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: var(--r-soft); box-shadow: var(--sh-3); padding: 14px 44px 14px 16px; position: relative; animation: rr-toast-in 0.25s ease-out; min-width: 300px; }
@keyframes rr-toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.rr-toast--mention { border-color: color-mix(in oklch, var(--jj-warning) 35%, transparent); }
.rr-toast--card { border-color: color-mix(in oklch, var(--jj-brand) 35%, transparent); }
.rr-toast--board { border-left-color: var(--jj-citron-2); }
.rr-toast--removed { border-left-color: var(--rr-red); }
.rr-toast-title { font-size: var(--t-md); font-weight: 700; color: var(--rr-text-strong); margin: 0 0 4px; }
.rr-toast-message { font-size: var(--t-md); color: var(--rr-text); margin: 0 0 4px; }
.rr-toast-preview { font-size: var(--t-sm); color: var(--rr-text-muted); font-style: italic; margin: 0 0 4px; }
.rr-toast-meta { font-size: var(--t-xs); color: var(--rr-text-muted); }
.rr-toast-close { position: absolute; top: 8px; right: 8px; background: none; border: 0; font-size: var(--t-xl); line-height: 1; color: var(--rr-text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.rr-toast-close:hover { background: var(--rr-bg); color: var(--rr-text-strong); }
.rr-toast a { color: inherit; text-decoration: none; display: block; }

a.task-description { display: block; color: inherit; text-decoration: none; } a.task-description:hover { text-decoration: underline; color: inherit; }


/* ===== Layout fix: sidebar ao lado do conteudo ===== */
/* O sidebar esta fora do .task-detail-layout, entao tornamos
   o .task-detail-modal um grid de 2 colunas e posicionamos
   cada filho diretamente. */
@media (min-width: 901px) {
    .task-detail-modal {
        display: grid !important;
        grid-template-columns: 1fr 480px !important;
        grid-template-rows: auto auto auto 1fr !important;
    }
    .task-detail-modal > nav.task-detail-breadcrumb {
        grid-row: 1 !important;
        grid-column: 1 / -1 !important;
    }
    .task-detail-modal > .task-detail-hero {
        grid-row: 2 !important;
        grid-column: 1 / -1 !important;
    }
    .task-detail-modal > .task-detail-title-section {
        grid-row: 3 !important;
        grid-column: 1 !important;
        min-width: 0 !important;
    }
    .task-detail-modal > .task-detail-sidebar {
        grid-row: 3 / 5 !important;
        grid-column: 2 !important;
        height: unset !important;
        border-left: 1px solid var(--rr-border) !important;
    }
    .task-detail-modal > .task-detail-layout {
        grid-row: 4 !important;
        grid-column: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }
    .task-detail-main {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .task-detail-modal {
        grid-template-columns: 1fr 380px !important;
    }
    .task-detail-modal > .task-detail-sidebar {
        width: 100% !important;
    }
}

/* Fontes RunRun */
.task-detail-title-editable,
.task-detail-title-section h1 {
    font-size: var(--t-xl) !important;
    line-height: 1.3 !important;
}
.task-detail-title-section {
    padding: 8px 24px !important;
}

/* ===== Reducao de tamanho: sidebar + fontes RunRun ===== */

/* Sidebar mais estreita: 360px */
.task-detail-sidebar {
    width: 360px !important;
}
@media (min-width: 901px) {
    .task-detail-modal {
        grid-template-columns: 1fr 360px !important;
    }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .task-detail-modal {
        grid-template-columns: 1fr 300px !important;
    }
    .task-detail-modal > .task-detail-sidebar {
        width: 100% !important;
    }
}

/* Modal menos largo */
.task-detail-modal {
    max-width: 1140px !important;
}

/* Titulo: 19px (RunRun usa ~18-20px) */
.task-detail-title-editable,
.task-detail-title-section h1 {
    font-size: var(--t-xl) !important;
    font-weight: 700 !important;
}

/* Descricao: 13px */
.task-detail-description-block {
    font-size: var(--t-md) !important;
}

/* Sidebar labels (dt): 12px, valores (dd): 13px */
.task-detail-metadata-item dt {
    font-size: var(--t-sm) !important;
}
.task-detail-metadata-item dd {
    font-size: var(--t-md) !important;
}

/* Coluna de label do sidebar mais estreita */
.task-detail-metadata-item {
    grid-template-columns: 120px 1fr !important;
    padding: 5px 16px !important;
}

/* Sidebar section mais compacto */
.task-detail-sidebar-section {
    padding: 6px 0 !important;
}

/* Titulo section menos alto */
.task-detail-title-section {
    padding: 6px 24px 6px !important;
}

/* Fix: botao enviar email nao some - form sticky nunca comprime */
.task-detail-form-sticky {
    flex-shrink: 0 !important;
}

/* Email composer: footer com botao Enviar sempre visivel */
.task-email-composer-form .task-detail-form-footer {
    display: flex !important;
}