"""Admin UI CSS assets for ClientFlow v4.7. CSS was extracted from app.admin_dashboard to keep page routes small and easier to maintain. Public /ui.css remains unchanged. """ from __future__ import annotations ADMIN_UI_CSS = r""" :root { --bg: #f6f7fb; --surface: #ffffff; --surface-soft: #f9fafb; --border: #e5e7eb; --text: #111827; --muted: #6b7280; --muted-2: #9ca3af; --primary: #2563eb; --primary-soft: #dbeafe; --success: #166534; --success-soft: #dcfce7; --warning: #92400e; --warning-soft: #fef3c7; --danger: #991b1b; --danger-soft: #fee2e2; --radius: 16px; --shadow: 0 10px 30px rgba(15, 23, 42, .06); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: radial-gradient(circle at top left, rgba(37, 99, 235, .08), transparent 28rem), var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.45; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } code { background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 8px; padding: 2px 6px; font-size: 12px; } header, .topbar, nav { backdrop-filter: blur(12px); } nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 18px; background: rgba(255,255,255,.82); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } nav a { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border-radius: 999px; color: #374151; font-weight: 600; font-size: 14px; } nav a:hover { background: #f3f4f6; text-decoration: none; } main, .container { width: min(1440px, calc(100% - 28px)); margin: 0 auto; padding: 18px 0 42px; } h1 { font-size: clamp(24px, 3vw, 36px); line-height: 1.1; margin: 12px 0 6px; letter-spacing: -0.035em; } h2 { letter-spacing: -0.02em; } p { color: #374151; } .cards { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 14px; margin: 16px 0; } .card, .panel, .customer-panel, .system-panel, .task-card, article.message-card { background: rgba(255,255,255,.92); border: 1px solid rgba(229,231,235,.95); border-radius: var(--radius); box-shadow: var(--shadow); } .card { padding: 16px; min-height: 112px; } .card span { color: var(--muted); display: block; font-size: 13px; font-weight: 600; } .card strong { display: block; font-size: 30px; line-height: 1; margin: 10px 0; letter-spacing: -0.04em; } .card a { display: inline-flex; margin-top: 4px; font-size: 13px; font-weight: 700; } button, .button, input[type="submit"] { border: 1px solid #bfdbfe; background: var(--primary); color: white; border-radius: 12px; padding: 9px 13px; font-weight: 750; cursor: pointer; min-height: 38px; } button:hover, .button:hover, input[type="submit"]:hover { filter: brightness(.98); } input, select, textarea { font: inherit; } input[type="search"], input[type="text"], select, textarea { max-width: 100%; } table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 14px; } th { text-align: left; color: #4b5563; background: #f9fafb; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } th, td { padding: 10px 12px; border-bottom: 1px solid #eef0f3; vertical-align: top; } tr:last-child td { border-bottom: 0; } .table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); background: white; } .kanban-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; background: rgba(255,255,255,.88); border: 1px solid var(--border); border-radius: 18px; padding: 12px; margin: 16px 0; box-shadow: var(--shadow); } .kanban-toolbar form { flex: 1 1 380px; } .kanban-toolbar input[type="search"] { width: min(460px, 100%); } .kanban-board, .kanban { display: grid; grid-template-columns: repeat(5, minmax(240px, 1fr)); gap: 14px; align-items: start; } .kanban-column { background: rgba(255,255,255,.66); border: 1px solid #e5e7eb; border-radius: 18px; padding: 12px; min-width: 0; } .kanban-column h2, .kanban-column h3 { margin: 0 0 10px; font-size: 15px; color: #111827; display: flex; align-items: center; justify-content: space-between; } .task-card { padding: 13px; margin-bottom: 12px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .task-card:hover { transform: translateY(-1px); border-color: #c7d2fe; box-shadow: 0 14px 36px rgba(15, 23, 42, .10); } .customer-name { font-weight: 800; font-size: 15px; margin-bottom: 4px; } .customer-name a { color: #111827; } .task-card small, .message-meta, .muted { color: var(--muted); } .task-card p { margin: 7px 0; } .task-card .request-text, .request-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: #374151; } .btn-chatwoot, .btn-more, .btn-external-opportunity, .detail-button, .task-card a[class^="btn"] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border-radius: 11px; padding: 7px 10px; border: 1px solid var(--border); background: #f9fafb; color: #374151; font-size: 13px; font-weight: 750; margin: 4px 4px 0 0; } .btn-chatwoot:hover, .btn-more:hover, .btn-external-opportunity:hover, .detail-button:hover, .task-card a[class^="btn"]:hover { text-decoration: none; filter: brightness(.99); } .btn-chatwoot { background: var(--primary-soft) !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; } .btn-more { background: var(--warning-soft) !important; border-color: #fde68a !important; color: var(--warning) !important; } .btn-external-opportunity, .detail-button-external, .detail-button-opportunity { background: var(--success-soft) !important; border-color: #86efac !important; color: var(--success) !important; } .status-badge, .route-badge, .sla-badge, .system-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 8px; font-size: 12px; font-weight: 800; line-height: 1; } .sla-overdue { background: var(--danger-soft); color: var(--danger); border: 1px solid #fecaca; } .sla-ok { background: var(--success-soft); color: var(--success); border: 1px solid #bbf7d0; } .detail-grid, .customer-grid, .admin-grid { gap: 16px; } .customer-panel, .system-panel, .panel { padding: 16px; } .customer-kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; } .customer-kv strong { color: var(--muted); } .message-card { padding: 12px; } .message-body { white-space: pre-wrap; overflow-wrap: anywhere; } pre, .system-pre { max-width: 100%; overflow-x: auto; } .empty-column { color: var(--muted-2); text-align: center; padding: 24px 8px; border: 1px dashed #d1d5db; border-radius: 14px; background: rgba(255,255,255,.58); } hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; } @media (max-width: 1200px) { .cards { grid-template-columns: repeat(2, minmax(170px, 1fr)); } .kanban-board, .kanban { grid-template-columns: repeat(2, minmax(240px, 1fr)); } } @media (max-width: 760px) { body { font-size: 15px; } nav { padding: 10px; gap: 6px; overflow-x: auto; flex-wrap: nowrap; } nav a { white-space: nowrap; } main, .container { width: min(100% - 18px, 100%); padding-top: 10px; } .cards, .system-grid, .customer-grid, .admin-grid, .detail-grid, .kanban-board, .kanban { grid-template-columns: 1fr !important; } .card { min-height: auto; } .kanban-toolbar { align-items: stretch; } .kanban-toolbar form { width: 100%; flex-direction: column; align-items: stretch !important; } .kanban-toolbar input[type="search"], .kanban-toolbar button, .kanban-toolbar a { width: 100%; } .kanban-column { padding: 10px; } .task-card { padding: 14px; } .task-card a[class^="btn"], .btn-chatwoot, .btn-more, .btn-external-opportunity, .detail-button, button { width: 100%; margin-right: 0; margin-top: 8px; } .customer-kv { grid-template-columns: 1fr; } table { font-size: 13px; } th, td { padding: 9px 10px; } .table-wrap, .customer-panel, .system-panel, .panel { overflow-x: auto; } textarea { min-height: 160px; } } @media (max-width: 430px) { h1 { font-size: 24px; } .card strong { font-size: 26px; } .task-card .request-text, .request-text { -webkit-line-clamp: 3; } } /* ========================= ClientFlow UI v2.1 Kanban ========================= */ .kanban-toolbar { position: sticky; top: 62px; z-index: 12; } .kanban-toolbar > div, .kanban-toolbar form { min-width: 0; } .kanban-toolbar a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 999px; background: white; color: #374151; font-weight: 750; font-size: 13px; } .kanban-toolbar a:hover { text-decoration: none; background: #f3f4f6; } .kanban-column { max-height: calc(100vh - 190px); overflow-y: auto; scrollbar-width: thin; } .kanban-column h2, .kanban-column h3 { position: sticky; top: 0; z-index: 2; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); padding: 8px 4px; border-radius: 12px; } .task-card { display: flex; flex-direction: column; gap: 8px; } .task-card .customer-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; line-height: 1.2; } .task-card .customer-name a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .task-card p { margin: 0; } .task-card small { line-height: 1.35; } .task-card-footer, .task-footer, .card-footer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .task-card form { margin: 0; } .task-card button { min-height: 34px; padding: 7px 10px; font-size: 13px; } .task-card .status-badge, .task-card .route-badge, .task-card .sla-badge { margin: 2px 2px 2px 0; } .task-card-actions, .task-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .task-card-actions a, .task-actions a { flex: 1 1 auto; } .request-text { background: #f9fafb; border: 1px solid #eef0f3; border-radius: 12px; padding: 9px 10px; font-size: 13px; } .kanban-column:nth-child(1) { border-top: 4px solid #60a5fa; } .kanban-column:nth-child(2) { border-top: 4px solid #f59e0b; } .kanban-column:nth-child(3) { border-top: 4px solid #34d399; } .kanban-column:nth-child(4) { border-top: 4px solid #a78bfa; } .kanban-column:nth-child(5) { border-top: 4px solid #f87171; } /* Tabelas menos pesadas */ .panel table, .customer-panel table, .system-panel table { font-size: 13px; } .panel th, .customer-panel th, .system-panel th { white-space: nowrap; } .panel td, .customer-panel td, .system-panel td { color: #374151; } /* Detalhe task mais respirável */ .detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 16px; align-items: start; } .detail-panel, .task-detail-panel { background: white; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; } /* Mobile: Kanban vira lista simples */ @media (max-width: 760px) { .kanban-toolbar { position: static; top: auto; } .kanban-column { max-height: none; overflow: visible; } .kanban-column h2, .kanban-column h3 { position: static; font-size: 17px; padding: 10px 4px; } .task-card { gap: 10px; } .request-text { font-size: 14px; } .task-card .customer-name { font-size: 16px; } .task-card-actions, .task-actions { flex-direction: column; } .task-card-actions a, .task-actions a, .task-card form, .task-card button { width: 100%; } .panel table, .customer-panel table, .system-panel table { min-width: 680px; } .detail-grid { grid-template-columns: 1fr; } } /* ========================= ClientFlow UI v2.2 Polish ========================= */ .subtitle { max-width: 820px; color: var(--muted); margin-top: 0; } main > p:first-of-type { margin-top: 8px; } /* Melhor separação visual entre blocos */ .home-panel, .customer-v2-panel, .task-v2-panel, .system-panel, .customer-panel, .panel { position: relative; } .home-panel::before, .customer-v2-panel::before, .task-v2-panel::before, .system-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, rgba(37,99,235,.65), rgba(16,185,129,.55)); } /* Campos/formulários mais bonitos */ form label { display: block; margin: 12px 0 6px; color: #374151; } select, textarea, input[type="search"], input[type="text"] { width: 100%; border: 1px solid #d1d5db; border-radius: 12px; padding: 10px 12px; background: white; color: var(--text); outline: none; } select:focus, textarea:focus, input[type="search"]:focus, input[type="text"]:focus { border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(147,197,253,.25); } /* Botões secundários */ .secondary-button, button.secondary-button { background: #f9fafb !important; color: #374151 !important; border-color: #d1d5db !important; } .danger-button, button.danger-button { background: #fee2e2 !important; color: #991b1b !important; border-color: #fecaca !important; } /* Cards com menos texto visível */ .home-task-card p, .customer-task-card p, .mini-history-item p, .customer-message-card p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } /* Debug sempre discreto */ details { transition: all .15s ease; } details summary { list-style: none; } details summary::-webkit-details-marker { display: none; } details summary::before { content: "▸"; display: inline-block; margin-right: 8px; transition: transform .15s ease; } details[open] summary::before { transform: rotate(90deg); } /* Tabelas técnicas mais controladas */ table code { word-break: break-word; } td { max-width: 420px; overflow-wrap: anywhere; } /* Navegação mais limpa */ nav::before { content: "ClientFlow"; font-weight: 900; color: #111827; margin-right: 6px; letter-spacing: -0.03em; } nav a[href="/"], nav a[href="/tasks"], nav a[href="/system"] { background: #f9fafb; border: 1px solid #e5e7eb; } /* Página sistema menos agressiva */ .system-card strong .system-pill { font-size: 13px; padding: 7px 10px; } .system-pre { max-height: 320px; } /* Melhor impressão visual no mobile */ @media (max-width: 760px) { nav::before { display: none; } h1 { margin-top: 8px; } .subtitle { font-size: 14px; } .home-kpi, .customer-summary-card, .card, .system-card { padding: 14px; } .home-kpi strong, .customer-summary-card strong, .card strong { font-size: 28px; } .home-panel, .customer-v2-panel, .task-v2-panel, .system-panel, .customer-panel, .panel { padding: 14px; border-radius: 16px; } /* Tabelas ficam legíveis sem rebentar a página */ table { min-width: 640px; } .system-panel, .customer-v2-panel, .task-v2-panel, .home-panel, .panel { overflow-x: auto; } /* Ações sempre grandes no telemóvel */ .home-task-actions, .customer-card-actions, .task-actions-row { flex-direction: column; } .home-task-actions a, .customer-card-actions a, .task-actions-row form, .task-actions-row button, .detail-button { width: 100%; } textarea.suggested-reply-box, #suggested-reply { min-height: 260px; } } /* Ecrãs muito pequenos */ @media (max-width: 420px) { main, .container { width: calc(100% - 12px); } .home-task-card, .customer-task-card, .customer-message-card, .mini-history-item, .task-card { border-radius: 14px; } .home-kpi strong, .customer-summary-card strong, .card strong { font-size: 24px; } } /* ============================== ClientFlow UI v2.3 Kanban Clean ============================== */ /* Kanban menos pesado visualmente */ .kanban-board, .kanban { gap: 12px; } .kanban-column { background: rgba(255,255,255,.72); padding: 10px; } .kanban-column h2, .kanban-column h3 { font-size: 14px; margin-bottom: 8px; } /* Card mais compacto e legível */ .task-card { padding: 12px; gap: 7px; border-radius: 16px; } .task-card .customer-name { font-size: 15px; margin: 0; } .task-card .customer-name a { color: #111827; font-weight: 900; } /* Reduz excesso de texto no card */ .task-card p { font-size: 13px; color: #4b5563; } .task-card small { font-size: 12px; } /* Pedido resumido no Kanban */ .task-card .request-text, .request-text { -webkit-line-clamp: 3; font-size: 13px; line-height: 1.35; padding: 8px 9px; margin-top: 2px; } /* Menos destaque para informação técnica dentro dos cards */ .task-card code { font-size: 11px; color: #6b7280; background: #f9fafb; border-color: #eef0f3; } /* Badges mais pequenos no Kanban */ .task-card .status-badge, .task-card .route-badge, .task-card .sla-badge { font-size: 11px; padding: 4px 7px; } /* Ações do card em grelha limpa */ .task-card .btn-chatwoot, .task-card .btn-more, .task-card .btn-external-opportunity, .task-card a[class^="btn"] { min-height: 32px; padding: 7px 9px; font-size: 12px; flex: 1 1 42%; margin: 0; } /* Evita cartões gigantes quando há muitos botões */ .task-card a[class^="btn"]:only-child { flex-basis: 100%; } /* Botão Feito/Ignorar mais discreto dentro do Kanban */ .task-card form button { min-height: 32px; padding: 7px 9px; font-size: 12px; } /* Toolbar menos alta */ .kanban-toolbar { padding: 10px; margin: 12px 0; } .kanban-toolbar input[type="search"] { min-height: 38px; } .kanban-toolbar button, .kanban-toolbar a { min-height: 36px; } /* Destacar só o que precisa de atenção */ .task-card:has(.sla-overdue) { border-color: #fecaca; background: #fffafa; } .task-card:has(.sla-overdue)::before { content: "Atenção"; display: inline-flex; align-self: flex-start; background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; border-radius: 999px; padding: 3px 7px; font-size: 11px; font-weight: 900; } /* No desktop, colunas mais suaves */ @media (min-width: 1201px) { .kanban-board, .kanban { grid-template-columns: repeat(5, minmax(220px, 1fr)); } } /* Em tablet, duas colunas continuam boas */ @media (max-width: 1200px) and (min-width: 761px) { .kanban-board, .kanban { grid-template-columns: repeat(2, minmax(260px, 1fr)); } } /* Mobile: lista operacional */ @media (max-width: 760px) { .kanban-toolbar { gap: 10px; } .kanban-toolbar > div { width: 100%; } .kanban-toolbar div a { width: 100%; margin-top: 6px; } .kanban-column { border-radius: 16px; padding: 10px; margin-bottom: 12px; } .kanban-column h2, .kanban-column h3 { font-size: 18px; padding: 8px 2px; } .task-card { padding: 14px; border-radius: 16px; } .task-card .customer-name { font-size: 17px; } .task-card .request-text, .request-text { -webkit-line-clamp: 4; font-size: 14px; } .task-card .btn-chatwoot, .task-card .btn-more, .task-card .btn-external-opportunity, .task-card a[class^="btn"], .task-card form button { width: 100%; flex-basis: 100%; font-size: 14px; min-height: 42px; } } /* Reduz ruído visual nas páginas em geral */ .status-badge, .route-badge, .sla-badge { white-space: nowrap; } .home-mini-item, .mini-history-item, .customer-message-card, .customer-task-card { box-shadow: none; } /* Melhor leitura das mensagens longas */ .customer-message-card p, .message-body, .request-box { line-height: 1.5; } /* Evita páginas com aparência demasiado técnica */ details.debug-details, details.customer-debug, details.home-debug { opacity: .96; } /* CLIENTFLOW_TASK_DETAIL_NO_SIDEBAR */ .task-v2-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; } .task-v2-layout > main, .task-v2-layout > aside { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .task-v2-layout > main { order: 1; } .task-v2-layout > aside { order: 2; position: static !important; top: auto !important; align-self: stretch !important; } .task-v2-panel { max-width: 100% !important; overflow-wrap: anywhere; } .task-v2-panel .cards, .task-v2-panel .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 12px; } .task-v2-panel .card { min-width: 0 !important; } .task-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; } .task-actions form, .task-actions button { min-width: 0 !important; } @media (max-width: 1300px) { .task-v2-layout { grid-template-columns: 1fr !important; } .task-actions { flex-direction: column !important; } .task-actions form, .task-actions button { width: 100% !important; } } @media (max-width: 760px) { .task-v2-panel { padding: 14px !important; border-radius: 16px !important; } .task-v2-panel .cards, .task-v2-panel .card-grid { grid-template-columns: 1fr !important; } } /* CLIENTFLOW_TASK_DETAIL_WIDTH_FIX_V2 */ html, body { max-width: 100%; overflow-x: hidden; } main { max-width: 1180px !important; width: min(1180px, calc(100vw - 28px)) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } .task-v2-layout, .task-detail-layout, .task-detail-grid, .detail-grid { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 16px !important; } .task-v2-layout > *, .task-detail-layout > *, .task-detail-grid > *, .detail-grid > *, .task-v2-layout main, .task-v2-layout aside, .task-detail-layout main, .task-detail-layout aside, .task-detail-grid main, .task-detail-grid aside, .detail-grid main, .detail-grid aside { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } aside { position: static !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .task-v2-panel, .panel, .card, .cards, .task-actions, form, textarea, select, input, button { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .task-v2-panel, .panel, .card { overflow-wrap: anywhere !important; word-break: normal !important; } .cards { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 10px !important; } .task-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } .task-actions form, .task-actions button, .task-actions .btn, .task-v2-panel button, .task-v2-panel .btn, .task-v2-panel .primary, .task-v2-panel .secondary, .task-v2-panel .secondary-button, .task-v2-panel .danger-button { width: 100% !important; white-space: normal !important; } pre, code, table { max-width: 100% !important; overflow-x: auto !important; white-space: pre-wrap !important; } @media (max-width: 1400px) { main { width: min(1040px, calc(100vw - 24px)) !important; } .task-v2-layout, .task-detail-layout, .task-detail-grid, .detail-grid { grid-template-columns: 1fr !important; } } @media (max-width: 900px) { main { width: calc(100vw - 18px) !important; padding-left: 0 !important; padding-right: 0 !important; } .topbar { align-items: flex-start !important; flex-direction: column !important; } .nav-links { width: 100% !important; justify-content: flex-start !important; } .task-v2-panel, .panel { padding: 12px !important; border-radius: 14px !important; } .cards { grid-template-columns: 1fr !important; } } /* CLIENTFLOW_PREP_READABLE_V1 */ .prep-readable { display: grid; gap: 12px; } .prep-readable .prep-block { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px; } .prep-readable .prep-block h3 { margin: 0 0 10px; font-size: 0.95rem; color: #111827; } .prep-readable dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; margin: 0; } .prep-readable dt { font-weight: 800; color: #64748b; } .prep-readable dd { margin: 0; color: #111827; overflow-wrap: anywhere; } .prep-readable .prep-missing { background: #fff7ed; border-color: #fed7aa; } .prep-readable .prep-reply { background: #eff6ff; border-color: #bfdbfe; } @media (max-width: 900px) { .prep-readable dl { grid-template-columns: 1fr; } .prep-readable dt { margin-top: 6px; } } /* CLIENTFLOW_PREP_COMPONENTS_V1 */ .prep-components-shell { display: grid; gap: 14px; } .prep-components-header { background: #111827; color: white; border-radius: 18px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .prep-components-header span { display: block; color: #bfdbfe; font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; } .prep-components-header h2 { margin: 3px 0 0; font-size: 1.25rem; } .prep-components-confidence { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 8px 12px; min-width: 82px; text-align: center; } .prep-components-confidence strong { display: block; font-size: 1.05rem; } .prep-components-confidence small { color: #dbeafe; font-weight: 800; } .prep-component-card { background: white; border: 1px solid #e5e7eb; border-radius: 18px; padding: 15px; box-shadow: 0 8px 20px rgba(15, 23, 42, .045); } .prep-component-title { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; } .prep-component-title span { width: 32px; height: 32px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #f8fafc; border: 1px solid #e2e8f0; } .prep-component-title h3 { margin: 0; color: #0f172a; font-size: 1.02rem; } .prep-component-fields { display: grid; gap: 10px; } .prep-component-fields > div { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 11px 12px; } .prep-component-fields label { display: block; color: #64748b; font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; } .prep-component-fields p { margin: 0; color: #111827; line-height: 1.42; overflow-wrap: anywhere; font-weight: 650; } .prep-component-warning { background: #fffbeb; border-color: #fde68a; } .prep-component-reply { background: #eff6ff; border-color: #bfdbfe; } .prep-component-reply > p { margin: 0; color: #1e3a8a; line-height: 1.5; font-weight: 650; } .prep-component-chips { display: flex; flex-wrap: wrap; gap: 8px; } .prep-component-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 10px; font-size: .82rem; font-weight: 850; } .prep-component-chip.missing { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; } .prep-component-chip.ok { background: #ecfdf5; color: #047857; border: 1px solid #bbf7d0; } .prep-component-meta { display: flex; flex-wrap: wrap; gap: 8px; color: #64748b; font-size: .75rem; } .prep-component-meta span { background: #f1f5f9; border-radius: 999px; padding: 5px 8px; } @media (max-width: 760px) { .prep-components-header { align-items: flex-start; flex-direction: column; } .prep-components-confidence { width: 100%; } } /* CLIENTFLOW_PREP_COMPONENTS_POLISH_V2 */ .prep-components-shell { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 22px; padding: 14px; } .prep-components-header { box-shadow: 0 10px 28px rgba(15, 23, 42, .14); } .prep-component-card { border: 1px solid #e2e8f0; box-shadow: 0 8px 22px rgba(15, 23, 42, .055); transition: transform .12s ease, box-shadow .12s ease; } .prep-component-card:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(15, 23, 42, .075); } .prep-component-title { padding-bottom: 10px; border-bottom: 1px solid #eef2f7; } .prep-component-title h3 { font-size: 1.05rem; font-weight: 900; } .prep-component-fields { gap: 8px; } .prep-component-fields > div { background: #ffffff; border: 1px solid #e8eef6; border-radius: 12px; padding: 10px 11px; } .prep-component-fields label { color: #64748b; font-size: .7rem; } .prep-component-fields p { font-size: .96rem; color: #0f172a; } .prep-component-fields p:empty::after { content: "—"; color: #94a3b8; } .prep-component-warning { background: linear-gradient(180deg, #fffbeb, #fff7ed); } .prep-component-warning .prep-component-title span { background: #fff7ed; border-color: #fed7aa; } .prep-component-reply { background: linear-gradient(180deg, #eff6ff, #f8fafc); } .prep-component-reply .prep-component-title span { background: #dbeafe; border-color: #bfdbfe; } .prep-component-reply > p { font-size: .98rem; padding: 12px; background: white; border: 1px solid #bfdbfe; border-radius: 14px; } .prep-component-chip { box-shadow: 0 2px 8px rgba(15, 23, 42, .045); } .prep-component-meta { opacity: .68; font-size: .7rem; padding: 2px 4px; } .prep-component-meta:hover { opacity: 1; } /* Em ecrãs médios, manter tudo confortável em 1 coluna */ @media (max-width: 1200px) { .prep-components-shell { padding: 12px; } .prep-component-card { padding: 14px; } .prep-component-fields { grid-template-columns: 1fr !important; } } /* Em mobile/laptop pequeno, reduzir ruído visual */ @media (max-width: 760px) { .prep-components-header { border-radius: 16px; padding: 14px; } .prep-component-card { border-radius: 16px; padding: 13px; } .prep-component-title { margin-bottom: 10px; } .prep-component-fields > div { padding: 9px 10px; } .prep-component-meta { display: none; } } /* CLIENTFLOW_PREP_PRIORITY_ORDER_V1 */ .prep-priority-zone { display: grid; gap: 12px; padding: 12px; background: linear-gradient(180deg, #f8fafc, #eef2ff); border: 1px solid #dbeafe; border-radius: 20px; } .prep-priority-zone .prep-component-card { box-shadow: 0 10px 26px rgba(15, 23, 42, .07); } .prep-priority-zone .prep-component-warning { border-left: 5px solid #f59e0b; } .prep-priority-zone .prep-component-reply { border-left: 5px solid #2563eb; } .prep-component-card:not(.prep-component-warning):not(.prep-component-reply) { border-left: 4px solid #e2e8f0; } .prep-component-card:nth-of-type(2) { margin-top: 2px; } @media (max-width: 760px) { .prep-priority-zone { padding: 10px; border-radius: 16px; } } /* CLIENTFLOW_TEXTAREA_COMPONENT_FIX_V1 */ .task-v2-panel textarea, .panel textarea, .prep-components-shell textarea, .prep-component-card textarea, .prep-component-reply textarea, .prep-component-card input, .prep-component-card select { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; resize: vertical !important; overflow: auto !important; border: 1px solid #dbe3ef; border-radius: 14px; padding: 11px 12px; font: inherit; } .task-v2-panel form, .panel form, .prep-component-card form, .prep-component-reply form { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .prep-component-card, .prep-component-reply, .prep-component-fields > div { overflow: hidden !important; } .prep-component-reply p, .prep-component-reply textarea, .prep-component-fields p { overflow-wrap: anywhere !important; word-break: normal !important; } @media (max-width: 900px) { .task-v2-panel textarea, .panel textarea, .prep-components-shell textarea, .prep-component-card textarea { min-height: 90px; } } /* CLIENTFLOW_TASK_DETAIL_SINGLE_COLUMN_CSS_ONLY_V2 */ .task-v2-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; max-width: 1120px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } .task-v2-layout > main, .task-v2-layout > aside { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .task-v2-layout > aside { position: static !important; } .task-v2-panel, .panel, .prep-components-shell, .prep-component-card, .prep-component-fields, .prep-component-fields > div, .task-actions, form, textarea, input, select, button { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .task-v2-panel, .panel, .prep-component-card { overflow-wrap: anywhere !important; } textarea { width: 100% !important; resize: vertical !important; } .task-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } .task-actions form, .task-actions button { width: 100% !important; } @media (max-width: 1200px) { .task-v2-layout { max-width: 100% !important; } } /* CLIENTFLOW_RECLASSIFY_DROPDOWN_FIX_V1 */ .reclassify-box, .reclassify-form { display: grid; gap: 10px; width: 100%; max-width: 100%; overflow: visible !important; position: relative; z-index: 5; } .reclassify-form select, .reclassify-form textarea, .reclassify-form button { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .reclassify-form select { display: block !important; appearance: auto !important; -webkit-appearance: menulist !important; pointer-events: auto !important; position: relative; z-index: 10; min-height: 42px; background: white; cursor: pointer; } .task-v2-panel:has(.reclassify-box) { overflow: visible !important; } /* CLIENTFLOW_ASSISTANTS_SHORT_PREP_RESULT_V1 */ .task-v2-panel:has(> h2:first-child) { max-width: 100%; } .task-v2-panel h2 + .muted { margin-top: -4px; margin-bottom: 12px; } .task-v2-panel .task-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } .task-v2-panel .task-actions form { margin: 0; } .task-v2-panel .task-actions button, .task-v2-panel .btn { width: 100%; white-space: normal; } .task-preparation-result-main { background: #f8fafc; border-color: #dbeafe; } .task-preparation-result-main > .prep-components-shell { margin-top: 10px; } @media (max-width: 900px) { .task-v2-panel .task-actions { grid-template-columns: 1fr; } } """ ADMIN_UI_V451_CSS = r""" :root{ --cf-bg:#f5f7fb; --cf-panel:#ffffff; --cf-panel-2:#f9fbff; --cf-text:#142033; --cf-muted:#6b778d; --cf-line:#e7edf6; --cf-primary:#2563eb; --cf-primary-2:#dbeafe; --cf-teal:#0f766e; --cf-green:#16a34a; --cf-green-2:#dcfce7; --cf-orange:#f97316; --cf-orange-2:#ffedd5; --cf-red:#dc2626; --cf-red-2:#fee2e2; --cf-purple:#7c3aed; --cf-purple-2:#ede9fe; --cf-shadow:0 10px 26px rgba(20,32,51,.06); --cf-shadow-strong:0 18px 45px rgba(20,32,51,.10); --cf-radius:16px; --cf-radius-sm:11px; --cf-sidebar-width:284px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background: radial-gradient(circle at top left,rgba(37,99,235,.08),transparent 32rem), var(--cf-bg); color:var(--cf-text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.925rem; line-height:1.45; } a{color:inherit;text-decoration:none} a:hover{text-decoration:none;color:var(--cf-primary)} code{color:#334155;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:.45rem;padding:.1rem .35rem;font-size:.82em} pre{background:#0f172a;color:#e2e8f0;padding:1rem;border-radius:1rem;overflow-x:auto;white-space:pre-wrap} .cf-app{min-height:100vh;display:grid;grid-template-columns:var(--cf-sidebar-width) minmax(0,1fr)} .cf-sidebar{ position:sticky;top:0;height:100vh;max-height:100vh;background:linear-gradient(180deg,#fff 0,#f8fbff 100%); border-right:1px solid var(--cf-line);padding:24px 18px;display:flex;flex-direction:column;gap:18px;z-index:30; overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable; } .cf-brand{display:flex;gap:12px;align-items:center;padding:0 8px 10px;color:var(--cf-text)} .cf-brand:hover{color:var(--cf-text)} .cf-brand-mark{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#2563eb,#12b8a6);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 10px 20px rgba(37,99,235,.25);font-size:.78rem;letter-spacing:-.04em} .cf-brand-text strong{display:block;font-size:19px;letter-spacing:-.03em;line-height:1.05}.cf-brand-text small{display:block;color:var(--cf-muted);font-size:11px;margin-top:2px;font-weight:700} .cf-nav-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:12px 10px 4px;font-weight:900} .cf-nav{display:flex;flex-direction:column;gap:5px;backdrop-filter:none;flex:0 0 auto} .cf-nav-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:#475569;font-weight:750;min-height:42px;transition:background .14s ease,color .14s ease,transform .14s ease} .cf-nav-link:hover{background:#f1f5ff;color:var(--cf-primary);transform:translateX(1px)} .cf-nav-link.active{background:var(--cf-primary-2);color:#1d4ed8} .cf-nav-icon{width:22px;height:22px;border-radius:8px;display:grid;place-items:center;background:#eef2ff;color:var(--cf-primary);font-size:13px;line-height:1;flex:0 0 auto} .cf-nav-link.active .cf-nav-icon{background:#fff;box-shadow:0 4px 10px rgba(37,99,235,.08)} .cf-sidebar-footer{margin-top:auto;background:#f8fafc;border:1px solid var(--cf-line);border-radius:16px;padding:12px;display:grid;gap:10px;flex:0 0 auto}.cf-company{font-size:12px;color:var(--cf-muted);font-weight:700}.cf-company strong{display:block;color:#334155;font-size:13px;margin-top:4px}.cf-user-mini{display:flex;gap:10px;align-items:center}.cf-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#14b8a6);color:white;font-weight:900;font-size:.8rem}.cf-user-mini strong{display:block;font-size:.85rem;line-height:1.05}.cf-user-mini span{display:block;font-size:.72rem;color:var(--cf-muted);font-weight:700} .cf-content{min-width:0}.cf-topbar{height:70px;background:rgba(255,255,255,.80);backdrop-filter:blur(12px);border-bottom:1px solid var(--cf-line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:20;gap:16px}.cf-topbar-left{display:flex;align-items:center;gap:14px;min-width:0;flex:1}.cf-menu-dot{border:0;background:transparent;color:#64748b;font-size:1.1rem;padding:7px;border-radius:10px}.cf-global-search{display:flex;align-items:center;gap:10px;background:#f8fafc;border:1px solid var(--cf-line);border-radius:999px;padding:9px 14px;width:min(520px,45vw);color:var(--cf-muted)}.cf-global-search input{border:0;background:transparent;outline:0;width:100%;color:var(--cf-text);min-width:0}.cf-topbar-actions{display:flex;align-items:center;gap:10px}.cf-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--cf-line);background:#fff;border-radius:999px;padding:8px 11px;color:#475569;font-weight:750;white-space:nowrap}.cf-pill:hover{border-color:#bfd1ff;background:#fff;color:var(--cf-primary)}.cf-icon-btn{width:36px;height:36px;border:1px solid var(--cf-line);background:#fff;color:#475569;display:grid;place-items:center;border-radius:50%;font-weight:800;padding:0}.cf-icon-btn:hover{border-color:#bfd1ff;color:var(--cf-primary)} .cf-page{width:min(1440px,calc(100% - 60px));margin:0 auto;padding:28px 0 54px}.cf-page-title{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}.cf-page-title h1{margin:0;font-size:clamp(1.75rem,2.7vw,2.35rem);letter-spacing:-.04em;font-weight:900}.cf-page-title p{margin:5px 0 0;color:var(--cf-muted);font-size:.98rem}.cf-page-title::after{content:"v4.7 Operations";display:inline-flex;align-items:center;border:1px solid var(--cf-line);background:#fff;border-radius:999px;padding:7px 11px;color:#64748b;font-weight:800;font-size:.75rem;white-space:nowrap} .cf-card,.card.cf-card,.card,.panel,.customer-panel,.system-panel,.task-card,article.message-card{background:var(--cf-panel);border:1px solid var(--cf-line);border-radius:var(--cf-radius);box-shadow:var(--cf-shadow)} .card{overflow:hidden}.card-body{border-radius:inherit}.cf-soft-box{background:#f8fafc;border:1px solid var(--cf-line);border-radius:13px;padding:1rem}.cf-empty{padding:2rem;text-align:center;color:#94a3b8;border:1px dashed #cbd5e1;border-radius:1rem;background:#fff}.cf-muted,.muted{color:var(--cf-muted)}.small,.text-secondary{color:var(--cf-muted)!important}.fw-bold{font-weight:850!important}.border-bottom{border-bottom-color:var(--cf-line)!important}.border-top{border-top-color:var(--cf-line)!important}.bg-light{background:#f8fafc!important} .cf-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:16px;margin-bottom:18px}.cf-kpi{padding:18px;min-height:132px;position:relative;overflow:hidden;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.cf-kpi:hover{transform:translateY(-2px);box-shadow:var(--cf-shadow-strong);border-color:#cfe0ff;color:inherit}.cf-kpi::after{display:none!important;content:none!important}.cf-kpi-icon{position:absolute;right:16px;top:16px;width:44px;height:44px;border-radius:14px;background:var(--cf-primary-2);color:var(--cf-primary);display:grid;place-items:center;opacity:.98;font-size:1.12rem;line-height:1}.cf-kpi-icon i{line-height:1}.cf-kpi-tone-green .cf-kpi-icon{background:var(--cf-green-2);color:var(--cf-green)}.cf-kpi-tone-orange .cf-kpi-icon{background:var(--cf-orange-2);color:var(--cf-orange)}.cf-kpi-tone-red .cf-kpi-icon{background:var(--cf-red-2);color:var(--cf-red)}.cf-kpi-tone-purple .cf-kpi-icon{background:var(--cf-purple-2);color:var(--cf-purple)}.cf-kpi span:not(.cf-kpi-icon){display:block;color:#4b5563;font-weight:850;font-size:.82rem;max-width:calc(100% - 58px)}.cf-kpi strong{display:block;font-size:1.85rem;line-height:1;letter-spacing:-.05em;margin:.75rem 0 .3rem;color:#0f172a}.cf-kpi small{color:var(--cf-green);font-weight:850}.cf-kpi-tone-orange small{color:var(--cf-orange)}.cf-kpi-tone-red small{color:var(--cf-red)}.cf-kpi-tone-purple small{color:var(--cf-purple)}.cf-section-title{font-size:1.05rem;font-weight:900;margin:0;letter-spacing:-.015em}.cf-row-link{color:var(--cf-primary);font-weight:900} .alert{border-radius:var(--cf-radius)!important;border:1px solid #bfdbfe!important;box-shadow:var(--cf-shadow);background:#eff6ff!important;color:#1e40af!important}.alert-danger{background:#fff7f7!important;color:#991b1b!important;border-color:#fecaca!important}.alert-warning{background:#fff7ed!important;color:#9a3412!important;border-color:#fed7aa!important}.alert-info{background:#eef9ff!important;color:#075985!important;border-color:#bae6fd!important}.alert-success{background:#f0fdf4!important;color:#166534!important;border-color:#bbf7d0!important} .btn,button,.button,input[type="submit"]{border-radius:11px!important;font-weight:800!important;box-shadow:0 2px 6px rgba(15,23,42,.03);transition:box-shadow .14s ease,border-color .14s ease,background .14s ease,transform .14s ease}.btn:hover,button:hover,.button:hover,input[type="submit"]:hover{box-shadow:0 8px 18px rgba(37,99,235,.08);transform:translateY(-1px)}.btn-primary,.btn.btn-primary{background:var(--cf-primary)!important;border-color:var(--cf-primary)!important;color:#fff!important}.btn-outline-primary{border-color:#bfd1ff!important;color:#1d4ed8!important;background:#fff!important}.btn-outline-secondary{border-color:var(--cf-line)!important;color:#475569!important;background:#fff!important}.btn-success{background:var(--cf-green)!important;border-color:var(--cf-green)!important}.btn-warning{background:var(--cf-orange-2)!important;border-color:#fed7aa!important;color:#9a3412!important}.btn-danger,.btn-outline-danger{background:var(--cf-red-2)!important;border-color:#fecaca!important;color:#991b1b!important}.btn-sm{border-radius:9px!important;padding:.38rem .6rem!important;font-size:.8rem!important} .form-control,.form-select,textarea,input[type="search"],input[type="text"],select{border:1px solid var(--cf-line)!important;border-radius:11px!important;padding:.62rem .72rem;background:#fff;color:var(--cf-text);outline:0}.form-control:focus,.form-select:focus,textarea:focus,input:focus,select:focus{border-color:#93c5fd!important;box-shadow:0 0 0 4px #dbeafe!important}.filters,.cf-filter-card{background:#fff;border:1px solid var(--cf-line);border-radius:var(--cf-radius);padding:1rem;margin:1rem 0;box-shadow:var(--cf-shadow)} .cf-table-wrap{overflow-x:auto;border-radius:var(--cf-radius);border:0;background:transparent}.cf-table{width:100%;border-collapse:separate!important;border-spacing:0 9px!important;margin:0}.cf-table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;text-align:left;color:#94a3b8!important;font-weight:900;padding:0 12px 2px!important;border:0!important;background:transparent!important}.cf-table tbody td{background:#fff;border-top:1px solid var(--cf-line);border-bottom:1px solid var(--cf-line);padding:12px!important;vertical-align:middle!important}.cf-table tbody tr td:first-child{border-left:1px solid var(--cf-line);border-radius:12px 0 0 12px}.cf-table tbody tr td:last-child{border-right:1px solid var(--cf-line);border-radius:0 12px 12px 0}.cf-table tbody tr:hover td{border-color:#cfe0ff;background:#fcfdff} table{width:100%}th,td{vertical-align:top}.table{--bs-table-bg:transparent;--bs-table-border-color:transparent}.table>:not(caption)>*>*{background:transparent} .cf-chip,.status-badge,.route-badge,.sla-badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.28rem .55rem;font-size:.74rem;font-weight:850;border:1px solid transparent;white-space:nowrap;line-height:1.1}.cf-chip-blue,.route-vendas{background:var(--cf-primary-2);color:#1d4ed8;border-color:#bfdbfe}.cf-chip-green,.status-done,.route-financeiro,.sla-ok{background:var(--cf-green-2);color:#15803d;border-color:#bbf7d0}.cf-chip-orange,.status-pending,.route-operacoes{background:var(--cf-orange-2);color:#c2410c;border-color:#fed7aa}.cf-chip-purple,.route-suporte{background:var(--cf-purple-2);color:#6d28d9;border-color:#ddd6fe}.cf-chip-red,.status-failed,.sla-overdue{background:var(--cf-red-2);color:#b91c1c;border-color:#fecaca}.cf-chip-gray,.status-skipped,.route-rever,.status-badge,.route-badge{background:#f1f5f9;color:#475569;border-color:#e2e8f0}.status-pending{background:var(--cf-orange-2)!important;color:#c2410c!important;border-color:#fed7aa!important}.status-done{background:var(--cf-green-2)!important;color:#15803d!important;border-color:#bbf7d0!important}.status-failed{background:var(--cf-red-2)!important;color:#b91c1c!important;border-color:#fecaca!important} .cards{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:16px;margin:16px 0}.card:not(.cf-card){padding:16px}.card span{color:var(--cf-muted)}.card strong{letter-spacing:-.04em}.kanban-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;background:rgba(255,255,255,.92);border:1px solid var(--cf-line);border-radius:18px;padding:12px;margin:16px 0;box-shadow:var(--cf-shadow);position:sticky;top:82px;z-index:12}.kanban-board,.kanban,.cf-kanban{display:grid;grid-template-columns:repeat(5,minmax(240px,1fr));gap:14px;align-items:start;overflow-x:auto;padding-bottom:.3rem}.kanban-column,.cf-kanban-col{background:#f8fafc;border:1px solid var(--cf-line);border-radius:16px;padding:12px;min-width:225px}.task-card,.cf-mini-card{background:#fff;border:1px solid var(--cf-line);border-radius:14px;padding:12px;margin-bottom:10px;box-shadow:0 4px 12px rgba(15,23,42,.04);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.task-card:hover,.cf-mini-card:hover{transform:translateY(-1px);border-color:#aac2ff;box-shadow:0 10px 26px rgba(15,23,42,.08)}.customer-name,.cf-mini-title{font-weight:900;color:#0f172a}.request-text,.cf-copy-box{white-space:pre-wrap;background:#f8fafc;border:1px solid var(--cf-line);border-radius:12px;padding:10px;color:#334155}.task-card-actions,.task-actions,.task-card-footer,.task-footer,.card-footer{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.btn-chatwoot,.btn-more,.btn-external-opportunity,.detail-button,.task-card a[class^="btn"]{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;border-radius:11px;padding:7px 10px;border:1px solid var(--cf-line);background:#fff;color:#374151;font-size:13px;font-weight:800;margin:4px 4px 0 0}.btn-chatwoot{background:var(--cf-primary-2)!important;border-color:#bfdbfe!important;color:#1d4ed8!important}.btn-more{background:var(--cf-orange-2)!important;border-color:#fed7aa!important;color:#9a3412!important}.btn-external-opportunity,.detail-button-external,.detail-button-opportunity{background:var(--cf-green-2)!important;border-color:#bbf7d0!important;color:#15803d!important} .cf-two-col{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}.cf-side{position:sticky;top:86px;display:grid;gap:16px}.cf-action-focus{background:#f8fafc;border:1px solid var(--cf-line);border-left:4px solid var(--cf-primary);border-radius:13px;padding:1rem}.cf-quick-actions{display:grid;grid-template-columns:1fr;gap:.5rem}.cf-stage-progress{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem;align-items:start}.cf-step{position:relative;display:grid;gap:.45rem;justify-items:center;text-align:center;color:#94a3b8;font-weight:800}.cf-step::before{content:"";position:absolute;top:.45rem;left:0;right:0;height:2px;background:#e2e8f0;z-index:0}.cf-step:first-child::before{left:50%}.cf-step:last-child::before{right:50%}.cf-step span{position:relative;z-index:1;width:.9rem;height:.9rem;border-radius:999px;background:#cbd5e1;border:3px solid #fff;box-shadow:0 0 0 1px #cbd5e1}.cf-step.done span,.cf-step.active span{background:var(--cf-primary);box-shadow:0 0 0 1px var(--cf-primary)}.cf-step.done,.cf-step.active{color:#0f172a}.cf-step small{font-size:.68rem;line-height:1.2}.cf-timeline{display:grid;gap:.75rem}.cf-timeline-item{display:grid;grid-template-columns:130px 1fr;gap:.75rem;padding-bottom:.75rem;border-bottom:1px solid #eef2f7}.cf-timeline-item:last-child{border-bottom:0;padding-bottom:0}.cf-op-alert-grid{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:.75rem}.cf-op-alert{border:1px solid var(--cf-line);border-radius:13px;padding:.85rem;background:#fff}.cf-op-alert span{display:block;color:#64748b;font-size:.72rem;font-weight:900;text-transform:uppercase}.cf-op-alert strong{display:block;font-size:1.35rem;line-height:1;margin-top:.35rem}.cf-outbox-row-failed td,.cf-outbox-row-blocked td,.cf-work-row-priority-alta td,.cf-work-row-priority-urgente td{background:#fff7f7!important}.cf-outbox-row-pending td{background:#fffaf0!important}.cf-ia-tabs{display:flex;gap:.45rem;overflow-x:auto;padding:.25rem 0 .7rem;margin-bottom:.4rem}.cf-ia-tabs a{white-space:nowrap;border:1px solid #dbeafe;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:.42rem .72rem;font-weight:850;font-size:.78rem}.cf-ia-tabs a:hover{background:#dbeafe}.cf-op-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}.cf-op-card{border:1px solid var(--cf-line);border-radius:13px;padding:.9rem;background:#fff;display:grid;gap:.4rem;min-height:130px}.cf-op-icon{width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:999px;background:#eff6ff;color:var(--cf-primary);font-weight:900}.cf-op-title{font-weight:850;font-size:.88rem}.cf-op-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.cf-op-action-form{display:flex;gap:.4rem;align-items:center}.cf-op-action-form .form-control{min-width:0}.htmx-indicator{display:none}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline-flex}.cf-live-panel{scroll-margin-top:5rem}.cf-outbox-mini{background:#f8fafc;border:1px solid var(--cf-line);border-radius:13px}.cf-validation-list{margin:0;padding-left:1.15rem} .cf-ops-summary{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:14px;margin-bottom:16px} .cf-ops-counter{background:#fff;border:1px solid var(--cf-line);border-radius:16px;box-shadow:var(--cf-shadow);padding:15px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center} .cf-ops-counter span{display:block;color:var(--cf-muted);font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.055em}.cf-ops-counter strong{font-size:1.85rem;letter-spacing:-.055em;line-height:1;color:#0f172a}.cf-ops-counter i{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;background:#eff6ff;color:var(--cf-primary)}.cf-ops-counter.danger i{background:var(--cf-red-2);color:var(--cf-red)}.cf-ops-counter.warn i{background:var(--cf-orange-2);color:var(--cf-orange)}.cf-ops-counter.purple i{background:var(--cf-purple-2);color:var(--cf-purple)} .cf-ops-filterbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.cf-ops-filterbar a{display:inline-flex;align-items:center;border:1px solid var(--cf-line);background:#fff;border-radius:999px;padding:.5rem .85rem;font-weight:850;color:#475569}.cf-ops-filterbar a.active,.cf-ops-filterbar a:hover{background:var(--cf-primary-2);border-color:#bfdbfe;color:#1d4ed8} .cf-work-section{display:grid;gap:12px;margin-bottom:20px}.cf-work-section-title{display:flex;align-items:center;gap:.55rem;margin:22px 0 10px;color:#475569;font-weight:950;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}.cf-work-section-title::after{content:"";height:1px;background:var(--cf-line);flex:1} .cf-work-card{background:#fff;border:1px solid var(--cf-line);border-radius:18px;box-shadow:var(--cf-shadow);padding:18px;display:grid;gap:14px;border-left:5px solid #cbd5e1}.cf-work-card.high{border-left-color:var(--cf-red)}.cf-work-card.normal{border-left-color:var(--cf-primary)}.cf-work-card.blocked{border-left-color:var(--cf-orange)}.cf-work-card-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.cf-work-client{font-size:1.05rem;font-weight:950;color:#0f172a;line-height:1.15}.cf-work-process{color:var(--cf-muted);font-weight:750;margin-top:.25rem}.cf-work-next{background:#f8fafc;border:1px solid var(--cf-line);border-radius:14px;padding:12px}.cf-work-next span{display:block;color:var(--cf-muted);font-size:.74rem;font-weight:950;text-transform:uppercase;letter-spacing:.055em}.cf-work-next strong{display:block;font-size:1.05rem;margin-top:.15rem}.cf-work-meta{display:flex;flex-wrap:wrap;gap:8px}.cf-work-actions{display:flex;flex-wrap:wrap;gap:8px}.cf-work-actions .btn{min-width:0}.cf-work-empty{background:#fff;border:1px dashed #cbd5e1;border-radius:18px;padding:30px;text-align:center;color:#64748b} @media(max-width:900px){.cf-ops-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.cf-work-card-head{display:grid}.cf-work-actions .btn{width:100%}} @media(max-width:1200px){:root{--cf-sidebar-width:88px}.cf-brand-text,.cf-nav-title,.cf-nav-link span:last-child,.cf-sidebar-footer{display:none}.cf-brand{justify-content:center;padding-left:0;padding-right:0}.cf-nav-link{justify-content:center;padding:.75rem .45rem}.cf-nav-admin{margin-left:0;padding-left:0;border-left:0}.cf-kpi-grid,.cards{grid-template-columns:repeat(2,minmax(160px,1fr))}.cf-two-col{grid-template-columns:1fr}.cf-side{position:static}.cf-op-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cf-kanban,.kanban,.kanban-board{grid-template-columns:repeat(5,270px)}} /* v4.8.6 — clean opportunity board layout. The board uses minimum column widths instead of squeezing four columns into the viewport. This avoids badge/text overlap and keeps each card readable. */ .cf-opportunities-board-meta { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; color: #64748b; font-size: .82rem; font-weight: 700; } .cf-opportunities-board-scroll { width: 100%; overflow-x: auto; padding-bottom: .35rem; scrollbar-gutter: stable; } .cf-opportunities-board-grid { display: grid; grid-template-columns: repeat(4, minmax(300px, 1fr)); gap: 1rem; align-items: start; min-width: 1220px; } .cf-opportunity-stage { min-width: 0; background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 24px rgba(15, 23, 42, .045); } .cf-opportunity-stage-header { min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .8rem 1rem; background: #ffffff; border-bottom: 1px solid #e2e8f0; } .cf-opportunity-stage-header strong { min-width: 0; color: #0f172a; font-size: .92rem; font-weight: 900; line-height: 1.2; } .cf-opportunity-stage-header span { flex: 0 0 auto; display: inline-grid; min-width: 1.6rem; height: 1.6rem; place-items: center; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: .78rem; font-weight: 900; } .cf-opportunity-stage-body { display: grid; gap: .85rem; padding: .85rem; } .cf-opportunity-card-clean { display: grid; gap: .85rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 14px; background: #ffffff; box-shadow: 0 6px 18px rgba(15, 23, 42, .055); } .cf-opportunity-card-clean.has-blocker { border-color: #fed7aa; background: #fff7ed; } .cf-opportunity-card-main { display: grid; gap: .45rem; min-width: 0; } .cf-opportunity-card-main:hover { text-decoration: none; } .cf-opportunity-card-title { color: #0f172a; font-size: .96rem; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; } .cf-opportunity-card-subtitle { color: #64748b; font-size: .78rem; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; } .cf-opportunity-card-subject { margin-top: .2rem; color: #111827; font-size: .9rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; } .cf-opportunity-next-action { display: grid; gap: .2rem; margin-top: .25rem; padding: .75rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; } .cf-opportunity-next-action span { color: #64748b; font-size: .72rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } .cf-opportunity-next-action strong { color: #0f172a; font-size: .92rem; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; } .cf-opportunity-card-cta { margin: 0 !important; } @media(max-width:760px){.cf-app{display:block}.cf-sidebar{position:static;width:100%;height:auto;max-height:none;min-height:0;display:flex;flex-direction:row;align-items:center;gap:10px;overflow-x:auto;overflow-y:hidden;padding:12px 10px}.cf-brand{padding:0}.cf-brand-mark{width:32px;height:32px}.cf-admin-nav{display:flex;align-items:center;gap:5px;margin-top:0}.cf-admin-nav[open] .cf-nav-admin{display:flex}.cf-nav{display:flex;flex-direction:row;min-width:max-content}.cf-nav-link{min-height:38px;padding:.5rem .65rem}.cf-content{width:100%}.cf-topbar{position:sticky;top:0;padding:0 14px;height:62px}.cf-global-search{display:none}.cf-pill.cf-date{display:none}.cf-page{width:calc(100% - 24px);padding:20px 0 34px}.cf-page-title{flex-direction:column}.cf-page-title::after{display:none}.cf-kpi-grid,.cards,.cf-op-alert-grid,.cf-op-grid,.cf-op-actions{grid-template-columns:1fr}.row{--bs-gutter-x:.75rem}.cf-table{border-spacing:0 8px!important}.cf-table thead{display:none}.cf-table tbody tr{display:block;margin-bottom:10px}.cf-table tbody td{display:block!important;border-left:1px solid var(--cf-line)!important;border-right:1px solid var(--cf-line)!important;border-top:0!important;border-bottom:0!important;border-radius:0!important}.cf-table tbody td:first-child{border-top:1px solid var(--cf-line)!important;border-radius:12px 12px 0 0!important}.cf-table tbody td:last-child{border-bottom:1px solid var(--cf-line)!important;border-radius:0 0 12px 12px!important}.btn,button{min-height:38px}.task-card a[class^="btn"],.btn-chatwoot,.btn-more,.btn-external-opportunity,.detail-button{width:100%;margin-right:0}.cf-timeline-item{grid-template-columns:1fr}.cf-stage-progress{grid-template-columns:repeat(3,1fr)}} @media(max-width:430px){body{font-size:.9rem}.cf-kpi strong{font-size:1.55rem}.cf-page-title h1{font-size:1.55rem}.cf-sidebar{padding:10px 8px}.cf-nav-icon{width:20px;height:20px}.cf-topbar-actions{gap:6px}.cf-icon-btn{width:32px;height:32px}.cf-pill{padding:7px 9px}} /* v4.7 admin navigation */ /* v4.7.1 admin navigation overflow fix */ .cf-admin-nav{margin-top:2px;flex:0 0 auto;min-height:0} .cf-admin-nav summary{cursor:pointer;list-style:none} .cf-admin-nav summary::-webkit-details-marker{display:none} .cf-nav-admin{margin-left:10px;padding-left:10px;border-left:1px solid var(--cf-line,#e5e7eb);padding-bottom:8px} .cf-nav-admin .cf-nav-link{min-height:38px;font-size:.92rem} .cf-sidebar::-webkit-scrollbar{width:10px} .cf-sidebar::-webkit-scrollbar-track{background:transparent} .cf-sidebar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;border:3px solid transparent;background-clip:content-box} .cf-sidebar::-webkit-scrollbar-thumb:hover{background:#94a3b8;border:3px solid transparent;background-clip:content-box} /* v4.7.3 HTMX partial refresh polish */ .cf-live-panel{scroll-margin-top:5rem} .cf-live-panel.htmx-swapping{opacity:.75} .cf-live-panel .htmx-indicator{align-items:center;gap:.35rem} .cf-ops-filterbar a[hx-get],.cf-task-tabs a[hx-get]{cursor:pointer} /* v4.8.2 guided operations UI */ .cf-fiscal-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:.75rem 0}.cf-fiscal-mini>div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.75rem;padding:.55rem}.cf-fiscal-mini span,.cf-fiscal-label{display:block;color:#64748b;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.02em}.cf-fiscal-mini strong{display:block;color:#0f172a;font-size:.86rem;overflow-wrap:anywhere}.cf-fiscal-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.cf-fiscal-box{border:1px solid #e2e8f0;border-radius:1rem;padding:1rem;background:#f8fafc}.cf-fiscal-box.fiscal{border-color:#bfdbfe;background:#eff6ff}.cf-fiscal-box.contact{border-color:#e9d5ff;background:#faf5ff}.cf-readiness-card{border-left:4px solid #0d6efd}.cf-readiness-pill{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.45rem .7rem;font-weight:800;font-size:.84rem}.cf-readiness-pill.missing{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}.cf-readiness-pill.ok{background:#dcfce7;color:#166534;border:1px solid #86efac}.cf-next-step-panel{border:1px solid #bfdbfe;background:linear-gradient(135deg,#eff6ff,#fff);border-radius:1rem;padding:1rem}.cf-next-step-panel span{display:block;color:#64748b;font-size:.75rem;font-weight:900;text-transform:uppercase}.cf-next-step-panel strong{display:block;font-size:1.12rem;color:#0f172a}.cf-health-status{border-radius:1rem;padding:1rem;border:1px solid #e2e8f0;background:white}.cf-health-status.ok{border-color:#86efac;background:#f0fdf4}.cf-health-status.warn{border-color:#fde68a;background:#fffbeb}.cf-health-status.critical{border-color:#fecaca;background:#fef2f2}.cf-outbox-human-error{background:#fff7ed;border:1px solid #fed7aa;border-radius:.85rem;padding:.75rem}.cf-outbox-human-error strong{display:block;color:#9a3412}.cf-outbox-human-error .small{color:#7c2d12}@media(max-width:720px){.cf-fiscal-mini,.cf-fiscal-contact-grid{grid-template-columns:1fr}} /* v4.8.3 Operations card simplification */ .cf-work-next.compact{margin-top:.75rem;padding:.8rem .9rem;border-radius:.9rem;background:#f8fafc;border:1px solid var(--cf-line)} .cf-work-blockers{margin-top:.75rem;padding:.75rem .9rem;border-radius:.9rem;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412} .cf-work-blockers strong{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem} .cf-work-blockers ul{margin:.25rem 0 0 1rem;padding:0} .cf-fiscal-mini.compact{grid-template-columns:1fr} /* v4.8.9 Operations card polish */ .cf-work-card{gap:12px} .cf-work-card-head{border-bottom:1px solid #eef2f7;padding-bottom:.75rem} .cf-work-client{overflow-wrap:anywhere} .cf-work-next.compact{background:linear-gradient(135deg,#f8fafc,#ffffff)} .cf-work-actions{align-items:center;justify-content:space-between;border-top:1px solid #eef2f7;padding-top:.75rem;margin-top:.1rem} .cf-work-primary-action{font-weight:900;min-width:150px} .cf-work-secondary-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} .cf-work-secondary-actions .btn{font-weight:750} @media(max-width:720px){.cf-work-card-head{display:grid}.cf-work-actions{display:grid;gap:8px;justify-content:stretch}.cf-work-primary-action,.cf-work-secondary-actions .btn{width:100%}.cf-work-secondary-actions{display:grid;gap:8px;justify-content:stretch}} /* v4.9.5 reconciliation operation suggestions */ .cf-reconcile-suggestion { border: 1px solid rgba(37, 99, 235, 0.22); background: rgba(37, 99, 235, 0.06); border-radius: 12px; padding: 0.75rem; text-align: left; } .cf-reconcile-manual-link summary { cursor: pointer; font-weight: 700; } .cf-reconcile-manual-link[open] { border-top: 1px dashed rgba(100, 116, 139, 0.35); padding-top: 0.35rem; } /* v4.9.9 process timeline reconstruction */ .cf-reconcile-process-card{border:1px solid var(--cf-line);border-radius:16px;background:#fff;box-shadow:var(--cf-shadow);padding:16px;display:grid;gap:14px} .cf-reconcile-process-state{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .cf-reconcile-process-state>div{background:#f8fafc;border:1px solid var(--cf-line);border-radius:13px;padding:10px} .cf-reconcile-process-state span{display:block;color:var(--cf-muted);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em} .cf-reconcile-process-state strong{display:block;margin-top:.15rem;color:#0f172a} .cf-reconcile-timeline{display:grid;gap:8px;border-left:3px solid #dbeafe;padding-left:12px} .cf-reconcile-timeline-step{position:relative;background:#f8fafc;border:1px solid var(--cf-line);border-radius:12px;padding:10px} .cf-reconcile-timeline-step::before{content:"";position:absolute;left:-19px;top:14px;width:9px;height:9px;border-radius:999px;background:var(--cf-primary);box-shadow:0 0 0 3px #fff} @media(max-width:760px){.cf-reconcile-process-state{grid-template-columns:1fr}} /* v4.9.24 reconciliation explanations */ .cf-reconcile-explain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:#f8fafc;border:1px solid var(--cf-line);border-radius:14px;padding:10px} .cf-reconcile-explain strong{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--cf-muted);margin-bottom:4px} .cf-reconcile-explain ul{margin:0;padding-left:1.05rem;color:#334155;font-size:.84rem} .cf-reconcile-explain li+li{margin-top:2px} @media(max-width:760px){.cf-reconcile-explain{grid-template-columns:1fr}} /* v4.9.28 reconciliation decision board */ .cf-reconcile-decision-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.cf-decision-card{display:grid;gap:.25rem;text-decoration:none;color:#0f172a;background:#fff;border:1px solid var(--cf-line);border-radius:16px;padding:14px;box-shadow:var(--cf-shadow)}.cf-decision-card.active{border-color:#bfdbfe;background:linear-gradient(135deg,#eff6ff,#fff)}.cf-decision-card span{color:var(--cf-muted);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.cf-decision-card strong{font-size:1.6rem;line-height:1}.cf-decision-card small{color:var(--cf-muted);font-weight:650}.cf-reconcile-decision-note{display:grid;gap:.2rem;background:#eff6ff;border:1px solid #bfdbfe;border-radius:14px;padding:10px}.cf-reconcile-decision-note strong{color:#1d4ed8}.cf-reconcile-decision-note span{color:#475569;font-size:.86rem}@media(max-width:1000px){.cf-reconcile-decision-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.cf-reconcile-decision-grid{grid-template-columns:1fr}} """