/* Listas de Pedidos e Produtos no visual "Invoice" do Portu: cartões de indicadores no topo e a
   tabela num cartão branco, com cabeçalho discreto, linhas com divisória e paginação em pílulas.
   Só vale nas páginas marcadas com `pd-portu-list` no <body> (trait UsesPortuLayout); as telas de
   criar/editar usam também `pd-portu-form` (seção "Formulários" no fim deste arquivo);
   os cartões de indicadores usam `pd-kpis` (ver resources/views/filament/widgets/pd/kpis.blade.php).
   Cores: as da logo do SP Certificados. */

/* ===== Cartões de indicadores ===== */
.pd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.pd-kpis .pd-card { height: auto; }

.pd-kpi { display: flex; align-items: center; gap: 16px; padding: 20px 24px; }
.pd-kpi-tile {
    display: grid;
    place-items: center;
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    color: #fff;
    background: var(--pd-main);
}
.pd-kpi-tile.is-green { background: #4cbc9a; }
.pd-kpi-tile.is-gold { background: #ca922a; }
.pd-kpi-tile.is-red { background: #fe8289; }
.dark .pd-kpi-tile.is-main { background: rgba(143, 211, 217, 0.22); color: var(--pd-main); }
.pd-kpi-tile .pd-ico { width: 24px; height: 24px; }
.pd-kpi-text { min-width: 0; flex: 1; }
.pd-kpi-text small { display: block; font-size: 13px; color: var(--pd-muted); white-space: nowrap; }
.pd-kpi-text b { display: block; font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.pd-kpi-sub { flex: none; align-self: flex-end; font-size: 12px; font-weight: 500; color: var(--pd-muted); white-space: nowrap; }

/* ===== Tabela num cartão ("Lastest Invoice") ===== */
body.pd-portu-list {
    --pdl-main: #065a62;
    --pdl-line: #e4ecec;
    --pdl-soft: rgba(6, 90, 98, 0.045);
    --pdl-muted: rgba(6, 90, 98, 0.6);
}
.dark body.pd-portu-list, body.pd-portu-list.dark {
    --pdl-main: #8fd3d9;
    --pdl-line: rgba(255, 255, 255, 0.08);
    --pdl-soft: rgba(255, 255, 255, 0.04);
    --pdl-muted: rgba(220, 240, 242, 0.55);
}

.pd-portu-list .fi-ta-ctn {
    border-radius: 17px;
    border: 0;
    box-shadow: var(--pds-shadow) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    overflow: clip;
}

/* Barra de cima (exportar, filtros, busca) */
.pd-portu-list .fi-ta-header-ctn { border-bottom: 1px solid var(--pdl-line); }
.pd-portu-list .fi-ta-filters-above-content-ctn { border-bottom: 1px solid var(--pdl-line); }
.pd-portu-list .fi-ta-header-toolbar { border-bottom: 1px solid var(--pdl-line); }
.pd-portu-list .fi-ta-search-field .fi-input-wrp {
    border-radius: 12px;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    border: 1px solid rgba(6, 90, 98, 0.18);
}

/* Cabeçalho das colunas */
.pd-portu-list .fi-ta-table thead tr { background: transparent !important; }
.pd-portu-list .fi-ta-header-cell {
    padding-block: 16px;
    background: transparent !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--pdl-main);
    white-space: nowrap;
}
.pd-portu-list .fi-ta-header-cell .fi-ta-header-cell-sort-btn { color: inherit; }

/* Linhas */
.pd-portu-list .fi-ta-table tbody tr { transition: background-color .12s; }
.pd-portu-list .fi-ta-table tbody tr:hover { background: var(--pdl-soft); }
.pd-portu-list .fi-ta-table tbody tr.fi-selected { background: var(--pdl-soft); }
.pd-portu-list .fi-ta-table tbody tr.fi-selected > td:first-child { box-shadow: inset 3px 0 0 var(--pdl-main); }
.pd-portu-list .fi-ta-cell { padding-block: 14px; font-size: 13px; color: var(--pdl-main); }
.pd-portu-list .fi-ta-text-item { font-size: 13px; }
.pd-portu-list .fi-ta-table tbody { border-color: var(--pdl-line); }
.pd-portu-list .fi-ta-table tbody tr { border-color: var(--pdl-line); }

/* Selos de status */
.pd-portu-list .fi-badge {
    border-radius: 8px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 500;
}

/* Caixa de seleção: contorno e preenchimento na cor da logo */
.pd-portu-list .fi-checkbox-input {
    border-radius: 6px;
    border: 1.5px solid var(--pdl-main);
}
.pd-portu-list .fi-checkbox-input:checked,
.pd-portu-list .fi-checkbox-input:indeterminate {
    background-color: var(--pdl-main);
    border-color: var(--pdl-main);
}

/* Rodapé: "Showing 1 to 8 of 8" e paginação em pílulas */
.pd-portu-list .fi-ta-ctn-with-footer .fi-pagination,
.pd-portu-list .fi-pagination { padding: 14px 22px; border-top: 1px solid var(--pdl-line); }
.pd-portu-list .fi-pagination-overview { font-size: 13px; color: var(--pdl-muted); }
.pd-portu-list .fi-pagination-item-btn,
.pd-portu-list .fi-pagination-previous-btn,
.pd-portu-list .fi-pagination-next-btn {
    min-width: 36px;
    height: 36px;
    border-radius: 11px;
    border: 1.5px solid var(--pdl-main);
    color: var(--pdl-main);
    font-size: 13px;
}
.pd-portu-list .fi-pagination-item.fi-active .fi-pagination-item-btn {
    background: var(--pdl-main);
    border-color: var(--pdl-main);
    color: #fff;
    box-shadow: var(--pds-shadow);
}
.dark .pd-portu-list .fi-pagination-item.fi-active .fi-pagination-item-btn { color: #05262a; }

@media (prefers-reduced-motion: reduce) { .pd-portu-list .fi-ta-table tbody tr { transition: none; } }

/* ===== Formulários (criar/editar), abas e botões — visual Portu ===== */
body.pd-portu-form {
    --pdf-main: #065a62;
    --pdf-line: #e4ecec;
    --pdf-soft: rgba(6, 90, 98, 0.045);
    --pdf-muted: rgba(6, 90, 98, 0.6);
    --pdf-gold: #ca922a;
}
.dark body.pd-portu-form, body.pd-portu-form.dark {
    --pdf-main: #8fd3d9;
    --pdf-line: rgba(255, 255, 255, 0.08);
    --pdf-soft: rgba(255, 255, 255, 0.04);
    --pdf-muted: rgba(220, 240, 242, 0.55);
}

/* Migalhas e título da página */
.pd-portu-form .fi-breadcrumbs-item-label { font-size: 13px; color: var(--pdf-muted); }
.pd-portu-form .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label { color: var(--pdf-main); font-weight: 500; }
.pd-portu-form .fi-header-heading { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--pdf-main); }

/* Seções viram cartões brancos de cantos arredondados */
.pd-portu-form .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    border: 0;
    border-radius: 17px;
    box-shadow: var(--pds-shadow) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}
.pd-portu-form .fi-section-header { padding: 18px 24px; }
.pd-portu-form .fi-section-header-heading { font-size: 15px; font-weight: 600; color: var(--pdf-main); }
.pd-portu-form .fi-section-header-description { font-size: 13px; color: var(--pdf-muted); }
.pd-portu-form .fi-section-has-header > .fi-section-content-ctn { border-top: 1px solid var(--pdf-line); }
.pd-portu-form .fi-section-content { padding: 22px 24px; }

/* Campos */
.pd-portu-form .fi-fo-field-label-content { font-size: 13px; font-weight: 500; color: var(--pdf-main); }
.pd-portu-form .fi-fo-field-wrp-hint,
.pd-portu-form .fi-fo-field-wrp-helper-text { font-size: 12px; color: var(--pdf-muted); }
.pd-portu-form .fi-input-wrp {
    border-radius: 12px;
    border: 1px solid rgba(6, 90, 98, 0.18);
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    background: transparent;
    transition: border-color .12s, box-shadow .12s;
}
.pd-portu-form .fi-input-wrp:focus-within {
    border-color: var(--pdf-main);
    box-shadow: 0 0 0 3px rgba(6, 90, 98, 0.12) !important;
}
.pd-portu-form .fi-input-wrp:has([aria-invalid="true"]),
.pd-portu-form .fi-input-wrp.fi-invalid { border-color: #fe8289; }
.pd-portu-form .fi-input,
.pd-portu-form .fi-select-input { font-size: 13px; color: var(--pdf-main); }
.pd-portu-form .fi-input-wrp-prefix,
.pd-portu-form .fi-input-wrp-suffix { color: var(--pdf-muted); }
.pd-portu-form .fi-fo-toggle-buttons .fi-btn { border-radius: 10px; }

/* Interruptor e caixa de seleção na cor da logo */
.pd-portu-form .fi-toggle.fi-toggle-on { background-color: var(--pdf-main); }
.pd-portu-form .fi-checkbox-input {
    border-radius: 6px;
    border: 1.5px solid var(--pdf-main);
}
.pd-portu-form .fi-checkbox-input:checked,
.pd-portu-form .fi-checkbox-input:indeterminate {
    background-color: var(--pdf-main);
    border-color: var(--pdf-main);
}

/* Abas (formulário e gerenciadores de relação) em pílulas */
.pd-portu-form .fi-tabs:not(.fi-vertical) {
    gap: 6px;
    padding: 6px;
    border-radius: 14px;
    border: 0;
    box-shadow: var(--pds-shadow) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}
.pd-portu-form .fi-tabs-item { border-radius: 10px; font-size: 13px; }
.pd-portu-form .fi-tabs-item-label { color: var(--pdf-muted); font-weight: 500; }
.pd-portu-form .fi-tabs-item:hover { background: var(--pdf-soft); }
.pd-portu-form .fi-tabs-item.fi-active { background: var(--pdf-main); }
.pd-portu-form .fi-tabs-item.fi-active .fi-tabs-item-label,
.pd-portu-form .fi-tabs-item.fi-active .fi-icon { color: #fff; }
.dark .pd-portu-form .fi-tabs-item.fi-active .fi-tabs-item-label,
.dark .pd-portu-form .fi-tabs-item.fi-active .fi-icon { color: #05262a; }

/* Botões: primário na cor da logo, secundários em contorno */
.pd-portu-form .fi-btn { border-radius: 12px; font-size: 13px; font-weight: 500; }
.pd-portu-form .fi-btn.fi-color-primary:not(.fi-outlined) {
    background-color: var(--pdf-main);
    color: #fff;
    box-shadow: var(--pds-shadow);
}
.pd-portu-form .fi-btn.fi-color-primary:not(.fi-outlined):hover { background-color: #033a40; }
.dark .pd-portu-form .fi-btn.fi-color-primary:not(.fi-outlined) { color: #05262a; }
.dark .pd-portu-form .fi-btn.fi-color-primary:not(.fi-outlined):hover { background-color: #bfe6e9; }
.pd-portu-form .fi-btn.fi-color-gray:not(.fi-outlined) {
    background: transparent;
    border: 1.5px solid var(--pdf-main);
    color: var(--pdf-main);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000 !important;
}
.pd-portu-form .fi-btn.fi-color-gray:not(.fi-outlined):hover { background: var(--pdf-soft); }

/* Tabelas dos gerenciadores de relação dentro do formulário */
.pd-portu-form .fi-ta-ctn { border-radius: 17px; border: 0; box-shadow: var(--pds-shadow) !important; --tw-ring-shadow: 0 0 #0000 !important; overflow: clip; }
.pd-portu-form .fi-ta-header-cell { background: transparent !important; font-size: 12px; font-weight: 600; color: var(--pdf-main); }
.pd-portu-form .fi-ta-cell { font-size: 13px; color: var(--pdf-main); }
.pd-portu-form .fi-ta-table tbody tr:hover { background: var(--pdf-soft); }

@media (prefers-reduced-motion: reduce) { .pd-portu-form .fi-input-wrp { transition: none; } }

/* ===== Automações WhatsApp (app/Filament/Pages/WhatsAppAutomations.php) ===== */
.pd-autos-page { display: grid; gap: 22px; margin-bottom: 26px; }
/* 4 indicadores numa linha até ~1280px (o padrão de 240px quebrava em 3 + 1) */
.pd-autos-page .pd-kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Aviso de integração não configurada: cartão com faixa e ícone dourados */
.pd-notice { display: flex; align-items: center; gap: 16px; height: auto; padding: 16px 22px; border-left: 3px solid var(--pd-gold); }
.pd-notice p { font-size: 13px; line-height: 1.5; }

.pd-autos-title { margin-top: 6px; }
.pd-autos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }

/* Cartão da automação ("Contacts" do Portu): ícone + nome + selo, gatilho, detalhes e botão */
.pd-auto { display: flex; flex-direction: column; height: auto; padding: 20px 22px; }
.pd-auto-head { align-items: center; gap: 14px; }
.pd-auto-head .pd-kpi-tile { width: 44px; height: 44px; border-radius: 13px; }
.pd-auto-head .pd-kpi-tile .pd-ico { width: 21px; height: 21px; }
.pd-auto-head .pd-list-text b { font-size: 14px; }
.pd-auto.is-off .pd-auto-head .pd-kpi-tile { background: var(--pd-soft); color: var(--pd-muted); }

/* Modo escuro: ligada com o verde-azulado cheio (o translúcido dos indicadores apagava o ícone e
   ficava igual ao de desligada); desligada só com contorno. */
.dark .pd-auto:not(.is-off) .pd-auto-head .pd-kpi-tile.is-main { background: #2f8a91; color: #fff; }
.dark .pd-auto.is-off .pd-auto-head .pd-kpi-tile { background: transparent; box-shadow: inset 0 0 0 1px var(--pd-line); }

.pd-badge.is-on { background: #4cbc9a; }
.pd-badge.is-off { background: var(--pd-soft); color: var(--pd-muted); }

.pd-auto-trigger { margin-top: 12px; font-size: 12px; line-height: 1.5; }

.pd-auto-details { margin-top: 12px; border-top: 1px solid var(--pd-line); }
.pd-auto-details li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 12px; }
.pd-auto-details li > span { flex: none; white-space: nowrap; }
.pd-auto-details b { min-width: 0; font-size: 13px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pd-auto-details b.is-empty { font-weight: 400; color: var(--pd-muted); }

.pd-auto-actions { margin-top: auto; padding-top: 14px; }
.pd-auto-actions .fi-btn { width: 100%; justify-content: center; }