/* ═══════════════════════════════════════════════════════════════════════════ Página Formulários. Escopo .fm-*, só tokens. ═══════════════════════════════════════════════════════════════════════════ */ .fm-panel { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); } /* ── Barra de controles ─────────────────────────────────────────────────── */ .fm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } /* .ds-search é primitiva do design system (tokens.css); aqui só a largura. */ .fm-toolbar .ds-search { width: 320px; max-width: 100%; } .fm-controls { display: flex; align-items: center; gap: var(--space-2); } .fm-viewtoggle { display: flex; gap: 2px; padding: 3px; background: var(--surface-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .fm-viewbtn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-tertiary); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); } .fm-viewbtn i, .fm-viewbtn svg { width: 16px; height: 16px; } .fm-viewbtn:hover { color: var(--text-primary); } .fm-viewbtn.is-active { background: var(--accent-muted); color: var(--accent); } /* ── Lista ──────────────────────────────────────────────────────────────── */ .fm-list { display: flex; flex-direction: column; gap: var(--space-2); } .fm-row { display: flex; align-items: center; gap: var(--space-4); min-height: 60px; padding: var(--space-3) var(--space-4); background: var(--surface-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: border-color var(--dur-fast), background-color var(--dur-fast); } .fm-row:hover { border-color: var(--border-strong); background: var(--surface-4); } .fm-row__icon { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--accent-muted); color: var(--accent); } .fm-row__icon i, .fm-row__icon svg { width: 18px; height: 18px; } .fm-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; } .fm-row__title { font-size: var(--text-body); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fm-row__meta { font-size: var(--text-xs); color: var(--text-tertiary); } /* ── Grade ──────────────────────────────────────────────────────────────── */ .fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--bento-gap); } .fm-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-3); min-height: 168px; } .fm-card:hover { border-color: var(--border-strong); } .fm-card__top { display: flex; align-items: flex-start; justify-content: space-between; } .fm-card__main { display: flex; flex-direction: column; gap: var(--space-1); text-decoration: none; } .fm-card__title { font-size: var(--text-body); font-weight: 600; color: var(--text-primary); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fm-card__foot { display: flex; justify-content: flex-end; margin-top: auto; } /* ── Ações da linha ───────────────────────────────────────────────────────── Editar e Respostas viraram botões visíveis; o menu (ancorado no , ver components/menu.js) guarda só o secundário. */ .fm-acoes { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .fm-acao { white-space: nowrap; } .fm-acao[aria-disabled="true"] { opacity: 0.4; pointer-events: none; } .fm-acao i, .fm-acao svg { width: 14px; height: 14px; } .fm-menu__btn { border-color: transparent; flex-shrink: 0; } .fm-menu__btn[aria-expanded="true"] { background: var(--surface-4); color: var(--text-primary); } /* ── Modelos da biblioteca ────────────────────────────────────────────────── Filete de acento na borda esquerda: distingue da lista de trabalho sem precisar de fundo diferente, que competiria com o estado de hover. */ .fm-row--modelo, .fm-card--modelo { border-left: 2px solid var(--accent-border); } .fm-selo { color: var(--accent); border-color: var(--accent-border); background: var(--accent-muted); } .fm-selo i, .fm-selo svg { width: 12px; height: 12px; } @media (max-width: 640px) { .fm-toolbar { flex-direction: column; align-items: stretch; } .fm-toolbar .ds-search { width: 100%; } .fm-controls { justify-content: space-between; } }