/* ============================================================
   DeltaZero – Main Application Stylesheet
   ============================================================ */

/* --- Design Tokens --- */
:root {
    --navy: #0b3b56;
    --navy-deep: #08293c;
    --teal: #0384a5;
    --teal-deep: #02647c;
    --lime: #acc90f;
    --lime-deep: #5e7708;
    --alert: #ef6c4a;
    --critical: #c2280f;
    --ink: #0c1a26;
    --ink-soft: #5d6b7a;
    --ink-faint: #95a0ab;
    --bg: #f3f5f8;
    --surface: #fff;
    --surface-soft: #f7f9fb;
    --border: #e4e8ed;
    --border-soft: #eef1f4;
    --shadow-sm: 0 1px 2px rgba(11,59,86,.04), 0 1px 4px rgba(11,59,86,.04);
    --shadow-md: 0 2px 6px rgba(11,59,86,.06), 0 8px 20px rgba(11,59,86,.05);
    --r-md: 12px;
}

/* --- Base Reset --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* --- Font Classes --- */
.font-mono {
    font-family: 'JetBrains Mono', monospace;
    font-feature-settings: 'tnum';
}

/* ============================================================
   Layout
   ============================================================ */

.dz-app {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
}

/* ============================================================
   Sidebar
   ============================================================ */

.dz-sidebar {
    background: var(--navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 18px 14px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid #061d2c;
}

/* --- Logo --- */
.dz-logo-block {
    margin: 0 4px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dz-logo {
    width: 100%;
    max-width: 175px;
    height: auto;
    display: block;
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

/* --- Navigation --- */
.dz-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dz-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    background: transparent;
    color: rgba(255,255,255,.78);
    border: none;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: .15s;
    width: 100%;
    text-decoration:none;
}

.dz-nav-item:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

.dz-nav-item.on {
    background: linear-gradient(90deg, rgba(172,201,15,.16), rgba(3,132,165,.18));
    color: #fff;
    font-weight: 700;
    box-shadow: inset 2px 0 0 var(--lime);
}

/* Badge numérico no item de menu (Auditoria) */
.dz-nav-badge {
    margin-left: auto;
    min-width: 22px;
    height: 18px;
    padding: 0 7px;
    background: var(--alert);
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Sidebar Buddy --- */
.dz-side-buddy {
    margin-top: auto;
    margin-bottom: 12px;
    border-radius: 12px;
    padding: 12px;
    background: #f1f7d6;
    border: 1px solid rgba(172,201,15,.45);
    color: var(--ink);
}

/* --- Sidebar Footer --- */
.dz-side-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 4px;
    text-decoration:none;
}

.dz-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0384a5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 800;
    flex-shrink: 0;
}

/* ============================================================
   Hamburger — visível apenas no mobile
   ============================================================ */

.dz-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background .15s;
}

.dz-hamburger:hover { background: var(--surface-soft); }

.dz-ham-line {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transform-origin: center;
    transition: transform .22s ease, opacity .22s ease, width .22s ease;
}

/* Animação X quando aberto */
.dz-ham-line-1-open { transform: translateY(7px) rotate(45deg); }
.dz-ham-line-2-open { opacity: 0; width: 0; }
.dz-ham-line-3-open { transform: translateY(-7px) rotate(-45deg); }

/* Overlay */
.dz-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 41, 60, .45);
    backdrop-filter: blur(2px);
    z-index: 99;
    animation: overlay-in .2s ease;
}

@keyframes overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   Responsividade
   ============================================================ */

/* NOTE: o bloco @media (max-width: 768px) "principal" foi MOVIDO para o FIM
   do arquivo. Motivo: muitas classes que ele sobrescreve (.cap-kpi-grid,
   .cap-form-grid, .cap-org-grid, .dz-card-header, .dz-screen-header, etc)
   estão definidas DEPOIS dessa linha — então, em mobile, o base vencia o
   mobile na cascade CSS (ambas com mesma especificidade, base declarado
   por último). Movendo o @media para o fim, todas as overrides mobile
   passam a vencer corretamente. Buscar "BLOCO MOBILE — overrides finais"
   para localizar. */

/* ============================================================
   Topbar
   ============================================================ */

.dz-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* --- Search --- */
.dz-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    padding: 7px 12px;
    border-radius: 9px;
    min-width: 420px;
    color: var(--ink-soft);
}

.dz-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--ink);
}

/* ============================================================
   Content Area
   ============================================================ */

.dz-content {
    padding: 24px 28px 64px;
    /* Safeguard contra overflow horizontal silencioso — body já tem
       overflow-x:hidden, mas isso aqui evita o conteúdo crescer pra além
       do viewport (que escondia trechos do texto sem nenhum sinal visual).
       Tooltips em mobile usam position:fixed e dropdowns descem vertical,
       então não são afetados. */
    overflow-x: clip;
    min-width: 0;
}

/* --- Screen Header --- */
.dz-screen-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    min-width: 0;
}

/* Permite os children flex encolher quando o viewport é estreito.
   Sem min-width:0, o filho com conteúdo longo (especialmente o <p>
   descritivo) força o flex container a estender lateralmente. */
.dz-screen-header > div { min-width: 0; }
.dz-screen-header > div > p { overflow-wrap: break-word; }

/* --- Kicker --- */
.dz-kicker {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--ink-faint);
}

/* --- Heading --- */
.dz-h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--ink);
    margin: 4px 0 0;
}

/* ============================================================
   Card
   ============================================================ */

.dz-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.p-5 {
    padding: 20px;
}

/* ============================================================
   Utility Classes
   ============================================================ */

.grid        { display: grid; }
.flex        { display: flex; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.flex-col    { flex-direction: column; }
.flex-1      { flex: 1; }
.gap-2       { gap: 8px; }
.gap-3       { gap: 12px; }
.gap-4       { gap: 16px; }
.mb-3        { margin-bottom: 12px; }
.mt-2        { margin-top: 8px; }
.min-w-0     { min-width: 0; }
.grid-cols-12   { grid-template-columns: repeat(12, 1fr); }
.col-span-4  { grid-column: span 4; }
.col-span-8  { grid-column: span 8; }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: .15s;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--teal);
    color: #fff;
}

.btn-lime {
    background: var(--lime);
    color: #243000;
}

.btn-soft {
    background: var(--surface-soft);
    color: var(--ink);
    border-color: var(--border);
}

.btn-ghost {
    background: #fff;
    color: var(--ink);
    border-color: var(--border);
}

.btn-danger {
    background: rgba(239,108,74,.12);
    color: var(--critical);
    border-color: rgba(239,108,74,.25);
}

.btn-mini {
    padding: 6px 9px;
    font-size: 12px;
    border-radius: 8px;
}

/* Estado "armado" da confirmação inline em 2 cliques (Limpar/Excluir).
   Pulsa sutilmente para chamar atenção; reverte sozinho após 3s se o
   2º clique não ocorrer. */
.btn-confirm-pending {
    background: rgba(239,108,74,.14);
    color: var(--critical);
    border-color: rgba(239,108,74,.45);
    font-weight: 800;
    animation: dz-confirm-pulse 1.3s ease-in-out infinite;
}

.btn-confirm-pending:hover {
    background: rgba(239,108,74,.22);
    border-color: var(--critical);
}

@keyframes dz-confirm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,108,74,0); }
    50%      { box-shadow: 0 0 0 4px rgba(239,108,74,.18); }
}

/* ============================================================
   Pills
   ============================================================ */

.dz-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 9px;
    border: 1px solid transparent;
}

.pill-lime {
    background: rgba(172,201,15,.16);
    color: var(--lime-deep);
    border-color: rgba(172,201,15,.25);
}

.pill-teal {
    background: rgba(3,132,165,.12);
    color: var(--teal-deep);
    border-color: rgba(3,132,165,.2);
}

.pill-alert {
    background: rgba(239,108,74,.12);
    color: var(--critical);
    border-color: rgba(239,108,74,.2);
}

.pill-muted {
    background: #f1f3f5;
    color: var(--ink-soft);
    border-color: var(--border);
}

/* ============================================================
   Date Bar
   ============================================================ */

.dz-datebar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.date-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    flex-wrap: wrap;
}

/* Botão "↻" de reload — apenas o ícone interno gira durante o fetch
   (rotacionar o botão inteiro causaria movimento estranho do container). */
.dz-reload-btn {
    min-width: 32px;
    padding: 4px 8px;
    font-size: 15px;
    line-height: 1;
}

.dz-reload-icon {
    display: inline-block;
    transform-origin: center;
    line-height: 1;
}

.dz-reload-btn.spinning .dz-reload-icon {
    animation: dz-spin 0.9s linear infinite;
}

@keyframes dz-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Chip de "🕐 Atualizado X atrás" — informa idade do cache */
.dz-cache-chip {
    font-size: 11.5px;
    color: var(--ink-soft);
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

/* ============================================================
   Modal: Entrada manual
   ============================================================ */
.manual-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.manual-field-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 14px;
}
.manual-field-row .manual-field { margin-bottom: 0; }

.manual-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.manual-required {
    color: var(--critical);
    font-weight: 800;
    margin-left: 2px;
}

.manual-optional {
    color: var(--ink-faint);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

.manual-hint {
    font-size: 11px;
    color: var(--ink-faint);
    font-style: italic;
}

/* Pílula do item vinculado (após selecionar) */
.manual-linked-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(3, 132, 165, 0.06);
    border: 1px solid rgba(3, 132, 165, 0.30);
    border-radius: 10px;
}

.manual-linked-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manual-linked-remove {
    background: transparent;
    border: none;
    color: var(--ink-soft);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}
.manual-linked-remove:hover {
    background: rgba(0,0,0,.06);
    color: var(--critical);
}

/* Sugestões de autocomplete */
.manual-suggestions {
    margin-top: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: var(--shadow-sm);
}

.manual-suggestion-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    text-align: left;
}
.manual-suggestion-row:last-child { border-bottom: none; }
.manual-suggestion-row:hover { background: var(--surface-soft); }

.manual-suggestion-title {
    font-size: 13px;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* MemberSelect: autocomplete reutilizável de Member */
.dz-member-select {
    position: relative;
}

.dz-member-select-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.dz-member-select-clear {
    background: transparent;
    border: none;
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.dz-member-select-clear:hover { color: var(--ink); }

.dz-member-select-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 20;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: var(--shadow-sm);
}

.dz-member-select-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-soft);
}
.dz-member-select-item:last-child { border-bottom: none; }
.dz-member-select-item:hover { background: var(--surface-soft); }

.dz-member-select-empty {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
}

/* MemberMultiSelect: chips + autocomplete reutilizável */
.dz-multi-select {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dz-multi-select.is-disabled { opacity: 0.6; pointer-events: none; }

.dz-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
}

.dz-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 6px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    max-width: 100%;
}
.dz-chip-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.dz-chip-remove {
    background: transparent;
    border: none;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    border-radius: 999px;
    transition: background .15s, color .15s;
}
.dz-chip-remove:hover {
    background: rgba(194,40,15,.12);
    color: #c2280f;
}
.dz-chip-empty {
    font-size: 12px;
    color: var(--ink-soft);
    font-style: italic;
}

.dz-multi-select-add {
    position: relative;
}

/* Organograma — árvore aninhada Dept > Team > Nucleus > Member */
.org-chart-root {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.org-chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: var(--shadow-sm);
    cursor: default;
    user-select: none;
}

.org-chart-card-dept { border-left: 4px solid var(--teal-deep); }
.org-chart-card-team { border-left: 4px solid var(--teal); }
.org-chart-card-nucleus { border-left: 4px solid var(--lime-deep); }

.org-chart-card-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    margin-top: 2px;
}

.org-chart-card-sub {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 4px;
}

.org-chart-dept,
.org-chart-team,
.org-chart-nucleus {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.org-chart-children {
    margin-left: 28px;
    padding-left: 14px;
    border-left: 2px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.org-chart-members {
    margin-left: 28px;
    padding-left: 14px;
    border-left: 2px dashed var(--border);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.org-chart-member {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 6px 10px;
    cursor: default;
}

.org-chart-member-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-chart-member-role {
    font-size: 10.5px;
    color: var(--ink-soft);
}

.org-chart-empty {
    font-size: 12px;
    color: var(--ink-faint);
    font-style: italic;
    padding: 6px 0;
}

/* Drag-and-drop states */
.org-chart-card[draggable="true"],
.org-chart-member[draggable="true"] {
    cursor: grab;
}

.org-chart-card.dragging,
.org-chart-member.dragging {
    opacity: 0.5;
}

.org-chart-card.drop-target,
.org-chart-member.drop-target {
    outline: 2px dashed var(--teal);
    outline-offset: 2px;
    background: rgba(3, 132, 165, 0.05);
}

/* Mobile overrides para /organizacao foram fundidas no bloco mobile final
   (busca: "BLOCO MOBILE — overrides finais"). */

.date-input {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--ink);
    background: var(--surface-soft);
}

.summary-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--navy), var(--teal-deep));
    color: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    min-width: 430px;
    box-shadow: var(--shadow-sm);
}

.summary-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.progress {
    height: 8px;
    background: rgba(255,255,255,.22);
    border-radius: 999px;
    overflow: hidden;
}

.progress > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--lime);
}

/* ============================================================
   Quick Tabs
   ============================================================ */

.quick-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.quick-tab {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-soft);
    cursor: pointer;
}

.quick-tab.on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* ============================================================
   Work Card
   ============================================================ */

.work-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 15px;
    transition: .15s;
}

.work-card:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow-md);
}

.work-card.done {
    background: linear-gradient(180deg, #f5fae0 0%, #fff 78%);
    border-color: #d8e699;
}

/* Entrada manual — borda esquerda em destaque pra diferenciar
   visualmente de cards de fontes externas. */
.work-card.work-card-manual {
    border-left: 3px solid var(--lime);
}

/* Sugestão de tempo embaixo do time-box */
.suggestion-hint {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--ink-soft);
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 6px 10px;
}

.suggestion-hint strong {
    color: var(--ink);
    font-weight: 700;
}

.suggestion-hint-warn {
    background: rgba(239, 108, 74, 0.06);
    border-color: rgba(239, 108, 74, 0.25);
}

.suggestion-warn-msg {
    color: var(--alert);
    font-weight: 600;
}

/* ============================================================
   Loaders — skeleton (initial load) + top progress bar (reloads)
   ============================================================ */

/* ============================================================
   Modal genérico (overlay + card centralizado)
   ============================================================ */

.dz-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 41, 60, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
    animation: dz-modal-fade-in 0.15s ease-out;
}

@keyframes dz-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dz-modal {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(8, 41, 60, 0.35);
    max-width: 600px;
    width: 100%;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: dz-modal-slide-in 0.18s ease-out;
}

@keyframes dz-modal-slide-in {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.dz-modal-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dz-modal-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

.dz-modal-subtitle {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin: 2px 0 0;
}

.dz-modal-close {
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: var(--ink-faint);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.dz-modal-close:hover {
    background: var(--surface-soft);
    color: var(--ink);
}

.dz-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
}

.dz-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border-soft);
    background: var(--surface-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dz-modal-footer-info {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 600;
}

.dz-modal-actions {
    display: flex;
    gap: 8px;
}

/* Item rows dentro do modal */
.dz-modal-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--surface-soft);
    margin-bottom: 10px;
}

.dz-modal-item:last-child { margin-bottom: 0; }

.dz-modal-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}

.dz-modal-item-body {
    flex: 1;
    min-width: 0;
}

.dz-modal-item-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 4px;
}

.dz-modal-item-meta {
    font-size: 11.5px;
    color: var(--ink-soft);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dz-modal-item-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.dz-modal-section-head {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-faint);
    margin: 14px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-soft);
}

.dz-modal-section-head:first-child { margin-top: 0; }

.dz-modal-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--ink-soft);
}

.dz-modal-empty-icon {
    font-size: 40px;
    color: var(--lime);
    opacity: 0.5;
    margin-bottom: 8px;
}

.dz-skeleton-card {
    pointer-events: none;
    background: var(--surface);
    border-color: var(--border-soft);
}

.dz-skeleton-block {
    display: block;
    background: linear-gradient(
        90deg,
        var(--border-soft) 0%,
        var(--surface-soft) 50%,
        var(--border-soft) 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    height: 14px;
    margin-bottom: 8px;
    animation: dz-skeleton-pulse 1.4s ease-in-out infinite;
}

.dz-skeleton-line {
    height: 12px;
}

@keyframes dz-skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Barra fina no topo do conteúdo durante reloads */
.dz-top-progress {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 3px;
    overflow: hidden;
    background: rgba(3, 132, 165, 0.10);
    margin-bottom: 6px;
}

.dz-top-progress span {
    display: block;
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, var(--teal) 0%, var(--lime) 100%);
    border-radius: 4px;
    animation: dz-top-progress-slide 1.2s ease-in-out infinite;
}

@keyframes dz-top-progress-slide {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(200%); }
    100% { transform: translateX(400%); }
}

/* --- Source Icons --- */
.source-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 900;
    color: #fff;
    font-size: 12px;
}

.src-outlook  { background: #0078d4; }
.src-google   { background: #4285f4; }
.src-devops   { background: #0384a5; }
.src-jira     { background: #2684ff; }
.src-hubspot  { background: #ff7a59; }
.src-zendesk  { background: #0b3b56; }
.src-zammad   { background: #5d6b7a; }
.src-planner  { background: #31752f; }
.src-manual   { background: #65748b; }

/* --- Work Card Elements --- */
.work-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.25;
    margin: 0;
}

.work-meta {
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-top: 3px;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

/* ============================================================
   Time Box
   ============================================================ */

.time-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    margin-top: 13px;
}

.time-input {
    width: 82px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
    padding: 8px;
    text-align: center;
    outline: none;
}

.time-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(3,132,165,.08);
}

.inc-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.inc-btn {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
}

.inc-btn:hover {
    border-color: var(--teal);
    color: var(--teal);
}

/* ============================================================
   Action Row
   ============================================================ */

.action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.select-mini {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 9px;
    padding: 7px 9px;
    font-size: 12px;
    color: var(--ink);
    max-width: 180px;
}

/* ============================================================
   Timer Card
   ============================================================ */

.timer-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 84px;
}

/* Aviso quando timer foi iniciado em data diferente da selecionada na tela */
.timer-date-warning {
    background: rgba(239, 108, 74, 0.08);
    border: 1px solid rgba(239, 108, 74, 0.30);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11.5px;
    color: var(--alert);
    text-align: center;
}
.timer-date-warning strong {
    color: var(--critical);
    font-weight: 700;
}

.timer-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 42px;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -2px;
    text-align: center;
    margin: 12px 0;
}

.timer-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timer-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ink-faint);
}

.timer-dot.running {
    background: var(--lime);
    box-shadow: 0 0 0 5px rgba(172,201,15,.16);
}

.timer-dot.paused {
    background: var(--alert);
}

/* ============================================================
   Buddy Panel
   ============================================================ */

.buddy-panel {
    background: linear-gradient(160deg, #f1f7d6 0%, #fff 85%);
    border: 1px solid rgba(172,201,15,.35);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.buddy-img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    animation: bob 4.5s ease-in-out infinite;
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* ============================================================
   Pending List
   ============================================================ */

.pending-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pending-row {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ============================================================
   Manual Form
   ============================================================ */

.manual-form {
    display: none;
    margin-top: 12px;
    border-top: 1px dashed var(--border);
    padding-top: 12px;
}

.manual-form.open {
    display: block;
}

.form-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr .8fr auto;
    gap: 8px;
}

.form-input {
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-soft);
    font-size: 13px;
    padding: 9px 10px;
    color: var(--ink);
    outline: none;
}

/* ============================================================
   Toast
   ============================================================ */

.toast {
    position: fixed;
    right: 28px;
    bottom: 24px;
    background: var(--ink);
    color: #fff;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none; /* não bloqueia cliques no timer/buttons abaixo */
    transition: opacity 0.2s;
    z-index: 100;
}

.toast.show {
    opacity: 1;
}

/* Mobile: toast vai pro topo centralizado pra não colidir com o
   timer-card-pinned (que ocupa o canto inferior direito). */
@media (max-width: 768px) {
    .toast {
        right: 12px;
        left: 12px;
        bottom: auto;
        top: 12px;
        text-align: center;
    }
}

/* ============================================================
   Blazor Specific
   ============================================================ */

#blazor-error-ui {
    display: none;
}

.blazor-error-boundary {
    display: none;
}

/* Blazor validation */
.valid.modified:not([type=checkbox]) {
    outline: none;
}

.invalid {
    outline: none;
    border-color: var(--critical) !important;
    box-shadow: 0 0 0 3px rgba(194,40,15,.08);
}

.validation-message {
    font-size: 11.5px;
    color: var(--critical);
    margin-top: 4px;
}

/* ============================================================
   Main Content Area
   ============================================================ */

.dz-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* NOTA: NÃO usar overflow aqui — quebra position: sticky em descendentes
       (ex.: timer-card no /apontamento rápido). Containment de scroll horizontal
       fica no <body>. */
}

/* ============================================================
   Missing Utility Classes
   ============================================================ */

.col-span-5  { grid-column: span 5; }
.col-span-7  { grid-column: span 7; }
.col-span-12 { grid-column: span 12; }
.gap-5       { gap: 20px; }
.gap-6       { gap: 24px; }
.mb-1        { margin-bottom: 4px; }
.mb-2        { margin-bottom: 8px; }
.mb-4        { margin-bottom: 16px; }
.mb-6        { margin-bottom: 24px; }
.mt-1        { margin-top: 4px; }
.mt-3        { margin-top: 12px; }
.py-2        { padding-top: 8px; padding-bottom: 8px; }
.px-3        { padding-left: 12px; padding-right: 12px; }
.text-sm     { font-size: 13px; }
.text-xs     { font-size: 11.5px; }
.text-center { text-align: center; }
.text-muted  { color: var(--ink-soft); }
.font-bold   { font-weight: 800; }
.font-semibold { font-weight: 700; }
.w-full      { width: 100%; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex-wrap   { flex-wrap: wrap; }
.border-b    { border-bottom: 1px solid var(--border); }

.space-y-3 > * + * { margin-top: 12px; }

/* ============================================================
   Card Section Title
   ============================================================ */

.card-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ink-faint);
}

/* ============================================================
   Chips (provider / category / tag)
   ============================================================ */

.chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 8px;
    border: 1px solid transparent;
}

.chip-provider {
    color: #fff;
    opacity: 0.92;
}

.chip-category {
    background: rgba(3,132,165,.12);
    color: var(--teal-deep);
    border-color: rgba(3,132,165,.2);
}

.chip-tag {
    background: #f1f3f5;
    color: var(--ink-soft);
    border-color: var(--border);
}

/* ============================================================
   Source Icon Small
   ============================================================ */

.source-icon-sm {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 900;
    color: #fff;
    font-size: 9px;
}

/* ============================================================
   Form Label
   ============================================================ */

.label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 4px;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1100px) {
    /* Layout coluna única — sidebar sai do fluxo normal */
    .dz-app {
        grid-template-columns: 1fr;
    }

    /* Sidebar vira drawer fixo fora da tela à esquerda */
    .dz-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.4, 0, .2, 1);
        box-shadow: none;
    }

    .dz-sidebar.dz-sidebar-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(8,41,60,.35);
    }

    /* Hamburguer aparece — cobre tablet e mobile */
    .dz-hamburger { display: flex; }

    .dz-datebar {
        grid-template-columns: 1fr;
    }

    .summary-panel {
        min-width: 0;
    }

    .col-span-8,
    .col-span-4 {
        grid-column: span 12;
    }

    .timer-card {
        position: static;
    }

    .dz-search {
        min-width: 240px;
    }

    .integ-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   Integrations Page
   ============================================================ */

.integ-subtitle {
    font-size: 14px;
    color: var(--ink-soft);
    margin: -8px 0 24px;
    max-width: 640px;
    line-height: 1.5;
}

.integ-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 600;
}

.integ-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--border);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: integ-spin .7s linear infinite;
}

.integ-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: integ-spin .7s linear infinite;
}

@keyframes integ-spin {
    to { transform: rotate(360deg); }
}

/* --- Section --- */
.integ-section {
    margin-bottom: 32px;
}

.integ-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--ink-faint);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
}

/* --- Grid --- */
.integ-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

/* --- Card --- */
.integ-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: border-color .2s, box-shadow .2s;
}

.integ-card:hover {
    border-color: rgba(3,132,165,.25);
    box-shadow: var(--shadow-md);
}

.integ-card.connected {
    border-color: rgba(172,201,15,.35);
}

.integ-card.connected:hover {
    border-color: rgba(172,201,15,.55);
}

/* --- Card Header --- */
.integ-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
}

.integ-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    color: #fff;
}

.integ-card-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.2px;
}

.integ-card-desc {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 2px;
    line-height: 1.4;
}

/* --- Status Dot --- */
.integ-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
    transition: .2s;
}

.integ-status-dot.active {
    background: var(--lime);
    box-shadow: 0 0 0 3px rgba(172,201,15,.25);
}

/* --- Card Body --- */
.integ-card-body {
    padding: 0 16px 12px;
    flex: 1;
}

.integ-card-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

.integ-empty-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-faint);
}

/* --- Stats --- */
.integ-stat-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px 0;
}

.integ-stat-row + .integ-stat-row {
    border-top: 1px solid var(--border-soft);
}

.integ-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.integ-stat-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--ink-faint);
}

.integ-stat-value {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
}

/* --- Card Actions --- */
.integ-card-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-soft);
    background: var(--surface-soft);
    border-radius: 0 0 var(--r-md) var(--r-md);
}

.integ-card-actions .btn {
    flex: 1;
}

/* --- Form --- */
.integ-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.integ-field {
    display: flex;
    flex-direction: column;
}

.integ-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink);
    background: var(--surface-soft);
    font-family: inherit;
    transition: border-color .15s;
}

.integ-input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(3,132,165,.1);
}

.integ-input::placeholder {
    color: var(--ink-faint);
    font-size: 12px;
}

.integ-textarea {
    min-height: 72px;
    resize: vertical;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
}

.integ-help {
    font-size: 11px;
    color: var(--ink-faint);
    margin-top: 3px;
    line-height: 1.4;
}

/* ============================================================
   Capacity Management Module
   ============================================================ */

/* Delta Legend Chips */
.delta-legend {
    display: flex;
    gap: 6px;
}

.delta-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid;
    min-width: 96px;
    gap: 1px;
}

.delta-chip-expr {
    font-size: 12px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: .4px;
}

.delta-chip-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    opacity: .85;
}

.delta-chip-zero {
    background: rgba(172,201,15,.16);
    border-color: rgba(172,201,15,.35);
    color: var(--lime-deep);
}

.delta-chip-positive {
    background: rgba(239,108,74,.14);
    border-color: rgba(239,108,74,.35);
    color: var(--critical);
}

.delta-chip-negative {
    background: rgba(3,132,165,.12);
    border-color: rgba(3,132,165,.3);
    color: var(--teal-deep);
}

/* Accordion de Alocação */
.cap-accordion { display: flex; flex-direction: column; }

.cap-acc-item {
    border-bottom: 1px solid var(--border-soft);
}

.cap-acc-item:last-child { border-bottom: none; }

.cap-acc-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 16px;
    transition: background .12s;
}

.cap-acc-header:hover { background: var(--surface-soft); }
.cap-acc-open .cap-acc-header { background: var(--surface-soft); }

.cap-acc-member {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 280px;
}

.cap-acc-member-text {
    min-width: 0;
}

.cap-acc-member-text .cap-member-name,
.cap-acc-member-text .cap-member-role {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Stacked bar do header (mix de projetos sem precisar expandir) --- */
.cap-acc-stack-wrap {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 18px;
    display: flex;
    align-items: center;
}

.cap-acc-stack {
    width: 100%;
    height: 10px;
    background: var(--border-soft);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    box-shadow: inset 0 0 0 1px var(--border);
}

.cap-acc-stack-seg {
    height: 100%;
    display: block;
    transition: filter .15s, transform .15s;
    cursor: help;
}

.cap-acc-stack-seg:hover {
    filter: brightness(1.1);
    transform: scaleY(1.4);
}

.cap-acc-stack-free {
    background: repeating-linear-gradient(
        45deg,
        var(--border-soft),
        var(--border-soft) 4px,
        var(--surface) 4px,
        var(--surface) 8px
    );
}

.cap-acc-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cap-acc-chevron {
    font-size: 20px;
    color: var(--ink-faint);
    transform: rotate(0deg);
    transition: transform .2s ease;
    line-height: 1;
    width: 16px;
    text-align: center;
}

.cap-acc-chevron-open {
    transform: rotate(90deg);
}

.cap-acc-body {
    padding: 4px 20px 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cap-acc-proj-row {
    display: grid;
    grid-template-columns: 200px 1fr 80px;
    align-items: center;
    gap: 12px;
    padding: 5px 0 5px 46px;
}

.cap-acc-free-row { opacity: .55; }

.cap-acc-proj-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cap-acc-proj-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cap-acc-proj-bar-wrap { flex: 1; }

.cap-acc-bar-track {
    height: 6px;
    background: var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.cap-acc-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width .3s ease;
    min-width: 3px;
}

/* Loading */
.cap-loading {
    padding: 40px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 13px;
}

/* KPI Grid */
.cap-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}

.cap-kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}

.cap-kpi-card.cap-kpi-ok    { border-left: 3px solid var(--lime); }
.cap-kpi-card.cap-kpi-alert { border-left: 3px solid var(--alert); }
.cap-kpi-card.cap-kpi-critical { border-left: 3px solid var(--critical); }

.cap-kpi-value {
    font-size: 28px;
    font-weight: 900;
    color: var(--navy);
    line-height: 1;
}

.cap-kpi-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin-top: 6px;
}

.cap-kpi-sub {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 2px;
}

/* Shared card styles */
.dz-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.dz-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.mt-4 { margin-top: 16px; }

/* Heatmap */
.cap-heatmap-wrap {
    overflow-x: auto;
    padding: 0 4px 4px;
}

.cap-heatmap {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.cap-heatmap thead th {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .6px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.cap-hm-member-col { width: 220px; }
.cap-hm-proj-col   { min-width: 110px; }
.cap-hm-total-col  { width: 80px; text-align: right !important; }

.cap-proj-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.cap-proj-label {
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
    display: inline-block;
    vertical-align: middle;
}

.cap-heatmap tbody tr:hover { background: var(--surface-soft); }

.cap-heatmap tbody td {
    padding: 8px 12px;    
    vertical-align: middle;
}

.cap-hm-member {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.cap-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.cap-avatar-sm {
    width: 28px; height: 28px;
    font-size: 10px;
}

.cap-member-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.cap-member-role {
    font-size: 11px;
    color: var(--ink-soft);
}

.cap-hm-cell { text-align: center; }

.cap-hm-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    min-width: 52px;
    gap: 1px;
}

.cap-hm-hours {
    font-size: 9.5px;
    font-weight: 500;
    opacity: .85;
}

.cap-hm-empty {
    color: var(--ink-faint);
    font-size: 13px;
}

.cap-hm-total { text-align: right; }

.cap-total-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
}

.cap-total-ok       { background: #d9f0e8; color: #1a7a50; }
.cap-total-alert    { background: rgba(239,108,74,.12); color: #c04a25; }
.cap-total-critical { background: rgba(194,40,15,.12); color: #c2280f; }

.cap-legend-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: middle;
}

/* Project list (dashboard) */
.cap-project-list { padding: 0; }

.cap-proj-row {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(160px, 1fr) auto auto;
    align-items: center;
    gap: 20px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.cap-proj-row:last-child { border-bottom: none; }

.cap-proj-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cap-proj-color-bar {
    width: 4px;
    height: 44px;
    border-radius: 4px;
    flex-shrink: 0;
}

.cap-proj-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cap-proj-meta {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.cap-proj-metrics {
    display: flex;
    gap: 20px;
}

.cap-metric-group { text-align: center; }

.cap-metric-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ink-soft);
}

.cap-metric-val {
    font-size: 14px;
    font-weight: 800;
    margin-top: 2px;
}

.cap-delta-positive { color: var(--critical); }
.cap-delta-negative { color: var(--teal-deep); }

/* Classes legadas — ainda em uso em ProjectDetailPage. NÃO remover. */
.cap-bar-ok    { background: var(--lime); }
.cap-bar-alert { background: var(--alert); }
.cap-bar-over  { background: var(--critical); }
.cap-text-over  { color: var(--critical); font-weight: 700; }
.cap-text-alert { color: var(--alert); font-weight: 700; }

/* Barra delta divergente (Planejado vs Realizado).
   Eixo central = plano cumprido. Sub-utilizado cresce p/ esquerda (teal),
   sobre-alocado p/ direita (vermelho). Largura proporcional a |Δ|/Plan. */
.cap-proj-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.cap-delta-bar-track {
    position: relative;
    height: 10px;
    background: var(--border-soft);
    border-radius: 5px;
    overflow: visible;
}

.cap-delta-bar-zero {
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--ink-faint);
    z-index: 1;
    transform: translateX(-50%);
}

.cap-delta-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    transition: width .3s ease;
}

.cap-delta-bar-fill.cap-delta-under {
    background: var(--teal);
    border-radius: 5px 0 0 5px;
    right: 50%;
}

.cap-delta-bar-fill.cap-delta-over {
    background: var(--critical);
    border-radius: 0 5px 5px 0;
    left: 50%;
}

.cap-delta-bar-caption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 10.5px;
    color: var(--ink-faint);
    gap: 8px;
}

.cap-delta-bar-val {
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: .3px;
}
.cap-delta-bar-val.cap-delta-val-zero  { color: var(--lime-deep); }
.cap-delta-bar-val.cap-delta-val-under { color: var(--teal-deep); }
.cap-delta-bar-val.cap-delta-val-over  { color: var(--critical); }

/* Mobile (≤768px) — dashboard de capacidade.
   IMPORTANTE: este bloco precisa vir DEPOIS das regras desktop dos seletores
   .cap-proj-* / .cap-delta-* (acima) para vencer a cascade — ambas têm mesma
   especificidade. Mover para cima reintroduz o bug em que a barra delta e o
   botão Detalhar estouravam o layout do card. */
@media (max-width: 768px) {
    .cap-proj-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "info    button"
            "bar     bar"
            "metrics metrics";
        gap: 10px 12px;
        padding: 12px 14px;
        align-items: center;
    }

    .cap-proj-info     { grid-area: info; }
    .cap-proj-bar-wrap { grid-area: bar; min-width: 0; }
    .cap-proj-metrics {
        grid-area: metrics;
        gap: 8px;
        justify-content: space-between;
        width: 100%;
    }
    .cap-proj-row > div:last-child { grid-area: button; }

    /* Permite o nome truncar com ellipsis em vez de empurrar pill/botão.
       O span interno .cap-proj-name-text é quem efetivamente trunca. */
    .cap-proj-name      { min-width: 0; }
    .cap-proj-name-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* Meta (membros · gestor · prioridade) some no mobile — info detalhada
       continua acessível pelo botão "Detalhar". */
    .cap-proj-meta { display: none; }
}

/* Status pills */
.cap-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
}

.cap-pill-active   { background: rgba(172,201,15,.15); color: #5e7708; }
.cap-pill-planning { background: rgba(3,132,165,.12);  color: #02647c; }
.cap-pill-hold     { background: rgba(239,108,74,.12); color: #c04a25; }
.cap-pill-done     { background: rgba(93,107,122,.1);  color: #3a4855; }
.cap-pill-neutral  { background: var(--surface-soft);  color: var(--ink-soft); border: 1px solid var(--border); }

/* Priority dots */
.cap-priority-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.cap-dot-critical { background: var(--critical); }
.cap-dot-high     { background: var(--alert); }
.cap-dot-medium   { background: var(--teal); }
.cap-dot-low      { background: var(--ink-faint); }

/* Project cards grid (projects page) */
.cap-proj-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.cap-proj-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
    overflow: hidden;
}

.cap-proj-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.cap-proj-card-bar {
    width: 5px;
    flex-shrink: 0;
}

.cap-proj-card-body {
    padding: 14px 16px;
    flex: 1;
    min-width: 0;
}

.cap-proj-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cap-proj-card-code {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.cap-proj-card-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 4px;
}

.cap-proj-card-client {
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-bottom: 4px;
}

.cap-proj-card-dates {
    font-size: 11px;
    color: var(--ink-faint);
    margin-bottom: 10px;
}

.cap-proj-card-footer {
    font-size: 11.5px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
}

/* Form card */
.cap-form-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 20px;
    margin-bottom: 16px;
}

.cap-form-title {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 14px;
}

.cap-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.cap-form-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}

.dz-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}

.dz-input:focus { border-color: var(--teal); }

.dz-input-color {
    width: 100%;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
}

/* Warning */
.cap-warning {
    background: rgba(239,108,74,.1);
    border: 1px solid rgba(239,108,74,.3);
    color: #c04a25;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    margin-top: 8px;
}

/* Burndown */
.cap-burndown-track {
    height: 10px;
    background: var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.cap-burndown-fill {
    height: 100%;
    background: var(--teal);
    border-radius: 10px;
    transition: width .3s ease;
}

/* Color dot (project detail header) */
.cap-proj-color-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Member allocation rows */
.cap-member-alloc-list { padding: 0; }

.cap-member-alloc-row {
    display: grid;
    grid-template-columns: 34px 1fr 2fr 70px;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.cap-member-alloc-row:last-child { border-bottom: none; }

.cap-alloc-bars { display: flex; flex-direction: column; gap: 5px; }

.cap-alloc-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.cap-bar-label {
    width: 30px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-soft);
}

.cap-bar-track {
    flex: 1;
    height: 5px;
    background: var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.cap-bar-fill { height: 100%; border-radius: 6px; }

.cap-bar-planned { background: var(--teal); }
.cap-bar-ok      { background: var(--lime); }
.cap-bar-over    { background: var(--critical); }

.cap-bar-num {
    width: 34px;
    text-align: right;
    font-size: 11.5px;
    font-weight: 700;
}

.cap-delta-chip {
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
}

.cap-chip-over  { background: rgba(194,40,15,.1);  color: var(--critical); }
.cap-chip-under { background: rgba(3,132,165,.1);   color: var(--teal-deep); }
.cap-chip-zero  { background: rgba(172,201,15,.15); color: var(--lime-deep); }

/* Org structure */
.cap-org-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 16px;
}

.cap-dept-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.cap-dept-badge {
    font-size: 11px;
    font-weight: 700;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 10px;
    color: var(--ink-soft);
}

.cap-team-section {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.cap-team-section:last-child { border-bottom: none; }

.cap-team-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--ink-soft);
    margin-bottom: 8px;
}

.cap-nucleo-section { margin-bottom: 12px; }

.cap-nucleo-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cap-nucleo-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--teal);
    flex-shrink: 0;
}

.cap-member-cards { display: flex; flex-direction: column; gap: 6px; }

.cap-member-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 8px 12px;
}

/* Table shared */
.cap-table {
    width: 100%;
    border-collapse: collapse;
}

.cap-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ink-soft);
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
}

.cap-table td {
    padding: 11px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}

.cap-table tbody tr:hover { background: var(--surface-soft); }
.cap-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   End Capacity Module
   ============================================================ */

.integ-error {
    font-size: 12px;
    color: var(--critical);
    background: rgba(194,40,15,.06);
    border: 1px solid rgba(194,40,15,.15);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 4px;
}

/* Projetos descobertos na validação (Azure DevOps, etc.) */
.integ-discovered {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(3,132,165,.04);
    border: 1px solid rgba(3,132,165,.18);
    border-radius: 10px;
}

.integ-discovered-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--teal-deep);
    margin-bottom: 7px;
}

.integ-discovered-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.integ-discovered-chip {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
}

.integ-discovered-more {
    color: var(--ink-soft);
    background: var(--surface-soft);
}

/* ============================================================
   Integrations — Novo design (connections + catalog)
   ============================================================ */

/* Empty state */
.integ-empty-state {
    background: var(--surface);
    border: 1.5px dashed var(--border);
    border-radius: 16px;
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 28px;
}

.integ-empty-icon {
    font-size: 56px;
    color: var(--lime);
    opacity: .7;
    margin-bottom: 14px;
    line-height: 1;
}

.integ-empty-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--ink);
}

.integ-empty-desc {
    font-size: 13.5px;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.5;
    max-width: 480px;
    margin-inline: auto;
}

/* Section heads */
.integ-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.integ-section-head .integ-section-title {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.integ-section-catalog {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-soft);
}

/* Logo (square, colored bg, white icon) — usado em cards de conexão e catálogo */
.integ-card-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}

/* === Connection card (entrada já configurada) === */
.integ-conn-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.integ-conn-card:hover {
    border-color: rgba(3,132,165,.3);
}

.integ-conn-expanded {
    border-color: var(--teal);
    box-shadow: var(--shadow-md);
}

.integ-conn-head {
    width: 100%;
    background: transparent;
    border: none;
    padding: 14px 16px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
}

.integ-conn-head:hover {
    background: var(--surface-soft);
}

.integ-conn-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.integ-conn-head-meta {
    min-width: 0;
}

.integ-conn-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.integ-conn-provider {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.integ-conn-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.integ-conn-status {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 3px 8px;
    border-radius: 999px;
}

.integ-conn-ok {
    color: var(--lime-deep);
    background: rgba(172,201,15,.14);
}

.integ-conn-err {
    color: var(--critical);
    background: rgba(194,40,15,.10);
}

.integ-conn-chevron {
    font-size: 22px;
    line-height: 1;
    color: var(--ink-faint);
    transition: transform .2s;
}

.integ-conn-chevron-open {
    transform: rotate(90deg);
    color: var(--teal);
}

.integ-conn-summary {
    padding: 0 16px 14px;
    font-size: 12px;
    color: var(--ink-soft);
}

.integ-conn-summary-line {
    color: var(--ink-soft);
}

.integ-conn-summary-error {
    color: var(--critical);
    font-weight: 600;
}

/* Expanded body */
.integ-conn-body {
    border-top: 1px solid var(--border-soft);
    background: var(--surface-soft);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.integ-conn-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.integ-conn-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    border-bottom: 1px dotted var(--border-soft);
    padding-bottom: 5px;
}

.integ-conn-detail-label {
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 10.5px;
    font-weight: 700;
    align-self: center;
}

.integ-conn-detail-value {
    color: var(--ink);
    font-size: 12px;
    text-align: right;
    word-break: break-all;
}

.integ-conn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
}

/* === Catalog card (provider disponível para adicionar) === */
.integ-catalog-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .15s, transform .15s;
}

.integ-catalog-card:hover {
    border-color: rgba(3,132,165,.3);
}

.integ-catalog-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.integ-catalog-meta {
    min-width: 0;
}

.integ-card-category {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--ink-faint);
    margin-top: 1px;
}

.integ-catalog-desc {
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.integ-catalog-already {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--teal-deep);
    background: rgba(3,132,165,.07);
    border-radius: 6px;
    padding: 4px 8px;
    align-self: flex-start;
}

.integ-catalog-action {
    margin-top: auto;
}

/* Inline form (compartilhado entre add e edit) */
.integ-form-inline {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.integ-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.integ-form-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.integ-form-actions {
    display: flex;
    gap: 8px;
    padding-top: 4px;
}

/* Device Code flow (OutlookPersonal) */
.integ-device-flow {
    text-align: left;
}

.integ-device-step {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
    margin-top: 12px;
    margin-bottom: 4px;
}

.integ-device-link {
    display: block;
    font-size: 13px;
    color: var(--teal-deep);
    text-decoration: none;
    font-weight: 600;
    padding: 8px 10px;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    margin-bottom: 4px;
}

.integ-device-link:hover { text-decoration: underline; }

.integ-device-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 4px;
    text-align: center;
    padding: 14px;
    background: var(--navy);
    color: #fff;
    border-radius: 10px;
    margin-bottom: 8px;
    user-select: all;
}

.integ-device-polling {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-soft);
    padding-top: 8px;
    border-top: 1px dashed var(--border-soft);
    margin-top: 8px;
}

/* ============================================================
   Project External Mapping — Fontes Externas tab
   ============================================================ */

.integ-mapping-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.integ-mapping-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    transition: border-color .15s;
}

.integ-mapping-row:hover { border-color: var(--border); }

.integ-mapping-inactive { opacity: .5; }

.cap-proj-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Empty state — "Como funciona" flow */
.mapping-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px 24px 28px;
}

.mapping-how {
    width: 100%;
    max-width: 620px;
    background: rgba(3,132,165,.06);
    border: 1px solid rgba(3,132,165,.18);
    border-radius: 12px;
    padding: 20px 24px;
}

.mapping-how-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--teal);
    margin-bottom: 16px;
}

.mapping-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.mapping-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 8px;
}

.mapping-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.mapping-step-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 5px;
}

.mapping-step-desc {
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.45;
}

.mapping-step-arrow {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 8px;
    padding: 0 4px;
    font-size: 18px;
    color: var(--teal);
    opacity: .5;
}

/* Form wrap — "Novo vínculo" inline form */
.mapping-form-wrap {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 20px 20px;
    margin-bottom: 4px;
}

.mapping-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* Warning when no provider is connected */
.mapping-no-provider {
    font-size: 12px;
    color: var(--alert);
    background: rgba(239,108,74,.07);
    border: 1px solid rgba(239,108,74,.2);
    border-radius: 8px;
    padding: 8px 12px;
    line-height: 1.45;
}

/* Política de regularização (radio cards) — form de Novo vínculo */
.mapping-policy-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.mapping-policy-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--ink);
    transition: border-color .12s ease, background .12s ease;
}

.mapping-policy-opt:hover {
    border-color: var(--lime-deep);
}

.mapping-policy-opt input[type="radio"],
.mapping-policy-opt input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--lime-deep);
    flex-shrink: 0;
}

/* Mini-chips de metadados na linha de mapping (Policy / EffectiveDate / MatchMode) */
.mapping-meta-chip {
    display: inline-block;
    padding: 1px 7px;
    background: var(--surface-2);
    color: var(--ink-soft);
    border-radius: 999px;
    font-weight: 600;
    font-size: 10px;
    line-height: 1.5;
}

/* ============================================================
   /auditoria-apontamentos — linhas, chips de ação, estado vazio
   ============================================================ */
.audit-row-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0 4px;
}

.audit-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.audit-row-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audit-row-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-row-meta {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.audit-action-chip {
    flex-shrink: 0;
    min-width: 110px;
    text-align: center;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.audit-chip-ok    { background: rgba(172,201,15,.18); color: var(--lime-deep); }
.audit-chip-alert { background: rgba(239,108,74,.15); color: var(--alert); }
.audit-chip-muted { background: var(--surface-2);    color: var(--ink-faint); }

.audit-empty {
    text-align: center;
    padding: 32px 16px;
}

/* Pill warn é variação visual usada em badges de pendência */
.pill-warn { background: rgba(239,108,74,.15); color: var(--alert); }
.pill-alert { background: rgba(239,108,74,.25); color: var(--alert); }

/* ============================================================
   Painéis Delta — componentes visuais compartilhados
   ============================================================ */

/* ── Sparkline ──────────────────────────────────────────────── */
.dz-sparkline {
    display: inline-flex;
    align-items: flex-end;
    gap: 1px;
    height: 22px;
    width: 80px;
    vertical-align: middle;
}
.dz-sparkline-bar {
    flex: 1;
    background: var(--dz-spark-color, var(--ink-soft));
    border-radius: 1.5px 1.5px 0 0;
    min-height: 2px;
    opacity: .55;
    transition: opacity .12s ease;
}
.dz-sparkline-bar:last-child { opacity: 1; }
.dz-sparkline:hover .dz-sparkline-bar { opacity: .8; }
.dz-sparkline:hover .dz-sparkline-bar:last-child { opacity: 1; }

/* ── Bullet chart ───────────────────────────────────────────── */
.dz-bullet {
    position: relative;
    height: 14px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
}
.dz-bullet-zone-ok {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(172,201,15,.18);
}
.dz-bullet-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--dz-bullet-color, var(--lime-deep));
    border-radius: 4px 0 0 4px;
}
.dz-bullet-bar-over { background: var(--alert); }
.dz-bullet-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--navy);
    transform: translateX(-1px);
    border-radius: 1px;
}

/* ── Story-mode banner ──────────────────────────────────────── */
.dz-story-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 10px;
    margin-bottom: 16px;
}
.dz-story-banner.dz-story-ok        { border-left-color: var(--lime-deep); }
.dz-story-banner.dz-story-attention { border-left-color: #d8a627; }
.dz-story-banner.dz-story-alert     { border-left-color: var(--alert); }

.dz-story-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
    font-size: 14px;
}
.dz-story-ok        .dz-story-icon { background: rgba(172,201,15,.18); color: var(--lime-deep); }
.dz-story-attention .dz-story-icon { background: rgba(216,166,39,.18); color: #966800; }
.dz-story-alert     .dz-story-icon { background: rgba(239,108,74,.18); color: var(--alert); }

.dz-story-text { flex: 1; min-width: 0; }
.dz-story-headline {
    font-weight: 800;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.3;
}
.dz-story-detail {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.4;
}

/* ── Period filter (chips + custom date range) ──────────────── */
.dz-period-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dz-period-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dz-period-chip {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    transition: .12s;
}
.dz-period-chip:hover {
    background: var(--surface-soft);
    color: var(--ink);
}
.dz-period-chip.on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
.dz-period-custom {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dz-period-custom .dz-input { max-width: 160px; }

/* ── Calendar heatmap ───────────────────────────────────────── */
.dz-calendar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dz-calendar-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    overflow-x: auto;
}
.dz-calendar-week {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}
.dz-calendar-cell {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: var(--surface-2);
}
.dz-calendar-cell-empty { background: transparent; }
.dz-calendar-cell-int-0 { background: var(--surface-2); }
.dz-calendar-cell-int-1 { background: rgba(172,201,15,.28); }
.dz-calendar-cell-int-2 { background: rgba(172,201,15,.55); }
.dz-calendar-cell-int-3 { background: rgba(172,201,15,.80); }
.dz-calendar-cell-int-4 { background: var(--lime-deep); }

.dz-calendar-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--ink-faint);
}
.dz-calendar-legend .dz-calendar-cell { width: 10px; height: 10px; }

/* ── Stacked bar (categoria × bucket) ───────────────────────── */
.dz-stacked-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dz-stacked-row {
    display: grid;
    grid-template-columns: 70px 1fr 60px;
    gap: 10px;
    align-items: center;
}
.dz-stacked-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.dz-stacked-track {
    display: flex;
    height: 14px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
}
.dz-stacked-segment {
    height: 100%;
    min-width: 2px;
    transition: opacity .12s ease;
}
.dz-stacked-segment:hover { opacity: .85; }
.dz-stacked-total {
    font-size: 11.5px;
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.dz-stacked-empty {
    padding: 20px 12px;
    text-align: center;
    color: var(--ink-faint);
    font-size: 12.5px;
}
.dz-stacked-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}
.dz-stacked-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-soft);
}
.dz-stacked-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* ── InfoTooltip ─────────────────────────────────────────────
   Pequeno (i) que revela popover estilizado ao hover/touch.
   CSS-only — usa :hover pra desktop e :focus-within pra mobile
   (tap no ícone dá focus → popover; tap fora desfoca).

   Cards que CONTÊM InfoTooltip precisam de overflow:visible pra
   o popover absoluto não ser clipado. Usamos :has() pra detectar
   automaticamente — sem precisar de overflow:visible manual em
   cada caller. Em mobile, o popover vira fixed (bottom-sheet),
   então a regra :has() é só pra desktop. Browser support :has()
   é Chrome 105+ / Safari 15.4+ / Firefox 121+ — adequado pro MVP. */
.dz-card:has(.dz-info-tooltip),
.cap-kpi-card:has(.dz-info-tooltip),
.cap-form-card:has(.dz-info-tooltip),
.cap-kpi-grid:has(.dz-info-tooltip) {
    overflow: visible;
}

.dz-info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: help;
    outline: none;
}

.dz-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff; 
    font-size: 9px;
    font-weight: 700;
    font-family: Georgia, serif;
    font-style: italic;
    line-height: 1;
    transition: background .12s ease, color .12s ease;
}

.dz-info-tooltip:hover .dz-info-icon,
.dz-info-tooltip:focus-within .dz-info-icon {
    background: var(--navy);
    color: #fff;
}

.dz-info-popover {
    position: absolute;
    z-index: 100;
    width: var(--dz-info-width, 260px);
    max-width: calc(100vw - 32px);
    padding: 12px 14px;
    background: #1f2d3a;  /* navy escuro */
    color: #f4f7fa;
    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(8,41,60,.25), 0 2px 6px rgba(8,41,60,.15);

    /* Estado escondido */
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.dz-info-popover strong { color: #fff; font-weight: 700; }
.dz-info-popover ul { margin: 6px 0 0; padding-left: 18px; }
.dz-info-popover li { margin-bottom: 3px; }
.dz-info-popover li::marker { color: rgba(255,255,255,.4); }

/* Posições */
.dz-info-pos-top .dz-info-popover {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 4px);
}
.dz-info-pos-top:hover .dz-info-popover,
.dz-info-pos-top:focus-within .dz-info-popover {
    transform: translate(-50%, 0);
}

.dz-info-pos-bottom .dz-info-popover {
    top: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, -4px);
}
.dz-info-pos-bottom:hover .dz-info-popover,
.dz-info-pos-bottom:focus-within .dz-info-popover {
    transform: translate(-50%, 0);
}

.dz-info-pos-right .dz-info-popover {
    top: 50%;
    left: calc(100% + 8px);
    transform: translate(-4px, -50%);
}
.dz-info-pos-right:hover .dz-info-popover,
.dz-info-pos-right:focus-within .dz-info-popover {
    transform: translate(0, -50%);
}

/* Setinha apontando pro ícone */
.dz-info-popover::after {
    content: "";
    position: absolute;
    border: 6px solid transparent;
}
.dz-info-pos-top .dz-info-popover::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #1f2d3a;
}
.dz-info-pos-bottom .dz-info-popover::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #1f2d3a;
}
.dz-info-pos-right .dz-info-popover::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #1f2d3a;
}

/* Estado revelado — hover (desktop) ou focus-within (mobile tap) */
.dz-info-tooltip:hover .dz-info-popover,
.dz-info-tooltip:focus-within .dz-info-popover {
    opacity: 1;
    pointer-events: auto;
}

/* ── ScopeFilter / ScopeMultiSelect ─────────────────────────── */
.dz-scope-filter {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
    margin-top: 8px;
}

.dz-scope-mselect {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dz-scope-mselect-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ink-soft);
}

.dz-scope-mselect-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 30px;
}

.dz-scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 8px;
    background: var(--surface-2);
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
}

.dz-scope-chip-name { white-space: nowrap; }

.dz-scope-chip-remove {
    width: 14px;
    height: 14px;
    border: none;
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
}
.dz-scope-chip-remove:hover {
    color: #fff;
    background: var(--alert);
}

.dz-scope-mselect-add {
    position: relative;
    flex: 1;
    min-width: 80px;
}

.dz-scope-mselect-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 3px 4px;
    font-size: 12px;
    color: var(--ink);
    outline: none;
    font-family: inherit;
}

.dz-scope-mselect-input::placeholder {
    color: var(--ink-faint);
}

.dz-scope-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(8,41,60,.12);
    max-height: 200px;
    overflow-y: auto;
}

.dz-scope-dropdown-item {
    padding: 7px 10px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink);
}

.dz-scope-dropdown-item:hover {
    background: var(--surface-soft);
    color: var(--lime-deep);
}

.dz-scope-dropdown-empty {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--ink-faint);
}

/* ── /meu-delta — linha de projeto ───────────────────────────── */
.meu-delta-project-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border-soft);
}
.meu-delta-project-row:last-child { border-bottom: none; }

.meu-delta-project-icon {
    width: 10px;
    height: 32px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── /delta-equipe — Filtros accordion (mobile-only collapse) ─
   Desktop: dz-filters-toggle escondido, dz-filters-body sempre visível.
   Mobile (≤768px): toggle visível, body colapsa por padrão e mostra/
   esconde via classe .expanded / .collapsed. */
.dz-filters-card { padding: 0; }

.dz-filters-toggle { display: none; }

.dz-filters-body {
    display: block;
    padding: 14px 16px;
}

/* ── /delta-equipe — ranking de atenção (linha) ─────────────── */
.team-attention-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-soft);
}
.team-attention-row:last-child { border-bottom: none; }

/* ── /delta-equipe — heatmap pessoa × dia ─────────────────────
   Container exterior usa overflow-x:auto pra gerar SCROLLBAR HORIZONTAL
   dentro do card quando o conteúdo (rows) é mais largo que a viewport
   (caso típico em mobile com 30+ dias × N membros). max-width:100%
   garante que o container respeita a largura do card. */
.dz-team-heatmap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-x: auto;
    max-width: 100%;
    /* Padding-bottom evita a scrollbar sobrepor a última row visualmente
       (alguns browsers reservam espaço, outros não — buffer constante
       fica consistente). */
    padding-bottom: 4px;
}

.dz-team-heatmap-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* min-width:max-content faz a row crescer ao tamanho real do seu
       conteúdo (nome + todas as células), forçando o scroll a aparecer
       no .dz-team-heatmap (parent) em vez de cells overflowing pra
       fora do card. */
    min-width: max-content;
}

.dz-team-heatmap-name {
    width: 140px;
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Sticky pra deixar o nome sempre visível durante o scroll horizontal
       — gestor olha a linha do member sem perder a referência. */
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 1;
}

.dz-team-heatmap-cells {
    display: flex;
    gap: 2px;
    /* flex:0 0 auto deixa o cells container do tamanho dos seus filhos,
       sem tentar se ajustar a flex:1 (que somado ao name forçaria shrink
       das cells). */
    flex: 0 0 auto;
}

.dz-team-heatmap-cell {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}
.dz-team-heatmap-int-0 { background: var(--surface-2); }
.dz-team-heatmap-int-1 { background: rgba(172,201,15,.28); }
.dz-team-heatmap-int-2 { background: rgba(172,201,15,.55); }
.dz-team-heatmap-int-3 { background: rgba(172,201,15,.80); }
.dz-team-heatmap-int-4 { background: var(--lime-deep); }

/* ── /delta-equipe — distribuição por projeto (barras horizontais) ─ */
.team-project-dist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.team-project-row {
    display: grid;
    grid-template-columns: 140px 1fr 110px;
    gap: 10px;
    align-items: center;
}

.team-project-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-project-bar-track {
    height: 14px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
}

.team-project-bar {
    height: 100%;
    border-radius: 4px;
    transition: width .2s ease;
}

.team-project-value {
    font-size: 11.5px;
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   BLOCO MOBILE — overrides finais (cascade)
   ============================================================
   Posicionado APÓS todas as declarações base para vencer o cascade
   CSS em viewports ≤ 768px. Não mover daqui — ordem importa.
   ============================================================ */

@media (max-width: 768px) {
    /* Topbar compacta */
    .dz-topbar { padding: 10px 14px; gap: 10px; }

    /* Search ocupa espaço disponível */
    .dz-search { min-width: 0; flex: 1; }

    /* Conteúdo ocupa largura total — padding compacto pra ganhar espaço */
    .dz-content { padding: 15px; }

    /* KPI grid vira 2 colunas */
    .cap-kpi-grid { grid-template-columns: repeat(2, 1fr); }

    /* Proj cards vira 1 coluna */
    .cap-proj-cards-grid { grid-template-columns: 1fr; }

    /* Form grid vira 1 coluna */
    .cap-form-grid { grid-template-columns: 1fr; }

    /* Org grid vira 1 coluna */
    .cap-org-grid { grid-template-columns: 1fr; }

    /* Delta legend encolhe */
    .delta-chip { min-width: 76px; padding: 4px 8px; }
    .delta-chip-label { display: none; }

    /* ─── /pulso ─ Ajustes específicos do dashboard de capacidade ─── */

    /* Esconde barras de evolução do acordeão no mobile — info já está nos badges/métricas.
       A .cap-proj-bar-wrap (barra delta do dashboard) NÃO é escondida aqui:
       continua visível em row própria via grid-template-areas (ver bloco mobile específico de /pulso adiante). */
    .cap-acc-stack-wrap,
    .cap-acc-bar-track {
       /* display: none;*/
    }

    /* Card headers (.dz-card-header) viram coluna: título em cima, legenda+ação embaixo */
    .dz-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
    }
    .dz-card-header > div:last-child {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* KPI cards mais compactos */
    .cap-kpi-card { padding: 14px; }
    .cap-kpi-value { font-size: 24px; }

    /* Acordeão de alocação: padding e member box menos generosos */
    .cap-acc-header { padding: 12px 10px; gap: 0; }
    .cap-acc-member { max-width: 150px; }

    /* Linhas do acordeão expandido: como a barra some, vira info à esq + badge à dir */
    .cap-acc-proj-row {
        grid-template-columns: 1fr auto;
        padding: 6px 14px 6px 12px;
        gap: 8px;
    }
    .cap-acc-body { padding: 2px 0 8px 0; }

    /* QuickTimeEntry header: título em cima, ações abaixo full-width */
    .dz-screen-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .dz-screen-header > div:last-child {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .dz-screen-header > div:last-child .btn {
        flex: 1;
        white-space: nowrap;
        min-width: 80px;
    }

    /* Date bar e summary panel viram coluna pra evitar quebra */
    .dz-datebar {
        flex-direction: column;
        gap: 10px;
    }

    /* Grid principal vira 1 coluna (mobile) */
    .grid-cols-12 > .col-span-8,
    .grid-cols-12 > .col-span-4 {
        grid-column: span 12 !important;
    }

    /* Action row de card: wrap suave + botões mais compactos */
    .action-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .action-row > * {
        flex-shrink: 0;
    }

    /* Timer no mobile (quando ativo): fixed bottom-right compacto.
       Sobrescreve o sticky padrão de desktop. */
    .timer-card.timer-card-pinned {
        position: fixed;
        right: 12px;
        bottom: 12px;
        top: auto;
        width: 240px;
        max-width: calc(100vw - 24px);
        z-index: 60;
        padding: 10px 12px;
        box-shadow: 0 8px 24px rgba(8, 41, 60, 0.35);
        border-color: var(--teal);
    }
    .timer-card.timer-card-pinned .card-section-title { display: none; }
    .timer-card.timer-card-pinned .timer-clock { font-size: 26px; margin-bottom: 4px; }
    .timer-card.timer-card-pinned .timer-status { display: none; }

    /* /organizacao — cap-form-card padding menor */
    .cap-form-card { padding: 14px; }
    .cap-form-title { font-size: 13px; }

    /* /organizacao — Tabelas viram cards em mobile (responsive table pattern).
       Cada <tr> vira card; cada <td> mostra "LABEL: conteúdo" via attr(data-label).
       Acessibilidade preservada — HTML continua sendo <table> e screen readers
       ainda entendem a estrutura (thead apenas oculto visualmente). */
    .cap-table,
    .cap-table tbody,
    .cap-table tr,
    .cap-table td {
        display: block;
        width: 100%;
    }
    .cap-table thead {
        position: absolute;
        left: -9999px;
    }
    .cap-table tbody tr {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: var(--shadow-sm);
    }
    .cap-table tbody tr:hover { background: var(--surface); }
    .cap-table tbody tr:last-child td { border-bottom: 1px solid var(--border-soft); }

    .cap-table td {
        padding: 6px 0;
        font-size: 13px;
        border-bottom: 1px solid var(--border-soft);
        text-align: left !important;
    }
    .cap-table td:last-child { border-bottom: none; }

    /* Label prefix do conteúdo da célula (oculto se data-label="" ou ausente) */
    .cap-table td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--ink-soft);
        margin-bottom: 3px;
    }

    /* Coluna de ações: botões em row horizontal, sem prefix de label */
    .cap-table td.cap-cell-actions {
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .cap-table td.cap-cell-actions::before { display: none; }
    .cap-table td.cap-cell-actions .btn { flex: 0 0 auto; }

    /* /organizacao — Organograma: indentação menor + 1 membro por linha */
    .org-chart-card { padding: 10px 12px; }
    .org-chart-children {
        margin-left: 14px;
        padding-left: 10px;
    }
    .org-chart-members {
        margin-left: 14px;
        padding-left: 10px;
        grid-template-columns: 1fr;
    }

    /* /projetos/{id} — Fontes Externas: empty state com steps em coluna.
       Steps são 3 cards "Configurar → Importar → Apontar" que em desktop
       ficam em row. Em mobile viram coluna, com cada step em grid
       (número à esquerda, título+descrição à direita) e setas rotacionadas. */
    .mapping-empty { padding: 20px 12px; gap: 16px; }
    .mapping-how { padding: 16px; }
    .mapping-steps {
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
    }
    .mapping-step {
        display: grid;
        grid-template-columns: 30px 1fr;
        grid-template-rows: auto auto;
        gap: 4px 12px;
        align-items: start;
        text-align: left;
        padding: 0;
    }
    .mapping-step-num {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }
    .mapping-step-title { grid-column: 2; grid-row: 1; }
    .mapping-step-desc  { grid-column: 2; grid-row: 2; }
    .mapping-step-arrow {
        align-self: center;
        margin: 0;
        padding: 0;
        transform: rotate(90deg);
    }

    /* /projetos/{id} — Fontes Externas: form "Novo vínculo" mais compacto */
    .mapping-form-wrap { padding: 14px; }
    .mapping-form-header {
        flex-direction: column;
        gap: 8px;
    }
    .mapping-form-header > button { align-self: flex-end; }

    /* /projetos/{id} — Lista de vínculos: row vira card empilhado quando
       não cabe (nome longo + pill + 2 botões estouravam) */
    .integ-mapping-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }
    .integ-mapping-row > div:nth-child(2) { flex: 1 1 100%; }
    .integ-mapping-row > .flex { width: 100%; justify-content: flex-end; }

    /* Calendário Delta: em mobile mostra apenas mês corrente. Desktop mantém ano cheio.
       O componente marca .dz-calendar-cell-current-month no server side; mobile
       esconde as outras com display:none. Slots vazios também somem em mobile
       (não fazem sentido sem o resto da grade pra dar contexto). */
    .dz-calendar-cell:not(.dz-calendar-cell-current-month):not(.dz-calendar-legend .dz-calendar-cell) {
        display: none;
    }
    /* Mês corrente vira grade 7-colunas (linhas de semana) — ocupa largura toda */
    .dz-calendar-grid {
        flex-wrap: wrap;
        gap: 4px;
        overflow-x: visible;
    }
    .dz-calendar-week {
        flex-direction: row;
        gap: 4px;
    }
    .dz-calendar-cell-current-month {
        width: 14px;
        height: 14px;
    }

    /* Stacked bar: label/total ficam menores em mobile pra dar mais espaço à barra */
    .dz-stacked-row {
        grid-template-columns: 50px 1fr 50px;
        gap: 6px;
    }

    /* Period filter: chips wrap natural, custom inputs ficam 1 por linha */
    .dz-period-custom {
        flex-wrap: wrap;
    }
    .dz-period-custom .dz-input { max-width: none; flex: 1; }

    /* ScopeFilter em mobile: 1 coluna pra cada nível ocupar a largura cheia */
    .dz-scope-filter {
        grid-template-columns: 1fr;
    }

    /* Filtros accordion: toggle aparece, body colapsa por default */
    .dz-filters-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 12px 14px;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        color: var(--ink);
    }
    .dz-filters-toggle-icon {
        font-size: 14px;
        flex-shrink: 0;
    }
    .dz-filters-toggle-label {
        font-weight: 700;
        font-size: 13px;
        flex-shrink: 0;
    }
    .dz-filters-toggle-summary {
        flex: 1;
        min-width: 0;
        font-size: 11.5px;
        color: var(--ink-soft);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dz-filters-toggle-chevron {
        font-size: 12px;
        color: var(--ink-faint);
        flex-shrink: 0;
    }
    .dz-filters-toggle:hover .dz-filters-toggle-chevron {
        color: var(--ink);
    }

    /* Body só aparece quando expanded. Sem .collapsed no desktop pq sempre block. */
    .dz-filters-body.collapsed { display: none; }
    .dz-filters-body.expanded {
        display: block;
        border-top: 1px solid var(--border-soft);
    }

    /* /meu-delta — linha de projeto wrap em mobile (icon + texto na 1ª linha,
       sparkline + chip na 2ª) */
    .meu-delta-project-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .meu-delta-project-row > div:nth-child(2) { flex: 1 1 calc(100% - 24px); }
    .meu-delta-project-row .dz-sparkline { width: 60px; }

    /* /delta-equipe — ranking wrap em mobile: avatar + nome+motivo na 1ª linha,
       pills+delta empilhados embaixo */
    .team-attention-row {
        flex-wrap: wrap;
    }
    .team-attention-row > div:nth-child(2) { flex: 1 1 calc(100% - 40px); }

    /* Heatmap pessoa × dia em mobile: escondemos o card inteiro. A grade
       (N membros × 30+ dias) não cabe em viewport estreito e o scroll
       horizontal interno gera UX confusa com tooltips + chips wrapping.
       Visão da equipe em mobile fica nos outros widgets (ranking,
       distribuição por projeto, composição por categoria) que já
       comunicam o mesmo signal de outras formas.
       :has() targeta especificamente o card que CONTÉM o heatmap, sem
       precisar marcar o markup com classe extra. */
    .dz-card:has(.dz-team-heatmap) {
        display: none;
    }

    /* Distribuição por projeto: nome encolhe, value some pra dar espaço à barra */
    .team-project-row {
        grid-template-columns: 90px 1fr 70px;
        gap: 6px;
        font-size: 11px;
    }
    .team-project-value { font-size: 10.5px; }

    /* InfoTooltip em mobile: ícone próximo da borda direita fazia o popover
       absoluto estourar viewport (left:50% deslocava o centro do popover pro
       centro do ícone). Solução: bottom-sheet pattern — popover vira FIXED
       na parte inferior da tela, largura cheia menos 16px de margem.

       Por que esses seletores compostos: as regras base de .dz-info-pos-top/
       bottom/right setam bottom/left/transform com especificidade 0,2,0 —
       MAIOR que .dz-info-popover (0,1,0). Pra vencer sem !important, igualamos
       a especificidade incluindo cada variante pos-* no mesmo bloco; como
       este @media vem depois na cascata, vence em mobile.

       Sintoma do bug anterior: position:fixed + bottom:calc(100% + 8px)
       (não-sobrescrito pela regra mobile genérica) colocava o popover
       100vh acima do topo do viewport — fora da tela, parecia "não abrir". */
    .dz-info-pos-top .dz-info-popover,
    .dz-info-pos-bottom .dz-info-popover,
    .dz-info-pos-right .dz-info-popover,
    .dz-info-popover {
        position: fixed;
        top: auto;
        bottom: 16px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        max-height: 60vh;
        overflow-y: auto;
        transform: translateY(8px);
        box-shadow: 0 -8px 24px rgba(8,41,60,.35), 0 2px 6px rgba(8,41,60,.2);
        z-index: 1000;
    }
    /* Estado visível: mesma técnica — inclui todas as variantes pos-* */
    .dz-info-pos-top:hover .dz-info-popover,
    .dz-info-pos-top:focus-within .dz-info-popover,
    .dz-info-pos-bottom:hover .dz-info-popover,
    .dz-info-pos-bottom:focus-within .dz-info-popover,
    .dz-info-pos-right:hover .dz-info-popover,
    .dz-info-pos-right:focus-within .dz-info-popover,
    .dz-info-tooltip:hover .dz-info-popover,
    .dz-info-tooltip:focus-within .dz-info-popover {
        transform: translateY(0);
    }
    .dz-info-popover::after { display: none; }

    /* Ícone um pouco maior em mobile pra dar tap target adequado */
    .dz-info-tooltip {
        width: 18px;
        height: 18px;
        cursor: pointer;  /* iOS Safari precisa pra dar focus em touch */
    }
    .dz-info-icon {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }

    /* /auditoria-apontamentos — mesmo padrão de .integ-mapping-row:
       linha horizontal vira card empilhado quando não cabe (avatar+texto
       wrap pra 100%, ações em row própria full-width).
       Aplicado a TODAS as abas (Sem projeto / Regras aplicáveis / Conflitos
       / Ignorados / Histórico) — todas usam .audit-row.

       Estrutura desktop:  [icon] [conteúdo flex:1] [ações]
       Estrutura mobile:   [icon] [conteúdo wrap 100%] [ações wrap 100%] */
    .audit-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }
    /* O segundo child é o bloco de conteúdo (title + meta + chips/pills).
       Em mobile, ocupa linha própria pra ler bem o título completo. */
    .audit-row > div:nth-child(2) { flex: 1 1 100%; min-width: 0; }
    /* Botões de ação (.flex.gap-2) descem pra row própria à direita.
       Vale para "Sem projeto", "Regras aplicáveis", "Ignorados". */
    .audit-row > .flex { width: 100%; justify-content: flex-end; flex-wrap: wrap; }

    /* Título: em desktop, nowrap+ellipsis evita "expandir" a row.
       Em mobile, libera wrap pra mostrar o nome completo (info crítica). */
    .audit-row-title {
        white-space: normal;
        word-break: break-word;
    }

    /* Aba "Histórico": .audit-action-chip tem min-width:110px no desktop pra
       servir de "etiqueta de cor" alinhada. Em mobile, vira inline-block sem
       largura mínima (chip pequeno) e não rouba espaço do título. */
    .audit-action-chip {
        min-width: 0;
        align-self: flex-start;
        padding: 4px 8px;
    }

    /* Aba "Conflitos": cada conflito interno (.dz-pill + descrição) fica
       cramped em mobile quando o card já é estreito. Pill vira chip em cima,
       descrição em linha de baixo — respiro melhor pra ler. */
    .audit-row .dz-pill + * { display: block; margin-top: 2px; }
}

/* ============================================================
   AJUSTES MOBILE — header da Auditoria (label + botão Atualizar)
   ============================================================
   O dz-screen-header já tem regra mobile que estica .btn pra flex:1
   — bom pra páginas onde o último div é só botões. Na Auditoria o
   último div tem <span>Atualizado há Xmin</span> + botão; o span
   "Atualizado" fica colado num botão estirado se aplicarmos a regra
   padrão. Override específico: span ocupa linha própria acima do
   botão (label discreto), botão fica full-width abaixo. */
@media (max-width: 768px) {
    .audit-header-meta {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
    }
    .audit-header-meta > span {
        text-align: left;
        font-size: 10.5px;
    }
    /* Reseta o flex:1 que o .dz-screen-header > div:last-child .btn aplica —
       em column direction, flex:1 esticaria verticalmente. */
    .audit-header-meta .btn { flex: 0 0 auto; }
}

/* ============================================================
   Burnup chart (/delta-projetos) — SVG puro, sem lib.

   Container fixo 220px de altura; SVG estica via preserveAspectRatio="none"
   pra ocupar 100% da largura e altura. Eixo X separado em flex embaixo
   pra labels não competirem com o gráfico (e poderem encolher em mobile).

   Cores:
     - Capacidade: var(--brand) — referência azul, planejamento.
     - Realizado:  var(--lime-deep) — produção real, área lime translúcida.
     - Estimativa: var(--ink-faint) tracejada — meta contratual.
   ============================================================ */
.dz-burnup {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dz-burnup-svg {
    width: 100%;
    height: 220px;
    overflow: visible;
}
.dz-burnup-grid {
    stroke: var(--border-soft);
    stroke-width: 0.2;
    vector-effect: non-scaling-stroke;
}
.dz-burnup-baseline {
    stroke: var(--ink-faint);
    stroke-width: 0.3;
    vector-effect: non-scaling-stroke;
}
.dz-burnup-estimate {
    stroke: var(--ink-faint);
    stroke-width: 0.6;
    stroke-dasharray: 2 1.5;
    vector-effect: non-scaling-stroke;
}
.dz-burnup-actual-area {
    fill: rgba(172, 201, 15, .22);
    stroke: none;
}
.dz-burnup-actual-line {
    fill: none;
    stroke: var(--lime-deep);
    stroke-width: 0.8;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.dz-burnup-capacity-line {
    fill: none;
    stroke: var(--brand);
    stroke-width: 0.6;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 0;
    vector-effect: non-scaling-stroke;
    opacity: .85;
}
.dz-burnup-cap-dot {
    fill: var(--brand);
    stroke: #fff;
    stroke-width: 0.15;
    vector-effect: non-scaling-stroke;
}
.dz-burnup-act-dot {
    fill: var(--lime-deep);
    stroke: #fff;
    stroke-width: 0.15;
    vector-effect: non-scaling-stroke;
}

.dz-burnup-axis {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 1px;
    overflow: hidden;
}
.dz-burnup-axis-label {
    font-size: 9.5px;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}

.dz-burnup-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    padding-top: 6px;
    border-top: 1px solid var(--border-soft);
    font-size: 12px;
    color: var(--ink-soft);
}
.dz-burnup-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dz-burnup-legend-item strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.dz-burnup-legend-meta {
    color: var(--ink-faint);
    font-size: 10.5px;
}
.dz-burnup-legend-swatch {
    display: inline-block;
    width: 18px;
    height: 4px;
    border-radius: 2px;
}
.dz-burnup-legend-actual   { background: var(--lime-deep); }
.dz-burnup-legend-capacity { background: var(--brand); height: 3px; }
.dz-burnup-legend-estimate {
    background: transparent;
    border-top: 2px dashed var(--ink-faint);
    height: 0;
    border-radius: 0;
}

.dz-burnup-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--ink-faint);
    font-size: 12.5px;
}

/* Mobile: gráfico mais baixo + esconde labels do meio do eixo X (só 1ª e
   última visíveis). N labels num viewport estreito viram pixel illegible. */
@media (max-width: 768px) {
    .dz-burnup-svg { height: 170px; }
    .dz-burnup-axis-label { font-size: 9px; }
    /* Esconde do segundo até o penúltimo — mantém apenas extremos como
       referência temporal mínima. Mais limpo que rotar 45deg e tentar ler. */
    .dz-burnup-axis-label:not(:first-child):not(:last-child) {
        visibility: hidden;
    }
    .dz-burnup-legend { gap: 8px 14px; font-size: 11.5px; }
}

/* ===========================================================================
   Reconnect UI customizada do Blazor Server.

   O Blazor adiciona classes em #components-reconnect-modal:
     .components-reconnect-show     → tentando reconectar (banner topo)
     .components-reconnect-hide     → conectado (escondido)
     .components-reconnect-failed   → estourou retries (modal blocking)
     .components-reconnect-rejected → circuito morto (modal blocking)

   Banner = não-bloqueante, fixo no topo (estado show)
   Dialog = modal blocking centralizado (estados failed/rejected)
   =========================================================================== */
.dz-reconnect { display: none; }

.dz-reconnect-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #fef6e0;
    border: 1px solid #f3d27b;
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    font-size: 13px;
    color: #6b4f00;
    font-weight: 600;
}

.dz-reconnect-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #d7a72b;
    border-top-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: dz-reconnect-spin 0.8s linear infinite;
}
@keyframes dz-reconnect-spin {
    to { transform: rotate(360deg); }
}

.dz-reconnect-dialog {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(11, 59, 86, .55);
    backdrop-filter: blur(4px);
    flex-direction: column;
    padding: 24px;
}
.dz-reconnect-dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}
.dz-reconnect-icon {
    font-size: 48px;
    margin-bottom: 8px;
}
.dz-reconnect-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
}
.dz-reconnect-msg {
    font-size: 14px;
    color: rgba(255,255,255,.88);
    text-align: center;
    margin: 0 0 20px;
    max-width: 380px;
    line-height: 1.5;
}
.dz-reconnect-actions {
    display: flex;
    gap: 8px;
}

/* Estado: tentando — banner aparece, dialog fica oculto.
   Mostra o wrapper e o banner; o dialog continua display:none. */
#components-reconnect-modal.components-reconnect-show {
    display: block;
}
#components-reconnect-modal.components-reconnect-show .dz-reconnect-banner {
    display: inline-flex;
}

/* Estados: falhou de vez — modal blocking aparece.
   failed = estourou maxRetries (botão Retentar disponível via location.reload)
   rejected = circuito morto no servidor (precisa F5) */
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}
#components-reconnect-modal.components-reconnect-failed .dz-reconnect-dialog,
#components-reconnect-modal.components-reconnect-rejected .dz-reconnect-dialog {
    display: flex;
}


/* ── Project Desktop (add-in MS Project) ────────────────────────────── */

.dz-back-link {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color .15s;
}
.dz-back-link:hover { border-color: var(--ink-soft); }

/* Card resumo no /integracoes */
.pdesk-card-resumo {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
}
.pdesk-card-body { min-width: 0; }
.pdesk-card-desc {
    margin: 6px 0 8px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
}
.pdesk-card-stats {
    font-size: 12px;
    color: var(--ink-soft);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pdesk-card-stats strong { color: var(--ink); font-weight: 700; }
.pdesk-card-sep { opacity: .5; }
.pdesk-card-action { white-space: nowrap; }

/* Token gerado (one-shot) */
.pdesk-token-card { padding: 18px 20px; margin-bottom: 14px; border-left: 3px solid var(--alert); }
.pdesk-token-head { display: flex; justify-content: space-between; align-items: center; }
.pdesk-token-box {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 10px 12px;
}
.pdesk-token-box code {
    flex: 1;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
    color: var(--ink);
}

/* Tabela específica (overrides) */
.pdesk-table code {
    background: var(--bg-soft);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--ink-soft);
}
.pdesk-row-revoked { opacity: .55; }
.pdesk-row-revoked td { text-decoration: line-through; }

@media (max-width: 720px) {
    .pdesk-card-resumo {
        grid-template-columns: 48px 1fr;
    }
    .pdesk-card-action {
        grid-column: 1 / -1;
        margin-top: 4px;
    }
    .pdesk-card-action .btn { width: 100%; }
}