2440 lines
68 KiB
Python
2440 lines
68 KiB
Python
"""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}}
|
|
"""
|