/* * SDB — Gestão de Trabalhos da Comunicação · UI do workspace * * Consome tokens do SDB Design System (--sdb-*) com fallbacks; a ESTRUTURA * (layout, densidade, componentes de aplicação) é propriedade do plugin, por * isso é determinística — não depende dos módulos admin do DS estarem * carregados no front-office. * * Padrões: app shell com barra lateral persistente, topbar contextual, * tabelas densas com o essencial, filtros em painel colapsável. */ /* ========================================================================= * 1. Base * ====================================================================== */ :root { /* Pilha de fontes própria do plugin: a Archivo (do Design System, alojada * localmente em sdb-fonts.css) primeiro; depois recurso de sistema. Assim o * plugin usa a tipografia correta mesmo sem o DS/tema, e fica independente do * template ativo. */ --sdbcw-font: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } body.sdb-comms-workspace { margin: 0; background: var(--sdb-color-background, #f4f6f9); font-family: var(--sdb-font-body, var(--sdbcw-font)); font-size: 15px; line-height: 1.5; color: var(--sdb-color-text, #1c2430); -webkit-font-smoothing: antialiased; } /* O WordPress empurra o 32px quando a admin bar está ligada; nestas * páginas autónomas (sem admin bar) esse desvio deixa um vazio no topo. */ html:has( > body.sdb-comms-workspace ) { margin-top: 0 !important; } .sdb-comms *, .sdb-comms *::before, .sdb-comms *::after { box-sizing: border-box; } .sdb-comms-muted { color: var(--sdb-color-muted, #647080); } .sdb-comms-link { color: var(--sdb-color-primary, #0b57a4); text-decoration: none; font-weight: var(--sdb-font-weight-semibold, 600); } .sdb-comms-link:hover { text-decoration: underline; } .sdb-comms-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 0.85rem; font-weight: var(--sdb-font-weight-semibold, 600); color: var(--sdb-color-primary, #0b57a4); cursor: pointer; } .sdb-comms-linkbtn:hover { text-decoration: underline; } .sdb-comms-linkbtn--danger { color: var(--sdb-color-danger, #b3261e); } /* ========================================================================= * 2. App shell — barra lateral + área principal * ====================================================================== */ .sdb-comms-app { /* Largura máxima do conteúdo (topbar + área) para coerência em ecrãs * grandes (27"+): fica centrado em vez de esticar ou colar à esquerda. */ --sdbcw-shell-max: 1600px; display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; } .sdb-comms-sidebar { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; gap: 20px; padding: 20px 14px; background: var(--sdb-color-surface, #fff); border-right: 1px solid var(--sdb-color-border, #e5e8ee); } .sdb-comms-sidebar__brand { display: flex; flex-direction: column; gap: 2px; padding: 2px 10px 0; } .sdb-comms-sidebar__brand-title { font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-size: 1.05rem; font-weight: var(--sdb-font-weight-bold, 700); color: var(--sdb-color-primary, #0b57a4); letter-spacing: -0.01em; } .sdb-comms-sidebar__brand-sub { font-size: 0.72rem; color: var(--sdb-color-muted, #647080); text-transform: uppercase; letter-spacing: 0.06em; } .sdb-comms-sidebar__cta { text-align: center; } .sdb-comms-sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; /* A navegação é que rola (se preciso); marca e rodapé (Terminar sessão) * ficam sempre visíveis, sem scroll na barra inteira. */ min-height: 0; overflow-y: auto; } .sdb-comms-sidebar__link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--sdb-radius-sm, 8px); font-size: 0.9rem; font-weight: 500; color: var(--sdb-color-text, #1c2430); text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .sdb-comms-sidebar__link svg { flex: none; color: var(--sdb-color-muted, #647080); } .sdb-comms-sidebar__link:hover { background: var(--sdb-color-background, #f4f6f9); } .sdb-comms-sidebar__link.is-active { background: var(--sdb-color-primary-soft, #e8f0f9); color: var(--sdb-color-primary, #0b57a4); font-weight: var(--sdb-font-weight-semibold, 600); } .sdb-comms-sidebar__link.is-active svg { color: var(--sdb-color-primary, #0b57a4); } .sdb-comms-sidebar__foot { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px 0; border-top: 1px solid var(--sdb-color-border, #e5e8ee); } .sdb-comms-sidebar__user { font-size: 0.85rem; font-weight: var(--sdb-font-weight-semibold, 600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sdb-comms-sidebar__meta-link { font-size: 0.78rem; color: var(--sdb-color-muted, #647080); text-decoration: none; } .sdb-comms-sidebar__meta-link:hover { color: var(--sdb-color-primary, #0b57a4); text-decoration: underline; } .sdb-comms-main { min-width: 0; display: flex; flex-direction: column; } /* Topbar contextual (título da página + ações). */ .sdb-comms-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; /* Fundo a toda a largura (barra fixa), mas o conteúdo alinhado exatamente à * mesma coluna que a área (max-width + 28px de goteira) — o "+28px" faz o * título/ações do topo baterem certo com as caixas em baixo. */ padding: 14px max( 28px, calc( ( 100% - var( --sdbcw-shell-max, 1600px ) ) / 2 + 28px ) ); background: var(--sdb-color-surface, #fff); border-bottom: 1px solid var(--sdb-color-border, #e5e8ee); } .sdb-comms-topbar__heading h1 { margin: 0; font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-size: 1.2rem; font-weight: var(--sdb-font-weight-bold, 700); letter-spacing: -0.01em; } .sdb-comms-topbar__heading p { margin: 1px 0 0; font-size: 0.8rem; color: var(--sdb-color-muted, #647080); } .sdb-comms-topbar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sdb-comms-topbar--detail .sdb-comms-back { margin: 0 0 2px; font-size: 0.78rem; } .sdb-comms-detail-meta { display: flex; align-items: center; gap: 8px; } .sdb-comms-content { padding: 24px 28px 56px; max-width: var( --sdbcw-shell-max, 1600px ); width: 100%; margin-inline: auto; } /* ========================================================================= * 3. Botões (fallback com os tokens; se o DS os estilizar, coexistem) * ====================================================================== */ .sdb-comms .sdb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; min-height: 36px; border: 1px solid var(--sdb-color-border, #d6dbe3); border-radius: var(--sdb-radius-sm, 8px); background: var(--sdb-color-surface, #fff); color: var(--sdb-color-text, #1c2430); font: inherit; font-size: 0.85rem; font-weight: var(--sdb-font-weight-semibold, 600); line-height: 1.2; text-decoration: none; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .sdb-comms .sdb-btn:hover { border-color: var(--sdb-color-primary, #0b57a4); color: var(--sdb-color-primary, #0b57a4); } .sdb-comms .sdb-btn--primary { background: var(--sdb-color-primary, #0b57a4); border-color: var(--sdb-color-primary, #0b57a4); color: var(--sdb-color-on-primary, #fff); } .sdb-comms .sdb-btn--primary:hover { filter: brightness(1.06); color: var(--sdb-color-on-primary, #fff); } .sdb-comms .sdb-btn--subtle { background: var(--sdb-color-background, #f4f6f9); border-color: transparent; } .sdb-comms .sdb-btn--text { background: transparent; border-color: transparent; color: var(--sdb-color-primary, #0b57a4); } .sdb-comms .sdb-btn--danger { background: var(--sdb-color-danger, #b3261e); border-color: var(--sdb-color-danger, #b3261e); color: #fff; } .sdb-comms .sdb-btn--danger:hover { filter: brightness(1.06); color: #fff; } /* Zona de perigo (eliminar pedido) — discreta, no fundo do detalhe. */ .sdb-comms-danger { border: 1px solid var(--sdb-hue-red-border, #f3b4b4); background: var(--sdb-hue-red-bg, #fdecec); } .sdb-comms-danger__title { color: var(--sdb-color-danger, #b3261e); } /* ========================================================================= * 4. Cartões e títulos de secção (hierarquia tipográfica equilibrada) * ====================================================================== */ .sdb-comms .sdb-admin-card { background: var(--sdb-color-surface, #fff); border: 1px solid var(--sdb-color-border, #e5e8ee); border-radius: var(--sdb-radius-md, 12px); box-shadow: var(--sdb-shadow-card, 0 1px 2px rgba(16, 24, 40, 0.04)); padding: 18px 20px; margin: 0 0 16px; } .sdb-comms .sdb-admin-card > h2, .sdb-comms .sdb-admin-card > h3, .sdb-comms-collapse > .sdb-comms-collapse__summary { margin: 0 0 14px; font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-size: 0.95rem; font-weight: var(--sdb-font-weight-semibold, 600); letter-spacing: 0; line-height: 1.3; color: var(--sdb-color-text, #1c2430); } .sdb-comms .sdb-admin-card > h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sdb-color-muted, #647080); } .sdb-comms-card-meta { font-size: 0.75rem; font-weight: 400; margin-left: 8px; } .sdb-comms-count { display: inline-block; min-width: 22px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--sdb-color-background, #f4f6f9); color: var(--sdb-color-muted, #647080); font-size: 0.72rem; text-align: center; vertical-align: 2px; } /* Painéis colapsáveis — refinados (chevron fino, alinhado ao título). */ .sdb-comms-collapse > .sdb-comms-collapse__summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: -4px -6px; padding: 4px 6px; border-radius: var(--sdb-radius-sm, 8px); user-select: none; text-align: left; } .sdb-comms-collapse:not([open]) > .sdb-comms-collapse__summary { margin-bottom: -4px; } .sdb-comms-collapse > .sdb-comms-collapse__summary:hover { background: var(--sdb-color-background, #f4f6f9); } .sdb-comms-collapse__summary::-webkit-details-marker { display: none; } .sdb-comms-collapse__summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; margin-right: 3px; border-right: 1.6px solid var(--sdb-color-muted, #647080); border-bottom: 1.6px solid var(--sdb-color-muted, #647080); transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease; } .sdb-comms-collapse[open] > .sdb-comms-collapse__summary::after { transform: rotate(225deg) translateY(-1px); } .sdb-comms-collapse[open] > .sdb-comms-collapse__summary { margin-bottom: 10px; } /* ========================================================================= * 5. Indicadores (stats) * ====================================================================== */ .sdb-comms-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0 0 16px; } .sdb-comms-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--sdb-color-surface, #fff); border: 1px solid var(--sdb-color-border, #e5e8ee); border-left-width: 3px; border-left-color: var(--sdb-color-primary, #0b57a4); border-radius: var(--sdb-radius-md, 10px); box-shadow: var(--sdb-shadow-card, 0 1px 2px rgba(16, 24, 40, 0.04)); } .sdb-comms-stat__value { font-size: 1.35rem; font-weight: var(--sdb-font-weight-bold, 700); line-height: 1.15; font-variant-numeric: tabular-nums; } .sdb-comms-stat__label { font-size: 0.7rem; font-weight: var(--sdb-font-weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.05em; color: var(--sdb-color-muted, #647080); } .sdb-comms-stat--success { border-left-color: var(--sdb-color-success, #1a7f37); } .sdb-comms-stat--warning { border-left-color: var(--sdb-color-warning, #b45309); } .sdb-comms-stat--critical { border-left-color: var(--sdb-color-danger, #b3261e); } .sdb-comms-stat--info { border-left-color: var(--sdb-color-primary, #0b57a4); } .sdb-comms-stats--secondary .sdb-comms-stat__value { font-size: 1.1rem; } /* ========================================================================= * 6. Tabelas densas * ====================================================================== */ .sdb-comms-table-wrap { overflow-x: auto; } .sdb-comms-table { width: 100%; border-collapse: collapse; font-size: 0.855rem; } .sdb-comms-table th { padding: 7px 12px; text-align: left; font-size: 0.68rem; font-weight: var(--sdb-font-weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.05em; color: var(--sdb-color-muted, #647080); background: transparent; border-bottom: 2px solid var(--sdb-color-border, #e5e8ee); white-space: nowrap; } .sdb-comms .sdb-comms-table th, .sdb-comms .sdb-comms-table td { text-align: left; } .sdb-comms-table td { padding: 6px 10px; border-bottom: 1px solid var(--sdb-color-border-soft, #eef1f5); vertical-align: middle; } /* Números (relatórios) mantêm-se à direita — convenção de leitura. */ .sdb-comms .sdb-comms-table th.sdb-comms-num, .sdb-comms .sdb-comms-table td.sdb-comms-num { text-align: right; } /* Avatares compactos nas tabelas. */ .sdb-comms-table .sdb-avatar { width: 20px; height: 20px; font-size: 0.5rem; } .sdb-comms-cell-owner .sdb-comms-owner { gap: 6px; } .sdb-comms-table tbody tr:hover { background: var(--sdb-color-background, #f7f9fc); } .sdb-comms-table tbody tr:last-child td { border-bottom: 0; } .sdb-comms-col-subject { width: 40%; min-width: 220px; } .sdb-comms-cell-date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sdb-color-muted, #647080); } .sdb-comms-cell-date.is-overdue { color: var(--sdb-color-danger, #b3261e); font-weight: var(--sdb-font-weight-semibold, 600); } .sdb-comms-cell-owner { white-space: nowrap; } .sdb-comms .sdb-comms-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .sdb-comms-table--mini { font-size: 0.82rem; } .sdb-comms-list-card { padding-bottom: 8px; } .sdb-comms-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .sdb-comms-inline-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; } /* Badges com respiro nas tabelas/listas. */ .sdb-comms .sdb-status-badge, .sdb-comms .sdb-priority { display: inline-block; white-space: nowrap; } /* Estado vazio. */ .sdb-comms-empty { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 36px 16px; text-align: center; color: var(--sdb-color-muted, #647080); border: 1px dashed var(--sdb-color-border, #dfe4ea); border-radius: var(--sdb-radius-md, 10px); } .sdb-comms-empty strong { color: var(--sdb-color-text, #1c2430); } /* Mensagens flash. */ .sdb-comms-flash { padding: 10px 14px; margin: 0 0 16px; border-radius: var(--sdb-radius-sm, 8px); border: 1px solid var(--sdb-color-border, #e5e8ee); background: var(--sdb-color-surface, #fff); font-size: 0.875rem; } .sdb-comms-flash--success { border-color: var(--sdb-color-success, #1a7f37); background: var(--sdb-color-success-soft, #e8f5ec); } .sdb-comms .sdb-status-message { padding: 10px 14px; margin: 0 0 16px; border-radius: var(--sdb-radius-sm, 8px); font-size: 0.875rem; border: 1px solid var(--sdb-color-border, #e5e8ee); background: var(--sdb-color-surface, #fff); } .sdb-comms .sdb-status-message--success { border-color: var(--sdb-color-success, #1a7f37); background: var(--sdb-color-success-soft, #e8f5ec); } .sdb-comms .sdb-status-message--error { border-color: var(--sdb-color-danger, #b3261e); background: var(--sdb-color-danger-soft, #fdecea); } /* ========================================================================= * 7. Filtros (painel colapsável) * ====================================================================== */ .sdb-comms-search { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 10px; background: var(--sdb-color-surface, #fff); border: 1px solid var(--sdb-color-border, #e5e8ee); border-radius: var(--sdb-radius-md, 12px); } .sdb-comms-search__icon { flex: none; color: var(--sdb-color-text-muted, #6b7280); } .sdb-comms-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 6px 2px; font: inherit; color: inherit; } .sdb-comms-search__input:focus { outline: none; } .sdb-comms-search:focus-within { border-color: var(--sdb-color-primary, #2563eb); box-shadow: 0 0 0 3px var(--sdb-color-primary-soft, rgba(37, 99, 235, .15)); } .sdb-comms-search__go { flex: none; } .sdb-comms-search__clear { flex: none; white-space: nowrap; } /* Ações em massa (seleção de linhas + barra) */ .sdb-comms-col-check { width: 34px; text-align: center; padding-right: 0; } .sdb-comms-bulkbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding: 10px 12px; background: var(--sdb-color-surface-raised, #f7f8fb); border: 1px solid var(--sdb-color-border, #e5e8ee); border-radius: var(--sdb-radius-md, 12px); } .sdb-comms-bulkbar__count { font-size: .9em; color: var(--sdb-color-text-muted, #6b7280); } .sdb-comms-bulkbar__spacer { flex: 1 1 auto; } .sdb-comms-bulkbar__group { display: inline-flex; align-items: center; gap: 6px; } .sdb-comms-bulkbar__lbl { font-size: .85em; color: var(--sdb-color-text-muted, #6b7280); } .sdb-comms-filters { margin: 0 0 16px; background: var(--sdb-color-surface, #fff); border: 1px solid var(--sdb-color-border, #e5e8ee); border-radius: var(--sdb-radius-md, 12px); } .sdb-comms-filters__summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; font-size: 0.85rem; font-weight: var(--sdb-font-weight-semibold, 600); color: var(--sdb-color-text, #1c2430); user-select: none; width: 100%; } .sdb-comms-filters__summary::-webkit-details-marker { display: none; } .sdb-comms-filters__summary svg { color: var(--sdb-color-muted, #647080); } .sdb-comms-filters__count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--sdb-color-primary, #0b57a4); color: var(--sdb-color-on-primary, #fff); font-size: 0.7rem; line-height: 1.6; text-align: center; } .sdb-comms-filters__body { padding: 4px 16px 14px; border-top: 1px solid var(--sdb-color-border-soft, #eef1f5); } .sdb-comms-filters__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; padding-top: 12px; } .sdb-comms-filter-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sdb-comms-filter-field > span { font-size: 0.7rem; font-weight: var(--sdb-font-weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.04em; color: var(--sdb-color-muted, #647080); } .sdb-comms-filters__footer { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .sdb-comms-filters__spacer { flex: 1; } .sdb-comms-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--sdb-color-border-soft, #eef1f5); font-size: 0.82rem; } .sdb-comms-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: var(--sdb-color-background, #f4f6f9); border: 1px solid var(--sdb-color-border, #e5e8ee); border-radius: 999px; font-size: 0.8rem; } .sdb-comms-chip a { text-decoration: none; color: var(--sdb-color-primary, #0b57a4); font-weight: var(--sdb-font-weight-semibold, 600); } .sdb-comms-chip__del { display: inline; } .sdb-comms-save-filter { display: flex; align-items: center; gap: 6px; margin-left: auto; } .sdb-comms-save-filter input[type="text"] { max-width: 180px; } /* ========================================================================= * 8. Formulários — controlos uniformes (alturas iguais em toda a app) * ====================================================================== */ .sdb-comms input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]), .sdb-comms select { min-height: 36px; padding: 6px 10px; border: 1px solid var(--sdb-color-border, #d6dbe3); border-radius: var(--sdb-radius-sm, 8px); background: var(--sdb-color-surface, #fff); font: inherit; font-size: 0.875rem; color: inherit; } .sdb-comms textarea { padding: 8px 10px; border: 1px solid var(--sdb-color-border, #d6dbe3); border-radius: var(--sdb-radius-sm, 8px); background: var(--sdb-color-surface, #fff); font: inherit; font-size: 0.875rem; color: inherit; } .sdb-comms input:focus, .sdb-comms select:focus, .sdb-comms textarea:focus { outline: 2px solid var(--sdb-color-primary-soft, #9ec3e6); outline-offset: 0; border-color: var(--sdb-color-primary, #0b57a4); } .sdb-comms .sdb-form-field { margin-bottom: 12px; } .sdb-comms .sdb-form-field label { display: block; margin-bottom: 4px; font-size: 0.8rem; font-weight: var(--sdb-font-weight-semibold, 600); } .sdb-comms .sdb-form-field input:not([type="checkbox"]):not([type="radio"]), .sdb-comms .sdb-form-field select, .sdb-comms .sdb-form-field textarea { width: 100%; max-width: 100%; } .sdb-comms .sdb-form-field__required { color: var(--sdb-color-danger, #b3261e); } .sdb-comms .sdb-form-field__error { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--sdb-color-danger, #b3261e); } .sdb-comms .sdb-form-field__hint { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--sdb-color-muted, #647080); } .sdb-comms-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; } .sdb-comms-checkbox { display: inline-flex; align-items: center; gap: 6px; font-weight: 400 !important; font-size: 0.875rem; } /* ========================================================================= * 9. Detalhe do pedido * ====================================================================== */ .sdb-comms-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; align-items: start; } @media (max-width: 960px) { .sdb-comms-detail { grid-template-columns: 1fr; } } .sdb-comms-description { font-size: 0.9rem; line-height: 1.6; } .sdb-comms-description p { margin: 0 0 10px; } /* Tarefas */ .sdb-comms-tasks { list-style: none; margin: 0; padding: 0; } .sdb-comms-task { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--sdb-color-border-soft, #eef1f5); font-size: 0.9rem; } .sdb-comms-task__title.is-done { text-decoration: line-through; color: var(--sdb-color-muted, #647080); } .sdb-comms-task__meta { display: block; font-size: 0.76rem; color: var(--sdb-color-muted, #647080); } .sdb-comms-task-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; } .sdb-comms-task-add input[type="text"] { flex: 1 1 200px; } .sdb-comms-task-add select { flex: 0 1 170px; } .sdb-comms-task-add input[type="date"] { flex: 0 0 150px; } /* Timeline */ .sdb-comms-timeline { list-style: none; margin: 0; padding: 0; } .sdb-comms-timeline .sdb-timeline__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--sdb-color-border-soft, #eef1f5); font-size: 0.84rem; } .sdb-comms-timeline .sdb-timeline__item:last-child { border-bottom: 0; } .sdb-comms-timeline__reason { flex-basis: 100%; font-size: 0.82rem; color: var(--sdb-color-muted, #647080); } /* Resumo (dl) */ .sdb-comms-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.875rem; } .sdb-comms-meta dt { color: var(--sdb-color-muted, #647080); white-space: nowrap; align-self: center; } .sdb-comms-meta dd { margin: 0; min-width: 0; font-weight: var(--sdb-font-weight-semibold, 600); text-align: right; } .sdb-comms-meta dd .sdb-comms-owner { justify-content: flex-end; } /* Aprovações e comentários */ .sdb-comms-approval-actions, .sdb-comms-approval-requests { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 8px 0 14px; } .sdb-comms-approval-ext { display: flex; flex-direction: column; gap: 4px; } .sdb-comms-approve-form { margin-bottom: 14px; } .sdb-comms-comments { list-style: none; margin: 0 0 14px; padding: 0; } .sdb-comms-comment { padding: 8px 12px; margin-bottom: 8px; border-left: 3px solid var(--sdb-color-border, #e5e8ee); background: var(--sdb-color-background, #f7f9fc); border-radius: 0 var(--sdb-radius-sm, 8px) var(--sdb-radius-sm, 8px) 0; font-size: 0.875rem; } .sdb-comms-comment--external { border-left-color: var(--sdb-color-primary, #0b57a4); } .sdb-comms-comment__meta { font-size: 0.76rem; color: var(--sdb-color-muted, #647080); margin-bottom: 2px; } .sdb-comms-comment__body { white-space: pre-wrap; } .sdb-comms-comment-add__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; } .sdb-comms-eval-feedback { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sdb-color-border-soft, #eef1f5); font-size: 0.86rem; } .sdb-comms-eval-feedback p { margin: 0 0 6px; } /* Breakdowns (painel) */ .sdb-comms-breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 16px; } .sdb-comms-breakdowns .sdb-admin-card { margin: 0; } .sdb-comms-breakdown { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; } .sdb-comms-breakdown li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--sdb-color-border-soft, #eef1f5); } .sdb-comms-breakdown li:last-child { border-bottom: 0; } .sdb-comms-breakdown__count { font-weight: var(--sdb-font-weight-bold, 700); font-variant-numeric: tabular-nums; } /* ========================================================================= * 10. Páginas públicas (intake, portal) — layout de coluna simples * ====================================================================== */ .sdb-comms.sdb-admin-page { max-width: 1200px; margin: 0 auto; padding: var(--sdb-space-lg, 24px); } .sdb-comms-app.sdb-comms { max-width: none; margin: 0; padding: 0; } .sdb-comms-intake .sdb-admin-content { max-width: 720px; } .sdb-comms-portal .sdb-admin-content { max-width: 640px; } :where(.sdb-comms .sdb-admin-header__title) { font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-size: 1.4rem; margin: 0 0 4px; } .sdb-comms-intake__fields .sdb-form-field { margin-bottom: 0; /* espaçamento gerido pelo gap do container */ } .sdb-comms-intake__consent label { display: inline; font-weight: 400; } .sdb-comms-intake__intro { max-width: 720px; margin: 0 auto 20px; color: var(--sdb-color-muted, #647080); } /* ========================================================================= * Intake repartido: cabeçalho com marca + rail de tipos + painel (v1.37.0) * ====================================================================== */ .sdb-comms-intake__top { text-align: center; margin-bottom: 30px; } .sdb-comms-intake__brand { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 18px; text-decoration: none; } .sdb-comms-brand-link { display: inline-block; line-height: 0; text-decoration: none; } .sdb-comms-intake__brand .sdb-comms-brand-logo { max-height: 54px; } .sdb-comms-intake__wordmark { font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-size: 1.3rem; font-weight: var(--sdb-font-weight-bold, 700); color: var(--sdb-color-primary, #0b57a4); letter-spacing: -0.01em; } .sdb-comms-intake__eyebrow { font-size: 0.7rem; font-weight: var(--sdb-font-weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.14em; color: var(--sdb-color-muted, #647080); } .sdb-comms-intake__title { font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: var(--sdb-font-weight-bold, 700); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 6px; color: var(--sdb-color-title, #13202e); } .sdb-comms-intake__subtitle { margin: 0; color: var(--sdb-color-muted, #647080); font-size: 1.02rem; } /* Cartão que envolve o repartido: uma superfície editorial, duas colunas * (rail com tom suave + painel branco) dentro de uma moldura arredondada. */ .sdb-comms-intake__card { max-width: 1000px; margin: 0 auto; background: var(--sdb-color-surface, #fff); border: 1px solid var(--sdb-color-border, #e5e8ee); border-radius: var(--sdb-radius-lg, 18px); box-shadow: 0 24px 60px -28px rgba(16, 24, 40, 0.28), 0 2px 6px rgba(16, 24, 40, 0.04); overflow: hidden; } .sdb-comms-intake:not(.sdb-comms-intake--split) .sdb-comms-intake__card { max-width: 680px; } .sdb-comms-intake__layout { display: block; } .sdb-comms-intake--split .sdb-comms-intake__layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: stretch; } /* Rail de tipos de projeto (coluna com tom suave). */ .sdb-comms-intake__rail { display: flex; flex-direction: column; padding: 26px 20px; background: linear-gradient(180deg, var(--sdb-color-primary-soft, #eef4fb) 0%, rgba(255, 255, 255, 0) 42%), var(--sdb-color-background, #f7f9fc); border-right: 1px solid var(--sdb-color-border, #e5e8ee); } .sdb-comms-intake__rail-title { margin: 0 0 12px; font-size: 0.72rem; font-weight: var(--sdb-font-weight-bold, 700); text-transform: uppercase; letter-spacing: 0.12em; color: var(--sdb-color-muted, #647080); } .sdb-comms-typelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .sdb-comms-typeitem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 11px 12px; border-radius: var(--sdb-radius-md, 12px); /* Estado de repouso visível: um cartão branco sobre o rail suave. */ background: var(--sdb-color-surface, #fff); border: 1px solid var(--sdb-color-border, #e5e8ee); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); text-decoration: none; color: var(--sdb-color-text, #1c2430); transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease; } .sdb-comms-typeitem:hover { border-color: var(--sdb-color-primary, #0b57a4); box-shadow: 0 10px 22px -14px rgba(11, 87, 164, 0.4); transform: translateY(-1px); } .sdb-comms-typeitem.is-active { border-color: var(--sdb-color-primary, #0b57a4); box-shadow: 0 0 0 1px var(--sdb-color-primary, #0b57a4), 0 12px 26px -12px rgba(11, 87, 164, 0.45); } .sdb-comms-typeitem__mono { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--sdb-color-primary-soft, #e8f0f9); color: var(--sdb-color-primary, #0b57a4); font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-weight: var(--sdb-font-weight-bold, 700); font-size: 0.95rem; line-height: 1; } .sdb-comms-typeitem.is-active .sdb-comms-typeitem__mono { background: var(--sdb-color-primary, #0b57a4); color: var(--sdb-color-on-primary, #fff); } .sdb-comms-typeitem__text { min-width: 0; display: flex; flex-direction: column; } .sdb-comms-typeitem__name { font-weight: var(--sdb-font-weight-semibold, 600); font-size: 0.94rem; color: var(--sdb-color-title, #13202e); } .sdb-comms-typeitem.is-active .sdb-comms-typeitem__name { color: var(--sdb-color-primary, #0b57a4); } .sdb-comms-typeitem__desc { margin-top: 1px; font-size: 0.79rem; line-height: 1.35; color: var(--sdb-color-muted, #647080); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sdb-comms-typeitem__arrow { color: var(--sdb-color-primary, #0b57a4); opacity: 0; transform: translateX(-4px); transition: opacity 0.14s ease, transform 0.14s ease; } .sdb-comms-typeitem:hover .sdb-comms-typeitem__arrow, .sdb-comms-typeitem.is-active .sdb-comms-typeitem__arrow { opacity: 1; transform: translateX(0); } .sdb-comms-intake__rail-foot { display: flex; align-items: flex-start; gap: 8px; margin: 18px 4px 0; padding-top: 16px; border-top: 1px solid var(--sdb-color-border, #e5e8ee); font-size: 0.8rem; line-height: 1.4; color: var(--sdb-color-muted, #647080); } .sdb-comms-intake__rail-foot-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--sdb-hue-green-fg, #1f9d55); } /* Painel do formulário / estado vazio (coluna branca). */ .sdb-comms-intake__panel { background: var(--sdb-color-surface, #fff); padding: 34px 36px; } .sdb-comms-intake__panel-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--sdb-color-border, #e5e8ee); } .sdb-comms-intake__panel-title { font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-size: 1.4rem; font-weight: var(--sdb-font-weight-bold, 700); letter-spacing: -0.01em; margin: 0; color: var(--sdb-color-title, #13202e); } .sdb-comms-intake__panel-desc { margin: 5px 0 0; color: var(--sdb-color-muted, #647080); font-size: 0.92rem; } .sdb-comms-intake__fields { display: flex; flex-direction: column; gap: 18px; } .sdb-comms-intake__actions { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--sdb-color-border, #e5e8ee); flex-wrap: wrap; } .sdb-comms-intake__reassure { font-size: 0.85rem; color: var(--sdb-color-muted, #647080); } /* Anexos: botão "anexar" + lista de ficheiros escolhidos (antes de submeter). */ .sdb-comms-uploader__input { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sdb-comms-uploader__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px dashed var(--sdb-color-border, #cfd6e0); border-radius: var(--sdb-radius-md, 12px); background: var(--sdb-color-background, #f4f6f9); color: var(--sdb-color-primary, #0b57a4); font-family: inherit; font-weight: var(--sdb-font-weight-semibold, 600); font-size: 0.9rem; cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease; } .sdb-comms-uploader__btn:hover { border-color: var(--sdb-color-primary, #0b57a4); background: var(--sdb-color-primary-soft, #e8f0f9); } .sdb-comms-uploader__input:focus-visible + .sdb-comms-uploader__btn { outline: 2px solid var(--sdb-color-primary, #0b57a4); outline-offset: 2px; } .sdb-comms-uploader__btn-icon { font-size: 1.1rem; line-height: 1; } .sdb-comms-uploader .sdb-form-field__hint { display: block; margin-top: 6px; } .sdb-comms-uploader__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .sdb-comms-uploader__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--sdb-color-surface, #fff); border: 1px solid var(--sdb-color-border, #e5e8ee); border-radius: var(--sdb-radius-md, 10px); font-size: 0.88rem; } .sdb-comms-uploader__item-icon { flex: 0 0 auto; color: var(--sdb-color-primary, #0b57a4); } .sdb-comms-uploader__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sdb-color-text, #1c2430); } .sdb-comms-uploader__size { flex: 0 0 auto; font-size: 0.78rem; color: var(--sdb-color-muted, #647080); white-space: nowrap; } .sdb-comms-uploader__remove { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--sdb-color-muted, #647080); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: background 0.14s ease, color 0.14s ease; } .sdb-comms-uploader__remove:hover { background: var(--sdb-hue-red-bg, #fdecec); color: var(--sdb-color-danger, #b3261e); } .sdb-comms-uploader__item.is-toobig { border-color: var(--sdb-color-danger, #b3261e); background: var(--sdb-hue-red-bg, #fdecec); } .sdb-comms-uploader__item.is-toobig .sdb-comms-uploader__size { color: var(--sdb-color-danger, #b3261e); font-weight: var(--sdb-font-weight-semibold, 600); } /* Estado vazio (há tipos, nenhum escolhido). */ .sdb-comms-intake__empty { text-align: center; padding: 64px 24px; color: var(--sdb-color-muted, #647080); } .sdb-comms-intake__empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--sdb-color-primary-soft, #e8f0f9); color: var(--sdb-color-primary, #0b57a4); font-size: 1.4rem; margin-bottom: 16px; } .sdb-comms-intake__empty h2 { font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-size: 1.2rem; margin: 0 0 6px; color: var(--sdb-color-title, #13202e); } .sdb-comms-intake__empty p { margin: 0 auto; max-width: 30rem; font-size: 0.95rem; } .sdb-comms-intake__done { text-align: center; } /* Responsivo: empilha; o rail vira uma tira horizontal rolável no topo. */ @media (max-width: 860px) { .sdb-comms-intake--split .sdb-comms-intake__layout { grid-template-columns: 1fr; } .sdb-comms-intake__rail { border-right: 0; border-bottom: 1px solid var(--sdb-color-border, #e5e8ee); padding: 20px; } .sdb-comms-typelist { flex-direction: row; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; } .sdb-comms-typeitem { flex: 0 0 auto; min-width: 210px; scroll-snap-align: start; } .sdb-comms-typeitem__arrow, .sdb-comms-intake__rail-foot { display: none; } } @media (max-width: 560px) { .sdb-comms-intake__panel { padding: 22px 20px; } } .sdb-comms .sdb-form-field input[type="checkbox"], .sdb-comms .sdb-form-field input[type="radio"] { width: auto; max-width: none; min-height: 0; } /* Honeypot: fora do ecrã (não display:none — alguns bots detetam-no). */ .sdb-comms-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Anexos (detalhe). */ .sdb-comms-attachment { display: inline-block; margin: 0 8px 2px 0; white-space: nowrap; text-decoration: none; color: var(--sdb-color-primary, #0b57a4); } .sdb-comms-attachment:hover { text-decoration: underline; } /* Página de definições (wp-admin): espaçamento entre badges. */ .sdb-comms .sdb-status-badge + .sdb-status-badge, .sdb-comms .sdb-priority + .sdb-priority { margin-left: 4px; } /* ========================================================================= * 11. Impressão (Relatórios → PDF) * ====================================================================== */ @media print { .sdb-comms-sidebar, .sdb-comms-topbar__actions, .sdb-comms-filters, #wpadminbar { display: none !important; } .sdb-comms-app { grid-template-columns: 1fr; } .sdb-comms-topbar { position: static; border-bottom: 0; padding: 0 0 8px; } .sdb-comms-content { padding: 0; max-width: none; } .sdb-comms .sdb-admin-card { box-shadow: none; break-inside: avoid; page-break-inside: avoid; } body.sdb-comms-workspace { background: #fff; } @page { size: A4; margin: 14mm; } } /* ========================================================================= * 12. Responsivo * ====================================================================== */ @media (max-width: 1024px) { .sdb-comms-app { grid-template-columns: 1fr; } .sdb-comms-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--sdb-color-border, #e5e8ee); } .sdb-comms-sidebar__brand { padding: 0; } .sdb-comms-sidebar__brand-sub { display: none; } .sdb-comms-sidebar__nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; flex: 1 1 100%; order: 3; } .sdb-comms-sidebar__link { white-space: nowrap; padding: 7px 10px; } .sdb-comms-sidebar__cta { margin-left: auto; } .sdb-comms-sidebar__foot { display: none; } .sdb-comms-topbar, .sdb-comms-content { padding-left: 16px; padding-right: 16px; } } /* ========================================================================= * 13. Formulários por tipo de projeto (v1.2) * ====================================================================== */ /* Seletor público de tipo de projeto. */ .sdb-comms-typepicker__title { font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-size: 1.1rem; margin: 0 0 14px; } .sdb-comms-typepicker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .sdb-comms-typecard { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--sdb-color-surface, #fff); border: 1px solid var(--sdb-color-border, #e5e8ee); border-radius: var(--sdb-radius-md, 12px); box-shadow: var(--sdb-shadow-card, 0 1px 2px rgba(16, 24, 40, 0.04)); text-decoration: none; color: var(--sdb-color-text, #1c2430); transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; } .sdb-comms-typecard:hover { border-color: var(--sdb-color-primary, #0b57a4); box-shadow: 0 4px 12px rgba(11, 87, 164, 0.12); transform: translateY(-1px); } .sdb-comms-typecard strong { font-size: 0.95rem; color: var(--sdb-color-primary, #0b57a4); } .sdb-comms-typecard span { font-size: 0.82rem; color: var(--sdb-color-muted, #647080); } /* Banner "tipo escolhido" no formulário. */ .sdb-comms-typebanner { margin: 0 0 16px; padding: 8px 12px; background: var(--sdb-color-primary-soft, #e8f0f9); border-radius: var(--sdb-radius-sm, 8px); font-size: 0.85rem; } /* Etiqueta de grupo (radio). */ .sdb-comms-fieldset-label { display: block; margin-bottom: 6px; font-size: 0.8rem; font-weight: var(--sdb-font-weight-semibold, 600); } .sdb-comms-intake .sdb-comms-checkbox { display: flex; margin-bottom: 4px; } /* Respostas do formulário no detalhe. */ .sdb-comms-meta--form { grid-template-columns: minmax(140px, auto) 1fr; } .sdb-comms-meta--form dd { text-align: left; font-weight: 400; white-space: pre-wrap; } /* Builder (wp-admin): linhas de campo. */ .sdbcw-frow { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin-bottom: 10px; background: var(--sdb-color-surface, #fff); border: 1px solid var(--sdb-color-border, #dfe4ea); border-radius: 10px; } .sdbcw-frow__grip { color: var(--sdb-color-muted, #98a2b3); line-height: 1; padding-top: 24px; letter-spacing: -2px; user-select: none; } .sdbcw-frow__main { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .sdbcw-frow__cols { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(170px, 1fr) auto; gap: 10px 14px; align-items: end; } .sdbcw-frow label > span { display: block; margin-bottom: 3px; font-size: 0.75rem; font-weight: 600; color: var(--sdb-color-muted, #647080); } .sdbcw-frow input[type="text"], .sdbcw-frow select, .sdbcw-frow textarea { width: 100%; } .sdbcw-frow__req { display: inline-flex !important; align-items: center; gap: 6px; padding-bottom: 6px; white-space: nowrap; } .sdbcw-frow__req span { margin: 0 !important; font-size: 0.85rem !important; color: inherit !important; font-weight: 400 !important; } .sdbcw-frow__actions { display: flex; flex-direction: column; gap: 4px; } .sdbcw-frow-empty { color: var(--sdb-color-muted, #647080); } @media (max-width: 782px) { .sdbcw-frow__cols { grid-template-columns: 1fr; } } /* ========================================================================= * 14. Aprovações editoriais (composer + fio de rondas) e ficheiros * ====================================================================== */ /* Juntar ficheiro interno (os ficheiros em si usam sdb-filechip do DS). */ .sdbcw-fileadd { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; padding-top: 10px; border-top: 1px dashed var(--sdb-color-border, #dfe4ea); } .sdbcw-fileadd .sdbcw-composer__attach { flex: 1 1 220px; } .sdbcw-fileadd input[type="file"] { flex: 1 1 220px; border: 0; min-height: 0; padding: 0; background: transparent; } /* Extras do composer de aprovações (o contentor é o sdb-composer do DS). */ .sdb-comms-approvals .sdb-composer.sdbcw-composer { margin-bottom: 18px; } .sdbcw-composer__label { font-size: 0.78rem; font-weight: var(--sdb-font-weight-semibold, 600); color: var(--sdb-color-muted, #647080); margin-right: 4px; } .sdbcw-composer__to { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sdbcw-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--sdb-color-border, #d6dbe3); border-radius: 999px; background: var(--sdb-color-surface, #fff); font-size: 0.84rem; font-weight: var(--sdb-font-weight-semibold, 600); cursor: pointer; } .sdbcw-pill:has(input:checked) { border-color: var(--sdb-color-primary, #0b57a4); background: var(--sdb-color-primary-soft, #e8f0f9); color: var(--sdb-color-primary, #0b57a4); } .sdbcw-pill input { accent-color: var(--sdb-color-primary, #0b57a4); margin: 0; } .sdbcw-composer__recipients[hidden] { display: none; } .sdbcw-composer__recipients { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 8px 10px; background: var(--sdb-color-surface, #fff); border: 1px solid var(--sdb-color-border-soft, #e5e8ee); border-radius: var(--sdb-radius-sm, 8px); } .sdbcw-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; cursor: pointer; } .sdbcw-composer__attach { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px dashed var(--sdb-color-border, #c9d0da); border-radius: var(--sdb-radius-sm, 8px); background: var(--sdb-color-surface, #fff); font-size: 0.82rem; font-weight: var(--sdb-font-weight-semibold, 600); color: var(--sdb-color-muted, #4a5568); cursor: pointer; overflow: hidden; } .sdbcw-composer__attach:hover { border-color: var(--sdb-color-primary, #0b57a4); color: var(--sdb-color-primary, #0b57a4); } .sdbcw-composer__attach input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; } .sdbcw-composer__hint { font-size: 0.75rem; color: var(--sdb-color-muted, #647080); flex: 1; } /* Fio de rondas: cada ronda é um sdb-comment do DS; aqui só os extras. */ .sdbcw-round { padding: 12px 14px; border: 1px solid var(--sdb-color-border, #e5e8ee); border-radius: var(--sdb-radius-md, 10px); background: var(--sdb-app-surface, var(--sdb-color-surface, #fff)); } .sdbcw-round.is-pending { border-color: var(--sdb-hue-amber-border, #f4d48a); background: var(--sdb-hue-amber-bg, #fff3d6); background: color-mix(in srgb, var(--sdb-hue-amber-bg, #fff3d6) 35%, var(--sdb-app-surface, #fff)); } .sdbcw-round__title { font-size: 0.88rem; } .sdbcw-round__msg { margin: 10px 0 0; padding: 8px 12px; background: var(--sdb-color-background, #f7f9fc); border-left: 3px solid var(--sdb-color-primary, #0b57a4); border-radius: 0 var(--sdb-radius-sm, 8px) var(--sdb-radius-sm, 8px) 0; font-size: 0.875rem; white-space: pre-wrap; } .sdbcw-round__files { margin-top: 2px; } .sdbcw-round__replies { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--sdb-color-border-soft, #e5e8ee); } .sdbcw-reply.is-pending { opacity: 0.72; } .sdbcw-round__decide { margin-top: 10px; } .sdbcw-round__decide-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ========================================================================= * 15. App Surface (DS ≥ 5.4.0) — fallbacks de baixa prioridade * * O markup segue os contratos oficiais (sdb-status-pill, sdb-avatar, * sdb-thread/sdb-comment, sdb-composer, sdb-filechip, sdb-board, * sdb-view-switcher, sdb-chart). Estes fallbacks usam :where() (especificidade * zero): quando o domínio `app` do DS carrega, o CSS oficial ganha SEMPRE; * sem DS 5.4.0, isto garante o mesmo aspeto. Os hex das matizes replicam a * paleta validada (AA) do registry 5.4.0. * ====================================================================== */ /* --- Status pill ------------------------------------------------------- */ :where(.sdb-status-pill) { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid transparent; border-radius: 999px; font-size: 0.78rem; font-weight: 600; line-height: 1.4; white-space: nowrap; } :where(.sdb-status-pill--blue) { background: var(--sdb-hue-blue-bg, #e4f1ff); color: var(--sdb-hue-blue-fg, #0b4a8f); border-color: var(--sdb-hue-blue-border, #a9cdf5); } :where(.sdb-status-pill--teal) { background: var(--sdb-hue-teal-bg, #ddf3f1); color: var(--sdb-hue-teal-fg, #0c5a55); border-color: var(--sdb-hue-teal-border, #9fd7d2); } :where(.sdb-status-pill--green) { background: var(--sdb-hue-green-bg, #e4f5ea); color: var(--sdb-hue-green-fg, #1e5f34); border-color: var(--sdb-hue-green-border, #a9d8b8); } :where(.sdb-status-pill--lime) { background: var(--sdb-hue-lime-bg, #eef6dc); color: var(--sdb-hue-lime-fg, #425a0b); border-color: var(--sdb-hue-lime-border, #cbe08d); } :where(.sdb-status-pill--amber) { background: var(--sdb-hue-amber-bg, #fff3d6); color: var(--sdb-hue-amber-fg, #8a5200); border-color: var(--sdb-hue-amber-border, #f4d48a); } :where(.sdb-status-pill--orange) { background: var(--sdb-hue-orange-bg, #ffebdd); color: var(--sdb-hue-orange-fg, #9a3c0a); border-color: var(--sdb-hue-orange-border, #f6c3a0); } :where(.sdb-status-pill--red) { background: var(--sdb-hue-red-bg, #fdecec); color: var(--sdb-hue-red-fg, #a11b1b); border-color: var(--sdb-hue-red-border, #f3b4b4); } :where(.sdb-status-pill--pink) { background: var(--sdb-hue-pink-bg, #fce7f0); color: var(--sdb-hue-pink-fg, #9c1458); border-color: var(--sdb-hue-pink-border, #f2b6d0); } :where(.sdb-status-pill--purple) { background: var(--sdb-hue-purple-bg, #f0ecfb); color: var(--sdb-hue-purple-fg, #4b32a8); border-color: var(--sdb-hue-purple-border, #cfc2f0); } :where(.sdb-status-pill--grey) { background: var(--sdb-hue-grey-bg, #eef2f6); color: var(--sdb-hue-grey-fg, #41505e); border-color: var(--sdb-hue-grey-border, #cbd5df); } /* --- Avatar (iniciais) -------------------------------------------------- */ :where(.sdb-avatar) { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--sdb-avatar-size, 28px); height: var(--sdb-avatar-size, 28px); border-radius: 50%; background: var(--sdb-hue-blue-bg, #e4f1ff); color: var(--sdb-hue-blue-fg, #0b4a8f); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; overflow: hidden; } :where(.sdb-avatar--sm) { width: 24px; height: 24px; font-size: 0.6rem; } :where(.sdb-avatar img) { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Avatar + nome (padrão próprio para células e resumos). */ .sdb-comms-owner { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; } /* --- Filechip ------------------------------------------------------------ */ .sdb-comms-filechips { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; } /* Na secção Ficheiros, cada anexo ocupa a largura toda (nome à esquerda, * tamanho/origem/eliminar à direita). Não afeta os chips das rondas. */ .sdb-comms-filechips .sdb-filechip { display: flex; width: 100%; } .sdb-comms-filechips .sdb-filechip__name { flex: 1 1 auto; max-width: none; } .sdb-comms-filechips .sdb-filechip__del { flex: none; margin-left: auto; display: inline-flex; } .sdb-filechip__del button { line-height: 1; font-size: 1rem; padding: 0 2px; } :where(.sdb-filechip) { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 10px; border: 1px solid var(--sdb-color-border, #dfe4ea); border-radius: var(--sdb-radius-md, 10px); background: var(--sdb-app-surface, #fff); font-size: 0.8rem; } :where(.sdb-filechip__icon) { flex: none; padding: 2px 5px; border-radius: 4px; background: var(--sdb-hue-blue-bg, #e4f1ff); color: var(--sdb-hue-blue-fg, #0b4a8f); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em; } :where(.sdb-filechip__name) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; color: var(--sdb-color-primary, #0b57a4); font-weight: var(--sdb-font-weight-semibold, 600); text-decoration: none; } :where(a.sdb-filechip__name:hover) { text-decoration: underline; } :where(.sdb-filechip__size), :where(.sdb-filechip__origin) { flex: none; font-size: 0.72rem; color: var(--sdb-color-muted, #647080); white-space: nowrap; } /* --- Composer ------------------------------------------------------------ */ :where(.sdb-composer) { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--sdb-color-border, #dfe4ea); border-radius: var(--sdb-radius-md, 10px); background: var(--sdb-app-surface-muted, #f8fafc); } :where(.sdb-composer__field) { width: 100%; min-height: 68px; padding: 10px 12px; border: 1px solid var(--sdb-color-border, #dfe4ea); border-radius: var(--sdb-radius-sm, 8px); background: var(--sdb-app-surface, #fff); font: inherit; resize: vertical; } :where(.sdb-composer__footer) { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; } :where(.sdb-composer__slot) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } :where(.sdb-composer__slot--primary) { margin-left: auto; } .sdb-comms-visibility { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--sdb-color-muted, #647080); } /* --- Thread / comment ---------------------------------------------------- */ :where(.sdb-thread) { display: flex; flex-direction: column; gap: 14px; } :where(.sdb-comment) { display: flex; align-items: flex-start; gap: 10px; } :where(.sdb-comment__body) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } :where(.sdb-comment__header) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } :where(.sdb-comment__author) { font-weight: var(--sdb-font-weight-semibold, 600); font-size: 0.85rem; color: var(--sdb-color-title, #13202e); } :where(.sdb-comment__meta) { font-size: 0.75rem; color: var(--sdb-color-muted, #647080); } :where(.sdb-comment__content) { font-size: 0.85rem; color: var(--sdb-color-text, #1c2430); white-space: pre-wrap; } :where(.sdb-comment__content p) { margin: 0; } .sdb-comms-comments.sdb-thread { margin: 0 0 14px; } /* --- View switcher (Lista/Quadro) ---------------------------------------- */ :where(.sdb-view-switcher) { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--sdb-color-border, #dfe4ea); border-radius: var(--sdb-radius-md, 10px); background: var(--sdb-app-surface-muted, #eef2f6); } :where(.sdb-view-switcher__option) { display: inline-flex; align-items: center; padding: 5px 14px; border: 0; border-radius: calc(var(--sdb-radius-md, 10px) - 4px); background: transparent; color: var(--sdb-color-muted, #5a6572); font-size: 0.8rem; font-weight: 600; text-decoration: none; cursor: pointer; } :where(.sdb-view-switcher__option[aria-pressed="true"]) { background: var(--sdb-app-surface, #fff); color: var(--sdb-color-primary, #0058b7); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); } /* --- Board (kanban) ------------------------------------------------------- */ /* No quadro, o conteúdo usa a largura toda do ecrã (mais colunas visíveis, * menos scroll horizontal). */ /* Vista de quadro: ocupa a altura toda do ecrã, para o scroll horizontal ficar no FUNDO da página (como no Trello/Monday) e as colunas rolarem por dentro. Escopado com :has() — as outras vistas mantêm o scroll normal da página. */ .sdb-comms-app:has( .sdb-comms-board-scroll ) { height: 100vh; } .sdb-comms-app:has( .sdb-comms-board-scroll ) .sdb-comms-main { height: 100vh; min-height: 0; } .sdb-comms-content:has( .sdb-comms-board-scroll ) { max-width: none; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 12px; } .sdb-comms-board-scroll { flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; } :where(.sdb-board) { display: flex; align-items: stretch; gap: 14px; min-width: min-content; height: 100%; } :where(.sdb-board__column) { /* Colunas crescem para preencher a largura disponível (não ficam presas a * 252px), com um mínimo para não espremerem demasiado em ecrãs estreitos. */ flex: 1 1 252px; min-width: 240px; max-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--sdb-color-border, #e3e8ee); border-radius: var(--sdb-radius-md, 12px); background: var(--sdb-app-surface-muted, #f2f5f8); transition: background 0.12s ease, box-shadow 0.12s ease; } /* Coluna-alvo destacada durante o arrasto (Pointer Events). */ .sdb-board__column.is-drop-ok { background: var(--sdb-hue-blue-bg, #e4f1ff); box-shadow: inset 0 0 0 2px var(--sdb-color-primary, #0b57a4); } .sdb-board__column.is-drop-no { opacity: 0.7; } /* Pega + cartão-fantasma que segue o cursor. */ .sdb-board__card.is-movable { cursor: grab; } body.sdbcw-dragging { cursor: grabbing; user-select: none; } .sdb-board__card.is-dragging-src { opacity: 0.4; } .sdbcw-drag-ghost { position: fixed; z-index: 9999; margin: 0; pointer-events: none; opacity: 0.95; transform: rotate( 1.5deg ); box-shadow: 0 12px 26px rgba( 16, 24, 40, 0.24 ); } :where(.sdb-board__column-header) { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; color: var(--sdb-color-title, #13202e); } :where(.sdb-board__count) { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--sdb-hue-grey-bg, #eef2f6); color: var(--sdb-hue-grey-fg, #41505e); font-size: 0.7rem; font-weight: 700; } :where(.sdb-board__dropzone) { display: flex; flex-direction: column; gap: 8px; min-height: 40px; flex: 1 1 auto; overflow-y: auto; padding-right: 2px; } :where(.sdb-board__card) { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--sdb-color-border, #e3e8ee); border-radius: var(--sdb-radius-sm, 10px); background: var(--sdb-app-surface, #fff); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } :where(.sdb-board__card:focus-visible) { outline: none; box-shadow: var(--sdb-state-focus-ring, 0 0 0 3px rgba(0, 155, 216, 0.22)); } .sdb-board__card-title { font-size: 0.9rem; font-weight: var(--sdb-font-weight-semibold, 600); line-height: 1.32; color: var(--sdb-color-title, #13202e); text-decoration: none; } .sdb-board__card-title:hover { text-decoration: underline; } .sdb-board__card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.72rem; } .sdb-board__card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--sdb-color-border, #eef1f5); } .sdb-board__card-owner { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.75rem; color: var(--sdb-color-muted, #647080); } .sdb-board__card-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sdb-board__card-owner .sdb-avatar { --sdb-avatar-size: 20px; width: 20px; height: 20px; font-size: 0.55rem; flex: none; } .sdb-board__card-ref { font-size: 0.7rem; flex: none; } .sdb-comms-board-empty { margin: 0; padding: 10px; border: 1px dashed var(--sdb-color-border, #d6dbe3); border-radius: var(--sdb-radius-sm, 8px); color: var(--sdb-color-muted, #8a96a3); font-size: 0.76rem; text-align: center; } .sdb-comms-board-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--sdb-hue-grey-fg, #41505e); } .sdb-comms-board-dot--blue { background: var(--sdb-hue-blue-fg, #0b4a8f); } .sdb-comms-board-dot--teal { background: var(--sdb-hue-teal-fg, #0c5a55); } .sdb-comms-board-dot--green { background: var(--sdb-hue-green-fg, #1e5f34); } .sdb-comms-board-dot--lime { background: var(--sdb-hue-lime-fg, #425a0b); } .sdb-comms-board-dot--amber { background: var(--sdb-hue-amber-fg, #8a5200); } .sdb-comms-board-dot--orange { background: var(--sdb-hue-orange-fg, #9a3c0a); } .sdb-comms-board-dot--red { background: var(--sdb-hue-red-fg, #a11b1b); } .sdb-comms-board-dot--pink { background: var(--sdb-hue-pink-fg, #9c1458); } .sdb-comms-board-dot--purple { background: var(--sdb-hue-purple-fg, #4b32a8); } .sdb-comms-board-dot--grey { background: var(--sdb-hue-grey-fg, #41505e); } /* --- Menu de ações (fallback do sdb-action-menu, base
) ---------- */ :where(.sdb-action-menu) { position: relative; } :where(.sdb-action-menu__trigger) { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 2px 8px; border-radius: 6px; color: var(--sdb-color-muted, #647080); font-weight: 700; } :where(.sdb-action-menu__trigger::-webkit-details-marker) { display: none; } :where(.sdb-action-menu__trigger:hover) { background: var(--sdb-state-hover-bg, rgba(0, 88, 183, 0.06)); } :where(.sdb-action-menu__panel) { position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--sdb-z-dropdown, 30); min-width: 185px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--sdb-color-border, #dfe4ea); border-radius: var(--sdb-radius-md, 10px); background: var(--sdb-app-surface, #fff); box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12); } :where(.sdb-action-menu__item) { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--sdb-color-text, #1c2430); font-size: 0.8rem; text-align: left; text-decoration: none; cursor: pointer; } :where(.sdb-action-menu__item:hover) { background: var(--sdb-state-hover-bg, rgba(0, 88, 183, 0.06)); } .sdb-comms-card-menu__label { display: block; padding: 4px 10px 6px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sdb-color-muted, #8a96a3); } .sdb-comms-card-menu form { display: flex; flex-direction: column; } /* --- Datepicker (wrapper transparente até o DS ativar o módulo) ----------- */ :where(.sdb-datepicker) { display: contents; } /* --- Tabela v2: cabeçalho fixo -------------------------------------------- */ :where(.sdb-table--sticky-header) thead th { position: sticky; top: 0; z-index: 2; background: var(--sdb-app-surface, #fff); } /* --- Gráficos (sdb-chart) -------------------------------------------------- */ .sdb-comms-charts { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start; } .sdb-comms-chart { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .sdb-comms-chart figcaption { font-size: 0.8rem; font-weight: var(--sdb-font-weight-semibold, 600); color: var(--sdb-color-muted, #5a6572); } :where(.sdb-chart--bars) { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 8px 2px 0; border-bottom: 1px solid var(--sdb-chart-grid, #e3e8ee); } :where(.sdb-chart__bar) { flex: 1 1 0; min-width: 8px; min-height: 2px; height: var(--sdb-chart-value, 0%); background: var(--sdb-chart-color, var(--sdb-chart-1, #0058b7)); border-radius: 4px 4px 0 0; } .sdb-comms-chart__axis { display: flex; gap: 6px; padding: 0 2px; } .sdb-comms-chart__axis span { flex: 1 1 0; min-width: 8px; text-align: center; font-size: 0.62rem; color: var(--sdb-chart-label, var(--sdb-color-muted, #8a96a3)); } .sdb-comms-chart__donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } :where(.sdb-chart--donut) { position: relative; flex: none; width: 148px; height: 148px; border-radius: 50%; } :where(.sdb-chart__hole) { position: absolute; inset: 24%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sdb-app-surface, #fff); font-weight: 700; font-size: 1.05rem; color: var(--sdb-color-title, #13202e); } :where(.sdb-chart__legend) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; min-width: 0; } :where(.sdb-chart__legend li) { display: flex; align-items: center; gap: 8px; min-width: 0; } :where(.sdb-chart__swatch) { width: 10px; height: 10px; border-radius: 3px; flex: none; } /* --- Ajustes de integração ------------------------------------------------- */ .sdb-comms-topbar__actions { flex-wrap: wrap; } .sdbcw-check .sdb-avatar { margin-right: 2px; } @media (max-width: 900px) { .sdb-comms-charts { grid-template-columns: 1fr; } :where(.sdb-board__column) { flex-basis: 230px; } } @media print { .sdb-comms-board-scroll { overflow: visible; } :where(.sdb-chart--bars), :where(.sdb-chart--donut) { break-inside: avoid; } } /* ========================================================================= * 16. Detalhe como centro de comando (v1.6.0) * ====================================================================== */ /* O workspace é um documento autónomo: esconder tudo o que o tema/plugins * injetam via wp_footer fora da app (menus, logos, widgets de cookies). */ body.sdb-comms-workspace > :not(.sdb-comms):not(script):not(style):not(link) { display: none !important; } /* Avatares com matiz por pessoa (hash do nome → paleta de 10 matizes). */ .sdb-avatar--hue-blue { background: var(--sdb-hue-blue-bg, #e4f1ff); color: var(--sdb-hue-blue-fg, #0b4a8f); } .sdb-avatar--hue-teal { background: var(--sdb-hue-teal-bg, #ddf3f1); color: var(--sdb-hue-teal-fg, #0c5a55); } .sdb-avatar--hue-green { background: var(--sdb-hue-green-bg, #e4f5ea); color: var(--sdb-hue-green-fg, #1e5f34); } .sdb-avatar--hue-lime { background: var(--sdb-hue-lime-bg, #eef6dc); color: var(--sdb-hue-lime-fg, #425a0b); } .sdb-avatar--hue-amber { background: var(--sdb-hue-amber-bg, #fff3d6); color: var(--sdb-hue-amber-fg, #8a5200); } .sdb-avatar--hue-orange { background: var(--sdb-hue-orange-bg, #ffebdd); color: var(--sdb-hue-orange-fg, #9a3c0a); } .sdb-avatar--hue-red { background: var(--sdb-hue-red-bg, #fdecec); color: var(--sdb-hue-red-fg, #a11b1b); } .sdb-avatar--hue-pink { background: var(--sdb-hue-pink-bg, #fce7f0); color: var(--sdb-hue-pink-fg, #9c1458); } .sdb-avatar--hue-purple { background: var(--sdb-hue-purple-bg, #f0ecfb); color: var(--sdb-hue-purple-fg, #4b32a8); } .sdb-avatar--hue-grey { background: var(--sdb-hue-grey-bg, #eef2f6); color: var(--sdb-hue-grey-fg, #41505e); } /* Tamanho médio do avatar (ex.: cabeçalho da área "Equipa"). A foto é um filho que o DS recorta ao círculo (object-fit:cover). */ .sdb-avatar--md { --sdb-avatar-size: 48px; width: 48px; height: 48px; font-size: 1rem; } /* Área "Equipa" (wp-admin): cabeçalho de cada pessoa (avatar + conta). */ .sdb-comms-team-row__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .sdb-comms-team-row__head .sdb-avatar { flex: 0 0 auto; } /* ========================================================================= Fichas de cliente (front-office): lista + ficha. ========================================================================= */ .sdb-comms-pagination { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 16px; } .sdb-comms-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; } .sdb-comms-panel { padding: 16px 18px; background: var(--sdb-color-surface, #fff); border: 1px solid var(--sdb-color-border, #e5e8ee); border-radius: var(--sdb-radius-md, 10px); box-shadow: var(--sdb-shadow-card, 0 1px 2px rgba(16, 24, 40, 0.04)); } .sdb-comms-panel > h2 { margin: 0 0 12px; font-size: 1rem; } .sdb-comms-form { display: flex; flex-direction: column; gap: 12px; } .sdb-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: var(--sdb-font-weight-semibold, 600); color: var(--sdb-color-muted, #647080); } .sdb-field .sdb-input { font-weight: 400; color: var(--sdb-color-text, #1f2733); } .sdb-comms-chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .sdb-comms-chips .sdb-comms-chip form { display: inline-flex; margin: 0; } .sdb-comms-chip__remove { border: 0; background: none; cursor: pointer; color: var(--sdb-color-danger, #b3261e); font-size: 1rem; line-height: 1; padding: 0 2px; } .sdb-comms-chip__tag { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sdb-color-muted, #647080); background: var(--sdb-color-background, #f4f6f9); border-radius: 999px; padding: 1px 6px; } .sdb-comms-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sdb-comms-merge { border-left: 3px solid var(--sdb-color-danger, #b3261e); } /* Espaçamento uniforme entre as secções da ficha de cliente. */ .sdb-comms-content > .sdb-comms-panel { margin: 0 0 16px; } /* Página de mensagem (403/404) — cartão centrado e amigável. */ .sdb-comms-message { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 56px 24px; color: var(--sdb-color-muted, #647080); } .sdb-comms-message h2 { margin: 6px 0 0; color: var(--sdb-color-text, #1f2733); } .sdb-comms-message p { max-width: 460px; margin: 0 0 10px; } /* Menu de estado no cabeçalho (pill interativa → transições permitidas). */ .sdbcw-statemenu > summary.sdb-status-pill { list-style: none; cursor: pointer; user-select: none; } .sdbcw-statemenu > summary.sdb-status-pill::-webkit-details-marker { display: none; } .sdbcw-statemenu > summary .sdbcw-statemenu__caret { font-size: 0.62rem; opacity: 0.75; } .sdbcw-statemenu .sdb-action-menu__panel { left: 0; right: auto; min-width: 230px; } .sdbcw-statemenu__reason { margin-top: 4px; border-top: 1px solid var(--sdb-color-border-soft, #eef1f5); padding-top: 4px; } .sdbcw-statemenu__reason > summary { list-style: none; cursor: pointer; padding: 7px 10px; border-radius: 6px; font-size: 0.8rem; color: var(--sdb-color-muted, #647080); } .sdbcw-statemenu__reason > summary::-webkit-details-marker { display: none; } .sdbcw-statemenu__reason > summary:hover { background: var(--sdb-state-hover-bg, rgba(0, 88, 183, 0.06)); } .sdbcw-statemenu__reason form { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 8px; } .sdbcw-statemenu__reason select, .sdbcw-statemenu__reason input[type="text"] { width: 100%; font-size: 0.8rem; } /* Meta do cabeçalho do detalhe: pills + prazo + responsável numa linha. */ .sdb-comms-detail-meta { flex-wrap: wrap; row-gap: 6px; } .sdb-comms-detail-meta .sdb-comms-owner { font-size: 0.8rem; } .sdb-comms-detail-meta .sdb-comms-cell-date { font-size: 0.8rem; } /* Cartões colapsáveis com contagem na linha do título. */ .sdb-comms-collapse > .sdb-comms-collapse__summary .sdb-comms-count { margin-left: 6px; } .sdb-comms-collapse:not([open]) > .sdb-comms-collapse__summary { margin-bottom: 0; } /* ========================================================================= * 17. Atividade única (fio + filtros + modos) e edição inline (v1.7.0) * ====================================================================== */ /* Seletor de modo do composer (Comentar / Pedir aprovação). */ .sdbcw-modes { display: inline-flex; gap: 2px; margin-bottom: 10px; padding: 3px; border: 1px solid var(--sdb-color-border, #dfe4ea); border-radius: var(--sdb-radius-md, 10px); background: var(--sdb-app-surface-muted, #eef2f6); } .sdbcw-modebtn { padding: 5px 14px; border: 0; border-radius: calc(var(--sdb-radius-md, 10px) - 4px); background: transparent; color: var(--sdb-color-muted, #5a6572); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; } .sdbcw-modebtn.is-active { background: var(--sdb-app-surface, #fff); color: var(--sdb-color-primary, #0058b7); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); } /* Filtros do fio (reutiliza o view-switcher; separado do composer). */ .sdb-comms-activity__filters { margin: 4px 0 14px; } .sdb-comms-activity__feed { margin-top: 4px; } /* Edição inline no Resumo — o editor abre como popover flutuante, por isso * nunca empurra nem parte o grid do resumo (padrão Asana/Monday). */ .sdbcw-inline { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; max-width: 100%; } .sdbcw-inline__display { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 2px 6px; margin: -2px -6px; border: 0; border-radius: 6px; background: none; font: inherit; font-weight: inherit; color: inherit; text-align: right; cursor: pointer; } .sdbcw-inline__display:hover { background: var(--sdb-state-hover-bg, rgba(0, 88, 183, 0.06)); } .sdbcw-inline__pencil { flex: none; font-size: 0.72rem; opacity: 0; color: var(--sdb-color-muted, #647080); transition: opacity 0.12s ease; } .sdbcw-inline__display:hover .sdbcw-inline__pencil, .sdbcw-inline__display:focus-visible .sdbcw-inline__pencil { opacity: 1; } .sdbcw-inline__editor { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--sdb-z-dropdown, 30); display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--sdb-color-border, #dfe4ea); border-radius: var(--sdb-radius-md, 10px); background: var(--sdb-app-surface, #fff); box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14); } .sdbcw-inline__editor select, .sdbcw-inline__editor input[type="date"] { min-height: 34px; min-width: 140px; font-size: 0.82rem; padding: 4px 8px; } .sdbcw-inline__save, .sdbcw-inline__cancel { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--sdb-color-border, #d6dbe3); border-radius: 6px; background: var(--sdb-app-surface, #fff); color: var(--sdb-color-text, #1c2430); font-size: 0.95rem; line-height: 1; cursor: pointer; } .sdbcw-inline__save { border-color: var(--sdb-color-primary, #0058b7); background: var(--sdb-color-primary, #0058b7); color: var(--sdb-color-on-primary, #fff); } /* ========================================================================= * 18. Correções de coerência visual (v1.8.0) * ====================================================================== */ /* CRÍTICO: o atributo `hidden` tem de vencer sempre. Os componentes com * display próprio (:where(.sdb-composer/.sdb-view-switcher/.sdbcw-modes…)) * são estilos de autor e derrotavam o display:none da folha do browser — * era por isso que os modos/filtros "não selecionavam nada". */ .sdb-comms [hidden] { display: none !important; } /* --- Header do detalhe: editorial, título à esquerda, factos à direita --- */ .sdb-comms-topbar--detail { align-items: flex-start; } .sdb-comms-back { display: flex; align-items: baseline; gap: 8px; } .sdb-comms-back__id { font-size: 0.75rem; font-variant-numeric: tabular-nums; } .sdb-comms-topbar--detail .sdb-comms-topbar__heading h1 { margin: 2px 0 8px; } .sdb-comms-detail-facts { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; padding-top: 4px; } .sdb-comms-detail-fact { display: flex; flex-direction: column; gap: 4px; } .sdb-comms-detail-fact__label { font-size: 0.66rem; font-weight: var(--sdb-font-weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.05em; color: var(--sdb-color-muted, #8a96a3); } .sdb-comms-detail-fact .sdb-comms-owner { font-size: 0.85rem; font-weight: var(--sdb-font-weight-semibold, 600); } .sdb-comms-detail-fact .sdb-comms-cell-date { font-size: 0.9rem; font-weight: var(--sdb-font-weight-semibold, 600); } /* --- Atividade: ritmo vertical claro entre composer, filtros e fio --- */ .sdb-comms-activity [data-sdbcw-mode-form] { margin: 0 0 6px; } .sdb-comms-activity__filters { margin: 20px 0 16px; } .sdb-comms-activity__feed.sdb-thread { gap: 20px; } /* Comentários simples no fio ganham um separador subtil, para lerem como * itens distintos ao lado das rondas (que já são cartões com contorno). */ .sdb-comms-activity__feed > .sdb-comment:not(.sdbcw-round) { padding-bottom: 20px; border-bottom: 1px solid var(--sdb-color-border-soft, #eef1f5); } .sdb-comms-activity__feed > .sdb-comment:not(.sdbcw-round):last-child { padding-bottom: 0; border-bottom: 0; } /* --- Modos do composer: coerência com o filtro (mesma família visual) --- */ .sdbcw-modes { margin-bottom: 14px; } /* ========================================================================= * 19. Página inicial editorial (site dedicado) — v1.9.0 * ====================================================================== */ body.sdb-comms-landing-page { margin: 0; } .sdb-comms-landing { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 90% at 50% -10%, var(--sdb-color-primary-soft, #e8f0f9) 0%, transparent 60%), var(--sdb-color-background, #f6f8fb); } .sdb-comms-landing__inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; max-width: 680px; margin: 0 auto; padding: 64px 24px; text-align: center; } .sdb-comms-landing__brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 6px; } /* Logótipo do site renderizado pelo plugin (classe própria, tamanho controlado * — independente do markup/CSS de `the_custom_logo()` e do tema). */ .sdb-comms-brand-logo { display: block; width: auto; height: auto; max-width: 260px; max-height: 64px; margin: 0 auto; object-fit: contain; } .sdb-comms-landing__brand .sdb-comms-brand-logo { max-height: 76px; } .sdb-comms-landing__wordmark { font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-size: 1.6rem; font-weight: var(--sdb-font-weight-bold, 700); color: var(--sdb-color-primary, #0b57a4); letter-spacing: -0.01em; } .sdb-comms-landing__eyebrow { font-size: 0.74rem; font-weight: var(--sdb-font-weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.14em; color: var(--sdb-color-muted, #647080); } .sdb-comms-landing__title { margin: 0; font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: var(--sdb-font-weight-bold, 700); line-height: 1.1; letter-spacing: -0.02em; color: var(--sdb-color-title, #13202e); } .sdb-comms-landing__lead { margin: 0; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.6; color: var(--sdb-color-text, #47566a); max-width: 40rem; } .sdb-comms-landing__actions { margin-top: 8px; } .sdb-comms .sdb-btn.sdb-comms-landing__cta { min-height: 52px; padding: 0 34px; font-size: 1.02rem; border-radius: var(--sdb-radius-md, 12px); box-shadow: 0 10px 28px rgba(11, 87, 164, 0.28); } .sdb-comms-landing__team { margin: 6px 0 0; font-size: 0.9rem; color: var(--sdb-color-muted, #647080); } .sdb-comms-landing__foot { padding: 22px 24px; text-align: center; font-size: 0.78rem; color: var(--sdb-color-muted, #8a96a3); } .sdb-comms .sdb-btn.sdb-comms-landing__cta { display: inline-flex; align-items: center; gap: 10px; } .sdb-comms-landing__cta-arrow { transition: transform 0.18s ease; } .sdb-comms .sdb-comms-landing__cta:hover .sdb-comms-landing__cta-arrow { transform: translateX(3px); } /* Pulso da equipa: curiosidade viva (concluídos este mês / total). */ .sdb-comms-pulse { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 9px 18px 9px 14px; background: var(--sdb-color-surface, #fff); border: 1px solid var(--sdb-color-border, #e5e8ee); border-radius: 999px; box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06); font-size: 0.92rem; color: var(--sdb-color-muted, #647080); max-width: 92vw; } .sdb-comms-pulse__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--sdb-hue-green-fg, #1f9d55); box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.45); animation: sdb-comms-pulse-dot 2.4s ease-out infinite; } .sdb-comms-pulse__number { font-family: var(--sdb-font-heading, var(--sdbcw-font)); font-size: 1.15rem; font-weight: var(--sdb-font-weight-bold, 700); color: var(--sdb-color-primary, #0b57a4); line-height: 1; } .sdb-comms-pulse__label { line-height: 1.3; text-align: left; } @keyframes sdb-comms-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(31, 157, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); } } @media (prefers-reduced-motion: reduce) { .sdb-comms-pulse__dot { animation: none; } .sdb-comms-landing__cta-arrow { transition: none; } } @media (max-width: 600px) { .sdb-comms-landing__inner { padding: 44px 20px; gap: 18px; } } /* ========================================================================= * 20. Notificações pessoais + dashboard de aprovações (v1.11.0) * ====================================================================== */ /* Badge de não lidas no item da sidebar. */ .sdb-comms-sidebar__link { position: relative; } .sdb-comms-sidebar__badge { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--sdb-hue-red-fg, #a11b1b); color: #fff; font-size: 0.66rem; font-weight: 700; line-height: 1; } /* Lista de notificações. */ .sdb-comms-notifs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .sdb-comms-notifs { list-style: none; margin: 0; padding: 0; } .sdb-comms-notif { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--sdb-color-border-soft, #eef1f5); } .sdb-comms-notif:last-child { border-bottom: 0; } .sdb-comms-notif.is-unread { background: var(--sdb-hue-blue-bg, #e4f1ff); background: color-mix(in srgb, var(--sdb-hue-blue-bg, #e4f1ff) 45%, var(--sdb-app-surface, #fff)); margin: 0 -12px; padding-left: 16px; padding-right: 16px; border-radius: 8px; } .sdb-comms-notif__icon { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } .sdb-comms-notif__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Formulários/​botões da notificação: sem o aspeto cinzento por omissão do *