/* ==========================================================================
   PROJETO — 4 ABAS & MARKDOWN LIVE PREVIEW
   ========================================================================== */

.project-header { margin-bottom: 20px; }
.project-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.project-title-row h1 { margin: 0; font-size: 1.6rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.project-tags-inline { display: flex; gap: 6px; flex-wrap: wrap; }

.project-tabs { margin-bottom: 24px; border-bottom: 1px solid var(--color-border); padding-bottom: 8px; }

/* Grid de Layout da Aba Descrição */
.project-desc-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
@media (max-width: 992px) {
    .project-desc-grid { grid-template-columns: 1fr; }
}

.project-card-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.project-box-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
}
.project-box-title svg { width: 20px; height: 20px; color: var(--color-brand); }

.box-header-action { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.box-header-action .project-box-title { margin-bottom: 0; }

.inline-add-form {
    background: var(--color-surface-alt);
    border: 1px dashed var(--color-border-strong);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

/* Recursos Impactados */
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.resource-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    position: relative;
}
.resource-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-brand);
}
.resource-icon svg { width: 20px; height: 20px; }
.resource-info { flex: 1; min-width: 0; }
.resource-type { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-dim); display: block; }
.resource-name { font-size: 0.9rem; color: var(--color-text); word-break: break-word; }
.resource-name a { color: var(--color-brand); text-decoration: none; }
.resource-notes { font-size: 0.8rem; color: var(--color-text-dim); margin: 4px 0 0 0; }
.resource-del-form { position: absolute; top: 8px; right: 8px; }

/* Seção Dev Info */
.dev-box { border-left: 4px solid var(--hue-indigo); }
.dev-summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 16px; }
.dev-item { background: var(--color-surface-alt); padding: 10px 14px; border-radius: 8px; border: 1px solid var(--color-border); }
.dev-item-label { display: block; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--color-text-dim); margin-bottom: 4px; }
.dev-item-value { font-size: 0.9rem; font-weight: 600; word-break: break-all; }
.dev-branches-row { font-size: 0.85rem; background: var(--color-surface-alt); padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; }
.dev-notes { font-size: 0.85rem; }

/* Links Externos */
.link-list { display: flex; flex-direction: column; gap: 8px; }
.link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.link-icon { font-size: 1rem; }
.link-url-title { font-weight: 600; color: var(--color-brand); text-decoration: none; flex: 1; }
.link-url-text { font-size: 0.78rem; color: var(--color-text-dim); word-break: break-all; }

/* Upload de anexos (clique ou arrastar) */
.uploader { margin-bottom: 14px; min-width: 0; }
.uploader-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 18px;
    border: 1.5px dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s var(--ease-out), background-color .15s var(--ease-out), color .15s var(--ease-out);
}
.uploader-drop:hover { border-color: var(--color-blue); background: var(--hue-indigo-bg); }
.uploader-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 16px;
}
.uploader-input:focus-visible + .uploader-icon { outline: 2px solid var(--color-blue); outline-offset: 3px; border-radius: 50%; }
.uploader-icon {
    position: relative;
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 2px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-blue);
}
.uploader-icon svg { width: 20px; height: 20px; }
.uploader-text {
    position: relative;
    z-index: 1;
    pointer-events: none;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.uploader-text strong { color: var(--color-text); font-weight: 700; }
.uploader-hint {
    position: relative;
    z-index: 1;
    pointer-events: none;
    font-size: 0.75rem;
    color: var(--color-text-dim);
    line-height: 1.45;
    max-width: 100%;
    word-break: break-word;
}

.uploader.is-dragging .uploader-drop {
    border-color: var(--color-blue);
    border-style: solid;
    background: var(--hue-indigo-bg);
}
.uploader.is-uploading .uploader-drop { opacity: .6; pointer-events: none; }

.uploader-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.uploader-progress[hidden] { display: none; }
.uploader-progress-name { font-size: 0.78rem; color: var(--color-text-muted); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploader-progress-track { flex: 1; height: 5px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.uploader-progress-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--color-blue); transition: width .15s linear; }

/* Anexos */
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; min-width: 0; }
.attachment-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface-alt);
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.attachment-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.attachment-card.is-removing { opacity: 0; transform: scale(.96); transition: opacity .15s var(--ease-out), transform .15s var(--ease-out); pointer-events: none; }
.attachment-preview { display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.attachment-preview-img img { width: 100%; height: 120px; object-fit: cover; display: block; }
.attachment-preview:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -2px; }
.attachment-icon-doc { height: 90px; display: flex; align-items: center; justify-content: center; background: var(--color-surface); color: var(--color-text-dim); }
.attachment-icon-doc svg { width: 36px; height: 36px; }
.attachment-details { padding: 8px 10px; flex: 1; }
.attachment-name { font-size: 0.82rem; font-weight: 600; color: var(--color-text); text-decoration: none; display: block; word-break: break-all; }
.attachment-meta { font-size: 0.75rem; color: var(--color-text-dim); }

/* Ações do anexo: só aparecem no hover/foco do cartão */
.attachment-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .14s var(--ease-out), transform .14s var(--ease-out);
}
.attachment-actions form { margin: 0; display: flex; }
.attachment-card:hover .attachment-actions,
.attachment-card:focus-within .attachment-actions { opacity: 1; transform: translateY(0); }
@media (max-width: 899px) {
    .attachment-actions { opacity: 1; transform: none; }
}
.attachment-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-dim);
    cursor: pointer;
    transition: background-color .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out), transform .12s var(--ease-out);
}
.attachment-action svg { width: 16px; height: 16px; }
.attachment-action:hover { background: var(--color-surface-alt); color: var(--color-text); border-color: var(--color-border-strong); }
.attachment-action:active { transform: scale(.92); }
.attachment-action-danger:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); }

@media (hover: none) {
    .attachment-actions { opacity: 1; transform: none; }
}

@media (max-width: 899px) {
    .uploader-drop { padding: 18px 14px; }
    .uploader-progress {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .uploader-progress-name { max-width: none; }
    .attachment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (max-width: 420px) {
    .attachment-grid { grid-template-columns: 1fr; }
}

/* Comentários */
.comment-form { margin-bottom: 20px; }
.comment-list { display: flex; flex-direction: column; gap: 16px; }
.comment-item { padding: 14px; background: var(--color-surface-alt); border-radius: 8px; border: 1px solid var(--color-border); }
.comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.comment-author { font-size: 0.9rem; font-weight: 700; color: var(--color-text); }
.comment-date { font-size: 0.75rem; color: var(--color-text-dim); margin-left: auto; }
.comment-body { font-size: 0.9rem; line-height: 1.5; }

/* Sidebar da Aba Descrição */
.side-title { font-size: 0.9rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px; color: var(--color-text-dim); margin: 0 0 12px 0; }
.side-date-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.side-date-list li { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.date-label { color: var(--color-text-dim); }
.side-owner, .side-team { margin-bottom: 12px; }
.user-row-mini { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; font-size: 0.9rem; }

/* Aba Status */
.status-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; }
.status-hero-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); }
.status-eyebrow { font-size: 0.75rem; text-transform: uppercase; font-weight: 800; color: var(--color-text-dim); margin-bottom: 8px; letter-spacing: 0.5px; }
.status-current-badge { display: inline-block; font-size: 1.1rem; font-weight: 800; padding: 6px 16px; border-radius: 999px; margin-bottom: 8px; }
.status-hero-value { font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: 12px; background: linear-gradient(135deg, var(--color-brand) 0%, #8457f0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.status-hero-sub { font-size: 0.82rem; color: var(--color-text-dim); margin: 0; }

.status-two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
@media (max-width: 992px) { .status-two-col { grid-template-columns: 1fr; } }

/* Painel de Engenharia */
.eng-panel { border-left: 4px solid #1f6feb; background: linear-gradient(180deg, rgba(31,111,235,0.03) 0%, var(--color-surface) 100%); }
.eng-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.eng-card { background: var(--color-surface-alt); padding: 12px 16px; border-radius: 8px; border: 1px solid var(--color-border); }
.eng-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 4px; }
.eng-val { display: block; font-size: 0.95rem; font-weight: 700; color: var(--color-text); }
.eng-sub { display: block; font-size: 0.78rem; color: var(--color-text-dim); margin-top: 2px; }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 16px; padding-left: 10px; position: relative; margin-top: 12px; }
.timeline::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); }
.timeline-item { display: flex; align-items: flex-start; gap: 16px; position: relative; z-index: 1; }
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border-strong); flex-shrink: 0; margin-top: 4px; }
.timeline-item.done .timeline-dot { background: var(--color-success); border-color: var(--color-success); }
.timeline-item.active .timeline-dot { background: var(--color-brand); border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(31,111,235,0.2); }
.timeline-content strong { display: block; font-size: 0.9rem; color: var(--color-text); }
.timeline-date { font-size: 0.78rem; color: var(--color-text-dim); }

/* Riscos & Entregas */
.card-row-simple { display: flex; align-items: center; gap: 12px; padding: 10px; border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); }
.card-row-simple:hover { background: var(--color-surface-alt); }
.risk-list { display: flex; flex-direction: column; gap: 8px; }
.risk-item { padding: 10px; background: rgba(239, 68, 68, 0.05); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
.risk-title { font-weight: 600; font-size: 0.88rem; color: var(--color-text); text-decoration: none; }

/* Configuração & Form Status */
.config-card { margin-top: 12px; }
.config-tags-section { margin-bottom: 20px; }
.tag-selector-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tag-chip-toggle {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--color-text);
}
.tag-chip-toggle:hover { border-color: var(--color-brand); }
.tag-chip-toggle.is-attached { font-weight: 700; box-shadow: var(--shadow-sm); }

.divider { border: 0; border-top: 1px solid var(--color-border); margin: 24px 0; }
.danger-zone { background: rgba(239, 68, 68, 0.04); border: 1px solid rgba(239, 68, 68, 0.2); padding: 16px; border-radius: 8px; }

/* MARKDOWN LIVE PREVIEW GRID REMOVED (Replaced by new design system) */

/* Sub-tabs no estilo pílula encapsulada */
.segmented {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}
.segmented-option {
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-dim);
    background: transparent;
    border: 0;
    padding: 6px 14px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.segmented-option:hover {
    color: var(--color-text);
}
.segmented-option.is-active {
    background: var(--color-surface);
    color: var(--color-brand);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Comment Composer Actions & Visual Improvements */
.comment-composer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-composer-actions .btn-secondary {
    border-radius: 24px;
    padding: 8px 18px;
    font-weight: 600;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-dim);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.comment-composer-actions .btn-secondary:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
    background: var(--color-surface-alt);
}

.btn-icon-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--color-blue, #1f6feb);
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(31, 111, 235, 0.3);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-icon-send:hover {
    transform: translateY(-2px) scale(1.05);
    background: var(--color-blue-bright, #3f7ff2);
    box-shadow: 0 6px 16px rgba(31, 111, 235, 0.4);
}

.btn-icon-send:active {
    transform: translateY(1px) scale(0.95);
    box-shadow: 0 2px 6px rgba(31, 111, 235, 0.2);
}

.btn-icon-send svg {
    margin-left: -2px;
    margin-top: 2px;
    fill: none;
}

/* Comment Composer Markdown Area — sizing only, borders/toolbar come from the shared .md-editor-shell system */
.comment-composer-textarea {
    min-height: 140px;
    box-sizing: border-box;
}

/* Remove max-width limit on the comment form so it spans the full container */
.comment-composer-card .form,
.comment-composer-card .comment-form {
    max-width: 100%;
    width: 100%;
}

/* Botões pequenos -- usados em várias telas (tags, anexos, popovers) mas nunca tinham estilo próprio */
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-xs { padding: 4px 10px; font-size: 11.5px; border-radius: 7px; gap: 5px; }
.fs-sm { font-size: 12.5px; }

/* Cartão: prioridade, status e prazo editáveis via popover, independente do texto */
.badge-priority-trigger,
.badge-status-trigger,
.due-chip-trigger {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    border-radius: 6px;
    transition: filter .12s ease;
}
.badge-priority-trigger:hover .badge-priority,
.badge-status-trigger:hover .badge-status { filter: brightness(.94); box-shadow: inset 0 0 0 1px currentColor; }
.due-chip-trigger:hover { color: var(--color-blue); }
.badge-priority-trigger:focus-visible,
.badge-status-trigger:focus-visible,
.due-chip-trigger:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

.wd-popover-form {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 190px;
}
.wd-popover-form input[type="date"] {
    font: inherit;
    padding: 8px 10px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-text);
}
#wd-pop-priority { width: 320px; }
#wd-pop-status { width: 220px; }
#wd-pop-duedate .wd-popover-form { flex-direction: row; align-items: center; min-width: 0; }
#wd-pop-duedate input[type="date"] { flex: 1; min-width: 0; }

/* Painel de edição de texto do card: usa a largura toda do card-panel, sem o limite de 480px do .form genérico */
#wd-card-edit-title .form,
#wd-card-edit-desc .form { max-width: none; }
#wd-card-edit-title input[name="title"] { font-size: 15px; font-weight: 600; }