/* ============================================================
 * LifeOS · Jira (módulo backlog) — namespace .bl-*  — v1.0.0
 * Estética = DS do LifeOS (tokens var(--*)); arranjo = canon.
 * Fase 0: shell + indicador de path da rota (RULE-021).
 * ============================================================ */

.bl-page{
  max-width:1280px;
  margin:0 auto;
  padding:0 clamp(16px,4vw,40px) 80px;
}

/* RULE-021 — path da rota: discreto, monospace, baixa proeminência,
   só-leitura (não clicável), logo abaixo do título. */
.bl-route-path{
  margin-top:4px;
  font-family:var(--ff-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--tx2);
  opacity:.7;
  user-select:none;
}

.bl-main{
  margin-top:18px;
}
/* transição do conteúdo ao trocar de aba */
@keyframes blContentIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.bl-main.bl-anim-in{ animation:blContentIn var(--d3) var(--ease-out); }

/* ============================================================
 * FASE 3 — Tela principal (RULE-026/017/013/019)
 * Arranjo = canon; estética = tokens do DS.
 * ============================================================ */

/* ---------- (1) Ações de cabeçalho -------------------------- */
.bl-head-btn{padding:8px 13px;font-size:12px}
.bl-ic{width:15px;height:15px;flex-shrink:0}

/* ---------- (2) Faixa de abas — segmentos largura igual ------ */
.bl-tabs{
  display:flex;
  gap:4px;
  margin-top:18px;
  padding:4px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.bl-tab{
  flex:1 1 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 10px;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  color:var(--tx2);
  font-family:var(--ff);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background var(--d1) var(--ease-out),color var(--d1) var(--ease-out),border-color var(--d1) var(--ease-out);
}
.bl-tab:hover{background:var(--panel-2);color:var(--tx)}
/* TSK-028: aba ativa bem destacada (antes era var(--panel), igual ao container) */
.bl-tab.active{
  background:color-mix(in srgb, var(--brand) 16%, transparent);
  border-color:color-mix(in srgb, var(--brand) 50%, transparent);
  color:var(--brand);
  font-weight:700;
}
.bl-tab-count{
  min-width:20px;
  padding:1px 7px;
  background:var(--panel-2);
  border-radius:var(--r-full);
  font-family:var(--ff-mono);
  font-size:11px;
  font-weight:600;
  color:var(--tx3);
}
.bl-tab.active .bl-tab-count{background:var(--brand);color:var(--on-brand)}

/* ---------- (3) Filtros — TSK-028: recolhidos atrás do botão "Filtros" --- */
.bl-filters{
  display:flex;
  flex-direction:column;
  margin-top:14px;
}
.bl-filters-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
}
.bl-filters-toggle{ position:relative; }
.bl-filters-toggle.has-active{ border-color:color-mix(in srgb, var(--brand) 45%, transparent); color:var(--tx); }
.bl-filters-badge{
  min-width:18px;height:18px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:var(--on-brand);
  border-radius:var(--r-full);
  font-family:var(--ff-mono);font-size:11px;font-weight:700;
}
.bl-filters-chev{ width:14px;height:14px;transition:transform var(--d2) var(--ease-out); }
.bl-filters-toggle.open .bl-filters-chev{ transform:rotate(180deg); }
.bl-filters .bl-count{ margin-left:auto; }
/* painel colapsável com os controles — TSK-028 (reataque): transição de
   abertura/fechamento (antes era display:none → abria/fechava seco) */
.bl-filters-panel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  padding:0 12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-width:0 1px;
  border-radius:var(--r-md);
  transition:max-height var(--d3) var(--ease-out), opacity var(--d2) var(--ease-out),
             padding var(--d3) var(--ease-out), margin-top var(--d3) var(--ease-out), border-width var(--d3) var(--ease-out);
}
.bl-filters-panel.open{
  max-height:520px;
  opacity:1;
  margin-top:10px;
  padding:12px;
  border-width:1px;
}
.bl-filters-panel.open{ display:flex; }
.bl-filters-clear{ margin-left:auto; }
/* Selects nativos viram .v-sel via installSelectObserver. Busca usa .v-search. */
.bl-filters .v-sel{ flex: 0 0 auto; }
.bl-search-wrap{ flex: 1 1 190px; min-width: 160px; max-width: 280px; }

/* UX: controles compactados (altura menor, ~32px) pra a barra ocupar menos
   espaço, mantendo TUDO em linha (RULE-026 — nada escondido). */
.bl-filters .v-sel-btn,
.bl-filters .v-search input,
.bl-filters .v-btn{
  padding-top:6px; padding-bottom:6px;
  font-size:12.5px;
}
.bl-filters .v-search input{ padding-left:32px; }
.bl-filters .v-search svg{ width:14px; height:14px; }
.bl-filters .v-sel-menu{ font-size:12.5px; }

.bl-count{
  font-family:var(--ff-mono);
  font-size:11px;
  font-weight:500;
  color:var(--tx3);
  white-space:nowrap;
}

/* ---------- (4) Tabela (lista) ------------------------------ */
/* Grade de colunas: sel·Título·Sprint·Tipo·Módulo·Status·Prioridade·Subtasks·Criada */
.bl-table{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.bl-row{
  display:grid;
  grid-template-columns:36px minmax(220px,1fr) 92px 110px 120px 104px 104px 84px 76px;
  align-items:center;
  gap:10px;
  padding:0 14px;
  min-height:46px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition:background var(--d1) var(--ease-out);
}
.bl-row:last-child{border-bottom:none}
.bl-row:not(.bl-head):hover{background:var(--panel-2)}
.bl-row.sel{background:color-mix(in srgb, var(--info) 7%, transparent)}
.bl-row.sel:hover{background:color-mix(in srgb, var(--info) 11%, transparent)}
.bl-head{
  position:sticky;
  top:0;
  min-height:40px;
  background:var(--panel);
  cursor:default;
  font-family:var(--ff-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--tx3);
  z-index:1;
}
.bl-head:hover{background:var(--panel)}
.bl-cell{min-width:0;overflow:hidden}
.bl-c-sel{display:flex;align-items:center;justify-content:center;overflow:visible}
.bl-c-title{display:flex;align-items:center;gap:8px}
.bl-c-date{font-family:var(--ff-mono);font-size:11px;color:var(--tx3);white-space:nowrap}
.bl-c-sub{font-family:var(--ff-mono);font-size:12px;color:var(--tx2)}

/* TSK-003: checkbox de seleção é o .v-chk do DS — só ajusta tamanho pra densidade da tabela */
.bl-check.v-chk{width:16px;height:16px}
.bl-check.v-chk svg{width:11px;height:11px}
/* estado indeterminado do "selecionar todos" (traço no lugar do check) */
.v-chk.bl-chk-indet{background:var(--brand);border-color:var(--brand)}
.v-chk.bl-chk-indet svg{display:none}
.v-chk.bl-chk-indet::after{content:'';width:9px;height:2px;border-radius:1px;background:var(--on-brand)}
.bl-code{
  font-family:var(--ff-mono);
  font-size:11px;
  font-weight:600;
  color:var(--tx3);
  flex-shrink:0;
}
.bl-title-tx{
  font-size:13px;
  font-weight:500;
  color:var(--tx);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bl-flag{display:inline-flex;color:var(--warn);flex-shrink:0}
.bl-dash{color:var(--tx3)}

/* seções de agrupamento por módulo */
.bl-section{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  font-family:var(--ff-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--tx2);
}
.bl-section-n{
  font-size:10px;
  color:var(--tx3);
}

/* Badges agora 100% via DS (.v-bdg / .v-bdg-{good|warn|crit|info|neu|mod}) */

/* (4b) Board removido (TSK-008) — só a Lista é visualização do backlog. */

/* ---------- (5) Barra de ação em massa — flutuante ---------- */
.bl-bulk{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(16px);
  z-index:var(--z-toast);
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:var(--r-full);
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--d2) var(--ease-out),transform var(--d2) var(--ease-out);
}
.bl-bulk.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.bl-bulk-count{
  font-family:var(--ff-mono);
  font-size:11px;
  font-weight:600;
  color:var(--tx);
  white-space:nowrap;
  padding-left:4px;
}
.bl-bulk-label{font-size:11px;color:var(--tx3);white-space:nowrap}
.bl-bulk-sep{width:1px;height:20px;background:var(--line-2)}
/* P-DS: .bl-bulk-move/.bl-bulk-act → .v-btn v-btn-sec (+ v-btn--danger no Excluir);
   .bl-bulk-x → .v-btn v-btn-gho v-btn--icon v-btn--sm. Mantém só o padding
   compacto pra densidade da barra flutuante (DS é mais folgado). */
.bl-bulk-move,
.bl-bulk-act{
  padding:6px 11px;
  font-size:12px;
  white-space:nowrap;
}

/* desktop: centralizar na área útil (descontar a sidebar) */
@media (min-width:1200px){
  html.has-sidebar .bl-bulk{
    left:calc(50% + var(--lifeos-sb-w, 240px) / 2);
  }
  html.has-sidebar.sidebar-collapsed .bl-bulk{
    left:calc(50% + var(--lifeos-sb-w-collapsed, 64px) / 2);
  }
}

/* ---------- Menu de contexto (estende .opt-menu do DS) ------ */
.bl-ctx{min-width:200px}
.bl-ctx-sep{height:1px;margin:4px 0;background:var(--line)}
.bl-ctx-danger{color:color-mix(in srgb, var(--crit) 70%, var(--tx))}
.bl-ctx-danger svg{color:color-mix(in srgb, var(--crit) 70%, var(--tx)) !important}
.bl-ctx-danger:hover{background:color-mix(in srgb, var(--crit) 14%, transparent);color:#fff}

/* ---------- Estados vazios / erro --------------------------- */
.bl-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:64px 24px;
  text-align:center;
}
.bl-state-ic{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  color:var(--tx3);
  opacity:.6;
}
.bl-state-ic svg{width:28px;height:28px}
.bl-state-title{font-size:15px;font-weight:600;color:var(--tx)}
.bl-state-sub{font-size:13px;color:var(--tx3);margin-bottom:4px}

/* ---------- Responsivo: tabela colapsa colunas secundárias --- */
/* TSK-055: o nº de colunas do grid TEM que bater com o nº de células visíveis,
   senão as sobrando vazam pra uma linha implícita (itens tortos / alinhados no topo). */
@media (max-width:1100px){
  .bl-row{
    grid-template-columns:32px minmax(140px,1fr) 110px 100px 96px;
    gap:8px;
  }
  /* visíveis: sel, título, módulo, status, prioridade (5 = 5 colunas) */
  .bl-c-sprint,.bl-c-type,.bl-c-sub,.bl-c-date{display:none}
}
@media (max-width:680px){
  .bl-row{grid-template-columns:28px minmax(0,1fr) 84px 84px;gap:6px}
  /* visíveis: sel, título, status, prioridade (4 = 4 colunas) */
  .bl-c-module{display:none}
  .bl-filters-trail{margin-left:0}
}

/* ============================================================
 * FASE 4 — Drawer de task + modais/confirm/toast (RULE-027/016/
 * 014/015/011/010/003). Posição normativa; estética = tokens DS.
 * ============================================================ */

/* ---------- Overlay + pilha de drawers ---------------------- */
.bl-ov{
  position:fixed;inset:0;z-index:var(--z-modal,150);
  background:rgba(0,0,0,0.55);
  opacity:0;pointer-events:none;
  transition:opacity var(--d2) var(--ease-out);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.bl-ov.show{opacity:1;pointer-events:auto}

/* DRAWER: colado na borda DIREITA, full-height, largura parcial fixa.
   Três regiões verticais: header (fixo) / corpo (rola) / rodapé (fixo). */
.bl-drawer{
  position:fixed;top:0;right:0;bottom:0;
  z-index:calc(var(--z-modal,150) + 1);
  display:flex;flex-direction:column;
  width:min(560px,94vw);
  background:var(--panel);
  border-left:1px solid var(--line-2);
  box-shadow:-24px 0 60px rgba(0,0,0,0.45);
  transform:translateX(100%);
  transition:transform var(--d3) var(--ease-out);
}
.bl-drawer.show{transform:translateX(0)}
/* empilhamento: o de baixo recua um pouco e escurece */
.bl-drawer.receded{transform:translateX(-28px) scale(.985);filter:brightness(.82)}
.bl-drawer[data-level="2"]{z-index:calc(var(--z-modal,150) + 3);width:min(520px,90vw)}

/* (A) HEADER — dois clusters: identidade à esquerda, ações à direita */
.bl-dw-head{
  flex:0 0 auto;
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.bl-dw-id{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;flex:1 1 auto}
.bl-dw-acts{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.bl-dw-title{font-size:15px;font-weight:700;color:var(--tx)}
/* P-DS: .bl-copy migrado pra .v-btn v-btn-sec v-btn--sm v-btn--mono (DS).
   Mantém o padding/gap compacto do chip de código no header e o estado .copied. */
.bl-copy{
  gap:5px;
  padding:3px 8px;
  font-size:11px;
}
.bl-copy.copied{color:var(--good);border-color:color-mix(in srgb, var(--good) 40%, transparent)}
/* P1.3: .bl-iconbtn removido. Substituído por .v-btn v-btn-gho v-btn--icon (DS) */

/* (B) CORPO — coluna única rolável, campos empilhados em ordem fixa */
.bl-dw-body{
  flex:1 1 auto;overflow-y:auto;
  padding:16px;
  display:flex;flex-direction:column;gap:16px;
}
.bl-field{display:flex;flex-direction:column;gap:7px}
.bl-flabel{
  font-family:var(--ff-mono);font-size:10px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--tx2);
  display:flex;align-items:center;gap:6px;
}
.bl-flabel .bl-req{color:var(--crit);font-size:11px}
.bl-fhint{font-size:11px;color:var(--tx3);font-weight:500}
/* TSK-006: campos do drawer ocupam a largura toda (.v-inp/.v-ta do DS têm width fixa) */
.bl-field .v-inp,.bl-field .v-ta{width:100%}
/* TSK-004: atalho de criar logo após a descrição — tamanho natural, não estica */
.bl-inline-save{align-self:flex-start}
/* TSK-017 (SPR-002): foco visível ao chegar via Tab da descrição (.focus() programático) */
.bl-inline-save:focus{outline:2px solid color-mix(in srgb, var(--brand) 70%, transparent);outline-offset:2px}

/* pílulas seleção-única (Tipo/Status/Prioridade) — RULE-019 */
/* Pills agora 100% via DS (.v-pill / .v-pill-grp / .v-pill-{good|warn|crit|info}) */

/* combobox buscável (Módulo) — RULE-016 dropdown buscável */
.bl-combo{position:relative}
/* TSK-007: sinaliza que é um dropdown (não um input de texto) — chevron + cursor */
.bl-combo-input{cursor:pointer;padding-right:34px}
.bl-combo-chev{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--tx3);
  pointer-events:none;
  transition:transform var(--d2) var(--ease);
}
.bl-combo.open .bl-combo-chev{transform:translateY(-50%) rotate(180deg)}
.bl-combo-list{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:5;
  max-height:240px;overflow-y:auto;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  box-shadow:0 12px 32px rgba(0,0,0,0.4);
  padding:4px;
  display:none;
}
.bl-combo.open .bl-combo-list{display:block}
.bl-combo-opt{
  padding:8px 10px;border-radius:5px;
  font-size:13px;color:var(--tx);cursor:pointer;
}
.bl-combo-opt:hover,.bl-combo-opt.hl{background:var(--panel-2);color:var(--tx)}
.bl-combo-opt.sel{color:var(--info)}
.bl-combo-empty{padding:10px;font-size:12px;color:var(--tx3);text-align:center}

/* editor rich-text (Descrição) — RULE-011 paste vira anexo, nunca base64 */
.bl-rt{border:1px solid var(--line-2);border-radius:8px;background:var(--panel-2);overflow:hidden}
/* toolbar DEPOIS do campo (RULE-016 2.2.0): borda no TOPO, não embaixo */
.bl-rt-tb{display:flex;align-items:center;gap:2px;padding:5px;border-top:1px solid var(--line);flex-wrap:wrap}
.bl-rt-sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--line)}
/* P-DS: .bl-rt-btn migrado pra .v-btn v-btn-gho v-btn--icon v-btn--sm (DS).
   Mantém só o peso do glifo B/I/U (o DS usa weight menor). */
.bl-rt-btn{font-weight:700}
.bl-rt-area{
  min-height:120px;max-height:340px;overflow-y:auto;
  padding:11px 13px;
  font-family:var(--ff);font-size:13px;line-height:1.55;color:var(--tx);
  outline:none;
}
.bl-rt-area:empty::before{content:attr(data-ph);color:var(--tx3)}
.bl-rt-area p{margin:0 0 8px}
.bl-rt-area ul,.bl-rt-area ol{margin:0 0 8px;padding-left:20px}
.bl-rt-area a{color:var(--info);text-decoration:underline}

/* galeria de anexos — RULE-011 */
.bl-atts{display:flex;flex-wrap:wrap;gap:8px}
.bl-att{
  position:relative;width:84px;height:84px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  overflow:hidden;background:var(--panel-2);
  display:flex;align-items:center;justify-content:center;
}
.bl-att img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.bl-att-file{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;font-size:9px;color:var(--tx3);text-align:center;word-break:break-all}
.bl-att-file svg{width:20px;height:20px;color:var(--tx2)}
/* P-DS: .bl-att-rm carrega .v-btn v-btn-gho v-btn--icon v-btn--sm (DS), mas
   MANTÉM o overlay próprio: posição absoluta, círculo escuro 20×20 e o
   reveal opacity 0→1 no hover do tile (layout + estado, não cosmético). */
.bl-att-rm{
  position:absolute;top:3px;right:3px;
  width:20px;height:20px;
  background:rgba(0,0,0,0.65);border:none;border-radius:50%;
  color:#fff;opacity:0;transition:opacity var(--d1) var(--ease-out);
}
.bl-att-rm:hover{background:rgba(0,0,0,0.8);color:#fff}
.bl-att:hover .bl-att-rm{opacity:1}
.bl-att-rm svg{width:12px;height:12px}
.bl-att-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,0.4)}
.bl-att-prog>i{display:block;height:100%;background:var(--info);width:0;transition:width var(--d2) linear}
.bl-att.uploading img{opacity:.5}
/* P-DS: .bl-att-add migrado pra .v-add (DS dá borda tracejada/hover).
   Mantém só o LAYOUT do tile (quadrado 84×84, coluna, fonte menor) que
   sobrepõe o .v-add full-width/row. */
.bl-att-add{
  width:84px;height:84px;
  flex-direction:column;gap:4px;
  font-size:10px;
}
.bl-att-add svg{width:18px;height:18px}

/* seções do corpo (Plano de teste / Histórico / Feedback / Subtasks) */
.bl-sec{display:flex;flex-direction:column;gap:9px}
.bl-sec-head{
  display:flex;align-items:center;gap:8px;
  padding-top:4px;
  font-family:var(--ff-mono);font-size:10px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--tx2);
}
.bl-sec-head .bl-sec-n{color:var(--tx3)}
.bl-sec.required .bl-sec-head{color:var(--warn)}
.bl-divider{height:1px;background:var(--line);margin:2px 0}

/* subtasks — RULE-010 */
.bl-subs{display:flex;flex-direction:column;gap:6px}
.bl-sub-row{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;
  transition:border-color var(--d1) var(--ease-out);
}
.bl-sub-row:hover{border-color:var(--line-2)}
.bl-sub-check{flex:0 0 auto}
.bl-sub-check.v-chk{width:18px;height:18px}
.bl-sub-title{flex:1 1 auto;font-size:13px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-sub-title.done{color:var(--tx3);text-decoration:line-through}
.bl-sub-add{
  display:flex;align-items:center;gap:8px;
}
.bl-sub-add .v-inp{flex:1 1 auto}

/* histórico / feedback (read-only por enquanto; ciclo na Fase 5/6) */
.bl-log{display:flex;flex-direction:column;gap:6px}
.bl-log-item{
  display:flex;gap:8px;
  padding:8px 10px;
  background:var(--panel-2);border-radius:var(--r-sm);
  font-size:12px;color:var(--tx2);
}
.bl-log-when{font-family:var(--ff-mono);font-size:10px;color:var(--tx3);flex:0 0 auto}
.bl-fb-item{
  padding:10px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel-2);
  font-size:13px;color:var(--tx);line-height:1.5;
}
.bl-fb-item.reject{border-color:color-mix(in srgb, var(--crit) 30%, transparent)}
.bl-fb-item.approve{border-color:color-mix(in srgb, var(--good) 30%, transparent)}
.bl-fb-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.bl-fb-top b{font-size:12px;font-weight:600;flex:1 1 auto;min-width:0}
.bl-fb-item.reject .bl-fb-top b{color:color-mix(in srgb, var(--crit) 70%, var(--tx))}
.bl-fb-item.approve .bl-fb-top b{color:color-mix(in srgb, var(--good) 75%, var(--tx))}
.bl-fb-body{font-size:13px;color:var(--tx);line-height:1.5}
.bl-fb-body img{max-width:100%;border-radius:var(--r-sm);margin:4px 0}
/* TSK-038: listas do conteúdo rich (feedback, descrição, plano de teste)
   precisam de indentação/marcador — sem isso os números vazavam pra fora do
   card. Vale pro feedback e pra área do editor. */
.bl-fb-body ol, .bl-rt-area ol{ list-style:decimal; margin:4px 0; padding-left:22px; }
.bl-fb-body ul, .bl-rt-area ul{ list-style:disc; margin:4px 0; padding-left:22px; }
.bl-fb-body li, .bl-rt-area li{ margin:2px 0; }
.bl-fb-ev{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bl-fb-ev:empty{display:none}
.bl-fb-thumb{
  width:64px;height:64px;object-fit:cover;
  border-radius:var(--r-sm);border:1px solid var(--line);
  cursor:zoom-in;transition:border-color var(--d1) var(--ease-out)
}
.bl-fb-thumb:hover{border-color:var(--line-2)}
.bl-fb-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.bl-empty-line{font-size:12px;color:var(--tx3);padding:4px 0}

/* (C) RODAPÉ — metadados à esquerda, ações à direita */
.bl-dw-foot{
  flex:0 0 auto;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  border-top:1px solid var(--line);
  background:var(--panel);
}
.bl-dw-meta{
  flex:1 1 auto;min-width:0;
  font-family:var(--ff-mono);font-size:10px;color:var(--tx3);
  line-height:1.5;
}
.bl-dw-foot-acts{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* P1.4: .bl-modal-* removidos. blModal() agora usa .v-ov + .v-modal (DS).
   Mantém apenas o ícone (.bl-modal-ic) que é específico do confirm dialog do Jira. */
.bl-modal-ic{
  display:flex;width:34px;height:34px;align-items:center;justify-content:center;
  border-radius:var(--r-sm);flex:0 0 auto;margin-right:6px;
}
.bl-modal-ic svg{width:18px;height:18px}
.bl-modal-ic.danger{background:color-mix(in srgb, var(--crit) 14%, transparent);color:color-mix(in srgb, var(--crit) 70%, var(--tx))}
.bl-modal-ic.warning{background:color-mix(in srgb, var(--warn) 14%, transparent);color:color-mix(in srgb, var(--warn) 80%, var(--tx))}
.bl-modal-ic.info{background:color-mix(in srgb, var(--info) 14%, transparent);color:color-mix(in srgb, var(--brand) 70%, var(--tx))}

/* ---------- Toast (sucesso/erro/aviso) ---------------------- */
.bl-toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(16px);
  z-index:var(--z-toast,9000);
  display:flex;align-items:center;gap:9px;
  padding:11px 16px;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:var(--r-full);
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  font-size:13px;font-weight:600;color:var(--tx);
  opacity:0;pointer-events:none;
  transition:opacity var(--d2) var(--ease-out),transform var(--d2) var(--ease-out);
}
.bl-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.bl-toast svg{width:16px;height:16px;flex-shrink:0}
.bl-toast.success svg{color:var(--good)}
.bl-toast.error svg{color:var(--crit)}
.bl-toast.warn svg{color:var(--warn)}
@media (min-width:1200px){
  html.has-sidebar .bl-toast{left:calc(50% + var(--lifeos-sb-w,240px)/2)}
  html.has-sidebar.sidebar-collapsed .bl-toast{left:calc(50% + var(--lifeos-sb-w-collapsed,64px)/2)}
}

/* lightbox de anexo */
.bl-lightbox{
  position:fixed;inset:0;z-index:var(--z-critical,99999);
  display:flex;align-items:center;justify-content:center;padding:32px;
  background:rgba(0,0,0,0.85);cursor:zoom-out;
  opacity:0;pointer-events:none;transition:opacity var(--d2) var(--ease-out);
}
.bl-lightbox.show{opacity:1;pointer-events:auto}
.bl-lightbox img{max-width:100%;max-height:100%;border-radius:var(--r-sm)}

/* ---------- Drawer de Sprints (RULE-018 master→detalhe) ---- */
.bl-sp-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:56px 24px;color:var(--tx3);
}
.bl-sp-empty-ic{width:32px;height:32px;opacity:.5}
.bl-sp-empty-tx{font-size:14px;font-weight:600;color:var(--tx2)}
.bl-sp-empty-sub{font-size:12px;max-width:260px;line-height:1.5}

.bl-sp-list{display:flex;flex-direction:column;gap:8px}
.bl-sp-card{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 14px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);
  cursor:pointer;transition:border-color var(--d1) var(--ease-out),background var(--d1) var(--ease-out);
}
.bl-sp-card:hover{border-color:var(--line-2);background:var(--panel)}
.bl-sp-card-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.bl-sp-code{font-family:var(--ff-mono);font-size:13px;font-weight:600;color:var(--tx)}
.bl-sp-meta{font-size:11px;color:var(--tx3)}
.bl-sp-card-side{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.bl-sp-chev{width:16px;height:16px;color:var(--tx3)}

.bl-sp-prog{
  height:6px;border-radius:999px;background:var(--bg);overflow:hidden;
  border:1px solid var(--line);
}
/* TSK-014 (SPR-002): cresce via transform (scaleX), não animando width (layout) */
.bl-sp-prog-bar{height:100%;background:var(--good);border-radius:999px;transform-origin:left;animation:blBarGrow var(--d3) var(--ease-out)}
@keyframes blBarGrow{from{transform:scaleX(0)}}

.bl-sp-detail{display:flex;flex-direction:column;gap:12px}
.bl-sp-detail-head{display:flex;align-items:center;gap:10px}
.bl-sp-detail-name{flex:1 1 auto;min-width:0;font-size:15px;font-weight:600;color:var(--tx)}
.bl-sp-detail-prog{display:flex;align-items:center;gap:10px}
.bl-sp-detail-prog .bl-sp-prog{flex:1 1 auto}
/* RULE-018: campo de status da sprint (auto-save) */
.bl-sp-status-field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.bl-sp-status-field .v-sel{max-width:220px}
.bl-sp-tasks{display:flex;flex-direction:column;gap:6px}
.bl-sp-trow{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color var(--d1) var(--ease), background-color var(--d1) var(--ease);
}
.bl-sp-trow:hover{ border-color:var(--line-2);background:var(--panel); }
/* TSK-011 (SPR-002): bare <button> mostrava fundo cinza UA (as "barras
   brancas" do print). Reset explícito. */
.bl-sp-open{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;
  text-align:left;cursor:pointer;
  background:transparent;border:0;padding:0;color:inherit;font:inherit;appearance:none;
}
.bl-sp-open:hover .bl-sp-ttl{color:var(--tx)}
.bl-sp-ttl{font-size:13px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-sp-rm{flex:0 0 auto}
.bl-sp-rm:hover{color:var(--crit)}

/* radiogroup de sprints (modal "Adicionar à sprint", RULE-018) */
.bl-radio-list{display:flex;flex-direction:column;gap:6px}
.bl-radio-opt{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 12px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color var(--d1) var(--ease-out),background var(--d1) var(--ease-out);
}
.bl-radio-opt:hover{border-color:var(--line-2)}
.bl-radio-opt.active{border-color:color-mix(in srgb, var(--info) 50%, transparent);background:color-mix(in srgb, var(--info) 8%, transparent)}
.bl-radio-dot{
  width:16px;height:16px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--line-2);transition:border-color var(--d1) var(--ease-out);
}
.bl-radio-opt.active .bl-radio-dot{border-color:var(--info);box-shadow:inset 0 0 0 3px var(--info)}
.bl-radio-code{flex:1 1 auto;min-width:0;font-family:var(--ff-mono);font-size:13px;font-weight:600;color:var(--tx)}
.bl-radio-meta{font-size:11px;color:var(--tx3);flex:0 0 auto}

/* ---------- Histórico de auditoria (RULE-025) -------------- */
.bl-hist{display:flex;flex-direction:column;gap:4px}
.bl-hist-empty{padding:32px 16px;text-align:center;font-size:13px;color:var(--tx3)}
/* TSK-027: linha única e compacta por evento */
.bl-hist-item{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px 10px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
}
.bl-hist-action{
  font-size:10px;font-weight:600;padding:1px 7px;border-radius:var(--r-full);
  border:1px solid var(--line-2);flex:0 0 auto;
}
.bl-hist-action.v-insert{color:color-mix(in srgb, var(--good) 75%, var(--tx));background:color-mix(in srgb, var(--good) 12%, transparent);border-color:color-mix(in srgb, var(--good) 30%, transparent)}
.bl-hist-action.v-update{color:color-mix(in srgb, var(--brand) 70%, var(--tx));background:color-mix(in srgb, var(--info) 12%, transparent);border-color:color-mix(in srgb, var(--info) 30%, transparent)}
.bl-hist-action.v-delete{color:color-mix(in srgb, var(--crit) 70%, var(--tx));background:color-mix(in srgb, var(--crit) 12%, transparent);border-color:color-mix(in srgb, var(--crit) 30%, transparent)}
.bl-hist-sum{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--tx2);min-width:0;flex:1 1 auto}
.bl-hist-d{display:inline-flex;align-items:center;gap:5px}
.bl-hist-ent{font-size:12px;font-weight:600;color:var(--tx);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-hist-when{margin-left:auto;font-size:11px;color:var(--tx3);flex:0 0 auto}
.bl-hist-field{font-size:11px;font-weight:600;color:var(--tx3)}
.bl-hist-from{color:var(--tx3);text-decoration:line-through}
.bl-hist-arrow{color:var(--tx4)}
.bl-hist-to{color:var(--tx);font-weight:500}
.bl-hist-dot{color:var(--tx4)}
.bl-hist-restore{flex:0 0 auto}

/* ---------- "Prontas no Jira" (RULE-024 atalho 'j') -------- */
.bl-ready-list{display:flex;flex-direction:column;gap:6px}
.bl-ready-row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 12px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color var(--d1) var(--ease-out),background var(--d1) var(--ease-out);
}
.bl-ready-row:hover{border-color:var(--line-2);background:var(--panel)}
.bl-ready-ttl{flex:1 1 auto;min-width:0;font-size:13px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* reduced motion (RULE-022) */
@media (prefers-reduced-motion:reduce){
  /* sem transform de layout: pode zerar o movimento por completo */
  .bl-drawer,.bl-ov,.v-ov{transition:opacity var(--d1) linear !important;transform:none !important}
  .bl-drawer.show{transform:none !important}
  /* estes se CENTRALIZAM via transform — zerar quebra a posição (modal/toast/bulk caíam no canto).
     Preserva o transform de layout; mata só a animação de entrada (scale/translateY). */
  .v-modal{transition:opacity var(--d1) linear !important;transform:translate(-50%,-50%) !important}
  .bl-toast,.bl-bulk{transition:opacity var(--d1) linear !important;transform:translateX(-50%) !important}
  .bl-drawer.receded{transform:none !important;filter:brightness(.82)}
  .bl-sp-prog-bar,.bl-att-prog>i{transition:none !important}
}

@media (max-width:600px){
  .bl-drawer{width:100vw;border-left:none}
}