/* ============================================================
   CSS das paginas de Features (Components/Pages/Features/**)
   Migrado de .razor.css isolados para CSS global organizado.
   ============================================================ */

/* ===== Aprender/Atualizacoes/AtualizacoesPage.razor.css ===== */
.upd-timeline {
    display: flex;
    flex-direction: column;
}

.upd-item {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

    .upd-item:last-child .upd-line {
        display: none;
    }

.upd-item-aside {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0;
    width: 44px;
}

.upd-tipo-icon {
    align-items: center;
    border-radius: 10px;
    display: flex;
    font-size: 1.2rem;
    height: 44px;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
}

.upd-func {
    background: rgba(99,102,241,.1);
    color: #6366f1;
}

.upd-melhoria {
    background: rgba(16,185,129,.1);
    color: #10b981;
}

.upd-correcao {
    background: rgba(245,158,11,.1);
    color: #f59e0b;
}

.upd-seguranca {
    background: rgba(239,68,68,.1);
    color: #ef4444;
}

.upd-line {
    background: var(--border-color,#e5e7eb);
    flex: 1;
    margin-top: 8px;
    width: 2px;
}

.upd-item-body {
    background: var(--bg-card,#fff);
    border: 1px solid var(--border-color,#e5e7eb);
    border-radius: 12px;
    flex: 1;
    min-width: 0;
    padding: 1.1rem 1.25rem;
    padding-bottom: 0.5rem;
}

.upd-item-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.upd-titulo {
    color: var(--text-primary,#111827);
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.upd-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.upd-tipo-badge {
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
}

.badge-func {
    background: rgba(99,102,241,.1);
    color: #6366f1;
}

.badge-melhoria {
    background: rgba(16,185,129,.1);
    color: #10b981;
}

.badge-correcao {
    background: rgba(245,158,11,.1);
    color: #f59e0b;
}

.badge-seguranca {
    background: rgba(239,68,68,.1);
    color: #ef4444;
}

.upd-versao {
    background: var(--bg-secondary,#f3f4f6);
    border-radius: 4px;
    color: var(--text-secondary,#6b7280);
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
}

.upd-destaque {
    color: #f59e0b;
    font-size: 0.85rem;
}

.upd-data {
    color: var(--text-secondary,#9ca3af);
    font-size: 0.78rem;
    margin: 0 0 0.75rem;
}

.upd-item:last-child .upd-item-body {
    border-bottom: none;
}

.upd-descricao {
    color: var(--text-secondary,#374151);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0.5rem 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.upd-capa {
    display: block;
    margin: 0 0 0.85rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color,#e5e7eb);
    background: var(--bg-secondary,#f3f4f6);
    max-width: 460px;
}

.upd-capa img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform .2s ease;
}

.upd-capa:hover img {
    transform: scale(1.02);
}

.upd-titulo a {
    color: inherit;
    text-decoration: none;
}

.upd-titulo a:hover {
    text-decoration: underline;
}

.upd-ler-mais {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary,#325bb3);
    text-decoration: none;
    margin-top: 0.15rem;
}

.upd-ler-mais:hover {
    text-decoration: underline;
}

.upd-video-link {
    align-items: center;
    background: var(--bg-secondary,#f9fafb);
    border: 1px solid var(--border-color,#e5e7eb);
    border-radius: 8px;
    display: flex;
    gap: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    margin-top: 0.75rem;
    transition: border-color .15s;
}

    .upd-video-link:hover {
        border-color: var(--primary,#325bb3);
    }

.upd-video-thumb {
    width: 100px;
    aspect-ratio: 16/9;
    object-fit: cover;
    flex-shrink: 0;
}

.upd-video-info {
    align-items: center;
    color: var(--primary,#325bb3);
    display: flex;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.upd-month-header {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary,#9ca3af);
    padding: 0.75rem 0 0.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-color,#e5e7eb);
}

    .upd-month-header:first-child {
        border-top: none;
    }

.ev-empty {
    padding: 5rem 2rem;
    text-align: center;
}

    .ev-empty i {
        color: var(--text-secondary,#d1d5db);
        display: block;
        font-size: 3.5rem;
        margin-bottom: 1rem;
    }

    .ev-empty h3 {
        color: var(--text-primary,#111827);
        font-size: 1.1rem;
        margin-bottom: 0.4rem;
    }

    .ev-empty p {
        color: var(--text-secondary,#6b7280);
        font-size: 0.88rem;
    }

/* ===== Aprender/Eventos/EventosPage.razor.css ===== */
.ev-filter-group {
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}

.ev-filter-label {
    color: var(--text-secondary,#9ca3af);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}

.ev-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ev-filter-btn {
    align-items: center;
    background: var(--bg-card,#fff);
    border: 1.5px solid var(--border-color,#e5e7eb);
    border-radius: 10px;
    color: var(--text-secondary,#6b7280);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 600;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    transition: all .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

    .ev-filter-btn i {
        font-size: 0.85rem;
    }

    .ev-filter-btn:hover {
        border-color: var(--primary,#325bb3);
        color: var(--primary,#325bb3);
        background: rgba(50,91,179,.04);
    }

    .ev-filter-btn.active {
        background: var(--primary,#325bb3);
        border-color: var(--primary,#325bb3);
        color: #fff;
        box-shadow: 0 2px 8px rgba(50,91,179,.25);
    }

@@media (max-width: 480px) {
    .ev-filter-bar {
        gap: 0.4rem;
    }

    .ev-filter-btn {
        padding: 0.45rem 0.85rem;
        font-size: 0.78rem;
    }
}

.ev-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

@@media (max-width: 480px) {
    .ev-grid {
        grid-template-columns: 1fr;
    }
}

.ev-card {
    background: var(--bg-card,#fff);
    border: 1px solid var(--border-color,#e5e7eb);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
}

    .ev-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,.1);
        transform: translateY(-3px);
    }

.ev-card-thumb {
    height: 160px;
    overflow: hidden;
    position: relative;
    background: var(--bg-secondary,#f3f4f6);
}

    .ev-card-thumb img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

.ev-card-placeholder {
    align-items: center;
    color: var(--text-secondary,#d1d5db);
    display: flex;
    font-size: 3rem;
    height: 100%;
    justify-content: center;
}

.ev-modalidade-pill {
    background: rgba(0,0,0,.55);
    border-radius: 6px;
    bottom: 8px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    left: 8px;
    padding: 0.2rem 0.5rem;
    position: absolute;
}

.ev-encerrado-overlay {
    align-items: center;
    background: rgba(0,0,0,.5);
    bottom: 0;
    color: #fff;
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.ev-card-body {
    padding: 1.1rem;
}

.ev-card-data {
    color: var(--primary,#325bb3);
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.ev-card-titulo {
    color: var(--text-primary,#111827);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 0.35rem;
}

.ev-card-instrutor {
    color: var(--text-secondary,#6b7280);
    font-size: 0.8rem;
    margin: 0 0 0.75rem;
}

.ev-card-footer {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ev-preco {
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
}

.ev-gratuito {
    background: rgba(16,185,129,.1);
    color: #10b981;
}

.ev-pago {
    background: rgba(99,102,241,.1);
    color: #6366f1;
}

.ev-inscritos {
    color: var(--text-secondary,#9ca3af);
    font-size: 0.75rem;
}

    .ev-inscritos i {
        color: var(--primary,#325bb3);
    }

.ev-cert {
    color: #a855f7;
    font-size: 1rem;
}

.ev-empty {
    padding: 5rem 2rem;
    text-align: center;
}

    .ev-empty i {
        color: var(--text-secondary,#d1d5db);
        display: block;
        font-size: 3.5rem;
        margin-bottom: 1rem;
    }

    .ev-empty h3 {
        color: var(--text-primary,#111827);
        font-size: 1.1rem;
        margin-bottom: 0.4rem;
    }

    .ev-empty p {
        color: var(--text-secondary,#6b7280);
        font-size: 0.88rem;
    }

/* ===== Encomendas/EncomendasDetalhePage.razor.css ===== */
.rd-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 24px;
}

.rd-header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Botões de ação ── */

.wf-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    text-decoration: none;
}

    .wf-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.wf-btn-outline {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

    .wf-btn-outline:hover:not(:disabled) {
        border-color: var(--primary);
        color: var(--primary);
    }

.wf-btn-primary {
    background: var(--primary);
    color: #fff;
}

    .wf-btn-primary:hover:not(:disabled) {
        opacity: 0.9;
        color: #fff;
    }

.wf-btn-success {
    background: #10b981;
    color: #fff;
}

    .wf-btn-success:hover:not(:disabled) {
        opacity: 0.9;
        color: #fff;
    }

/* FAB só existe no mobile */
.pd-fab-mobile {
    display: none;
}

.rd-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.rd-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
}

.rd-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
}

.rd-summary-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rd-summary-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rd-summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rd-section {
    margin-bottom: 24px;
}

.rd-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rd-count-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary, #f8f9fa);
    padding: 2px 8px;
    border-radius: 20px;
}

/* ── Tabs do detalhe ── */

.rd-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    overflow-x: auto;
    scrollbar-width: none;
}

.rd-tabs::-webkit-scrollbar { display: none; }

.rd-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.rd-tab:hover { color: var(--text-primary); }

.rd-tab--ativa {
    color: var(--primary, #325bb3);
    border-bottom-color: var(--primary, #325bb3);
}

.rd-tab__count {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-secondary, #f8f9fa);
    padding: 1px 7px;
    border-radius: 20px;
}

.rd-tab--ativa .rd-tab__count {
    color: #fff;
    background: var(--primary, #325bb3);
}

.rd-tab__sinal {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 rgba(239, 68, 68, 0.5);
    animation: rd-tab-pulse 1.8s ease-out infinite;
}

@keyframes rd-tab-pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ── Estado badges ── */

.rd-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.rd-estado-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rd-estado--pendente {
    color: #f59e0b;
}

    .rd-estado--pendente .rd-estado-dot {
        background: #f59e0b;
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    }

.rd-estado--producao {
    color: #3b82f6;
}

    .rd-estado--producao .rd-estado-dot {
        background: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

.rd-estado--concluida {
    color: #10b981;
}

    .rd-estado--concluida .rd-estado-dot {
        background: #10b981;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    }

.rd-estado--entregue {
    color: #6366f1;
}

    .rd-estado--entregue .rd-estado-dot {
        background: #6366f1;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    }

.rd-estado--paga {
    color: #0d9488;
}

    .rd-estado--paga .rd-estado-dot {
        background: #0d9488;
        box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
    }

.rd-estado--cancelada {
    color: #ef4444;
}

    .rd-estado--cancelada .rd-estado-dot {
        background: #ef4444;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    }

/* ── Eventos ── */

.rd-eventos-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rd-evento-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    background: linear-gradient(135deg, var(--card-bg), rgba(50, 91, 179, 0.03));
}

.rd-evento-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.rd-evento-title {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

    .rd-evento-title strong {
        font-size: 0.95rem;
        color: var(--text-primary);
    }

    .rd-evento-title small {
        font-size: 0.78rem;
        color: var(--text-secondary);
    }

.rd-evento-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 12px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

    .rd-evento-meta i {
        color: var(--primary);
        margin-right: 4px;
    }

.rd-evento-totais {
    margin-top: 12px;
}

.rd-evento-obs {
    margin: 12px 0 0;
    font-size: 0.83rem;
    color: var(--text-secondary);
    background: rgba(50, 91, 179, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
}

    .rd-evento-obs i {
        margin-right: 4px;
    }

/* ── Itens ── */

.rd-items-list {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card-bg);
}

.rd-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: 0.85rem;
}

    .rd-item-row + .rd-item-row {
        border-top: 1px solid var(--border);
    }

.rd-item-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.rd-item-qty {
    text-align: right;
    color: var(--text-secondary);
    white-space: nowrap;
}

.rd-item-valor {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 80px;
}

/* ── Custos / totais ── */

.rd-costos-grid {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
}

.rd-custo-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--text-primary);
    padding: 8px 0;
}

    .rd-custo-row + .rd-custo-row {
        border-top: 1px solid var(--border);
    }

.rd-custo-total {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary);
}

.rd-custo-destaque {
    font-weight: 700;
    font-size: 0.95rem;
    color: #10b981;
    border-top: 2px solid var(--border);
}

/* ── Cartão informativo ── */

.rd-impacto-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: linear-gradient(135deg, var(--card-bg), rgba(50, 91, 179, 0.04));
}

.rd-impacto-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.88rem;
}

    .rd-impacto-row span {
        color: var(--text-secondary);
    }

    .rd-impacto-row strong {
        color: var(--primary);
        font-size: 0.95rem;
    }

.rd-partilha-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 12px;
    background: rgba(50, 91, 179, 0.06);
    border-radius: 10px;
    flex-wrap: wrap;
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .empty-state i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .empty-state h3 {
        margin: 0 0 16px;
    }

@media (max-width: 768px) {
    /* No mobile as ações vivem no FAB */
    .rd-header-actions {
        display: none;
    }

    .pd-fab-mobile {
        display: block;
    }
}

/* ── Recorrência card ── */

.rd-rep-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.rd-rep-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.rd-rep-title {
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-primary);
}

.rd-rep-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rd-rep-btn {
    border: none;
    background: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.rd-rep-btn:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

/* Toggle switch */

.rd-rep-toggle {
    position: relative;
    display: inline-flex;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

.rd-rep-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.rd-rep-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 22px;
    transition: background 0.2s;
}

.rd-rep-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.rd-rep-toggle input:checked + .rd-rep-slider {
    background: var(--primary, #325bb3);
}

.rd-rep-toggle input:checked + .rd-rep-slider::before {
    transform: translateX(18px);
}

.rd-rep-toggle input:disabled + .rd-rep-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.rd-rep-body {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rd-rep-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.83rem;
}

.rd-rep-meta {
    color: var(--text-secondary);
    min-width: 7.5rem;
}

.rd-rep-meta-value {
    color: var(--text-primary);
    font-weight: 500;
}

.rd-rep-off {
    margin-top: 0.75rem;
    font-size: 0.83rem;
    color: var(--text-secondary);
}

/* Cancel button color */

.wf-btn-danger {
    background: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

.wf-btn-danger:hover {
    opacity: 0.88;
    background: #dc3545;
    color: #fff;
}

@container layout (max-width: 640px) {
    .rd-summary-grid {
        grid-template-columns: 1fr;
    }

    .rd-item-row {
        flex-wrap: wrap;
    }

    .rd-item-name {
        flex: 1 1 100%;
        margin-bottom: 4px;
    }

    .rd-item-qty {
        flex: 1;
        text-align: left;
    }
}

/* ===== Encomendas/EncomendasPage.razor.css ===== */
.pedidos-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pedidos-search {
    position: relative;
}

.pedidos-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1rem;
    pointer-events: none;
}

.pedidos-search-input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.pedidos-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.12);
}

.pedidos-search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.pedidos-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pedidos-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
}

.pedidos-filters::-webkit-scrollbar {
    display: none;
}

.pedidos-filter-chip {
    flex-shrink: 0;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.pedidos-filter-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.pedidos-filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pedidos-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pedidos-summary-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.pedidos-summary-card strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.pedidos-summary-card span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pedidos-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pedido-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.1s;
    touch-action: pan-y;
    user-select: none;
}

.pedido-card:active {
    transform: scale(0.99);
}

@media (hover: hover) {
    .pedido-card:hover {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
}

.pedido-card-inner {
    position: relative;
    z-index: 2;
    background: var(--card-bg);
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.pedido-card-inner.swiped-right {
    transform: translateX(110px);
}

.pedido-card-inner.swiped-left {
    transform: translateX(-110px);
}

.pedido-swipe-right,
.pedido-swipe-left {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    padding: 0 12px;
    transition: opacity 0.15s;
}

.pedido-swipe-right {
    right: auto;
    left: 0;
    width: 110px;
    background: #10b981;
    border-radius: 12px 0 0 12px;
}

.pedido-swipe-left {
    left: auto;
    right: 0;
    width: 110px;
    background: var(--primary);
    border-radius: 0 12px 12px 0;
}

.pedido-swipe-left-danger {
    background: #ef4444;
}

.pedido-swipe-right i,
.pedido-swipe-left i {
    font-size: 1.1rem;
}

.pedido-card-body {
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.pedido-card-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

.pedido-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    background: var(--surface-subtle);
    color: var(--primary);
}

.pedido-card-info {
    flex: 1;
    min-width: 0;
}

.pedido-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pedido-card-client {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pedido-card-client i {
    font-size: 0.78rem;
}

.pedido-card-convidados {
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.pedido-card-convidados i {
    font-size: 0.78rem;
}

.pedido-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pedido-card-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.pedido-card-date i {
    font-size: 0.78rem;
}

.pedido-card-amount {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pedido-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.pedido-card-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px transparent;
}

.pedido-badge-producao {
    color: #3b82f6;
}

.pedido-badge-producao .pedido-card-badge-dot {
    background: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.pedido-badge-concluida {
    color: #10b981;
}

.pedido-badge-concluida .pedido-card-badge-dot {
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.pedido-badge-entregue {
    color: #6366f1;
}

.pedido-badge-entregue .pedido-card-badge-dot {
    background: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.pedido-badge-paga {
    color: #0d9488;
}

.pedido-badge-paga .pedido-card-badge-dot {
    background: #0d9488;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
}

.pedido-badge-cancelada {
    color: #ef4444;
}

.pedido-badge-cancelada .pedido-card-badge-dot {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.pedido-badge-pendente {
    color: #f59e0b;
}

.pedido-badge-pendente .pedido-card-badge-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.pedido-pagar-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: #0d9488;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
    justify-content: center;
}

.pedido-pagar-btn:hover {
    background: #0f766e;
}

.pedido-pagar-btn i {
    font-size: 0.85rem;
}

.pedidos-continuo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pedidos-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.pedidos-empty i {
    font-size: 3rem;
    color: var(--text-secondary);
    opacity: 0.4;
}

.pedidos-empty h3 {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 12px 0 4px;
}

.pedidos-empty p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.7;
    margin: 0;
}

.pedidos-fab {
    position: fixed;
    bottom: 84px;
    right: 20px;
    z-index: 100;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(50, 91, 179, 0.35);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.pedidos-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 24px rgba(50, 91, 179, 0.45);
}

.pedidos-fab:active {
    transform: scale(0.94);
}

.pedidos-pagination {
    display: flex;
    justify-content: center;
    padding: 8px 0 16px;
}

@container layout (max-width: 768px) {
    .pedidos-summary {
        gap: 8px;
    }

    .pedidos-summary-card {
        padding: 10px;
    }

    .pedidos-summary-card strong {
        font-size: 1.2rem;
    }

    .pedidos-list {
        gap: 8px;
    }

    /* ── Card minimalista ── */

    .pedido-card-body {
        flex-wrap: wrap;
        padding: 12px 14px;
        gap: 10px;
    }

    .pedido-card-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        font-size: 1.05rem;
    }

    .pedido-card-title {
        font-size: 0.92rem;
    }

    .pedido-card-client {
        margin-bottom: 4px;
    }

    /* Data à esquerda, valor à direita — uma linha limpa */
    .pedido-card-meta {
        justify-content: space-between;
        gap: 8px;
    }

    .pedido-card-amount {
        font-size: 0.95rem;
    }

    /* Estado + Pagar passam para uma linha própria no fundo do card */
    .pedido-card-right {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-left: 0;
        padding-top: 10px;
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .pedido-card-badge {
        font-size: 0.75rem;
    }

    .pedido-pagar-btn {
        margin-top: 0;
        width: auto;
        padding: 6px 14px;
        flex-shrink: 0;
    }
}

/* ===== Encomendas/EncomendasWizardPage.razor.css ===== */
/* CSS for PedidosWizardPage component */

.wiz-breadcrumbs {
    margin-bottom: 16px;
}

.wiz-breadcrumbs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--primary);
    text-decoration: none;
    padding: 6px 0;
    transition: opacity 0.12s;
}

.wiz-breadcrumbs a:hover {
    opacity: 0.8;
}

.wizard-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 24px;
}

/* Sem min-width:0, conteúdo largo (tabela de itens) alarga a coluna da grid
   para lá do viewport em vez de ativar o overflow-x do .wiz-table-wrap */
.wizard-main {
    min-width: 0;
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px 0;
    overflow-x: auto;
    gap: 4px;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: default;
    min-width: 60px;
    flex-shrink: 0;
}

    .wizard-step.done {
        cursor: pointer;
    }

    .wizard-step.active {
        cursor: pointer;
    }

.wizard-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--border);
    color: var(--text-secondary);
    transition: all 0.2s;
}

.wizard-step.active .wizard-step-circle {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(50,91,179,0.2);
}

.wizard-step.done .wizard-step-circle {
    background: #10b981;
    color: #fff;
}

.wizard-step-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.wizard-step.active .wizard-step-label {
    color: var(--primary);
    font-weight: 600;
}

.wizard-body {
    min-height: 300px;
    animation: fadeIn 0.2s ease;
}

.wiz-step-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.wiz-step-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 20px;
}

.wiz-cliente-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.wiz-toggle-btn {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .wiz-toggle-btn.active {
        border-color: var(--primary);
        background: rgba(50,91,179,0.06);
        color: var(--primary);
    }

.wiz-cliente-info {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary, #f8f9fa);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wiz-cliente-info-row {
    font-size: 0.85rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .wiz-cliente-info-row i {
        color: var(--text-secondary);
        width: 16px;
    }

.wiz-field-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wiz-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .wiz-field label {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.wiz-input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

    .wiz-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50,91,179,0.1);
    }

.wiz-select {
    cursor: pointer;
    appearance: auto;
}

.wiz-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wiz-field-row-tri {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.required {
    color: #ef4444;
}

.wiz-search-box {
    position: relative;
    margin-bottom: 16px;
}

    .wiz-search-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
    }

    .wiz-search-box .wiz-input {
        padding-left: 36px;
    }

.wiz-product-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 20px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

    .wiz-product-scroll::-webkit-scrollbar {
        height: 4px;
    }

    .wiz-product-scroll::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px;
    }

.wiz-product-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    cursor: pointer;
    text-align: left;
    transition: all 0.12s;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 130px;
}

    .wiz-product-card:hover {
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(50,91,179,0.1);
    }

    .wiz-product-card strong {
        font-size: 0.85rem;
        color: var(--text-primary);
    }

    .wiz-product-card span {
        font-size: 0.78rem;
        color: var(--primary);
        font-weight: 600;
    }

.wiz-product-add {
    align-items: center;
    justify-content: center;
    border-style: dashed;
    color: var(--primary);
    min-width: 80px;
}

    .wiz-product-add i {
        font-size: 1.1rem;
    }

    .wiz-product-add span {
        font-size: 0.78rem;
        font-weight: 600;
    }

.wiz-empty-search {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

    .wiz-empty-search p {
        margin: 0 0 12px;
    }

.wiz-section-subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 16px 0 10px;
}

.wiz-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wiz-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
}

.wiz-item-name {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wiz-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.wiz-input-sm {
    width: 60px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    text-align: center;
    outline: none;
}

    .wiz-input-sm:focus {
        border-color: var(--primary);
    }

.wiz-item-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 70px;
    text-align: right;
}

.wiz-item-remove {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
    opacity: 0.6;
    transition: opacity 0.15s;
}

    .wiz-item-remove:hover {
        opacity: 1;
    }

.wiz-textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.wiz-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

    .wiz-toggle-row span {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-primary);
    }

.wiz-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

    .wiz-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.wiz-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border);
    border-radius: 22px;
    transition: 0.2s;
}

    .wiz-switch-slider::before {
        content: "";
        position: absolute;
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: 0.2s;
    }

.wiz-switch input:checked + .wiz-switch-slider {
    background: var(--primary);
}

    .wiz-switch input:checked + .wiz-switch-slider::before {
        transform: translateX(18px);
    }

.wiz-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
}

.wiz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .wiz-table thead {
        background: var(--bg-secondary, #f8f9fa);
    }

    .wiz-table th {
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .wiz-table td {
        padding: 8px 12px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
    }

.col-qty, .col-price, .col-subtotal {
    text-align: right;
}

.col-actions {
    width: 40px;
}

.cell-name {
    font-weight: 500;
    color: var(--text-primary);
    min-width: 100px;
}

.wiz-item-name-wrap {
    align-items: center;
    display: flex;
    gap: 8px;
}

.wiz-item-thumb {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    height: 36px;
    overflow: hidden;
    padding: 0;
    width: 36px;
}

.wiz-item-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.wiz-item-thumb--empty {
    align-items: center;
    color: var(--text-secondary);
    cursor: default;
    display: flex;
    font-size: 1rem;
    justify-content: center;
}

.cell-qty {
    width: 80px;
    text-align: center;
}

.cell-price, .cell-subtotal {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-primary);
}

.cell-action {
    text-align: center;
}

.wiz-input-table {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    text-align: center;
    outline: none;
}

    .wiz-input-table:focus {
        border-color: var(--primary);
    }

/* ── Itens em cards (só mobile) ── */

.wiz-items-cards {
    display: none;
}

.wiz-item-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    padding: 10px 12px;
}

.wiz-item-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.wiz-item-card-name {
    font-size: 0.88rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.wiz-item-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wiz-item-card-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

    .wiz-item-card-qty .wiz-input-table {
        width: 56px;
    }

.wiz-item-card-unit {
    white-space: nowrap;
}

.wiz-item-card-subtotal {
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.wiz-items-subtotal {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 8px;
    background: var(--card-bg);
}

.wiz-empty-items {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary);
}

    .wiz-empty-items i {
        font-size: 2rem;
        display: block;
        margin-bottom: 8px;
        opacity: 0.4;
    }

    .wiz-empty-items p {
        margin: 0 0 12px;
        font-size: 0.88rem;
    }

.wiz-empty-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 8px;
    border: 1px dashed var(--primary);
    background: transparent;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
}

    .wiz-empty-add-btn:hover {
        background: rgba(50, 91, 179, 0.06);
        border-style: solid;
    }

/* ── Condição de pagamento ── */

.wiz-condicao-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

    .wiz-condicao-row .wiz-select {
        flex: 1;
        min-width: 0;
    }

    .wiz-condicao-row .wiz-empty-add-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

.wiz-condicao-details {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary, #f8f9fa);
    padding: 4px 14px;
    margin-top: 12px;
}

.wiz-condicao-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
}

    .wiz-condicao-detail:last-child {
        border-bottom: none;
    }

    .wiz-condicao-detail span {
        color: var(--text-secondary);
    }

        .wiz-condicao-detail span i {
            margin-right: 4px;
            color: var(--primary);
        }

    .wiz-condicao-detail strong {
        color: var(--text-primary);
        text-align: right;
    }

.wiz-field-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

    .wiz-field-hint span {
        color: var(--text-secondary);
    }

.wiz-resumo-obs {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 4px;
}

.wiz-discount-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #065f46;
}

    .wiz-discount-info span {
        font-weight: 600;
    }

.wiz-totals-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
    margin-top: 12px;
}

.wiz-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--text-primary);
    padding: 4px 0;
}

.wiz-total-final {
    font-size: 1.05rem;
    font-weight: 700;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 4px;
}

.wiz-resumo-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
    margin-bottom: 10px;
}

    .wiz-resumo-card h3 {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-secondary);
        margin: 0 0 6px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .wiz-resumo-card p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text-primary);
    }

.wiz-resumo-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-primary);
    padding: 4px 0;
}

    .wiz-resumo-item + .wiz-resumo-item {
        border-top: 1px solid var(--border);
    }

.wizard-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.wf-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
}

    .wf-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.wf-btn-outline {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

    .wf-btn-outline:hover:not(:disabled) {
        border-color: var(--primary);
        color: var(--primary);
    }

.wf-btn-primary {
    background: var(--primary);
    color: #fff;
}

    .wf-btn-primary:hover:not(:disabled) {
        opacity: 0.9;
    }

.wf-btn-success {
    background: #10b981;
    color: #fff;
}

    .wf-btn-success:hover:not(:disabled) {
        opacity: 0.9;
    }

.wiz-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
}

.wiz-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    min-width: 320px;
    max-width: 90vw;
    z-index: 1000;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

    .wiz-modal h3 {
        margin: 0 0 16px;
        font-size: 1.05rem;
        color: var(--text-primary);
    }

.wiz-modal-field {
    margin-bottom: 12px;
}

    .wiz-modal-field label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
    }

.wiz-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

.wiz-tip-panel {
    display: none;
}

.wiz-tip-inline {
    display: block;
    margin-bottom: 16px;
}

.wiz-tip-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(50,91,179,0.06);
    border: 1px solid rgba(50,91,179,0.15);
}

.wiz-tip-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(50,91,179,0.12);
    color: var(--primary);
    font-size: 1.1rem;
}

.wiz-tip-content {
    flex: 1;
}

    .wiz-tip-content strong {
        display: block;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 4px;
    }

    .wiz-tip-content p {
        margin: 0;
        font-size: 0.82rem;
        line-height: 1.45;
        color: var(--text-secondary);
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@container layout (min-width: 900px) {
    .wizard-shell {
        grid-template-columns: 1fr 260px;
    }

    .wiz-tip-panel {
        display: block;
        padding-top: 76px;
    }

        .wiz-tip-panel .wiz-tip-card {
            position: sticky;
            top: 24px;
        }

    .wiz-tip-inline {
        display: none;
    }
}

@container layout (max-width: 640px) {
    .wizard-step {
        min-width: 48px;
    }

    .wizard-step-circle {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .wizard-step-label {
        font-size: 0.6rem;
    }

    .wiz-field-row {
        grid-template-columns: 1fr;
    }

    .wiz-field-row-tri {
        grid-template-columns: 1fr;
    }

    .wiz-product-scroll {
        gap: 6px;
    }

    /* Tabela dá lugar aos cards — sem scroll horizontal no mobile */
    .wiz-table-wrap {
        display: none;
    }

    .wiz-items-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}

/* ── Top switch (recorrência) ── */

.wiz-top-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 8px;
    background: rgba(50, 91, 179, 0.04);
    border: 1px solid rgba(50, 91, 179, 0.12);
    border-radius: 10px;
}

.wiz-top-switch span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Repetição config (passo 5) ── */

.wiz-rep-config {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
    margin-bottom: 10px;
}

.wiz-rep-freq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.wiz-rep-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.12s;
}

.wiz-rep-radio input {
    accent-color: var(--primary);
}

.wiz-rep-radio.active {
    border-color: var(--primary);
    background: rgba(50, 91, 179, 0.06);
}

.wiz-rep-radio:hover {
    border-color: var(--primary);
}

.wiz-rep-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wiz-rep-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wiz-rep-row label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.wiz-rep-radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 640px) {
    .wiz-rep-freq {
        grid-template-columns: 1fr 1fr;
    }
}
/* ===== Financas/CondicoesPagamentoPage.razor.css ===== */
/* ── Shell ── */

.rc-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 20px;
}

/* ── Toolbar / Search ── */

.rc-toolbar {
    margin-bottom: 16px;
}

.rc-search {
    position: relative;
    max-width: 400px;
}

    .rc-search i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        z-index: 1;
    }

.rc-search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

    .rc-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.1);
    }

.rc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
}

/* ── Filters ── */

.rc-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rc-filter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
}

    .rc-filter-btn.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

    .rc-filter-btn:hover:not(.active) {
        border-color: var(--primary);
        color: var(--primary);
    }

/* ── Summary ── */

.rc-summary {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rc-summary-item {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

    .rc-summary-item strong {
        color: var(--text-primary);
    }

/* ── Desktop Table ── */

.rc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .rc-table thead {
        background: var(--bg-secondary, #f8f9fa);
    }

    .rc-table th {
        padding: 12px 14px;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .rc-table td {
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
    }

.rc-table-row {
    cursor: pointer;
    transition: background 0.1s;
}

    .rc-table-row:hover {
        background: rgba(50, 91, 179, 0.03);
    }

.rc-cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

    .rc-cell-name div {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .rc-cell-name strong {
        font-size: 0.88rem;
        color: var(--text-primary);
    }

    .rc-cell-name small {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

.rc-cell-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 91, 179, 0.08);
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.rc-cell-number {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.rc-cell-destaque {
    color: #10b981;
}

.rc-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.rc-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.12s;
    font-size: 0.9rem;
}

    .rc-action-btn:hover {
        background: var(--bg-secondary, #f8f9fa);
        color: var(--primary);
    }

.rc-action-btn--danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* ── Badges ── */

.rc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rc-badge--ok {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
}

.rc-badge--atencao {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

.rc-badge--info {
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
}

.rc-badge--cancelado {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    align-self: flex-start;
    margin-top: 2px;
}

/* Recebimento cancelado — atenuado e com valor riscado */
.rc-cancelado {
    opacity: 0.65;
}

    .rc-cancelado .rc-cell-destaque,
    .rc-cancelado .rc-text-destaque {
        text-decoration: line-through;
        color: var(--text-secondary) !important;
    }

.rc-card-btn--danger {
    color: #ef4444;
}

    .rc-card-btn--danger:hover {
        border-color: #ef4444;
        color: #ef4444;
    }

.rc-card-btn--success {
    color: #10b981;
}

    .rc-card-btn--success:hover {
        border-color: #10b981;
        color: #10b981;
    }

.rc-action-btn--success:hover {
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

/* ── Mobile Cards ── */

.rc-cards {
    display: none;
}

@media (max-width: 768px) {
    .rc-table-wrap {
        display: none;
    }

    .rc-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .rc-card {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-bg);
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow 0.12s;
    }

        .rc-card:hover {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

    .rc-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 8px;
    }

    .rc-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(50, 91, 179, 0.08);
        color: var(--primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .rc-card-title {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

        .rc-card-title strong {
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .rc-card-title small {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

    .rc-card-body {
        padding: 8px 16px;
    }

    .rc-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 0.85rem;
        color: var(--text-primary);
    }

        .rc-card-row span {
            color: var(--text-secondary);
        }

    .rc-text-destaque {
        color: #10b981 !important;
    }

    .rc-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px 14px;
        border-top: 1px solid var(--border);
    }

    .rc-card-actions {
        display: flex;
        gap: 8px;
    }

    .rc-card-btn {
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--card-bg);
        color: var(--text-primary);
        transition: all 0.12s;
        display: inline-flex;
        align-items: center;
    }

        .rc-card-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

    .rc-card-btn--primary {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

        .rc-card-btn--primary:hover {
            opacity: 0.9;
            color: #fff;
        }
}

/* ── Empty state ── */

.rc-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .rc-empty i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .rc-empty h3 {
        margin: 0 0 8px;
    }

    .rc-empty p {
        margin: 0;
        font-size: 0.88rem;
    }



/* ===== Financas/RecebimentosPage.razor.css ===== */
/* ── Shell ── */

.rc-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 20px;
}

/* ── Toolbar / Search ── */

.rc-toolbar {
    margin-bottom: 16px;
}

.rc-search {
    position: relative;
    max-width: 400px;
}

    .rc-search i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        z-index: 1;
    }

.rc-search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

    .rc-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.1);
    }

.rc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
}

/* ── Filters ── */

.rc-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rc-filter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
}

    .rc-filter-btn.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

    .rc-filter-btn:hover:not(.active) {
        border-color: var(--primary);
        color: var(--primary);
    }

/* ── Summary ── */

.rc-summary {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rc-summary-item {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

    .rc-summary-item strong {
        color: var(--text-primary);
    }

/* ── Desktop Table ── */

.rc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .rc-table thead {
        background: var(--bg-secondary, #f8f9fa);
    }

    .rc-table th {
        padding: 12px 14px;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .rc-table td {
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
    }

.rc-table-row {
    cursor: pointer;
    transition: background 0.1s;
}

    .rc-table-row:hover {
        background: rgba(50, 91, 179, 0.03);
    }

.rc-cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

    .rc-cell-name div {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .rc-cell-name strong {
        font-size: 0.88rem;
        color: var(--text-primary);
    }

    .rc-cell-name small {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

.rc-cell-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 91, 179, 0.08);
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.rc-cell-number {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.rc-cell-destaque {
    color: #10b981;
}

.rc-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.rc-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.12s;
    font-size: 0.9rem;
}

    .rc-action-btn:hover {
        background: var(--bg-secondary, #f8f9fa);
        color: var(--primary);
    }

.rc-action-btn--danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* ── Badges ── */

.rc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rc-badge--ok {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
}

.rc-badge--atencao {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

.rc-badge--info {
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
}

.rc-badge--cancelado {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    align-self: flex-start;
    margin-top: 2px;
}

/* Recebimento cancelado — atenuado e com valor riscado */
.rc-cancelado {
    opacity: 0.65;
}

    .rc-cancelado .rc-cell-destaque,
    .rc-cancelado .rc-text-destaque {
        text-decoration: line-through;
        color: var(--text-secondary) !important;
    }

.rc-card-btn--danger {
    color: #ef4444;
}

    .rc-card-btn--danger:hover {
        border-color: #ef4444;
        color: #ef4444;
    }

.rc-card-btn--success {
    color: #10b981;
}

    .rc-card-btn--success:hover {
        border-color: #10b981;
        color: #10b981;
    }

.rc-action-btn--success:hover {
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

/* ── Mobile Cards ── */

.rc-cards {
    display: none;
}

@media (max-width: 768px) {
    .rc-table-wrap {
        display: none;
    }

    .rc-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .rc-card {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-bg);
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow 0.12s;
    }

        .rc-card:hover {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

    .rc-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 8px;
    }

    .rc-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(50, 91, 179, 0.08);
        color: var(--primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .rc-card-title {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

        .rc-card-title strong {
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .rc-card-title small {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

    .rc-card-body {
        padding: 8px 16px;
    }

    .rc-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 0.85rem;
        color: var(--text-primary);
    }

        .rc-card-row span {
            color: var(--text-secondary);
        }

    .rc-text-destaque {
        color: #10b981 !important;
    }

    .rc-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px 14px;
        border-top: 1px solid var(--border);
    }

    .rc-card-actions {
        display: flex;
        gap: 8px;
    }

    .rc-card-btn {
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--card-bg);
        color: var(--text-primary);
        transition: all 0.12s;
        display: inline-flex;
        align-items: center;
    }

        .rc-card-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

    .rc-card-btn--primary {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

        .rc-card-btn--primary:hover {
            opacity: 0.9;
            color: #fff;
        }
}

/* ── Empty state ── */

.rc-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .rc-empty i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .rc-empty h3 {
        margin: 0 0 8px;
    }

    .rc-empty p {
        margin: 0;
        font-size: 0.88rem;
    }



/* ===== Financas/SaidasPage.razor.css ===== */
/* ── Shell ── */

.rc-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 20px;
}

/* ── Toolbar / Search ── */

.rc-toolbar {
    margin-bottom: 16px;
}

.rc-search {
    position: relative;
    max-width: 400px;
}

    .rc-search i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        z-index: 1;
    }

.rc-search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

    .rc-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.1);
    }

.rc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
}

/* ── Filters ── */

.rc-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rc-filter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
}

    .rc-filter-btn.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

    .rc-filter-btn:hover:not(.active) {
        border-color: var(--primary);
        color: var(--primary);
    }

/* ── Summary ── */

.rc-summary {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rc-summary-item {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

    .rc-summary-item strong {
        color: var(--text-primary);
    }

/* ── Desktop Table ── */

.rc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .rc-table thead {
        background: var(--bg-secondary, #f8f9fa);
    }

    .rc-table th {
        padding: 12px 14px;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .rc-table td {
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
    }

.rc-table-row {
    cursor: pointer;
    transition: background 0.1s;
}

    .rc-table-row:hover {
        background: rgba(50, 91, 179, 0.03);
    }

.rc-cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

    .rc-cell-name div {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .rc-cell-name strong {
        font-size: 0.88rem;
        color: var(--text-primary);
    }

    .rc-cell-name small {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

.rc-cell-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 91, 179, 0.08);
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.rc-cell-number {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.rc-cell-destaque {
    color: #10b981;
}

.rc-cell-negativo {
    color: #ef4444;
}

.rc-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.rc-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.12s;
    font-size: 0.9rem;
}

    .rc-action-btn:hover {
        background: var(--bg-secondary, #f8f9fa);
        color: var(--primary);
    }

.rc-action-btn--danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* ── Badges ── */

.rc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rc-badge--ok {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
}

.rc-badge--atencao {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

.rc-badge--info {
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
}

.rc-card-btn--danger {
    color: #ef4444;
}

    .rc-card-btn--danger:hover {
        border-color: #ef4444;
        color: #ef4444;
    }

/* ── Mobile Cards ── */

.rc-cards {
    display: none;
}

@media (max-width: 768px) {
    .rc-table-wrap {
        display: none;
    }

    .rc-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .rc-card {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-bg);
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow 0.12s;
    }

        .rc-card:hover {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

    .rc-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 8px;
    }

    .rc-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(50, 91, 179, 0.08);
        color: var(--primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .rc-card-title {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

        .rc-card-title strong {
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .rc-card-title small {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

    .rc-card-body {
        padding: 8px 16px;
    }

    .rc-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 0.85rem;
        color: var(--text-primary);
    }

        .rc-card-row span {
            color: var(--text-secondary);
        }

    .rc-text-destaque {
        color: #10b981 !important;
    }

    .rc-text-negativo {
        color: #ef4444 !important;
    }

    .rc-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px 14px;
        border-top: 1px solid var(--border);
    }

    .rc-card-actions {
        display: flex;
        gap: 8px;
    }

    .rc-card-btn {
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--card-bg);
        color: var(--text-primary);
        transition: all 0.12s;
        display: inline-flex;
        align-items: center;
    }

        .rc-card-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

    .rc-card-btn--primary {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

        .rc-card-btn--primary:hover {
            opacity: 0.9;
            color: #fff;
        }
}

/* ── Empty state ── */

.rc-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .rc-empty i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .rc-empty h3 {
        margin: 0 0 8px;
    }

    .rc-empty p {
        margin: 0;
        font-size: 0.88rem;
    }



/* ===== Fornecedores/Fornecedores.razor.css ===== */
.fc-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 20px;
}

.fc-toolbar {
    margin-bottom: 16px;
}

.fc-search {
    position: relative;
    max-width: 400px;
}

    .fc-search i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        z-index: 1;
    }

.fc-search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

    .fc-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.1);
    }

.fc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
}

.fc-summary {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.fc-summary-item {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

    .fc-summary-item strong {
        color: var(--text-primary);
    }

.fc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.fc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .fc-table thead {
        background: var(--bg-secondary, #f8f9fa);
    }

    .fc-table th {
        padding: 12px 14px;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .fc-table td {
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
    }

.fc-table-row {
    cursor: pointer;
    transition: background 0.1s;
}

    .fc-table-row:hover {
        background: rgba(50, 91, 179, 0.03);
    }

.fc-cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

    .fc-cell-name div {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .fc-cell-name strong {
        font-size: 0.88rem;
        color: var(--text-primary);
    }

    .fc-cell-name small {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

.fc-cell-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 91, 179, 0.08);
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.fc-cell-number {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.fc-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.fc-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.12s;
    font-size: 0.9rem;
}

    .fc-action-btn:hover {
        background: var(--bg-secondary, #f8f9fa);
        color: var(--primary);
    }

.fc-action-btn--danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.fc-pagination {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.fc-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .fc-empty i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .fc-empty h3 {
        margin: 0 0 8px;
    }

    .fc-empty p {
        margin: 0;
        font-size: 0.88rem;
    }

.fc-cards {
    display: none;
}

@media (max-width: 768px) {
    .fc-table-wrap {
        display: none;
    }

    .fc-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .fc-card {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-bg);
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow 0.12s;
    }

        .fc-card:hover {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

    .fc-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 8px;
    }

    .fc-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(50, 91, 179, 0.08);
        color: var(--primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .fc-card-title {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

        .fc-card-title strong {
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .fc-card-title small {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

    .fc-card-body {
        padding: 8px 16px;
    }

    .fc-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 0.85rem;
        color: var(--text-primary);
    }

        .fc-card-row span {
            color: var(--text-secondary);
        }

    .fc-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px 14px;
        border-top: 1px solid var(--border);
    }

    .fc-card-actions {
        display: flex;
        gap: 8px;
    }

    .fc-card-btn {
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--card-bg);
        color: var(--text-primary);
        transition: all 0.12s;
        display: inline-flex;
        align-items: center;
    }

        .fc-card-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

    .fc-card-btn--primary {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

        .fc-card-btn--primary:hover {
            opacity: 0.9;
            color: #fff;
        }
}

/* ===== Ingredientes/IngredienteDetalhePage.razor.css ===== */
.rd-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 24px;
}

.rd-header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    gap: 8px;
}

.rd-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.rd-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
}

.rd-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
}

.rd-summary-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rd-summary-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rd-summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rd-descricao {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.rd-section {
    margin-bottom: 24px;
}

.rd-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rd-compra-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
}

.rd-compra-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.rd-compra-row + .rd-compra-row {
    border-top: 1px solid var(--border);
}

.rd-compra-row span:first-child {
    color: var(--text-secondary);
}

.rd-compra-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.rd-compra-destaque {
    font-weight: 700;
    font-size: 0.95rem;
    border-top: 2px solid var(--border);
}

.rd-compra-destaque strong {
    color: var(--primary);
}

.rd-stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.rd-stock-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
}

.rd-stock-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.rd-stock-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rd-text-danger {
    color: var(--error, #d32f2f) !important;
}

.rd-fornecedor-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rd-fornecedor-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
}

.rd-fornecedor-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.88rem;
}

.rd-fornecedor-row + .rd-fornecedor-row {
    border-top: 1px solid var(--border);
}

.rd-fornecedor-row span:first-child {
    color: var(--text-secondary);
}

.rd-fornecedor-row strong {
    color: var(--primary);
}

.rd-impacto-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
    background: linear-gradient(135deg, var(--card-bg), rgba(50, 91, 179, 0.04));
}

.rd-impacto-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.88rem;
}

.rd-impacto-row span {
    color: var(--text-secondary);
}

.rd-impacto-row strong {
    color: var(--primary);
    font-size: 0.95rem;
}

.rd-receitas-vinculadas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.rd-receita-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--primary);
    text-decoration: none;
    background: var(--card-bg);
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .rd-receita-link:hover {
        background: rgba(50, 91, 179, 0.08);
        border-color: var(--primary);
    }

.rd-partilha-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 12px;
    background: rgba(50, 91, 179, 0.06);
    border-radius: 10px;
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .empty-state i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .empty-state h3 {
        margin: 0 0 16px;
    }

@container layout (max-width: 640px) {
    .rd-summary-grid {
        grid-template-columns: 1fr;
    }

    .rd-stock-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Ingredientes/IngredienteWizardPage.razor.css ===== */
.wizard-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 24px;
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px 0;
    overflow-x: auto;
    gap: 4px;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: default;
    min-width: 60px;
    flex-shrink: 0;
}

    .wizard-step.done {
        cursor: pointer;
    }

    .wizard-step.active {
        cursor: pointer;
    }

.wizard-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--border);
    color: var(--text-secondary);
    transition: all 0.2s;
}

.wizard-step.active .wizard-step-circle {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(50,91,179,0.2);
}

.wizard-step.done .wizard-step-circle {
    background: #10b981;
    color: #fff;
}

.wizard-step-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.wizard-step.active .wizard-step-label {
    color: var(--primary);
    font-weight: 600;
}

.wizard-body {
    min-height: 300px;
    animation: fadeIn 0.2s ease;
}

.wiz-step-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.wiz-step-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 20px;
}

.wiz-field-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wiz-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .wiz-field label {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.wiz-input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

    .wiz-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50,91,179,0.1);
    }

.wiz-select {
    cursor: pointer;
    appearance: auto;
}

.wiz-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wiz-input-btn-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.wiz-input-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    min-width: 42px;
    transition: opacity 0.12s;
}

    .wiz-input-btn:hover {
        opacity: 0.9;
    }

.required {
    color: #ef4444;
}

.wiz-textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.wizard-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.wf-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
}

    .wf-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.wf-btn-outline {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

    .wf-btn-outline:hover:not(:disabled) {
        border-color: var(--primary);
        color: var(--primary);
    }

.wf-btn-primary {
    background: var(--primary);
    color: #fff;
}

    .wf-btn-primary:hover:not(:disabled) {
        opacity: 0.9;
    }

.wf-btn-success {
    background: #10b981;
    color: #fff;
}

    .wf-btn-success:hover:not(:disabled) {
        opacity: 0.9;
    }

.wiz-detalhe-custos {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
    margin-bottom: 16px;
}

.wiz-detalhe-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-primary);
    padding: 6px 0;
}

    .wiz-detalhe-row + .wiz-detalhe-row {
        border-top: 1px solid var(--border);
    }

.wiz-detalhe-row--total {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
}

.spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@container layout (max-width: 640px) {
    .wizard-step {
        min-width: 48px;
    }

    .wizard-step-circle {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .wizard-step-label {
        font-size: 0.6rem;
    }

    .wiz-field-row {
        grid-template-columns: 1fr;
    }
}

/* ===== Ingredientes/Ingredientes.razor.css ===== */
.rc-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 20px;
}

.rc-toolbar {
    margin-bottom: 16px;
}

.rc-search {
    position: relative;
    max-width: 400px;
}

    .rc-search i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        z-index: 1;
    }

.rc-search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

    .rc-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.1);
    }

.rc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
}

.rc-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rc-filter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
}

    .rc-filter-btn.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

    .rc-filter-btn:hover:not(.active) {
        border-color: var(--primary);
        color: var(--primary);
    }

.rc-summary {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rc-summary-item {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

    .rc-summary-item strong {
        color: var(--text-primary);
    }

.rc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .rc-table thead {
        background: var(--bg-secondary, #f8f9fa);
    }

    .rc-table th {
        padding: 12px 14px;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .rc-table td {
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
    }

.rc-table-row {
    cursor: pointer;
    transition: background 0.1s;
}

    .rc-table-row:hover {
        background: rgba(50, 91, 179, 0.03);
    }

.rc-cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

    .rc-cell-name div {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .rc-cell-name strong {
        font-size: 0.88rem;
        color: var(--text-primary);
    }

    .rc-cell-name small {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

.rc-cell-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 91, 179, 0.08);
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.rc-cell-number {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.rc-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.rc-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.12s;
    font-size: 0.9rem;
}

    .rc-action-btn:hover {
        background: var(--bg-secondary, #f8f9fa);
        color: var(--primary);
    }

.rc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rc-badge--warn {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

.rc-badge--danger {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
}

.rc-text-danger {
    color: var(--error, #d32f2f) !important;
}

.rc-cards {
    display: none;
}

@media (max-width: 768px) {
    .rc-table-wrap {
        display: none;
    }

    .rc-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .rc-card {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-bg);
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow 0.12s;
    }

        .rc-card:hover {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

    .rc-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 8px;
    }

    .rc-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(50, 91, 179, 0.08);
        color: var(--primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .rc-card-title {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

        .rc-card-title strong {
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .rc-card-title small {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

    .rc-card-body {
        padding: 8px 16px;
    }

    .rc-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 0.85rem;
        color: var(--text-primary);
    }

        .rc-card-row span {
            color: var(--text-secondary);
        }

    .rc-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px 14px;
        border-top: 1px solid var(--border);
    }

    .rc-card-actions {
        display: flex;
        gap: 8px;
    }

    .rc-card-btn {
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--card-bg);
        color: var(--text-primary);
        transition: all 0.12s;
        display: inline-flex;
        align-items: center;
    }

        .rc-card-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

    .rc-card-btn--primary {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

        .rc-card-btn--primary:hover {
            opacity: 0.9;
            color: #fff;
        }
}

.rc-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .rc-empty i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .rc-empty h3 {
        margin: 0 0 8px;
    }

    .rc-empty p {
        margin: 0;
        font-size: 0.88rem;
    }

/* ── Modal Repor Stock ── */

.wiz-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
}

.wiz-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    min-width: 320px;
    max-width: 90vw;
    z-index: 1000;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

    .wiz-modal h3 {
        margin: 0 0 16px;
        font-size: 1.05rem;
        color: var(--text-primary);
    }

.wiz-modal-field {
    margin-bottom: 12px;
}

    .wiz-modal-field label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
    }

.wiz-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.wiz-input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

    .wiz-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50,91,179,0.1);
    }

.wf-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
}

    .wf-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.wf-btn-outline {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

    .wf-btn-outline:hover:not(:disabled) {
        border-color: var(--primary);
        color: var(--primary);
    }

.wf-btn-primary {
    background: var(--primary);
    color: #fff;
}

    .wf-btn-primary:hover:not(:disabled) {
        opacity: 0.9;
    }

.spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}



/* ===== ListaCompras/ListaComprasListaPage.razor.css ===== */
.lc-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 20px;
}

.lc-toolbar {
    margin-bottom: 16px;
}

.lc-search {
    position: relative;
    max-width: 400px;
}

    .lc-search i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        z-index: 1;
    }

.lc-search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

    .lc-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.1);
    }

.lc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
}

.lc-summary {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.lc-summary-item {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

    .lc-summary-item strong {
        color: var(--text-primary);
    }

.lc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.lc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .lc-table thead {
        background: var(--bg-secondary, #f8f9fa);
    }

    .lc-table th {
        padding: 12px 14px;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .lc-table td {
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
    }

.lc-table-row {
    cursor: pointer;
    transition: background 0.1s;
}

    .lc-table-row:hover {
        background: rgba(50, 91, 179, 0.03);
    }

.lc-cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

    .lc-cell-name div {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .lc-cell-name strong {
        font-size: 0.88rem;
        color: var(--text-primary);
    }

    .lc-cell-name small {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

.lc-cell-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 91, 179, 0.08);
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.lc-cell-number {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.lc-cell-destaque {
    color: #10b981;
}

.lc-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.lc-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.12s;
    font-size: 0.9rem;
}

    .lc-action-btn:hover {
        background: var(--bg-secondary, #f8f9fa);
        color: var(--primary);
    }

.lc-action-btn--danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.lc-pagination {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.lc-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .lc-empty i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .lc-empty h3 {
        margin: 0 0 8px;
    }

    .lc-empty p {
        margin: 0;
        font-size: 0.88rem;
    }

.lc-cards {
    display: none;
}

@media (max-width: 768px) {
    .lc-table-wrap {
        display: none;
    }

    .lc-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .lc-card {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-bg);
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow 0.12s;
    }

        .lc-card:hover {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

    .lc-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 8px;
    }

    .lc-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(50, 91, 179, 0.08);
        color: var(--primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .lc-card-title {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

        .lc-card-title strong {
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .lc-card-title small {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

    .lc-card-body {
        padding: 8px 16px;
    }

    .lc-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 0.85rem;
        color: var(--text-primary);
    }

        .lc-card-row span {
            color: var(--text-secondary);
        }

    .lc-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px 14px;
        border-top: 1px solid var(--border);
    }

    .lc-card-actions {
        display: flex;
        gap: 8px;
    }

    .lc-card-btn {
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--card-bg);
        color: var(--text-primary);
        transition: all 0.12s;
        display: inline-flex;
        align-items: center;
    }

        .lc-card-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

    .lc-card-btn--primary {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

        .lc-card-btn--primary:hover {
            opacity: 0.9;
            color: #fff;
        }
}

/* ===== ListaCompras/ListaComprasPage.razor.css ===== */
.forecast-container {
    margin-left: 1rem;
    margin-right: 1rem;
}

/* Step header */
.lc-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.lc-step-circle {
    width: 32px;
    height: 32px;
    background: var(--primary, #2563eb);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.lc-step-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #111827);
}

/* Filter bar */
.lc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
}

.lc-search-wrapper {
    flex: 1;
    min-width: 220px;
    position: relative;
}

.lc-search-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary, #6b7280);
    pointer-events: none;
}

.lc-search-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-body, #f9fafb);
    color: var(--text-primary, #111827);
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
}

.lc-search-input:focus {
    border-color: var(--primary, #2563eb);
}

.lc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    padding: 4px;
}

.lc-clear-filter-btn {
    background: none;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

/* Date row */
.lc-date-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.lc-date-input { flex: 1; min-width: 0; }
.lc-date-sep { font-size: 0.85rem; color: var(--text-secondary, #6b7280); white-space: nowrap; }

.lc-estado-select {
    min-width: 140px;
}

/* Loading */
.lc-loading {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* Events grid - horizontal scroll */
.lc-events-grid {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.lc-events-grid::-webkit-scrollbar {
    height: 6px;
}

.lc-events-grid::-webkit-scrollbar-track {
    background: var(--border, #e5e7eb);
    border-radius: 3px;
}

.lc-events-grid::-webkit-scrollbar-thumb {
    background: var(--primary, #2563eb);
    border-radius: 3px;
}

.lc-grid-empty {
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
    padding: 1rem 0;
    width: 100%;
    text-align: center;
}

.lc-event-card {
    background: var(--card-bg, #fff);
    padding: 16px;
    border-radius: 12px;
    border: 2px solid var(--border, #e5e7eb);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    user-select: none;
    min-width: 200px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.lc-event-card:hover {
    border-color: var(--primary, #2563eb);
}

.lc-event-selected {
    border-color: var(--primary, #2563eb);
    background: rgba(37, 99, 235, 0.06);
}

.lc-event-check {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--primary, #2563eb);
    font-size: 1.1rem;
}

.lc-event-name {
    font-weight: 700;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary, #111827);
    padding-right: 1.4rem;
}

.lc-event-date-label {
    font-size: 0.8rem;
    color: var(--text-secondary, #4b5563);
    display: block;
    margin-bottom: 12px;
}

.lc-badge-estado {
    font-size: 0.68rem;
}

/* Calculate row */
.lc-calc-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 32px;
}

/* Results panel */
.lc-results-panel {
    margin-top: 8px;
}

.lc-panel-subtitle {
    color: var(--text-secondary, #4b5563);
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.lc-actions-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* Summary stats */
.lc-summary-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.lc-stat-box {
    padding: 18px 20px;
    background: var(--bg-body, #f9fafb);
    border-radius: 10px;
    border: 1px solid var(--border, #e5e7eb);
}

.lc-stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lc-stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    display: block;
    margin-top: 4px;
    color: var(--text-primary, #111827);
}

.lc-stat-highlight {
    background: var(--primary, #2563eb);
    border: none;
    color: #fff;
}

.lc-stat-highlight .lc-stat-label { color: rgba(255, 255, 255, 0.7); }
.lc-stat-highlight .lc-stat-value { color: #fff; }

/* Items section */
.lc-items-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    margin: 24px 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.lc-item-card {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 16px;
    background: var(--card-bg, #fff);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lc-item-card.lc-item-ok {
    opacity: 0.6;
}

.lc-item-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary, #111827);
    margin-bottom: 4px;
    display: block;
}

.lc-item-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    align-items: baseline;
}

.lc-item-row span:first-child {
    color: var(--text-secondary, #4b5563);
}

.lc-item-row span:last-child {
    color: var(--text-primary, #111827);
}

.lc-item-row-muted span:last-child {
    color: var(--text-secondary, #6b7280);
}

.lc-item-row-buy span:last-child {
    font-weight: 700;
    color: var(--error, #dc2626);
}

.lc-item-row-ok span:last-child {
    font-weight: 600;
    color: var(--success, #059669);
}

.lc-item-divider {
    height: 0;
    border-top: 1px dashed var(--border, #e5e7eb);
    margin: 4px 0 2px;
}

.lc-item-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.25rem;
}

.lc-item-field label {
    font-size: 0.77rem;
    color: var(--text-secondary, #4b5563);
}

.lc-item-input {
    width: 100%;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font-size: 0.88rem;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
    text-align: right;
    box-sizing: border-box;
}

/* Finish bar */
.lc-finish-bar {
    margin-top: 40px;
    padding: 24px;
    background: var(--bg-body, #f9fafb);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border, #e5e7eb);
    gap: 16px;
    flex-wrap: wrap;
}

.lc-finish-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Modals */
.lc-modal-backdrop { display: block; }

.lc-modal-overlay {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1055;
}

.lc-modal-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1rem;
}

.lc-modal-box {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.lc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.lc-modal-title { margin: 0; font-weight: 600; }

.lc-modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    padding: 0.25rem;
}

.lc-modal-body { padding: 1.25rem; }
.lc-modal-hint { font-size: 0.85rem; color: var(--text-secondary, #6b7280); }

.lc-modal-link-input {
    flex: 1;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--bg-body, #f9fafb);
    color: var(--text-primary, #111827);
    outline: none;
}

.lc-modal-copy-btn { margin-left: 0.5rem; }

.lc-link-copiado {
    color: var(--success, #059669);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.lc-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border, #e5e7eb);
    gap: 0.5rem;
}

.lc-modal-field { margin-bottom: 0.75rem; }

.lc-modal-field-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.lc-modal-text-input {
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
    outline: none;
    box-sizing: border-box;
}

/* Dark mode overrides */
[data-theme="dark"] .lc-search-input {
    background: var(--bg-primary);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .lc-event-card {
    background: var(--card-bg);
    border-color: var(--border);
}

[data-theme="dark"] .lc-event-selected {
    background: rgba(37, 99, 235, 0.15);
}

[data-theme="dark"] .lc-stat-box {
    background: var(--bg-secondary);
    border-color: var(--border);
}

[data-theme="dark"] .lc-stat-highlight {
    background: var(--primary, #3b82f6);
}

[data-theme="dark"] .lc-item-card {
    background: var(--card-bg);
    border-color: var(--border);
}

[data-theme="dark"] .lc-item-input {
    background: var(--bg-primary);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .lc-finish-bar {
    background: var(--bg-secondary);
    border-color: var(--border);
}

[data-theme="dark"] .lc-modal-box {
    background: var(--card-bg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

[data-theme="dark"] .lc-modal-link-input {
    background: var(--bg-primary);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .lc-modal-text-input {
    background: var(--bg-primary);
    border-color: var(--border);
    color: var(--text-primary);
}

/* Responsive */
@container layout (max-width: 640px) {
    .lc-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .lc-search-wrapper,
    .lc-estado-select { width: 100%; }

    .lc-date-row {
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    .lc-date-row .lc-date-input {
        flex: 1;
        min-width: 0;
    }

    .lc-date-sep { display: inline; }

    .lc-event-card {
        min-width: 160px;
    }

    .lc-summary-stats {
        grid-template-columns: 1fr;
    }

    .lc-items-grid {
        grid-template-columns: 1fr;
    }

    .lc-finish-bar {
        flex-direction: column;
        text-align: center;
    }

    .lc-finish-actions {
        flex-direction: column;
        width: 100%;
    }

    .lc-finish-actions .btn {
        justify-content: center;
        width: 100%;
    }


}
/* ===== MateriaisProducao/Materiais.razor.css ===== */
.rc-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 20px;
}

.rc-toolbar {
    margin-bottom: 16px;
}

.rc-search {
    position: relative;
    max-width: 400px;
}

    .rc-search i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        z-index: 1;
    }

.rc-search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

    .rc-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.1);
    }

.rc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
}

.rc-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rc-filter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
}

    .rc-filter-btn.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

    .rc-filter-btn:hover:not(.active) {
        border-color: var(--primary);
        color: var(--primary);
    }

.rc-summary {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rc-summary-item {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

    .rc-summary-item strong {
        color: var(--text-primary);
    }

.rc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .rc-table thead {
        background: var(--bg-secondary, #f8f9fa);
    }

    .rc-table th {
        padding: 12px 14px;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .rc-table td {
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
    }

.rc-table-row {
    cursor: pointer;
    transition: background 0.1s;
}

    .rc-table-row:hover {
        background: rgba(50, 91, 179, 0.03);
    }

.rc-cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

    .rc-cell-name div {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .rc-cell-name strong {
        font-size: 0.88rem;
        color: var(--text-primary);
    }

    .rc-cell-name small {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

.rc-cell-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 91, 179, 0.08);
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.rc-cell-number {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.rc-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.rc-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.12s;
    font-size: 0.9rem;
}

    .rc-action-btn:hover {
        background: var(--bg-secondary, #f8f9fa);
        color: var(--primary);
    }

.rc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rc-badge--warn {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

.rc-badge--danger {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
}

.rc-text-danger {
    color: var(--error, #d32f2f) !important;
}

.rc-cards {
    display: none;
}

@media (max-width: 768px) {
    .rc-table-wrap {
        display: none;
    }

    .rc-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .rc-card {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-bg);
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow 0.12s;
    }

        .rc-card:hover {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

    .rc-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 8px;
    }

    .rc-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(50, 91, 179, 0.08);
        color: var(--primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .rc-card-title {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

        .rc-card-title strong {
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .rc-card-title small {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

    .rc-card-body {
        padding: 8px 16px;
    }

    .rc-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 0.85rem;
        color: var(--text-primary);
    }

        .rc-card-row span {
            color: var(--text-secondary);
        }

    .rc-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px 14px;
        border-top: 1px solid var(--border);
    }

    .rc-card-actions {
        display: flex;
        gap: 8px;
    }

    .rc-card-btn {
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--card-bg);
        color: var(--text-primary);
        transition: all 0.12s;
        display: inline-flex;
        align-items: center;
    }

        .rc-card-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

    .rc-card-btn--primary {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

        .rc-card-btn--primary:hover {
            opacity: 0.9;
            color: #fff;
        }
}

.rc-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .rc-empty i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .rc-empty h3 {
        margin: 0 0 8px;
    }

    .rc-empty p {
        margin: 0;
        font-size: 0.88rem;
    }

/* ── Modal Repor Stock ── */

.wiz-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
}

.wiz-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    min-width: 320px;
    max-width: 90vw;
    z-index: 1000;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

    .wiz-modal h3 {
        margin: 0 0 16px;
        font-size: 1.05rem;
        color: var(--text-primary);
    }

.wiz-modal-field {
    margin-bottom: 12px;
}

    .wiz-modal-field label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
    }

.wiz-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.wiz-input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

    .wiz-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50,91,179,0.1);
    }

.wf-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
}

    .wf-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.wf-btn-outline {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

    .wf-btn-outline:hover:not(:disabled) {
        border-color: var(--primary);
        color: var(--primary);
    }

.wf-btn-primary {
    background: var(--primary);
    color: #fff;
}

    .wf-btn-primary:hover:not(:disabled) {
        opacity: 0.9;
    }

.spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

[data-theme="dark"] .rc-shell {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .rc-table-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .rc-cell-icon {
    background: rgba(96, 165, 250, 0.12);
}

[data-theme="dark"] .rc-badge--warn {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

[data-theme="dark"] .rc-badge--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

[data-theme="dark"] .rc-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .rc-card-icon {
    background: rgba(96, 165, 250, 0.12);
}

[data-theme="dark"] .wiz-modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .wiz-modal {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}



/* ===== MateriaisProducao/MaterialDetalhePage.razor.css ===== */
.rd-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 24px;
}

.rd-header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    gap: 8px;
}

.rd-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.rd-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
}

.rd-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
}

.rd-summary-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rd-summary-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rd-summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rd-descricao {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.rd-section {
    margin-bottom: 24px;
}

.rd-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rd-stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.rd-stock-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
}

.rd-stock-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.rd-stock-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rd-text-danger {
    color: var(--error, #d32f2f) !important;
}

.rd-impacto-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
    background: linear-gradient(135deg, var(--card-bg), rgba(50, 91, 179, 0.04));
}

.rd-impacto-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.88rem;
}

.rd-impacto-row span {
    color: var(--text-secondary);
}

.rd-impacto-row strong {
    color: var(--primary);
    font-size: 0.95rem;
}

.rd-receitas-vinculadas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.rd-receita-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--primary);
    text-decoration: none;
    background: var(--card-bg);
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .rd-receita-link:hover {
        background: rgba(50, 91, 179, 0.08);
        border-color: var(--primary);
    }

.rd-partilha-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 12px;
    background: rgba(50, 91, 179, 0.06);
    border-radius: 10px;
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .empty-state i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .empty-state h3 {
        margin: 0 0 16px;
    }

@container layout (max-width: 640px) {
    .rd-summary-grid {
        grid-template-columns: 1fr;
    }

    .rd-stock-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== MateriaisProducao/MaterialWizardPage.razor.css ===== */
.wizard-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 24px;
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px 0;
    overflow-x: auto;
    gap: 4px;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: default;
    min-width: 60px;
    flex-shrink: 0;
}

    .wizard-step.done {
        cursor: pointer;
    }

    .wizard-step.active {
        cursor: pointer;
    }

.wizard-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--border);
    color: var(--text-secondary);
    transition: all 0.2s;
}

.wizard-step.active .wizard-step-circle {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(50,91,179,0.2);
}

.wizard-step.done .wizard-step-circle {
    background: #10b981;
    color: #fff;
}

.wizard-step-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.wizard-step.active .wizard-step-label {
    color: var(--primary);
    font-weight: 600;
}

.wizard-body {
    min-height: 300px;
    animation: fadeIn 0.2s ease;
}

.wiz-step-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.wiz-step-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 20px;
}

.wiz-field-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wiz-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .wiz-field label {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.wiz-input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

    .wiz-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50,91,179,0.1);
    }

.wiz-select {
    cursor: pointer;
    appearance: auto;
}

.wiz-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wiz-input-btn-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.wiz-input-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    min-width: 42px;
    transition: opacity 0.12s;
}

    .wiz-input-btn:hover {
        opacity: 0.9;
    }

.required {
    color: #ef4444;
}

.wiz-textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.wizard-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.wf-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
}

    .wf-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.wf-btn-outline {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

    .wf-btn-outline:hover:not(:disabled) {
        border-color: var(--primary);
        color: var(--primary);
    }

.wf-btn-primary {
    background: var(--primary);
    color: #fff;
}

    .wf-btn-primary:hover:not(:disabled) {
        opacity: 0.9;
    }

.wf-btn-success {
    background: #10b981;
    color: #fff;
}

    .wf-btn-success:hover:not(:disabled) {
        opacity: 0.9;
    }

.wiz-detalhe-custos {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
    margin-bottom: 16px;
}

.wiz-detalhe-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-primary);
    padding: 6px 0;
}

    .wiz-detalhe-row + .wiz-detalhe-row {
        border-top: 1px solid var(--border);
    }

.wiz-detalhe-row--total {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
}

.spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@container layout (max-width: 640px) {
    .wizard-step {
        min-width: 48px;
    }

    .wizard-step-circle {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .wizard-step-label {
        font-size: 0.6rem;
    }

    .wiz-field-row {
        grid-template-columns: 1fr;
    }
}

/* ===== Organizacao/CreditosConsumoPage.razor.css ===== */
/* Estilos rc-* herdados do padrão da RecebimentosPage (CSS scoped não atravessa
   páginas, por isso as classes usadas aqui estão replicadas na íntegra). */

/* ── Shell ── */

.rc-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    padding: 20px;
}

/* ── Toolbar / Pesquisa ── */

.rc-toolbar {
    margin-bottom: 16px;
}

.rc-search {
    position: relative;
    max-width: 400px;
}

.rc-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    z-index: 1;
}

.rc-search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.rc-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.1);
}

.rc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
}

/* ── Filtros ── */

.rc-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rc-filter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
}

.rc-filter-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.rc-filter-btn:hover:not(.active) {
    border-color: var(--primary);
    color: var(--primary);
}

/* ── Resumo ── */

.rc-summary {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rc-summary-item {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.rc-summary-item strong {
    color: var(--text-primary);
}

/* ── Tabela (desktop) ── */

.rc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.rc-table thead {
    background: var(--bg-secondary, #f8f9fa);
}

.rc-table th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.rc-table td {
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    vertical-align: middle;
}

.rc-table-row {
    transition: background 0.1s;
}

.rc-table-row:hover {
    background: rgba(50, 91, 179, 0.03);
}

.rc-cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.rc-cell-name strong {
    font-size: 0.88rem;
    color: var(--text-primary);
}

.rc-cell-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 91, 179, 0.08);
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.rc-cell-number {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.rc-cell-destaque {
    color: var(--success, #10b981);
}

.rc-cell-saida {
    color: var(--error, #ef4444) !important;
}

/* ── Badges ── */

.rc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rc-badge--ok {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success, #065f46);
}

.rc-badge--cancelado {
    background: rgba(239, 68, 68, 0.12);
    color: var(--error, #b91c1c);
}

.rc-badge--info {
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
}

/* ── Cards (mobile) ── */

.rc-cards {
    display: none;
}

@media (max-width: 768px) {
    .rc-shell {
        padding: 14px;
    }

    .rc-table-wrap {
        display: none;
    }

    .rc-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .rc-card {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-bg);
        overflow: hidden;
    }

    .rc-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 8px;
    }

    .rc-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(50, 91, 179, 0.08);
        color: var(--primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .rc-card-title {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
    }

    .rc-card-title strong {
        font-size: 0.9rem;
        color: var(--text-primary);
        word-break: break-word;
    }

    .rc-card-body {
        padding: 8px 16px;
    }

    .rc-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 4px 0;
        font-size: 0.85rem;
        color: var(--text-primary);
    }

    .rc-card-row > span:first-child {
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .rc-text-destaque {
        color: var(--success, #10b981) !important;
    }

    .rc-text-saida {
        color: var(--error, #ef4444) !important;
    }

    .rc-card-footer {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 16px 14px;
        border-top: 1px solid var(--border);
    }

    .rc-card-footer:empty {
        display: none;
    }
}

/* ── Estado vazio ── */

.rc-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

.rc-empty i {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
    opacity: 0.4;
}

.rc-empty h3 {
    margin: 0 0 8px;
    color: var(--text-primary);
}

.rc-empty p {
    margin: 0;
    font-size: 0.88rem;
}

/* ===== Organizacao/EmpresaPage.razor ===== */
/* Refresh visual alinhado ao DoceFinance Design System (stitch mockups, set/2026).
   O CSS scoped nao atravessa paginas/modais, por isso vive aqui na integra.
   Tudo via tokens de app.css para funcionar em claro/escuro. */

.organization-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

/* -- Botoes utilitarios dentro da area ----------------------------- */
.organization-shell .btn-sm {
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    border-radius: 9px;
}

.organization-shell .btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.organization-shell .btn-outline-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.organization-shell .btn-outline-primary {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
    color: var(--primary);
}

.organization-shell .btn-outline-primary:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.organization-shell .btn-outline-danger {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--error) 50%, transparent);
    color: var(--error);
}

.organization-shell .btn-outline-danger:hover {
    border-color: var(--error);
    background: color-mix(in srgb, var(--error) 10%, transparent);
    color: var(--error);
}

/* -- Loading / estados vazios -------------------------------------- */
.organization-loading,
.organization-loading-inline {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.organization-empty {
    padding: 2rem 1.4rem;
    text-align: center;
    background: var(--card-bg);
    border: 1px dashed var(--border);
    border-radius: 14px;
    margin-top: 1rem;
}

.organization-empty i {
    font-size: 1.7rem;
    color: var(--text-secondary);
}

.organization-empty h4 {
    margin: 0.6rem 0 0.25rem;
    color: var(--text-primary);
}

.organization-empty p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* -- Painel base --------------------------------------------------- */
.organization-panel {
    display: flex;
    flex-direction: column;
    padding: 1.4rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
}

.organization-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.organization-panel-header > div:first-child {
    flex: 1;
    min-width: 0;
}

.organization-kicker {
    color: var(--primary);
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.organization-panel h3 {
    margin: 0.15rem 0 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.organization-panel h3 i {
    color: var(--primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.organization-panel-header p {
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 46ch;
}

.organization-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.organization-actions-row-right {
    margin-left: auto;
    justify-content: flex-end;
    align-self: flex-start;
}

/* -- Cartão de identidade da empresa (fonte única dos dados) --- */
.org-empresa-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.org-empresa-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.org-company-emblem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: var(--gradient-brand);
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.org-company-emblem i {
    font-size: 1.4rem;
}

.org-company-emblem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.org-empresa-title {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1;
}

.org-empresa-title h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-empresa-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.org-empresa-edit {
    flex-shrink: 0;
    align-self: flex-start;
}

.org-state-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--surface-subtle);
    color: var(--text-secondary);
    white-space: nowrap;
}

.org-state-pill .org-state-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.org-state-pill.is-active {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
}

.org-state-pill.is-inactive {
    background: color-mix(in srgb, var(--error) 14%, transparent);
    color: var(--error);
}

.org-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.org-empresa-facts {
    margin: 1.1rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.9rem 1.5rem;
}

.org-empresa-facts > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.org-empresa-facts dt {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.org-empresa-facts dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.org-empresa-facts-desc {
    grid-column: 1 / -1;
}

.org-empresa-facts-desc dd {
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* -- Grelha de leitura (Horario) ------------------------------ */
.org-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.9rem 1.25rem;
    margin-top: 0.4rem;
}

.org-detail-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.org-detail-value {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* -- Seccao: Coordenadas Bancarias -------------------------- */
/* -- Coordenadas bancarias (lista compacta) ------------------ */
.bank-rows {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
}

.bank-row {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-subtle);
}

.bank-row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.bank-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bank-row-top {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    min-width: 0;
}

.bank-row-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.bank-row-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.bank-row-lines {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.bank-row-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.82rem;
}

.bank-row-lbl {
    flex-shrink: 0;
    width: 2.4rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.bank-row-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
    min-width: 0;
}

.bank-row-val {
    font-weight: 600;
    color: var(--text-primary);
}

.bank-row-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.bank-row-copy:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.bank-row-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.banking-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.banking-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.banking-action-danger:hover {
    border-color: var(--error);
    color: var(--error);
}

/* -- Formulario de conta bancaria --------------------------- */
.banking-add-btn {
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
}

.banking-form {
    margin-top: 1rem;
    padding: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-subtle);
}

.banking-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.banking-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.banking-field-iban {
    grid-column: span 1;
}

.banking-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

.banking-label-opt {
    font-weight: 400;
    font-style: italic;
}

.banking-input,
.banking-select {
    width: 100%;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.banking-input:focus,
.banking-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.banking-input-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.03em;
    font-size: 0.82rem;
}

.banking-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 11px;
    padding-right: 2rem;
    cursor: pointer;
}

.banking-iban-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
    background: var(--card-bg);
}

.banking-iban-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.banking-iban-prefix {
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--surface-subtle);
    color: var(--text-secondary);
    border-right: 1px solid var(--border);
    white-space: nowrap;
    user-select: none;
}

.banking-iban-suffix {
    border: none !important;
    border-radius: 0 !important;
    flex: 1;
    min-width: 0;
}

.banking-iban-suffix:focus {
    box-shadow: none !important;
}

.banking-form-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

/* -- Modais da area da empresa ----------------------------- */
.org-modal-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.org-modal-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.org-modal-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
}

/* -- Responsivo ------------------------------------------- */
@media (max-width: 767px) {
    .organization-panel {
        padding: 1.1rem;
    }

    .organization-panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .banking-form-foot .btn {
        flex: 1;
    }

    .org-empresa-head {
        gap: 0.75rem;
    }

    .org-empresa-edit {
        width: 100%;
    }
}

/* ===== Organizacao/OrganizacaoPage.razor.css ===== */
.org-shell {
    padding: 1rem;
}

/* ===== Partilhas/PartilhaPage.razor.css ===== */
.pc-kpi-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 1.25rem;
}

.pc-kpi-card {
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
}

.pc-kpi-icon {
    align-items: center;
    background: var(--panel-bg);
    border-radius: 10px;
    color: var(--primary);
    display: flex;
    flex-shrink: 0;
    font-size: 1.1rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.pc-kpi-icon-blue { color: var(--primary); }
.pc-kpi-icon-green { color: var(--success); }
.pc-kpi-icon-amber { color: var(--warning, #d97706); }
.pc-kpi-icon-pink { color: var(--brand-pink, #db2777); }

.pc-kpi-label {
    color: var(--text-secondary);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.pc-kpi-value {
    color: var(--text-primary);
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 0.15rem;
}

.pc-panel {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.25rem;
    padding: 0.5rem 1rem 1rem;
}

.pc-tabs {
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.pc-tab {
    align-items: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 600;
    gap: 0.5rem;
    padding: 0.85rem 0.1rem;
    transition: color 0.15s, border-color 0.15s;
}

.pc-tab:hover {
    color: var(--text-primary);
}

.pc-tab.ativo {
    border-bottom-color: var(--primary);
    color: var(--primary);
}

.pc-tab-count {
    background: var(--card-bg);
    border-radius: 999px;
    color: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
}

.pc-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pc-search {
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    flex: 1 1 260px;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.pc-search i {
    color: var(--text-secondary);
}

.pc-search input {
    background: none;
    border: none;
    color: var(--text-primary);
    flex: 1;
    font-size: 0.85rem;
    outline: none;
}

.pc-select {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.82rem;
    padding: 0.5rem 0.6rem;
}

.pc-clear-btn {
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.pc-clear-btn:hover {
    color: var(--text-primary);
}

.pc-pagination {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

@media (max-width: 720px) {
    .pc-kpi-grid {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: minmax(160px, 50vw);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .pc-kpi-card {
        scroll-snap-align: start;
    }

    .pc-tabs {
        gap: 1rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Partilhas/PartilhasLista.razor.css ===== */
.pl-empty {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.pl-empty i {
    color: var(--text-secondary);
    font-size: 2rem;
}

.pl-empty h3 {
    color: var(--text-primary);
    font-size: 1rem;
    margin: 0.75rem 0 0.35rem;
}

.pl-empty p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

.pl-counter {
    align-items: center;
    background: var(--panel-bg);
    border-radius: 10px;
    color: var(--text-secondary);
    display: flex;
    font-size: 0.85rem;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.6rem 1rem;
}

.pl-counter strong {
    color: var(--text-primary);
    text-transform: capitalize;
}

.pl-lista {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.pl-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.1rem;
    transition: box-shadow 0.15s, transform 0.15s;
}

.pl-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.pl-card.recusada {
    opacity: 0.65;
}

.pl-header {
    align-items: flex-start;
    display: flex;
    gap: 0.85rem;
}

.pl-avatar-wrap {
    flex-shrink: 0;
    position: relative;
}

.pl-avatar {
    align-items: center;
    background: var(--primary);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    font-size: 1.05rem;
    font-weight: 700;
    height: 44px;
    justify-content: center;
    overflow: hidden;
    text-transform: uppercase;
    width: 44px;
}

.pl-avatar-secondary {
    background: var(--brand-indigo, #4f46e5);
}

.pl-avatar-convite {
    background: var(--brand-pink, #db2777);
}

.pl-avatar-type-badge {
    align-items: center;
    background: var(--panel-bg);
    border: 2px solid var(--card-bg);
    border-radius: 50%;
    bottom: -3px;
    color: var(--primary);
    display: flex;
    font-size: 0.62rem;
    height: 20px;
    justify-content: center;
    position: absolute;
    right: -3px;
    width: 20px;
}

.pl-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.pl-content {
    flex: 1;
    min-width: 0;
}

.pl-eyebrow {
    color: var(--text-secondary);
    display: block;
    font-size: 0.78rem;
    margin-bottom: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-title {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-date {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.pl-badge-status {
    border-radius: 999px;
    color: #ffffff;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    text-transform: capitalize;
    white-space: nowrap;
}

.pl-badge-pendente { background: var(--warning, #d97706); }
.pl-badge-aceite { background: var(--success); }
.pl-badge-recusada,
.pl-badge-expirado { background: var(--error); }

.pl-message {
    align-items: flex-start;
    color: var(--text-secondary);
    display: flex;
    font-size: 0.85rem;
    gap: 0.5rem;
    margin: 0.85rem 0 0 3.6rem;
}

.pl-message i {
    flex-shrink: 0;
    font-size: 0.85rem;
    margin-top: 0.15rem;
    opacity: 0.55;
}

.pl-actions {
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0.9rem;
}

.pl-btn {
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    font-size: 0.82rem;
    font-weight: 600;
    gap: 0.35rem;
    min-height: 38px;
    padding: 0.45rem 0.9rem;
}

.pl-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.pl-btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.pl-btn-outline:hover:not(:disabled) {
    background: var(--panel-bg);
    color: var(--text-primary);
}

.pl-btn-danger {
    background: transparent;
    border: 1px solid var(--error);
    color: var(--error);
}

.pl-btn-danger:hover:not(:disabled) {
    background: var(--error);
    color: #ffffff;
}

.pl-btn-success {
    background: var(--success);
    border: none;
    color: #ffffff;
}

.pl-btn-success:hover:not(:disabled) {
    filter: brightness(0.92);
}

@media (max-width: 600px) {
    .pl-avatar {
        flex-shrink: 0;
        font-size: 0.85rem;
        height: 34px;
        width: 34px;
    }

    .pl-header {
        flex-wrap: wrap;
    }

    .pl-badge-status {
        margin-left: calc(34px + 0.85rem);
    }

    .pl-message {
        margin-left: 0;
    }

    .pl-actions {
        flex-wrap: wrap;
    }

    .pl-btn {
        flex: 1;
        justify-content: center;
        padding: 0.45rem 0.5rem;
    }
}

/* ===== Previsoes/Previsoes.razor ===== */
:root {
    --pp-primary-soft: rgba(50, 91, 179, 0.08);
    --pp-success-soft: #ecfdf5;
    --pp-amber-soft: #fffbeb;
    --pp-danger-soft: #fef2f2;
    --pp-text-muted: #9ca3af;
}

[data-theme="dark"] {
    --pp-primary-soft: rgba(77, 127, 212, 0.16);
    --pp-success-soft: rgba(16, 185, 129, 0.16);
    --pp-amber-soft: rgba(245, 158, 11, 0.16);
    --pp-danger-soft: rgba(239, 68, 68, 0.16);
}

/* Chips de contexto sob o cabeçalho */
.pp-context-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.pp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary, #4b5563);
    border: 1px solid var(--border, #e5e7eb);
}

.pp-chip i { font-size: 0.85rem; }

.pp-chip-live {
    background: var(--pp-primary-soft);
    color: var(--primary, #325bb3);
    border-color: rgba(50, 91, 179, 0.25);
}

.pp-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: pp-pulse 1.8s ease-in-out infinite;
}

@keyframes pp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.pp-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 28px;
}

.pp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
}

.pp-form-group {
    margin-bottom: 18px;
}

.pp-form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
    color: var(--text-secondary, #4b5563);
}

.pp-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.pp-input:focus {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px var(--pp-primary-soft);
}

.pp-kpi-card {
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
}

.pp-kpi-rendimento {
    text-align: left;
    background: var(--pp-primary-soft);
    border-color: rgba(50, 91, 179, 0.30);
}

.pp-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary, #325bb3);
}

.pp-kpi-value {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 4px;
    display: block;
    color: var(--primary, #325bb3);
}

.pp-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.pp-actions-row .btn {
    flex: 1;
    justify-content: center;
    white-space: nowrap;
}

/* Tacómetro de prontidão (anel %) */
.pp-gauge {
    margin-top: 24px;
    padding: 20px;
    border-radius: 14px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pp-gauge-success { background: var(--pp-success-soft); border-color: rgba(16, 185, 129, 0.30); }
.pp-gauge-warning { background: var(--pp-amber-soft); border-color: rgba(245, 158, 11, 0.30); }
.pp-gauge-error { background: var(--pp-danger-soft); border-color: rgba(239, 68, 68, 0.30); }

.pp-gauge-ring {
    position: relative;
    width: 150px;
    height: 150px;
}

.pp-gauge-ring svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pp-gauge-track { stroke: var(--border, #e5e7eb); }
[data-theme="dark"] .pp-gauge-track { stroke: rgba(255, 255, 255, 0.14); }

.pp-gauge-fill { transition: stroke-dashoffset 0.6s ease; }
.pp-gauge-success .pp-gauge-fill { stroke: var(--success, #059669); }
.pp-gauge-warning .pp-gauge-fill { stroke: var(--warning, #d97706); }
.pp-gauge-error .pp-gauge-fill { stroke: var(--error, #dc2626); }

.pp-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pp-gauge-percent {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary, #111827);
}

.pp-gauge-caption {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #6b7280);
    margin-top: 4px;
}

.pp-gauge-legend {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #4b5563);
}

.pp-diagnostic-callout {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
}

.pp-diagnostic-callout > i { font-size: 1.1rem; margin-top: 1px; }
.pp-gauge-success .pp-diagnostic-callout > i { color: var(--success, #059669); }
.pp-gauge-warning .pp-diagnostic-callout > i { color: var(--warning, #d97706); }
.pp-gauge-error .pp-diagnostic-callout > i { color: var(--error, #dc2626); }

.pp-diagnostic-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary, #111827);
}

.pp-diagnostic-text {
    font-size: 0.85rem;
    color: var(--text-secondary, #4b5563);
    line-height: 1.5;
    margin-top: 2px;
}

.pp-diagnostic-text strong { color: var(--text-primary, #111827); }

.pp-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    height: 100%;
    min-height: 220px;
    border: 1px dashed var(--border, #e5e7eb);
    border-radius: 14px;
}

.pp-placeholder i {
    font-size: 1.8rem;
    color: var(--primary, #325bb3);
    background: var(--pp-primary-soft);
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    margin-bottom: 16px;
}

.pp-placeholder h3 {
    margin: 0 0 8px;
    color: var(--text-primary, #111827);
    font-size: 1.05rem;
}

.pp-placeholder p {
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
    max-width: 300px;
    line-height: 1.5;
    margin: 0;
}

/* Cartão de resultado — painel direito com dados, défice e ações */
.pp-result-card {
    padding: 20px;
    border-radius: 14px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    box-sizing: border-box;
}

.pp-result-success { background: var(--pp-success-soft); border-color: rgba(16, 185, 129, 0.30); }
.pp-result-warning { background: var(--pp-amber-soft); border-color: rgba(245, 158, 11, 0.30); }
.pp-result-error { background: var(--pp-danger-soft); border-color: rgba(239, 68, 68, 0.30); }

.pp-result-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.pp-stat {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pp-stat strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-stat span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary, #6b7280);
}

.pp-stat-ok { color: var(--success, #059669) !important; }
.pp-stat-missing { color: var(--error, #dc2626) !important; }

.pp-deficit {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 14px 16px;
}

.pp-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.pp-shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    font-size: 0.88rem;
    color: var(--text-primary, #111827);
}

.pp-shop-qty { font-weight: 400; color: var(--text-secondary, #6b7280); }
.pp-shop-cost { font-weight: 700; color: var(--text-primary, #111827); white-space: nowrap; }

.pp-shop-divider {
    height: 1px;
    background: var(--border, #e5e7eb);
    margin: 10px 0;
}

.pp-shop-total {
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-primary, #111827);
    padding: 2px 0;
}

.pp-shop-total-value { color: var(--error, #dc2626); }

.pp-result-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
}

.pp-result-actions .btn {
    justify-content: center;
    white-space: nowrap;
}

.pp-action-wide { grid-column: 1 / -1; }

.pp-section {
    border-top: 1px solid var(--border, #e5e7eb);
    padding-top: 20px;
}

/* Tabela de balanço de insumos */
.pp-ledger-section {
    margin-top: 24px;
    padding-top: 22px;
}

.pp-ledger-wrap { overflow-x: auto; }

.pp-ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.pp-ledger thead th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
    white-space: nowrap;
}

.pp-ledger tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    color: var(--text-primary, #111827);
    vertical-align: middle;
}

.pp-ledger .pp-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pp-ledger .pp-center { text-align: center; }

.pp-ledger-warn { background: var(--pp-amber-soft); }

.pp-ledger .pp-ing-name {
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.pp-ledger tfoot td {
    padding: 12px;
    font-weight: 800;
    color: var(--text-primary, #111827);
    background: var(--bg-secondary, #f9fafb);
}

.pp-ledger-total { color: var(--error, #dc2626); }

.pp-ing-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.pp-ing-badge i { font-size: 0.75rem; }

.pp-badge-ok { background: var(--pp-success-soft); color: var(--success, #059669); }
.pp-badge-warn { background: var(--pp-amber-soft); color: var(--warning, #d97706); }

.pp-muted-text {
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
    margin: 0;
    padding: 8px 0;
}

@media (max-width: 900px) {
    .pp-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .pp-card {
        padding: 20px 16px;
    }

    .pp-stat-full {
        grid-column: 1 / -1;
    }

    /* Tabela de balanço vira cartões empilhados */
    .pp-ledger {
        display: block;
    }

    .pp-ledger thead {
        display: none;
    }

    .pp-ledger tbody {
        display: block;
    }

    .pp-ledger tbody tr {
        display: block;
        border: 1px solid var(--border, #e5e7eb);
        border-radius: 12px;
        margin-bottom: 10px;
        background: var(--card-bg, #fff);
        overflow: hidden;
    }

    .pp-ledger tbody tr.pp-ledger-warn {
        background: var(--pp-amber-soft);
    }

    .pp-ledger tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        border: none;
        text-align: right;
        white-space: normal;
    }

    .pp-ledger tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-secondary, #6b7280);
        text-align: left;
    }

    .pp-ledger tbody td:first-child {
        background: var(--bg-secondary, #f9fafb);
        justify-content: flex-start;
    }

    .pp-ledger tbody td:first-child::before { content: ""; }

    .pp-ledger tfoot {
        display: block;
    }

    .pp-ledger tfoot tr {
        display: flex;
        justify-content: space-between;
        padding: 12px;
        font-weight: 800;
    }

    .pp-ledger tfoot td {
        padding: 0;
        border: none;
        background: transparent;
    }
}

/* Loading overlay — scoped via b-xxx */
.processando-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.processando-modal {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    min-width: 250px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.processando-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 16px;
    display: block;
}

.processando-texto {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.processando-aguarde {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}
/* ===== Producao/ProducaoPage.razor.css ===== */
.producao-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 16px 20px;
    padding: 0 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    background: var(--card-bg, #fff);
    transition: box-shadow 0.15s;
}

.producao-search:focus-within {
    box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.12);
    border-color: var(--primary, #325bb3);
}

.producao-search-icon {
    flex-shrink: 0;
    color: var(--text-secondary, #6b7280);
    font-size: 1rem;
}

.producao-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--text-primary, #111827);
    outline: none;
    min-width: 0;
}

.producao-search-input::placeholder {
    color: var(--text-secondary, #6b7280);
}

.producao-search-clear {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    padding: 4px;
    font-size: 0.78rem;
    border-radius: 6px;
}

.producao-search-clear:hover {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary, #111827);
}

/* Search Results */
.producao-search-results {
    padding: 0 16px 24px;
}

.producao-results-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.producao-results-title strong {
    font-weight: 700;
}

.producao-results-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--text-secondary, #6b7280);
}

.producao-results-empty i {
    font-size: 2rem;
    opacity: 0.45;
}

.producao-results-empty p {
    margin: 0;
    font-size: 0.9rem;
}

.producao-results-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.producao-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    text-decoration: none;
    color: var(--text-primary, #111827);
    transition: background 0.12s, box-shadow 0.12s;
}

.producao-result-item:hover {
    background: var(--bg-secondary, #f3f4f6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.producao-result-item i:last-child {
    margin-left: auto;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8rem;
}

.producao-result-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.badge-produto {
    background: #e8f3ff;
    color: #1b67be;
}

.badge-receita {
    background: #eafbf0;
    color: #159a56;
}

.badge-ingrediente {
    background: #fff4e8;
    color: #c57421;
}

.badge-material {
    background: #f0e6ff;
    color: #7c3aed;
}

.badge-fornecedor {
    background: #fce7f3;
    color: #db2777;
}

.badge-catalogo {
    background: #e0f2fe;
    color: #0284c7;
}

.producao-result-name {
    font-size: 0.88rem;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Loading */
.producao-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 16px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
}

/* Cards Grid */
.producao-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    padding: 16px;
}

.producao-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border, #f0f2f5);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

    .producao-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--primary, #325bb3);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .producao-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border-color: rgba(50, 91, 179, 0.2);
    }

        .producao-card:hover::before {
            opacity: 1;
        }

.producao-card-body {
    padding: 22px 22px 20px;
    flex: 1;
}

.producao-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.producao-card-icon-wrapper {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 91, 179, 0.08);
    border-radius: 12px;
    color: var(--primary, #325bb3);
    font-size: 1.3rem;
    transition: all 0.3s ease;
}

.producao-card:hover .producao-card-icon-wrapper {
    background: var(--primary, #325bb3);
    color: #ffffff;
}

.producao-card-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    letter-spacing: -0.025em;
}

.producao-card-head p {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    line-height: 1.4;
}

/* Indicators */
.producao-indicators {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.producao-indicator-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-subtle, #f8fafc);
    border-radius: 10px;
    margin-bottom: 4px;
}

    .producao-indicator-main strong {
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--text-primary, #111827);
        line-height: 1;
    }

    .producao-indicator-main span {
        color: var(--text-secondary, #64748b);
        font-size: 0.82rem;
        font-weight: 500;
        text-transform: lowercase;
    }

.producao-indicator-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    padding-left: 4px;
}

    .producao-indicator-detail i {
        font-size: 0.9rem;
        opacity: 0.7;
    }

.producao-indicator-warn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fffbeb;
    color: #92400e;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #fef3c7;
}

    .producao-indicator-warn i {
        color: #d97706;
    }

/* Card Actions */
.producao-card-actions {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    background: var(--card-bg, #ffffff);
    border-top: 1px solid var(--border, #f1f5f9);
}

    .producao-card-actions .btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 14px;
        font-size: 0.825rem;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.2s ease;
        text-decoration: none;
    }

.btn-primary {
    background: var(--primary, #325bb3);
    color: #ffffff;
    border: none;
}

    .btn-primary:hover {
        filter: brightness(1.1);
        box-shadow: 0 4px 12px rgba(50, 91, 179, 0.25);
    }

.btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

    .btn-secondary:hover {
        background: #e2e8f0;
        color: #1e293b;
    }

/* Mobile Adjustments */
@container layout (max-width: 768px) {
    .producao-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 0;
    }

    .producao-card-body {
        padding: 20px;
    }
}

/* ===== Gestão de Produção — layout 12-col (recursos + ferramentas) ===== */
.producao-header h1 {
    font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.producao-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 8px 16px 24px;
}

.producao-resources,
.producao-resources .producao-card { min-width: 0; }

@container layout (min-width: 1024px) {
    .producao-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
    }
}

@container layout (min-width: 1440px) {
    .producao-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 36px;
    }
}

.producao-subhead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary, #111827);
}

    .producao-subhead i { color: var(--primary, #325bb3); }

.producao-resources .producao-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 20px;
    padding: 0;
}

/* Em ecrãs largos o painel de recursos comporta 2 colunas espaçosas */
@container layout (min-width: 1024px) {
    .producao-resources .producao-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container layout (min-width: 1680px) {
    .producao-resources .producao-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.producao-tools {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.producao-tools .tool-card { width: 100%; }

.producao-tools-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Card de ferramenta em destaque (Simulador) */
.tool-card--featured {
    border-color: rgba(50, 91, 179, 0.25);
}

    .tool-card--featured::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: var(--gradient-brand, linear-gradient(90deg, #325bb3, #6366f1));
    }

.tool-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--primary, #325bb3);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}

.tool-card--featured:hover .tool-cta { filter: brightness(1.08); }
.tool-card--featured::after { display: none; }

/* Cards de ferramenta pequenos (Lista de Compras / QR) */
.tool-card--mini {
    align-items: center;
    text-align: center;
    padding: 18px 14px;
    gap: 10px;
}

    .tool-card--mini .tool-icon-wrapper { margin-bottom: 0; }
    .tool-card--mini .tool-name { margin: 0; font-size: 0.86rem; }
    .tool-card--mini::after { display: none; }

@media (max-width: 640px) {
    .producao-layout { padding: 8px 16px 20px; gap: 22px; }
    .producao-tools-row { grid-template-columns: 1fr 1fr; }

    .producao-tools .tool-card--featured,
    .producao-tools .tool-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .producao-tools .tool-card--mini {
        align-items: center;
        text-align: center;
    }

    .producao-tools .tool-card--mini .tool-description { white-space: normal; }

    /* Recursos: tiles compactos em 2 colunas (como o mockup) */
    .producao-resources .producao-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .producao-resources .producao-card { border-radius: 14px; }

    .producao-resources .producao-card-body { padding: 14px; }

    .producao-resources .producao-card-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 10px;
    }

    .producao-resources .producao-card-head h3 { font-size: 0.95rem; }
    .producao-resources .producao-card-head p { display: none; }

    .producao-resources .producao-indicator-main {
        padding: 6px 10px;
        margin-bottom: 0;
    }

    .producao-resources .producao-indicator-main strong { font-size: 1.1rem; }
    .producao-resources .producao-indicator-detail { display: none; }

    .producao-resources .producao-card-actions {
        padding: 10px 14px;
        gap: 8px;
    }

    .producao-resources .producao-card-actions .btn {
        padding: 9px 0;
        gap: 0;
        font-size: 0;
    }

    .producao-resources .producao-card-actions .btn i {
        font-size: 1rem;
    }
}

/* Seção de Ferramentas */
.section-title-wrapper {
    margin-top: 40px;
    padding: 0 16px;
}

.section-title-flex {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f1f5f9;
}

.section-title-icon {
    font-size: 1.4rem;
    color: var(--primary, #325bb3);
}

.section-title-text {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    letter-spacing: -0.02em;
}

/* Grid de Ferramentas */
.grid-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Card de Ferramenta Individual */
.tool-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .tool-card:hover {
        border-color: var(--primary, #325bb3);
        background: var(--surface-subtle, #f8fafc);
        transform: translateY(-4px);
        box-shadow: 0 12px 20px -8px rgba(50, 91, 179, 0.15);
    }

.tool-icon-wrapper {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-subtle, #f1f5f9);
    border-radius: 12px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.tool-card:hover .tool-icon-wrapper {
    background: var(--primary, #325bb3);
    color: #ffffff;
    transform: scale(1.1);
}

.tool-icon {
    font-size: 1.4rem;
    color: var(--primary, #325bb3);
    transition: color 0.3s ease;
}

.tool-card:hover .tool-icon {
    color: #ffffff;
}

.tool-name {
    margin: 0 0 8px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    overflow-wrap: break-word;
    min-width: 0;
}

.tool-description {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Efeito de Seta Oculta no Hover */
.tool-card::after {
    content: "\F138"; /* bi-arrow-right-circle */
    font-family: "bootstrap-icons";
    position: absolute;
    bottom: 24px;
    right: 24px;
    font-size: 1.2rem;
    color: var(--primary, #325bb3);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.tool-card:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Ajustes Mobile */
@media (max-width: 640px) {
    .grid-tools {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tool-card {
        padding: 16px;
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .tool-icon-wrapper {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .tool-content {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .tool-name {
        margin-bottom: 2px;
    }

    .tool-description {
        white-space: normal;
        overflow-wrap: break-word;
    }

    .tool-card::after {
        display: none; /* Remove a seta no mobile para economizar espaço */
    }
}


/* Dark Mode */
[data-theme="dark"] .producao-search {
    background: var(--card-bg, #1e2538);
    border-color: var(--border, #2d3550);
}

[data-theme="dark"] .producao-search-input {
    color: var(--text-primary, #f3f4f6);
}

[data-theme="dark"] .producao-card {
    background: var(--card-bg, #1e2538);
    border-color: var(--border, #2d3550);
}

[data-theme="dark"] .producao-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .producao-card-head h3 {
    color: var(--text-primary, #f3f4f6);
}

[data-theme="dark"] .producao-card-actions {
    border-top-color: var(--border, #2d3550);
    background: var(--bg-secondary, #1a2033);
}

[data-theme="dark"] .producao-indicator-main {
    background: var(--bg-secondary, #1a2033);
}

[data-theme="dark"] .producao-indicator-warn {
    background: rgba(217, 119, 6, 0.12);
    color: #fbbf24;
    border-color: rgba(217, 119, 6, 0.3);
}

    [data-theme="dark"] .producao-indicator-warn i {
        color: #fbbf24;
    }

[data-theme="dark"] .btn-secondary {
    background: var(--bg-secondary, #252535);
    color: var(--text-secondary, #9ca3af);
    border-color: var(--border, #374151);
}

    [data-theme="dark"] .btn-secondary:hover {
        background: var(--border, #374151);
        color: var(--text-primary, #f3f4f6);
    }

[data-theme="dark"] .section-title-flex {
    border-bottom-color: var(--border, #2d3550);
}

[data-theme="dark"] .tool-card {
    background: var(--card-bg, #1e2538);
    border-color: var(--border, #2d3550);
}

    [data-theme="dark"] .tool-card:hover {
        background: var(--bg-secondary, #1a2033);
        border-color: var(--primary, #4d7fd4);
    }

[data-theme="dark"] .tool-icon-wrapper {
    background: var(--bg-secondary, #252535);
}

[data-theme="dark"] .tool-name {
    color: var(--text-primary, #f3f4f6);
}

[data-theme="dark"] .producao-result-item {
    background: var(--card-bg, #1e2538);
    border-color: var(--border, #2d3550);
    color: var(--text-primary, #f3f4f6);
}

[data-theme="dark"] .producao-result-item:hover {
    background: var(--bg-secondary, #252535);
}

[data-theme="dark"] .badge-produto {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

[data-theme="dark"] .badge-receita {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

[data-theme="dark"] .badge-ingrediente {
    background: rgba(234, 179, 8, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .badge-material {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

[data-theme="dark"] .badge-fornecedor {
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
}

[data-theme="dark"] .badge-catalogo {
    background: rgba(14, 165, 233, 0.15);
    color: #38bdf8;
}

/* ===== Produtos/ProdutoDetalhePage.razor.css ===== */
.rd-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 24px;
}

.rd-header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    gap: 8px;
}

.rd-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.rd-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
}

.rd-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
}

.rd-summary-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rd-summary-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rd-summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rd-descricao {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.rd-section {
    margin-bottom: 24px;
}

.rd-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rd-costos-grid {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
}

.rd-custo-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--text-primary);
    padding: 8px 0;
}

    .rd-custo-row + .rd-custo-row {
        border-top: 1px solid var(--border);
    }

.rd-custo-destaque {
    font-weight: 700;
    font-size: 0.95rem;
    color: #10b981;
    border-top: 2px solid var(--border);
}

.rd-impacto-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
    background: linear-gradient(135deg, var(--card-bg), rgba(50, 91, 179, 0.04));
}

.rd-impacto-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.88rem;
}

    .rd-impacto-row span {
        color: var(--text-secondary);
    }

    .rd-impacto-row strong {
        color: var(--primary);
        font-size: 0.95rem;
    }

.rd-receitas-vinculadas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rd-receita-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--primary);
    text-decoration: none;
    background: var(--card-bg);
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .rd-receita-link:hover {
        background: rgba(50, 91, 179, 0.08);
        border-color: var(--primary);
    }

.rd-partilha-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 12px;
    background: rgba(50, 91, 179, 0.06);
    border-radius: 10px;
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .empty-state i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .empty-state h3 {
        margin: 0 0 16px;
    }

@container layout (max-width: 640px) {
    .rd-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Produtos/Produtos.razor.css ===== */
/* ── Shell ── */

.rc-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 20px;
}

/* ── Toolbar / Search ── */

.rc-toolbar {
    margin-bottom: 16px;
}

.rc-search {
    position: relative;
    max-width: 400px;
}

    .rc-search i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        z-index: 1;
    }

.rc-search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

    .rc-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.1);
    }

.rc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
}

/* ── Summary ── */

.rc-summary {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rc-summary-item {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

    .rc-summary-item strong {
        color: var(--text-primary);
    }

/* ── Desktop Table ── */

.rc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .rc-table thead {
        background: var(--bg-secondary, #f8f9fa);
    }

    .rc-table th {
        padding: 12px 14px;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .rc-table td {
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
    }

.rc-table-row {
    cursor: pointer;
    transition: background 0.1s;
}

    .rc-table-row:hover {
        background: rgba(50, 91, 179, 0.03);
    }

.rc-cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

    .rc-cell-name div {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .rc-cell-name strong {
        font-size: 0.88rem;
        color: var(--text-primary);
    }

    .rc-cell-name small {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

.rc-cell-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 91, 179, 0.08);
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.rc-cell-number {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.rc-cell-destaque {
    color: #10b981;
}

.rc-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.rc-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.12s;
    font-size: 0.9rem;
}

    .rc-action-btn:hover {
        background: var(--bg-secondary, #f8f9fa);
        color: var(--primary);
    }

.rc-action-btn--danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* ── Badges ── */

.rc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rc-badge--info {
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
}

/* ── Pagination ── */

.rc-pagination {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* ── Mobile Cards ── */

.rc-cards {
    display: none;
}

@media (max-width: 768px) {
    .rc-table-wrap {
        display: none;
    }

    .rc-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .rc-card {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-bg);
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow 0.12s;
    }

        .rc-card:hover {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

    .rc-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 8px;
    }

    .rc-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(50, 91, 179, 0.08);
        color: var(--primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .rc-card-title {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

        .rc-card-title strong {
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .rc-card-title small {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

    .rc-card-body {
        padding: 8px 16px;
    }

    .rc-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 0.85rem;
        color: var(--text-primary);
    }

        .rc-card-row span {
            color: var(--text-secondary);
        }

    .rc-text-destaque {
        color: #10b981 !important;
    }

    .rc-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px 14px;
        border-top: 1px solid var(--border);
    }

    .rc-card-actions {
        display: flex;
        gap: 8px;
    }

    .rc-card-btn {
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--card-bg);
        color: var(--text-primary);
        transition: all 0.12s;
        display: inline-flex;
        align-items: center;
    }

        .rc-card-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

    .rc-card-btn--primary {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

        .rc-card-btn--primary:hover {
            opacity: 0.9;
            color: #fff;
        }
}

/* ── Empty state ── */

.rc-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .rc-empty i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .rc-empty h3 {
        margin: 0 0 8px;
    }

    .rc-empty p {
        margin: 0;
        font-size: 0.88rem;
    }

/* ===== Receitas/ReceitaDetalhePage.razor.css ===== */
.rd-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 24px;
}

.rd-header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    gap: 8px;
}

.rd-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.rd-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
}

.rd-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
}

.rd-summary-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rd-summary-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rd-summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rd-descricao {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.rd-section {
    margin-bottom: 24px;
}

.rd-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rd-count-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary, #f8f9fa);
    padding: 2px 8px;
    border-radius: 20px;
}

.rd-costos-grid {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg);
}

.rd-custo-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--text-primary);
    padding: 8px 0;
}

    .rd-custo-row + .rd-custo-row {
        border-top: 1px solid var(--border);
    }

.rd-custo-total {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary);
}

.rd-custo-destaque {
    font-weight: 700;
    font-size: 0.95rem;
    color: #10b981;
    border-top: 2px solid var(--border);
}

.rd-items-list {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.rd-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: 0.85rem;
}

    .rd-item-row + .rd-item-row {
        border-top: 1px solid var(--border);
    }

.rd-item-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.rd-item-qty {
    text-align: right;
    color: var(--text-secondary);
    min-width: 70px;
}

.rd-item-valor {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 80px;
}

.rd-partilha-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 12px;
    background: rgba(50, 91, 179, 0.06);
    border-radius: 10px;
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .empty-state i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .empty-state h3 {
        margin: 0 0 16px;
    }

@container layout (max-width: 640px) {
    .rd-summary-grid {
        grid-template-columns: 1fr;
    }

    .rd-item-row {
        flex-wrap: wrap;
    }

    .rd-item-name {
        flex: 1 1 100%;
        margin-bottom: 4px;
    }

    .rd-item-qty {
        flex: 1;
        text-align: left;
    }
}

/* ===== Receitas/ReceitaWizardPage.razor.css ===== */
/* ── Wizard Shell ── */

.wizard-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 24px;
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px 0;
    overflow-x: auto;
    gap: 4px;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: default;
    min-width: 60px;
    flex-shrink: 0;
}

    .wizard-step.done {
        cursor: pointer;
    }

    .wizard-step.active {
        cursor: pointer;
    }

.wizard-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--border);
    color: var(--text-secondary);
    transition: all 0.2s;
}

.wizard-step.active .wizard-step-circle {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(50,91,179,0.2);
}

.wizard-step.done .wizard-step-circle {
    background: #10b981;
    color: #fff;
}

.wizard-step-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.wizard-step.active .wizard-step-label {
    color: var(--primary);
    font-weight: 600;
}

.wizard-body {
    min-height: 300px;
    animation: fadeIn 0.2s ease;
}

.wiz-step-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.wiz-step-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 20px;
}

/* ── Fields ── */

.wiz-field-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wiz-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .wiz-field label {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.wiz-input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

    .wiz-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50,91,179,0.1);
    }

.wiz-select {
    cursor: pointer;
    appearance: auto;
}

.wiz-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wiz-input-btn-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.wiz-input-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    min-width: 42px;
    transition: opacity 0.12s;
}

    .wiz-input-btn:hover {
        opacity: 0.9;
    }

.required {
    color: #ef4444;
}

.wiz-textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.wiz-field-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ── Toggle Switch ── */

.wiz-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

    .wiz-toggle-row span {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-primary);
    }

.wiz-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

    .wiz-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.wiz-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border);
    border-radius: 22px;
    transition: 0.2s;
}

    .wiz-switch-slider::before {
        content: "";
        position: absolute;
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: 0.2s;
    }

.wiz-switch input:checked + .wiz-switch-slider {
    background: var(--primary);
}

    .wiz-switch input:checked + .wiz-switch-slider::before {
        transform: translateX(18px);
    }

.wiz-switch-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .wiz-switch-label span {
        font-size: 0.88rem;
        font-weight: 500;
        color: var(--text-primary);
    }

/* ── Product/Ingredient Cards ── */

.wiz-search-box {
    position: relative;
    margin-bottom: 16px;
}

    .wiz-search-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
    }

    .wiz-search-box .wiz-input {
        padding-left: 36px;
    }

.wiz-product-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 20px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

    .wiz-product-scroll::-webkit-scrollbar {
        height: 4px;
    }

    .wiz-product-scroll::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px;
    }

.wiz-product-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    cursor: pointer;
    text-align: left;
    transition: all 0.12s;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 130px;
}

    .wiz-product-card:hover {
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(50,91,179,0.1);
    }

    .wiz-product-card strong {
        font-size: 0.85rem;
        color: var(--text-primary);
    }

    .wiz-product-card span {
        font-size: 0.78rem;
        color: var(--primary);
        font-weight: 600;
    }

    .wiz-product-card .wiz-card-supplier {
        font-size: 0.7rem;
        color: var(--text-secondary);
        font-weight: 400;
        line-height: 1.2;
    }

    .wiz-product-card .wiz-card-supplier i {
        font-size: 0.65rem;
        margin-right: 1px;
    }

    .wiz-product-card .wiz-card-supplier--none {
        font-style: italic;
        opacity: 0.45;
    }

.wiz-product-add {
    align-items: center;
    justify-content: center;
    border-style: dashed;
    color: var(--primary);
    min-width: 80px;
}

    .wiz-product-add i {
        font-size: 1.1rem;
    }

    .wiz-product-add span {
        font-size: 0.78rem;
        font-weight: 600;
    }

.wiz-product-added {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.wiz-added-tag {
    display: block;
    font-size: 0.65rem;
    color: #10b981;
    font-weight: 600;
    margin-top: 2px;
}

.wiz-product-card--system {
    border-color: #93c5fd;
    background: rgba(59, 130, 246, 0.04);
}

    .wiz-product-card--system:hover {
        border-color: #3b82f6;
        background: rgba(59, 130, 246, 0.08);
    }

.wiz-system-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    color: #3b82f6;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
}

    .wiz-system-badge i {
        font-size: 0.6rem;
    }

.wiz-card-no-price {
    font-size: 0.72rem;
    color: #9ca3af;
    font-style: italic;
}

.wiz-empty-search {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

    .wiz-empty-search p {
        margin: 0 0 12px;
    }

/* ── Combo Dropdown Pesquisável ── */

.wiz-combo-wrapper { position: relative; }
.wiz-combo-input-wrap { position: relative; flex: 1; }
    .wiz-combo-input-wrap .wiz-input { width: 100%; padding-right: 32px; }

.wiz-combo-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #9ca3af; cursor: pointer;
    padding: 2px 4px; border-radius: 4px; font-size: 0.8rem; line-height: 1;
}
    .wiz-combo-clear:hover { color: #6b7280; background: rgba(0,0,0,0.05); }

.wiz-combo-dropdown {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card-bg, #fff); border: 1px solid var(--border);
    border-radius: 8px; max-height: 220px; overflow-y: auto;
    z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,0.12); margin-top: 4px;
}

.wiz-combo-item {
    padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px;
    font-size: 0.85rem; transition: background 0.15s;
}
    .wiz-combo-item:hover { background: var(--hover-bg, rgba(0,0,0,0.03)); }
    .wiz-combo-item.selected { background: rgba(59,130,246,0.08); font-weight: 600; }
    .wiz-combo-item .wiz-system-badge { margin-left: auto; }

.wiz-combo-empty {
    padding: 12px; color: #9ca3af; text-align: center; font-size: 0.82rem;
}

/* ── Items Table ── */

.wiz-section-subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 16px 0 10px;
}

.wiz-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card-bg);
}

.wiz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .wiz-table thead {
        background: var(--bg-secondary, #f8f9fa);
    }

    .wiz-table th {
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .wiz-table td {
        padding: 8px 12px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
    }

th.col-qty, th.col-price, th.col-subtotal {
    text-align: right;
}

th.col-unit {
    width: 80px;
    text-align: center;
}

.col-actions {
    width: 40px;
}

.cell-name {
    font-weight: 500;
    color: var(--text-primary);
    min-width: 100px;
}

.cell-name .cell-supplier {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 1px;
}

.cell-name .cell-supplier i {
    font-size: 0.7rem;
    margin-right: 2px;
}

.cell-name .cell-supplier--none {
    font-style: italic;
    opacity: 0.5;
}

.cell-qty {
    width: 80px;
    text-align: right;
}

.cell-unit {
    width: 80px;
    text-align: center;
}

.cell-price, .cell-subtotal {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-primary);
}

.cell-action {
    text-align: center;
}

.wiz-input-table {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    text-align: center;
    outline: none;
}

    .wiz-input-table:focus {
        border-color: var(--primary);
    }

.cell-qty .wiz-input-table {
    width: 90px;
}

.wiz-select-table {
    width: 70px;
    padding: 4px 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.82rem;
    text-align: center;
    outline: none;
    cursor: pointer;
}

    .wiz-select-table:focus {
        border-color: var(--primary);
    }

.wiz-items-subtotal {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 8px;
    background: var(--card-bg);
}

.wiz-empty-items {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary);
}

    .wiz-empty-items i {
    font-size: 1.7rem;
        display: block;
        margin-bottom: 8px;
        opacity: 0.4;
    }

    .wiz-empty-items p {
        margin: 0;
        font-size: 0.88rem;
    }

/* ── Buttons / Footer ── */

.wizard-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.wf-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
}

    .wf-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.wf-btn-outline {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

    .wf-btn-outline:hover:not(:disabled) {
        border-color: var(--primary);
        color: var(--primary);
    }

.wf-btn-primary {
    background: var(--primary);
    color: #fff;
}

    .wf-btn-primary:hover:not(:disabled) {
        opacity: 0.9;
    }

.wf-btn-success {
    background: #10b981;
    color: #fff;
}

    .wf-btn-success:hover:not(:disabled) {
        opacity: 0.9;
    }

/* ── Modal ── */

.wiz-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
}

.wiz-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    min-width: 320px;
    max-width: 90vw;
    z-index: 1000;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

    .wiz-modal h3 {
        margin: 0 0 16px;
        font-size: 1.05rem;
        color: var(--text-primary);
    }

.wiz-modal-field {
    margin-bottom: 12px;
}

    .wiz-modal-field label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
    }

.wiz-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* ── Result Step ── */

.wiz-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.wiz-result-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    transition: box-shadow 0.15s;
}

.wiz-result-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.wiz-result-card--total .wiz-result-card-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.wiz-result-card--fatia .wiz-result-card-icon {
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
}

.wiz-result-card-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wiz-result-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wiz-result-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* ── Detail costs ── */

.wiz-detalhe-custos {
    margin-bottom: 16px;
}

.wiz-detalhe-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-primary);
    padding: 6px 0;
}

    .wiz-detalhe-row + .wiz-detalhe-row {
        border-top: 1px solid var(--border);
    }

.wiz-detalhe-row--total {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
}

/* ── Método de cálculo radio ── */

.wiz-radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wiz-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s;
    background: var(--card-bg);
    user-select: none;
}

    .wiz-radio-item:hover {
        border-color: var(--primary);
    }

    .wiz-radio-item.selected {
        border-color: var(--primary);
        background: rgba(50, 91, 179, 0.05);
    }

    .wiz-radio-item input[type="radio"] {
        accent-color: var(--primary);
        flex-shrink: 0;
    }

.wiz-radio-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* ── Seletor de Modo de Trabalho (Configurações Financeiras) ── */

.modo-trabalho-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (max-width: 600px) {
    .modo-trabalho-grid {
        grid-template-columns: 1fr;
    }
}

.modo-trabalho-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.12s;
    background: var(--card-bg);
    user-select: none;
}

    .modo-trabalho-card:hover {
        border-color: var(--primary);
    }

    .modo-trabalho-card.selected {
        border-color: var(--primary);
        background: rgba(50, 91, 179, 0.05);
    }

    .modo-trabalho-card input[type="radio"] {
        display: none;
    }

.modo-trabalho-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modo-trabalho-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modo-trabalho-card-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.modo-trabalho-sugestao {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

    .modo-trabalho-sugestao button {
        border: none;
        background: none;
        color: var(--primary);
        font-weight: 600;
        cursor: pointer;
        padding: 0;
    }

/* ── Perfil: cartão de topo com fundo em gradiente (estilo Stitch) ── */

.profile-card {
    overflow: hidden;
}

.profile-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 240px;
    height: 240px;
    background: var(--gradient-brand, linear-gradient(90deg, #325bb3, #6366f1));
    opacity: 0.12;
    border-radius: 50%;
    filter: blur(6px);
    pointer-events: none;
}

.profile-card-content {
    position: relative;
    z-index: 1;
}

/* ── Perfil: navegação por separadores (estilo Stitch) ── */

.profile-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 2px;
}

.profile-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border: none;
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s;
}

    .profile-tab-btn:hover {
        background: var(--surface);
        color: var(--text-primary);
    }

    .profile-tab-btn.active {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 4px 10px rgba(50, 91, 179, 0.25);
    }

.profile-tab-btn-danger {
    color: var(--error, #ef4444);
}

    .profile-tab-btn-danger:hover {
        background: rgba(239, 68, 68, 0.08);
        color: var(--error, #ef4444);
    }

    .profile-tab-btn-danger.active {
        background: var(--error, #ef4444);
        color: #fff;
        box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25);
    }

.profile-tab-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.profile-risk-panel {
    border-color: rgba(239, 68, 68, 0.3);
}

@media (max-width: 640px) {
    .profile-tabs {
        flex-wrap: nowrap;
    }
}

/* ── Resumo extra (fatias info) ── */

.wiz-resumo-extra {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-top: 12px;
    flex-wrap: wrap;
}

.wiz-resumo-extra-dot {
    color: var(--text-secondary);
}

/* ── Section divider ── */

.wiz-section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

/* ── Preço sugerido ── */

.wiz-preco-sugerido {
    text-align: center;
    padding: 24px 16px;
    margin-top: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(50, 91, 179, 0.06), rgba(50, 91, 179, 0.12));
    border: 1px solid rgba(50, 91, 179, 0.15);
}

.wiz-preco-sugerido-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.wiz-preco-sugerido-valor {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

.wiz-preco-sugerido-detalhe {
    display: block;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* ── Margem ajuste ── */

.wiz-margem-ajuste {
    padding: 14px 0 0;
    margin-top: 14px;
}

    .wiz-margem-ajuste label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 8px;
    }

.wiz-margem-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wiz-margem-slider {
    flex: 1;
    height: 10px;
    appearance: none;
    background: var(--border);
    border-radius: 5px;
    outline: none;
}

    .wiz-margem-slider::-webkit-slider-thumb {
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--primary);
        cursor: pointer;
    }

.wiz-margem-slider-val {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    min-width: 40px;
    text-align: center;
}

/* ── Toggle Switch ── */

.wiz-toggle-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 14px;
    user-select: none;
    width: fit-content;
}

.wiz-toggle-switch input { display: none; }

.wiz-toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    transition: background 0.25s;
    flex-shrink: 0;
}

.wiz-toggle-switch input:checked + .wiz-toggle-track {
    background: var(--primary);
}

.wiz-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.wiz-toggle-switch input:checked + .wiz-toggle-track .wiz-toggle-thumb {
    transform: translateX(18px);
}

.wiz-toggle-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* ── Tooltip ── */

.wiz-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.wiz-tooltip-icon {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 4px;
    transition: color 0.15s;
}

.wiz-tooltip-wrap:hover .wiz-tooltip-icon,
.wiz-tooltip-icon:hover {
    color: var(--primary);
}

.wiz-tooltip-bubble {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card, #1e1e2e);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: normal;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    white-space: normal;
    width: 240px;
    text-align: center;
    z-index: 100;
    line-height: 1.4;
}

.wiz-tooltip-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--border);
}

.wiz-tooltip-wrap:hover .wiz-tooltip-bubble,
.wiz-tooltip-bubble.show {
    display: block;
}

/* ── Spinner ── */

.spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Responsive ── */

@media (min-width: 900px) {
    .wizard-shell {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile card layout for tables ── */

.wiz-table-responsive {
    width: 100%;
}

@media (max-width: 640px) {
    .wiz-table-responsive table,
    .wiz-table-responsive thead,
    .wiz-table-responsive tbody,
    .wiz-table-responsive th,
    .wiz-table-responsive td,
    .wiz-table-responsive tr {
        display: block;
    }

    .wiz-table-responsive thead {
        display: none;
    }

    .wiz-table-responsive tr {
        padding: 12px;
        margin-bottom: 8px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--card-bg);
    }

    .wiz-table-responsive td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border: none;
        text-align: right;
    }

    .wiz-table-responsive td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.78rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: left;
    }

    .wiz-table-responsive td.cell-name {
        font-weight: 700;
        font-size: 0.9rem;
        border-bottom: 1px solid var(--border);
        padding-bottom: 8px;
        margin-bottom: 4px;
    }

        .wiz-table-responsive td.cell-name::before {
            display: none;
        }

    .wiz-table-responsive td.cell-unit,
    .wiz-table-responsive td.cell-qty,
    .wiz-table-responsive td.cell-price,
    .wiz-table-responsive td.cell-subtotal {
        text-align: right;
    }

    .wiz-table-responsive td.cell-unit,
    .wiz-table-responsive td.cell-qty {
        width: auto;
    }

    .wiz-table-responsive .wiz-select-table {
        width: auto;
        min-width: 70px;
    }

    .wiz-table-responsive td.cell-action {
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--border);
        margin-top: 4px;
    }

        .wiz-table-responsive td.cell-action::before {
            display: none;
        }

    .wiz-table-responsive .wiz-input-table {
        width: 70px;
    }

    .wiz-table-responsive .cell-qty .wiz-input-table {
        width: 95px;
    }
}

@container layout (max-width: 640px) {
    .wizard-step {
        min-width: 48px;
    }

    .wizard-step-circle {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .wizard-step-label {
        font-size: 0.6rem;
    }

    .wiz-field-row {
        grid-template-columns: 1fr;
    }

    .wiz-product-scroll {
        gap: 6px;
    }

    .wiz-result-grid {
        grid-template-columns: 1fr;
    }

}

/* ===== Receitas/Receitas.razor.css ===== */
/* ── Shell ── */

.rc-shell {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding: 20px;
}

/* ── Toolbar / Search ── */

.rc-toolbar {
    margin-bottom: 16px;
}

.rc-search {
    position: relative;
    max-width: 400px;
}

    .rc-search i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        z-index: 1;
    }

.rc-search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

    .rc-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.1);
    }

.rc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
}

/* ── Filters ── */

.rc-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rc-filter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
}

    .rc-filter-btn.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

    .rc-filter-btn:hover:not(.active) {
        border-color: var(--primary);
        color: var(--primary);
    }

/* ── Summary ── */

.rc-summary {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rc-summary-item {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

    .rc-summary-item strong {
        color: var(--text-primary);
    }

/* ── Desktop Table ── */

.rc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .rc-table thead {
        background: var(--bg-secondary, #f8f9fa);
    }

    .rc-table th {
        padding: 12px 14px;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .rc-table td {
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
    }

.rc-table-row {
    cursor: pointer;
    transition: background 0.1s;
}

    .rc-table-row:hover {
        background: rgba(50, 91, 179, 0.03);
    }

.rc-cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

    .rc-cell-name div {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .rc-cell-name strong {
        font-size: 0.88rem;
        color: var(--text-primary);
    }

    .rc-cell-name small {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

.rc-cell-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 91, 179, 0.08);
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.rc-cell-number {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.rc-cell-destaque {
    color: #10b981;
}

.rc-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.rc-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.12s;
    font-size: 0.9rem;
}

    .rc-action-btn:hover {
        background: var(--bg-secondary, #f8f9fa);
        color: var(--primary);
    }

.rc-action-btn--danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* ── Badges ── */

.rc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rc-badge--ok {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
}

.rc-badge--atencao {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

.rc-badge--info {
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
}

/* ── Mobile Cards ── */

.rc-cards {
    display: none;
}

@media (max-width: 768px) {
    .rc-table-wrap {
        display: none;
    }

    .rc-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .rc-card {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-bg);
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow 0.12s;
    }

        .rc-card:hover {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

    .rc-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 8px;
    }

    .rc-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(50, 91, 179, 0.08);
        color: var(--primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .rc-card-title {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

        .rc-card-title strong {
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .rc-card-title small {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

    .rc-card-body {
        padding: 8px 16px;
    }

    .rc-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 0.85rem;
        color: var(--text-primary);
    }

        .rc-card-row span {
            color: var(--text-secondary);
        }

    .rc-text-destaque {
        color: #10b981 !important;
    }

    .rc-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px 14px;
        border-top: 1px solid var(--border);
    }

    .rc-card-actions {
        display: flex;
        gap: 8px;
    }

    .rc-card-btn {
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--card-bg);
        color: var(--text-primary);
        transition: all 0.12s;
        display: inline-flex;
        align-items: center;
    }

        .rc-card-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

    .rc-card-btn--primary {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

        .rc-card-btn--primary:hover {
            opacity: 0.9;
            color: #fff;
        }
}

/* ── Empty state ── */

.rc-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

    .rc-empty i {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .rc-empty h3 {
        margin: 0 0 8px;
    }

    .rc-empty p {
        margin: 0;
        font-size: 0.88rem;
    }



/* ===== SimuladorPreco/SimuladorPreco.razor.css ===== */
.calc-page {
    max-width: 1280px;
    margin: 0 auto;
}

.calc-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.calc-page-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
}

.calc-page-subtitle {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 46rem;
}

.calc-currency-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color, var(--border));
    border-radius: var(--border-radius-lg, 12px);
    padding: 0.65rem 1rem;
    box-shadow: 0 1px 3px var(--shadow, rgba(0, 0, 0, 0.06));
}

.calc-currency-pill i {
    font-size: 1.3rem;
    color: var(--primary);
}

.calc-currency-pill-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.calc-currency-pill-value {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.calc-shell {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--spacing-lg, 1.5rem);
    align-items: start;
}

.calc-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    min-width: 0;
}

.calc-col-result {
    position: sticky;
    top: 24px;
}

.calc-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color, var(--border));
    border-radius: var(--border-radius-lg, 16px);
    padding: var(--spacing-lg, 1.5rem);
}

.calc-card-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

.calc-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-md, 1rem);
    border-bottom: 1px solid var(--border-color, var(--border));
}

.calc-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.calc-card-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0.15rem 0 0;
}

.calc-card-badge {
    margin-left: auto;
    align-self: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.calc-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gradient-brand, var(--primary));
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}

.calc-form-group {
    margin-bottom: var(--spacing-md, 1rem);
}

.calc-form-group > label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.calc-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color, var(--border));
    border-radius: var(--border-radius-md, 8px);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.calc-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}

.calc-autocomplete {
    width: 100%;
}

.calc-row-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm, 0.75rem);
}

/* Passo 1 — resumo da receita calculada */
.calc-recipe-summary {
    margin-top: var(--spacing-sm, 0.75rem);
    padding-top: var(--spacing-md, 1rem);
    border-top: 1px dashed var(--border-color, var(--border));
}

.calc-recipe-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.calc-recipe-meta {
    background: var(--bg-secondary, var(--surface-subtle));
    border-radius: var(--border-radius-md, 10px);
    padding: 0.6rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.calc-recipe-meta-highlight {
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-secondary, var(--surface-subtle)));
}

.calc-recipe-meta-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.calc-recipe-meta-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.calc-ingredient-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--bg-secondary, var(--surface-subtle));
    border-radius: var(--border-radius-md, 10px);
    padding: 0.5rem;
}

.calc-ingredient-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    border-radius: var(--border-radius-sm, 6px);
    background: var(--card-bg);
    font-size: 0.85rem;
}

.calc-ingredient-name {
    color: var(--text-primary);
    font-weight: 500;
}

.calc-ingredient-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.82rem;
}

/* Passo 2 — despesas em toggle */
.calc-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.calc-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--border-radius-md, 10px);
    background: var(--bg-secondary, var(--surface-subtle));
    cursor: pointer;
    transition: background 0.12s;
}

.calc-toggle-row:hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-secondary, var(--surface-subtle)));
}

.calc-toggle-row-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.calc-toggle-row-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.calc-toggle-row-type {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.calc-toggle-row-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.calc-toggle-row-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.calc-toggle {
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--border-color, var(--border));
    padding: 2px;
    flex-shrink: 0;
    transition: background 0.15s;
}

.calc-toggle.on {
    background: var(--primary);
    justify-content: flex-end;
}

.calc-toggle-knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.calc-expense-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--border-radius-md, 10px);
    border: 1px dashed var(--border-color, var(--border));
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
}

.calc-expense-add:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.calc-cpv-banner {
    margin-top: var(--spacing-md, 1rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--border-radius-md, 10px);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.calc-cpv-banner strong {
    font-size: 1rem;
    color: var(--primary);
}

/* Passo 3 — método e margem */
.calc-method-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.calc-method-option {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.4rem;
    padding: 0.6rem 0.5rem;
    border-radius: var(--border-radius-md, 10px);
    border: 1px solid var(--border-color, var(--border));
    background: var(--bg-secondary, var(--surface-subtle));
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all 0.12s;
}

.calc-method-option.selected {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.calc-method-option input {
    display: none;
}

.calc-margin-box {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    border-radius: var(--border-radius-md, 10px);
    padding: 0.85rem;
    margin-bottom: var(--spacing-md, 1rem);
}

.calc-margin-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.calc-margin-pill {
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    border-radius: var(--border-radius-md, 8px);
    padding: 0.2rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
}

.calc-margin-pill small {
    font-size: 0.75rem;
    font-weight: 700;
}

.calc-range {
    width: 100%;
    accent-color: var(--primary);
    cursor: pointer;
}

.calc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1.2rem;
    border-radius: var(--border-radius-md, 10px);
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.calc-btn-block {
    width: 100%;
}

.calc-btn-primary {
    margin-top: var(--spacing-sm, 0.75rem);
    background: var(--gradient-brand, var(--primary));
    color: #fff;
}

.calc-btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
}

.calc-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.calc-btn-outline {
    border-color: var(--border-color, var(--border));
    color: var(--text-primary);
    background: transparent;
}

.calc-btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.calc-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: var(--spacing-md, 1rem);
}

/* Painel de resultado */
.calc-result-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color, var(--border));
    border-radius: var(--border-radius-lg, 16px);
    padding: var(--spacing-lg, 1.5rem);
}

.calc-result-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color, var(--border));
}

.calc-result-kicker {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary);
}

.calc-result-margin-pill {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 16%, transparent);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.calc-price-display {
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: var(--border-radius-md, 12px);
    background: var(--bg-secondary, var(--surface-subtle));
    margin-bottom: var(--spacing-md, 1rem);
}

.calc-price-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.calc-price-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.calc-price-sub {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--card-bg);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
}

.calc-price-sub strong {
    color: var(--text-primary);
}

.calc-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: var(--spacing-md, 1rem);
}

.calc-metric-tile {
    padding: 0.75rem;
    border-radius: var(--border-radius-md, 10px);
    background: var(--bg-secondary, var(--surface-subtle));
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.calc-metric-tile-success {
    background: color-mix(in srgb, var(--success) 12%, var(--bg-secondary, var(--surface-subtle)));
}

.calc-metric-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.calc-metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.calc-metric-tile-success .calc-metric-value {
    color: var(--success);
}

.calc-decomposition {
    margin-bottom: var(--spacing-md, 1rem);
}

.calc-decomposition-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.calc-decomposition-total {
    color: var(--text-secondary);
    font-weight: 500;
}

.calc-decomposition-bar {
    display: flex;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-secondary, var(--surface-subtle));
}

.calc-seg {
    height: 100%;
    transition: width 0.2s ease;
}

.calc-seg-cmv {
    background: var(--primary);
}

.calc-seg-despesas {
    background: var(--brand-indigo);
}

.calc-seg-lucro {
    background: var(--success);
}

.calc-decomposition-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.calc-decomposition-legend > span:last-child {
    grid-column: 1 / -1;
}

.calc-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.3rem;
}

.calc-breakeven {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem;
    border-radius: var(--border-radius-md, 10px);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    margin-bottom: var(--spacing-md, 1rem);
}

.calc-breakeven-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm, 8px);
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.calc-breakeven-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.calc-breakeven-text {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0.2rem 0 0;
}

.calc-warning-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    padding: 0.6rem 0.75rem;
    border-radius: var(--border-radius-md, 8px);
    margin-bottom: var(--spacing-md, 1rem);
}

.calc-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.calc-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

.calc-empty-state h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
}

.calc-empty-state p {
    font-size: 0.85rem;
    margin: 0;
}

@media (max-width: 1024px) {
    .calc-shell {
        grid-template-columns: 1fr;
    }

    .calc-col-result {
        position: static;
    }
}

@media (max-width: 640px) {
    .calc-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .calc-card,
    .calc-result-card {
        padding: 1rem;
        border-radius: var(--border-radius-md, 12px);
    }

    .calc-row-duo,
    .calc-recipe-meta-grid,
    .calc-metrics-grid,
    .calc-method-group {
        grid-template-columns: 1fr 1fr;
    }

    .calc-price-value {
        font-size: 1.8rem;
    }

    .calc-decomposition-legend {
        grid-template-columns: 1fr;
    }

    .calc-decomposition-legend > span:last-child {
        grid-column: auto;
    }
}

/* Loading overlay — scoped via b-xxx */
.processando-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.processando-modal {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    min-width: 250px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.processando-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 16px;
    display: block;
}

.processando-texto {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.processando-aguarde {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ===== Stock/Stock.razor.css ===== */
/* Stock Component Styles */

/* ===== Overrides finais ===== */
/* No mobile as ações da encomenda vivem no FAB (.pd-fab-mobile).
   Esta regra fica no fim do ficheiro e usa `.rd-shell` para ganhar
   aos blocos `.rd-header-actions { display:flex }` duplicados acima. */
@media (max-width: 768px) {
    .rd-shell .rd-header-actions { display: none; }
}

/* ===== Referências da encomenda (.ref-*) — Shared/Referencia/*.razor ===== */

.ref-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ref-loading {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.ref-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ref-item {
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    display: flex;
    gap: 6px;
    padding: 6px;
    position: relative;
}

.ref-item__thumb {
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    height: 64px;
    overflow: hidden;
    padding: 0;
    width: 64px;
}

.ref-item__thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.ref-item__link {
    align-items: center;
    background: var(--bg-secondary, #f8f9fa);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    font-size: 0.85rem;
    gap: 6px;
    max-width: 220px;
    padding: 10px 12px;
}

.ref-item__link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ref-item__remove {
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    height: 22px;
    justify-content: center;
    position: absolute;
    right: -6px;
    top: -6px;
    width: 22px;
}

.ref-item__remove:hover {
    color: #ef4444;
}

.ref-add-btn {
    align-items: center;
    align-self: flex-start;
    background: none;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    color: var(--primary);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 6px;
    padding: 8px 14px;
}

.ref-form {
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.ref-form__tabs {
    display: flex;
    gap: 6px;
}

.ref-form__tab {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
}

.ref-form__tab--ativo {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.ref-form__input {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.88rem;
    padding: 8px 10px;
    width: 100%;
}

.ref-filepicker {
    align-items: center;
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    padding: 20px 12px;
    position: relative;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ref-filepicker:hover {
    border-color: var(--primary);
}

.ref-filepicker__input {
    cursor: pointer;
    height: 100%;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
}

.ref-filepicker__icon {
    color: var(--text-secondary);
    font-size: 1.6rem;
}

.ref-filepicker__preview {
    border-radius: 8px;
    height: 64px;
    object-fit: cover;
    width: 64px;
}

.ref-filepicker__text {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.ref-form__erro {
    color: #ef4444;
    font-size: 0.8rem;
    margin: 0;
}

.ref-form__acoes {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ===================================================================
   Clientes — telas de Detalhe e Formulário (cd-* / cf-*)
   =================================================================== */

/* ---- Formulário ---- */
.cf-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.cf-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.cf-side-card,
.cf-block {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}

.cf-side-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 16px;
}

.cf-foto {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--surface-subtle, var(--panel-bg));
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-foto img { width: 100%; height: 100%; object-fit: cover; }

.cf-foto-placeholder {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--primary);
}

.cf-foto-actions { display: flex; gap: 8px; }

.cf-estado-row,
.cf-meta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--surface-subtle, var(--panel-bg));
}

.cf-estado-row strong { display: block; font-size: 0.9rem; color: var(--text-primary); }
.cf-estado-row small { color: var(--text-secondary); font-size: 0.78rem; }
.cf-meta span { color: var(--text-secondary); font-size: 0.82rem; }

.cf-block-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cf-block-num {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-block-num--alt { background: var(--brand-pink, var(--primary)); }

.cf-block-head h2 { margin: 0; font-size: 1rem; color: var(--text-primary); }
.cf-block-head p { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-secondary); }

.cf-pills {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--surface-subtle, var(--panel-bg));
    margin-bottom: 16px;
}

.cf-pills button {
    border: none;
    background: none;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s;
}

.cf-pills button.active { background: var(--primary); color: #fff; }

.cf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-field--wide { grid-column: 1 / -1; }

.cf-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.cf-req { color: var(--error); }

.cf-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel-bg, var(--card-bg));
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
}

.cf-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(50, 91, 179, 0.12);
}

textarea.cf-input { resize: vertical; min-height: 70px; }

.cf-tag-input { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }

.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cf-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 12px;
    border-radius: 20px;
    background: rgba(50, 91, 179, 0.1);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
}

.cf-chip-x {
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    padding: 2px;
    border-radius: 50%;
}

.cf-chip-x:hover { background: rgba(50, 91, 179, 0.2); }

.cf-savebar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ---- Detalhe ---- */
.cd-shell { display: flex; flex-direction: column; gap: 18px; }

.cd-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}

.cd-banner-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cd-avatar {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--gradient-brand, var(--primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.cd-avatar img { width: 100%; height: 100%; object-fit: cover; }

.cd-banner-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cd-banner-title h2 { margin: 0; font-size: 1.25rem; color: var(--text-primary); }

.cd-banner-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 0.83rem;
}

.cd-banner-meta span { display: inline-flex; align-items: center; gap: 5px; }

.cd-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.cd-kpi {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-kpi-label { font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; }
.cd-kpi-value { font-size: 1.15rem; color: var(--text-primary); }

.cd-kpi-select {
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--panel-bg, var(--card-bg));
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 2px 4px;
}

.cd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.cd-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cd-side { display: flex; flex-direction: column; gap: 14px; }

.cd-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
}

.cd-card h3 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cd-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.cd-kv:last-child { border-bottom: none; }
.cd-kv span { color: var(--text-secondary); }
.cd-kv strong { color: var(--text-primary); text-align: right; word-break: break-word; }

.cd-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
}

.cd-tab {
    border: none;
    background: none;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.12s;
}

.cd-tab:hover:not(.active) { background: var(--surface-subtle, var(--panel-bg)); }
.cd-tab.active { background: var(--primary); color: #fff; }

.cd-panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cd-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.cd-panel-head h3 { margin: 0; font-size: 1rem; color: var(--text-primary); }
.cd-panel-head p { margin: 3px 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.cd-panel-filter { max-width: 190px; }

.cd-panel-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.cd-panel-search { max-width: 220px; }

.cd-scroll {
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
}

.cd-pref-scroll {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cd-empty-inline {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.88rem;
    background: var(--surface-subtle, var(--panel-bg));
    border-radius: 10px;
}

.cd-muted { color: var(--text-secondary); }

.cd-orders { display: flex; flex-direction: column; gap: 10px; }

.cd-order {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
}

.cd-order-main {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.cd-order-info { min-width: 0; }
.cd-order-info h4 { margin: 0 0 4px; font-size: 0.95rem; color: var(--text-primary); }

.cd-order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.cd-order-meta span { display: inline-flex; align-items: center; gap: 4px; }

.cd-order-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.cd-order-side strong { color: var(--primary); font-size: 0.95rem; }
.cd-order-actions { display: flex; gap: 6px; }

.cd-order-btn {
    border: 1px solid var(--border);
    background: var(--panel-bg, var(--card-bg));
    color: var(--text-primary);
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cd-order-btn:hover { border-color: var(--primary); color: var(--primary); }
.cd-order-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.cd-order-btn--primary:hover { color: #fff; opacity: 0.92; }
.cd-order-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cd-events {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-events-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.cd-events-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.cd-event {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-subtle, var(--panel-bg));
    cursor: pointer;
    font-size: 0.8rem;
}

.cd-event.selected { border-color: var(--primary); background: rgba(50, 91, 179, 0.08); }
.cd-event-name { font-weight: 600; color: var(--text-primary); }

.cd-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 0.74rem;
}

.cd-event-meta span { display: inline-flex; align-items: center; gap: 3px; }
.cd-event-produtos { margin-top: 4px; color: var(--text-secondary); font-size: 0.74rem; }

.cd-pref-group { display: flex; flex-direction: column; gap: 8px; }
.cd-pref-group h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cd-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cd-note-add { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cd-note-add textarea { width: 100%; }

.cd-notes { display: flex; flex-direction: column; gap: 10px; }

.cd-note {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    background: var(--surface-subtle, var(--panel-bg));
}

.cd-note-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    margin-bottom: 4px;
}

.cd-note-autor { font-weight: 700; color: var(--primary); }
.cd-note-data { color: var(--text-secondary); }

.cd-note-x {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 6px;
}

.cd-note-x:hover { color: var(--error); background: rgba(239, 68, 68, 0.1); }
.cd-note p { margin: 0; font-size: 0.86rem; color: var(--text-primary); }

@container layout (max-width: 900px) {
    .cf-shell,
    .cd-grid { grid-template-columns: 1fr; }

    .cf-grid { grid-template-columns: 1fr; }
    .cf-side-card { position: static; }
    .cd-order-main { flex-direction: column; align-items: stretch; }
    .cd-order-side { align-items: stretch; }
    .cd-banner-actions { margin-left: 0; width: 100%; }
    .cd-panel-controls { width: 100%; }
    .cd-panel-search { max-width: none; flex: 1; }
}

/* Indicador de lista de compras por atualizar nos cartões de encomenda */
.pedidos-lista-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pedidos-lista-badge i { font-size: 0.85rem; }

/* Pill do mesmo indicador no cartão "Próxima Encomenda" do Dashboard */
.lc-pendente-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    border-radius: 999px;
    background: #fff3cd;
    color: #8a6d00;
    font-size: .7rem;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}
.lc-pendente-pill i { font-size: .8rem; }