.page-wrapper {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* === HEADER === */
.modern-header {
    background: linear-gradient(135deg, #4E7CD2 0%, #665ED2 100%);
    padding: 2rem 0;
    margin-bottom: 2rem;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

/* Ícone do header com fundo branco */
.header-icon-white {
    width: 64px;
    height: 64px;
    background: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4E7CD2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header-text .title {
    color: white ;
    font-weight: 700 ;
    margin: 0 ;
}

.header-text .subtitle {
    color: rgba(255, 255, 255, 0.8) ;
    margin: 0 ;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.action-btn {
    border-radius: 12px ;
    padding: 12px 24px ;
    font-weight: 600 ;
    text-transform: none ;
}

    .action-btn.primary {
        background: white ;
        color: var(--primary-color) ;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) ;
    }

    .action-btn.secondary {
        border: 2px solid rgba(255, 255, 255, 0.3) ;
        color: white ;
    }

/* === CONTEÚDO === */
.page-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

/* === MÉTRICAS === */
.metrics-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.metric-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .metric-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
    }

    .metric-card.total::before {
        background: linear-gradient(90deg, #4E7CD2, #665ED2);
    }

    .metric-card.new::before {
        background: linear-gradient(90deg, #4E7CD2, #359AD1);
    }

    .metric-card.qualified::before {
        background: linear-gradient(90deg, #f39c12, #e67e22);
    }

    .metric-card.proposal::before {
        background: linear-gradient(90deg, #843AD3, #665ED2);
    }

    .metric-card.closed::before {
        background: linear-gradient(90deg, #2ecc71, #27ae60);
    }

    .metric-card:hover {
        transform: translateY(-4px);
    }

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

    .metric-icon.total {
        background: linear-gradient(135deg, #4E7CD2, #665ED2);
    }

    .metric-icon.new {
        background: linear-gradient(135deg, #4E7CD2, #359AD1);
    }

    .metric-icon.qualified {
        background: linear-gradient(135deg, #f39c12, #e67e22);
    }

    .metric-icon.proposal {
        background: linear-gradient(135deg, #843AD3, #665ED2);
    }

    .metric-icon.closed {
        background: linear-gradient(135deg, #2ecc71, #27ae60);
    }

.metric-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.metric-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 0.25rem;
}

/* === FILTROS === */
.filters-section {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

.filters-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Grid de filtros responsivo 2 colunas */
.filters-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    align-items: end;
    width: 100%;
    margin-bottom: 1rem;
}

/* Grid de filtros responsivo 3 colunas*/
.filters-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: end;
    width: 100%;
    margin-bottom: 1rem;
}

/* Grid de filtros responsivo 4 colunas*/
.filters-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: end;
    width: 100%;
    margin-bottom: 1rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.filters-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.search-field {
    width: 100% ;
}

.search-btn, .clear-btn {
    border-radius: 8px;
    text-transform: none ;
    font-weight: 500 ;
    padding: 8px 16px ;
    min-width: 120px;
}

.loading-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* === LOADING === */
.loading-section {
    background: white;
    border-radius: 16px;
    padding: 4rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.loading-title {
    margin-top: 1rem ;
    color: var(--text-primary) ;
}

.loading-subtitle {
    color: var(--text-secondary) ;
    margin-top: 0.5rem ;
}

/* === EMPTY STATE === */
.empty-section {
    background: white;
    border-radius: 16px;
    padding: 4rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 2.5rem;
}

.empty-title {
    color: var(--text-primary) ;
    margin-bottom: 0.5rem ;
    font-weight: 600 ;
}

.empty-subtitle {
    color: var(--text-secondary) ;
    margin-bottom: 2rem ;
}

.empty-button {
    border-radius: 12px ;
    padding: 12px 32px ;
    font-weight: 600 ;
    text-transform: none ;
}

/* === GRID === */
.grid-section {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.grid-title-area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.grid-title {
    color: var(--text-primary) ;
    font-weight: 600 ;
    margin: 0 ;
}

.grid-actions {
    display: flex;
    gap: 0.5rem;
}

.grid-container {
    overflow: hidden;
}

/* === CÉLULAS DA GRID === */
.status-cell {
    display: flex;
    justify-content: center;
}

.status-chip {
    border-radius: 8px ;
    font-weight: 600 ;
    text-transform: uppercase ;
    font-size: 0.75rem ;
}

.company-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.company-details {
    flex: 1;
    min-width: 0;
}

.company-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.term-chip {
    margin-top: 0.25rem ;
    font-size: 0.7rem ;
    height: 20px ;
}

.contact-cell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.contact-icon {
    color: var(--text-secondary) ;
}

.email-link {
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

.value-cell {
    display: flex;
    justify-content: flex-end;
}

.value-amount {
    font-weight: 600;
    color: var(--text-primary);
}

.value-closed {
    font-weight: 700;
    color: var(--success-color);
}

.date-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.date-main {
    font-weight: 500;
    color: var(--text-primary);
}

.date-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.action-edit, .action-check, .action-more {
    border-radius: 8px ;
    width: 32px ;
    height: 32px ;
}

/* === MODAL === */
.dialog-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dialog-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.dialog-title {
    color: var(--text-primary) ;
    font-weight: 600 ;
    margin: 0 ;
}

.dialog-subtitle {
    color: var(--text-secondary) ;
    margin: 0 ;
}

.dialog-content {
    padding: 1rem 0;
}

.dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* === RESPONSIVIDADE === */

/* Tablets - 768px a 1024px */
@media (max-width: 1024px) {
    .header-container,
    .page-content {
        max-width: 100%;
        padding: 0 1rem;
    }

    .filters-grid-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .filters-grid-3 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .filters-grid-4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Mobile - até 768px */
@media (max-width: 768px) {
    /* Header */
    .header-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .header-left {
        flex-direction: column;
        width: 100%;
    }
    
    .action-btn {
        width: 100%;
        max-width: 300px;
    }

    /* Métricas */
    .metrics-section {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Filtros */
    .filters-grid-2 {
        grid-template-columns: 1fr ;
        gap: 1rem;
    }

    .filters-grid-3 {
        grid-template-columns: 1fr ;
        gap: 1rem;
    }

    .filters-grid-4 {
        grid-template-columns: 1fr ;
        gap: 1rem;
    }

    .filters-actions {
        flex-direction: column;
        width: 100%;
    }

    .search-btn, .clear-btn {
        width: 100%;
        min-width: unset;
    }

    /* Grid */
    .grid-header {
        flex-direction: column;
        gap: 1rem;
    }

    /* Células */
    .company-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Dialog */
    .dialog-header {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .dialog-icon {
        margin: 0 auto;
    }
}

/* Mobile pequeno - até 480px */
@media (max-width: 480px) {
    /* Header */
    .modern-header {
        padding: 1.5rem 0;
        margin-bottom: 1rem;
    }

    .header-text .title {
        font-size: 1.5rem ;
    }

    .header-text .subtitle {
        font-size: 0.75rem ;
    }

    .action-btn {
        padding: 10px 20px ;
        font-size: 0.875rem ;
    }

    /* Métricas */
    .metrics-section {
        grid-template-columns: 1fr;
    }

    .metric-card {
        padding: 1rem;
    }

    /* Filtros */
    .filters-section {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 8px;
    }

    .filters-container {
        gap: 0.75rem;
    }

    .filters-grid-2 {
        gap: 0.75rem;
    }

    .filters-grid-3 {
        gap: 0.75rem;
    }
    
    .filters-grid-4 {
        gap: 0.75rem;
    }
    .filters-actions {
        gap: 0.5rem;
    }

    .search-btn, .clear-btn {
        padding: 8px 12px ;
        font-size: 0.875rem ;
    }

    /* Ajusta labels e inputs do MudBlazor */
    .filters-section ::deep .mud-input-label {
        font-size: 0.875rem ;
    }

    .filters-section ::deep .mud-input-root {
        font-size: 0.875rem ;
    }

    .filters-section ::deep .mud-input input {
        font-size: 16px ; /* Previne zoom no iOS */
    }

    /* Estados vazios e loading */
    .loading-section,
    .empty-section {
        padding: 3rem 1.5rem;
        border-radius: 8px;
    }

    .empty-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .empty-title {
        font-size: 1.25rem ;
    }

    .empty-subtitle {
        font-size: 0.875rem ;
    }

    /* Grid */
    .grid-title {
        font-size: 1.125rem ;
    }

    /* Ações */
    .action-buttons {
        flex-direction: column;
        gap: 0.125rem;
    }

    .action-edit, .action-check, .action-more {
        width: 28px ;
        height: 28px ;
    }

    /* Dialog */
    .dialog-content {
        padding: 0.5rem 0;
    }

    .dialog-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 1rem;
    }

        .dialog-actions .mud-button {
            flex: 1;
            min-width: 100px;
        }

    /* Espaçamento geral */
    .page-content {
        padding: 0 0.75rem 1.5rem;
    }
}

/* Mobile muito pequeno - até 320px */
@media (max-width: 320px) {
    .header-text .title {
        font-size: 1.25rem ;
    }

    .filters-section {
        padding: 0.75rem;
    }

    .search-btn, .clear-btn {
        font-size: 0.75rem ;
        padding: 6px 10px ;
    }

    .dialog-actions {
        flex-direction: column;
    }

        .dialog-actions .mud-button {
            width: 100%;
        }
}

/* Orientação landscape em mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .modern-header {
        padding: 1rem 0;
    }

    .header-text .title {
        font-size: 1.25rem ;
    }

    .filters-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters-actions {
        flex-direction: row;
    }

    .search-btn, .clear-btn {
        width: auto;
        min-width: 120px;
    }
}

/* === SYNCFUSION OVERRIDES === */
::deep .e-grid {
    border: none ;
}

    ::deep .e-grid .e-gridheader {
        background: #f8fafc ;
        border-bottom: 2px solid #e2e8f0 ;
    }

    ::deep .e-grid .e-headercell {
        color: var(--text-primary) ;
        font-weight: 600 ;
        padding: 1rem 0.75rem ;
        border-right: none ;
    }

    ::deep .e-grid .e-rowcell {
        padding: 1rem 0.75rem ;
        border-right: none ;
        border-bottom: 1px solid #f1f5f9 ;
    }

    ::deep .e-grid .e-row {
        transition: all 0.2s ease ;
    }

        ::deep .e-grid .e-row:hover {
            background: #f8fafc ;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) ;
        }

::deep .e-pager {
    background: #f8fafc ;
    border-top: 2px solid #e2e8f0 ;
    padding: 1rem ;
}

    ::deep .e-pager .e-numericitem,
    ::deep .e-pager .e-prevpagedisabled,
    ::deep .e-pager .e-nextpagedisabled,
    ::deep .e-pager .e-prevpage,
    ::deep .e-pager .e-nextpage {
        border-radius: 8px ;
        margin: 0 2px ;
        border: 1px solid #e2e8f0 ;
        background: white ;
        color: var(--text-primary) ;
        transition: all 0.2s ease ;
    }

    ::deep .e-pager .e-currentitem {
        background: var(--primary-color) ;
        color: white ;
        border-color: var(--primary-color) ;
    }

    ::deep .e-pager .e-numericitem:hover,
    ::deep .e-pager .e-prevpage:hover,
    ::deep .e-pager .e-nextpage:hover {
        background: var(--primary-color) ;
        color: white ;
        border-color: var(--primary-color) ;
        transform: translateY(-1px);
    }

/* Ajustes específicos para iOS Safari */
@supports (-webkit-touch-callout: none) {
    .filters-section,
    .grid-section {
        -webkit-overflow-scrolling: touch;
    }

    .search-field input {
        font-size: 16px ;
    }
}

/* === ESTILOS ESPECÍFICOS === */

/* Campo de busca único */
.filters-grid-single {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1rem;
}

/* Células específicas do grid */
.term-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(78, 124, 210, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(78, 124, 210, 0.2);
    transition: all 0.3s ease;
}

    .term-cell:hover {
        background: rgba(78, 124, 210, 0.1);
        transform: translateX(2px);
    }

.term-icon {
    color: #4E7CD2 ;
    font-size: 0.9rem ;
}

.term-text {
    font-weight: 500;
    color: #333;
    font-size: 0.85rem;
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
}

    .status-badge.danger {
        background: rgba(231, 76, 60, 0.1);
        border: 1px solid rgba(231, 76, 60, 0.2);
        color: #e74c3c;
    }

    .status-badge.success {
        background: rgba(46, 204, 113, 0.1);
        border: 1px solid rgba(46, 204, 113, 0.2);
        color: #2ecc71;
    }

    .status-badge.warning {
        background: rgba(243, 156, 18, 0.1);
        border: 1px solid rgba(243, 156, 18, 0.2);
        color: #f39c12;
    }

.status-icon {
    font-size: 0.9rem;
}

/* Value badges */
.value-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
}

    .value-badge.primary {
        background: rgba(78, 124, 210, 0.1);
        border: 1px solid rgba(78, 124, 210, 0.2);
        color: #4E7CD2;
    }

    .value-badge.accent {
        background: rgba(132, 58, 211, 0.1);
        border: 1px solid rgba(132, 58, 211, 0.2);
        color: #843AD3;
    }

/* User cell */
.user-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 8px;
}

.user-icon {
    color: #666 ;
    font-size: 0.9rem ;
}

.user-name {
    font-weight: 500;
    color: #333;
    font-size: 0.85rem;
}

/* Observações */
.obs-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 8px;
}

.obs-icon {
    color: #666 ;
    font-size: 0.9rem ;
}

.obs-text {
    color: #333;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Aggregate values */
.aggregate-value {
    text-align: center;
    font-weight: 600;
}

    .aggregate-value.primary {
        color: #4E7CD2;
    }

/* Botão refresh */
.refresh-btn {
    min-width: 120px;
}

/* === RESPONSIVIDADE ESPECÍFICA === */
@media (max-width: 768px) {
    /* Ajusta métricas em mobile */
    .metrics-section {
        grid-template-columns: 1fr;
    }

    /* Botões em coluna no mobile */
    .filters-actions {
        flex-direction: column;
        width: 100%;
    }

    .search-btn, .refresh-btn {
        width: 100%;
    }

    /* Ajusta células do grid */
    .term-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .value-badge, .status-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 480px) {
    /* Ajustes finos para mobile pequeno */
    .metric-card {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .metric-icon {
        margin: 0 auto;
    }

    /* Grid do Syncfusion em mobile */
    ::deep .e-grid .e-gridheader {
        font-size: 0.75rem ;
    }

    ::deep .e-grid .e-rowcell {
        font-size: 0.75rem ;
        padding: 0.5rem ;
    }
}

/* PIPELINE CARDS - Novas classes específicas */
.metric-card.novo::before {
    background: linear-gradient(90deg, #2196F3, #21CBF3);
}

.metric-card.qualificado::before {
    background: linear-gradient(90deg, #4CAF50, #66BB6A);
}

.metric-card.nao-qualificado::before {
    background: linear-gradient(90deg, #9E9E9E, #BDBDBD);
}

.metric-card.proposta::before {
    background: linear-gradient(90deg, #FF9800, #FFB74D);
}

.metric-card.negociando::before {
    background: linear-gradient(90deg, #9C27B0, #BA68C8);
}

.metric-card.fechado::before {
    background: linear-gradient(90deg, #2E7D32, #4CAF50);
}

.metric-card.perdido::before {
    background: linear-gradient(90deg, #F44336, #EF5350);
}

/* PIPELINE ICONS - Novas classes específicas */
.metric-icon.novo {
    background: linear-gradient(135deg, #2196F3, #21CBF3);
}

.metric-icon.qualificado {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
}

.metric-icon.nao-qualificado {
    background: linear-gradient(135deg, #9E9E9E, #BDBDBD);
}

.metric-icon.proposta {
    background: linear-gradient(135deg, #FF9800, #FFB74D);
}

.metric-icon.negociando {
    background: linear-gradient(135deg, #9C27B0, #BA68C8);
}

.metric-icon.fechado {
    background: linear-gradient(135deg, #2E7D32, #4CAF50);
}

.metric-icon.perdido {
    background: linear-gradient(135deg, #F44336, #EF5350);
}

/* === CLASSES DE LAYOUT === */
.full-width {
    grid-column: 1 / -1;
    width: 100%;
}

.half-width {
    grid-column: span 1;
}

.two-thirds {
    grid-column: span 2;
}

/* FORMS */
.form-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 16px;
}

.form-section {
    padding: 20px;
    border-radius: 8px;
}

.section-title {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    align-items: start;
}

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

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-background-grey);
}

/* Quando os botões estão ocultos, ajustar o espaçamento */
.form-container:has(+ .form-actions[style*="display: none"]) {
    padding-bottom: 0;
}

/* ================================ */
/* FORÇA MODO CLARO - SUPER AGRESSIVO */
/* ================================ */

/* Força esquema de cores sempre claro */
:root {
    color-scheme: light only ;
}

/*@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light only ;
        background: white ;
        color: #333 ;
    }

    html, body {
        background: white ;
        color: #333 ;
    }
}*/

/* Força elementos base */
html, body, #app, .mud-layout, .mud-main-content, .page {
    background-color: white ;
    color: #333 ;
}

/* Força todos os papers/cards do MudBlazor */
.mud-paper, .mud-card, .mud-dialog, .mud-drawer, .mud-appbar {
    background-color: white ;
    color: #333333 ;
}

/* Força inputs e campos */
.mud-input, .mud-input-root, .mud-textfield, .mud-input-control {
    background-color: white ;
    color: #333 ;
}

    .mud-input input, .mud-input textarea, .mud-select {
        background-color: white ;
        color: #333 ;
    }

/* Força labels e textos */
.mud-input-label, .mud-form-item label, .mud-typography {
    color: #333 ;
}

/* Força botões */
.mud-button, .mud-button-root {
    color: #333 ;
}

    .mud-button.mud-button-filled-primary {
        background-color: #4E7CD2 ;
        color: white ;
    }

/* Força menus e dropdowns */
.mud-menu, .mud-popover, .mud-tooltip, .mud-select-menu {
    background-color: white ;
    color: #333 ;
}

.mud-list-item, .mud-nav-link {
    color: #333 ;
}

/* Força tabelas */
.mud-table, .mud-table-container {
    background-color: white ;
    color: #333 ;
}

.mud-table-head, .mud-table-body, .mud-table-row {
    background-color: white ;
    color: #333 ;
}

/* Força qualquer tema escuro */
/*.mud-theme-dark, [data-theme="dark"] {
    background-color: white ;
    color: #333 ;
}*/

/* Força controles específicos */
.mud-checkbox, .mud-radio, .mud-switch {
    color: #333 ;
}

/* Força conteúdo de texto */
.mud-typography, p, span, div, h1, h2, h3, h4, h5, h6 {
    color: inherit ;
}

/* Garante que elementos filho herdem */
* {
    color-scheme: light ;
}

/* Força sincfusion se estiver usando */
.e-grid, .e-toolbar, .e-content {
    background: white ;
    color: #333 ;
}

.action-btn {
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

    .action-btn.primary {
        background: white !important;
        color: var(--primary-color) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .action-btn.secondary {
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        color: white !important;
    }