/* Estilos Gerais e Nova Paleta Laranja e Branco */
:root {
    --primary-orange: #085219;         /* Verde Principal */
    --primary-orange-dark: #328225;    /* Verde Escuro */
    --primary-orange-light: #042b06;   /* Verde Claro */
    --primary-orange-rgb: 8, 82, 25;   /* RGB correspondente ao #085219 */


    --neutral-white: #FFFFFF;
    --neutral-off-white: #FDFDFD;
    --neutral-light-gray: #F0F2F5; /* Um cinza mais claro e moderno para fundos */
    --neutral-medium-gray: #D8DCE0; /* Bordas mais suaves */
    --neutral-dark-gray: #AEB6BF; /* Texto sutil ou ícones */

    --text-primary: #333333; /* Um preto mais suave */
    --text-secondary: #566573; /* Cinza azulado mais escuro */
    --text-on-primary: var(--neutral-white);
    --text-on-accent: var(--primary-orange);

    --body-bg: var(--neutral-light-gray);
    --content-panel-bg: var(--neutral-white);
    
    --sidebar-bg: var(--primary-orange);
    --sidebar-text-color: var(--text-on-primary);
    --sidebar-link-hover-bg: var(--primary-orange-dark);
    --sidebar-link-active-bg: var(--neutral-white);
    --sidebar-link-active-text: var(--primary-orange);
    --sidebar-border-color: rgba(255, 255, 255, 0.1); /* Mais sutil */

    --card-bg: var(--neutral-white);
    --card-border-accent: var(--primary-orange); 
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra mais moderna */
    --card-hover-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    --card-hover-transform: translateY(-4px);
    
    /* Cores específicas para tipos de documento */
    --color-proforma-invoice: #FF9800;      
    --color-proforma-invoice-rgb: 255, 152, 0;
    --color-commercial-invoice: #4CAF50;   
    --color-commercial-invoice-rgb: 76, 175, 80;
    --color-delivery-note: #2196F3;       
    --color-delivery-note-rgb: 33, 150, 243;
    --color-settlement-note: #9C27B0;     
    --color-settlement-note-rgb: 156, 39, 176;
    --color-payslip: #009688;             
    --color-payslip-rgb: 0, 150, 136;
    --color-payment-note: #795548;        
    --color-payment-note-rgb: 121, 85, 72;


    --form-control-border: #CCD1D1; /* Borda mais clara para inputs */
    --form-control-focus-border: var(--primary-orange); /* Foco mais forte */
    --form-control-focus-shadow: rgba(var(--primary-orange-rgb), 0.2);
    --form-control-bg: #FCFCFC;

    --font-primary: 'Roboto', 'Inter', 'Poppins', sans-serif; /* Roboto como primária para UI */
    --font-secondary: 'Poppins', 'Inter', sans-serif;

    --border-radius-sm: 0.2rem; 
    --border-radius-md: 0.3rem;
    --border-radius-lg: 0.4rem;
    --border-radius-xl: 0.8rem;

    --default-transition: all 0.25s ease-in-out;

    --topbar-height: 60px; 
    --page-padding-y: 3rem; 
    --footer-height: 48px; 
}

body {
    font-family: var(--font-primary);
    background-color: var(--body-bg);
    color: var(--text-primary);
    margin: 0;
    font-size: 14.5px; /* Ajustado para UI mais densa */
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-wrapper { display: flex; min-height: 100vh; }

/* Sidebar Estilo Metro/Fluent */
.sidebar {
    width: 250px; /* Um pouco mais estreito */
    background: var(--sidebar-bg);
    color: var(--sidebar-text-color);
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; height: 100%;
    z-index: 1030; transition: margin-left var(--default-transition);
    box-shadow: 2px 0 10px rgba(0,0,0,0.12); /* Sombra mais suave */
}
.sidebar-header {
    padding: 1.5rem 1.25rem; 
    text-align: center;
    border-bottom: 1px solid var(--sidebar-border-color);
}
.sidebar-header .logo {
    color: var(--sidebar-text-color); font-family: var(--font-secondary);
    font-size: 1.4rem; font-weight: 600; /* Mais leve */
    text-decoration: none; transition: color var(--default-transition);
}
.sidebar-header .logo i { font-size: 1.6rem; vertical-align: middle; }
.sidebar-nav { flex-grow: 1; padding-top: 0.75rem; }
.sidebar-nav .nav-link {
    display: flex; align-items: center;
    padding: 0.7rem 1.25rem; /* Mais compacto */
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none; font-size: 0.9rem; 
    font-weight: 400; /* Mais leve */
    border-radius: var(--border-radius-md);
    margin: 0.15rem 0.6rem; 
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    border-left: 3px solid transparent; /* Para indicar item ativo */
}
.sidebar-nav .nav-link i {
    margin-right: 10px; font-size: 1.05rem; 
    width: 18px; text-align: center; opacity: 0.85;
}
.sidebar-nav .nav-link:hover {
    background-color: var(--sidebar-link-hover-bg);
    color: var(--sidebar-text-color);
    transform: translateX(3px);
}
.sidebar-nav .nav-link.active {
    background-color: var(--sidebar-link-active-bg);
    color: var(--sidebar-link-active-text);
    font-weight: 500;
    border-left: 3px solid var(--primary-orange-dark);
}
.sidebar-nav .nav-link.active i { color: var(--sidebar-link-active-text) !important; opacity: 1; }

.sidebar-footer {
    padding: 0.8rem 1.25rem; 
    text-align: center; font-size: 0.75rem; 
    color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid var(--sidebar-border-color);
}

/* Main Content Wrapper */
.main-content-wrapper {
    flex-grow: 1; margin-left: 250px;
    display: flex; flex-direction: column;
    transition: margin-left var(--default-transition);
}

/* Topbar Estilo Metro/Fluent */
.topbar {
    background-color: var(--content-panel-bg);
    padding: 0 1.5rem; /* Padding horizontal */
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Sombra inferior sutil */
    position: sticky; top: 0; z-index: 1020;
    height: var(--topbar-height);
}
.topbar-title {
    font-family: var(--font-secondary); font-size: 1.4rem; 
    font-weight: 500; color: var(--text-primary);
    margin: 0; display: flex; align-items: center;
}
.topbar-title i { margin-right: 0.4rem; font-size: 1.3rem; color: var(--primary-orange); }

.sidebar-toggler {
    background: none; border: none; font-size: 1.4rem; 
    color: var(--text-secondary); cursor: pointer;
    padding: 0.4rem; margin-right: 0.75rem;
    transition: color var(--default-transition);
}
.sidebar-toggler:hover { color: var(--primary-orange); }

.topbar-actions .btn {
    border-radius: var(--border-radius-md);
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
}
.topbar-actions .btn-primary {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}
.topbar-actions .btn-primary:hover {
    background-color: var(--primary-orange-dark);
    border-color: var(--primary-orange-dark);
}
.topbar-actions .dropdown-menu { font-size: 0.9rem; }


/* Page Content */
.page-content {
    padding: calc(var(--page-padding-y) / 2) 1.5rem; /* Ajustado padding */
    flex-grow: 1;
}

.view-content { display: none; }
.view-content.active-view { display: block; animation: fadeInView 0.3s ease-out; }
@keyframes fadeInView { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Status Cards - Dashboard (Estilo Metro/Fluent) */
.status-card {
    background-color: var(--card-bg); color: var(--text-primary);
    padding: 1.25rem; border-radius: var(--border-radius-md); /* Cantos menos arredondados */
    box-shadow: var(--card-shadow);
    transition: transform var(--default-transition), box-shadow var(--default-transition);
    border-left-width: 4px; border-left-style: solid; 
    position: relative; overflow: hidden;
}
.status-card:hover { transform: var(--card-hover-transform); box-shadow: var(--card-hover-shadow); }
.status-card .card-icon {
    position: absolute; top: 50%; right: 10px; /* Centralizado verticalmente à direita */
    transform: translateY(-50%) rotate(-15deg);
    font-size: 3rem; opacity: 0.1;
}
.status-card h4 {
    font-family: var(--font-secondary); font-size: 0.9rem; 
    margin-bottom: 0.3rem; font-weight: 500; color: var(--text-secondary);
    text-transform: uppercase; /* Estilo Metro */
}
.status-card .display-6 { font-weight: 600; margin-bottom: 0.15rem; font-size: 2.25rem; }
.status-card small { opacity: 0.8; font-size: 0.8rem; }

/* Document Editor Layout - Painel de Controle Maior */
.document-editor-layout {
    display: grid;
    /* O painel de controle ocupa mais espaço, preview é fixo para A4 + margem */
    grid-template-columns: 1fr minmax(auto, calc(210mm + 40px)); /* 210mm (A4) + 20px de cada lado para padding no preview */
    gap: 1.25rem;
    height: calc(100vh - var(--topbar-height) - var(--page-padding-y) - var(--footer-height) - 15px);
    min-height: 550px;
}
.editor-controls-panel {
    display: flex; flex-direction: column;
    background-color: var(--content-panel-bg);
    border-radius: var(--border-radius-lg); overflow: hidden;
    border: 1px solid var(--neutral-medium-gray);
}
.editor-controls-panel .panel-header { 
    padding: 0.75rem 1.1rem; 
    background-color: #E9ECEF; /* Fundo do cabeçalho do painel */
    border-bottom: 1px solid var(--neutral-medium-gray); 
}
.editor-controls-panel .panel-header h2 { font-size: 1.1rem; }
.editor-controls-panel .panel-header h2 i { font-size: 1.2em; }
.editor-controls-panel .panel-body { flex-grow: 1; overflow-y: auto; padding: 1.1rem; }
.editor-controls-panel .panel-footer { 
    padding: 0.9rem 1.1rem; 
    background-color: #E9ECEF;
    border-top: 1px solid var(--neutral-medium-gray); 
}
.editor-controls-panel .btn {
    border-radius: var(--border-radius-sm); /* Botões mais retos */
    padding: 0.5rem 1rem;
    font-weight: 500;
}

/* Preview Panel Ajustado */
.editor-preview-panel {
    background-color: var(--neutral-dark-gray); /* Fundo mais escuro para destacar A4 */
    border-radius: var(--border-radius-md);
    overflow: hidden; display: flex; 
    justify-content: center; align-items: flex-start; 
    padding: 20px; /* Espaço ao redor do A4 */
    border: 1px solid var(--neutral-dark-gray);
}
.preview-wrapper { /* Controla o scroll do A4 */
    width: 100%; height: 100%; 
    overflow: auto; /* Scroll se A4 for maior que o painel */
    background-color: transparent;
}
.preview-placeholder {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    width: 100%; height: 100%;
    text-align: center; color: var(--neutral-light-gray); /* Contraste com fundo escuro */
}
.preview-placeholder i { font-size: 3.5rem; }
.preview-placeholder p { font-size: 1rem; }

.document-preview-content-a4-wrapper { 
    display: block; 
    width: 210mm; /* Fixa a largura do A4 */
    margin: 0 auto; /* Centraliza o A4 */
}

/* Formulários Estilo Metro/Fluent */
.accordion-button { 
    font-weight: 500; font-size: 0.9rem; padding: 0.7rem 1rem; 
    background-color: var(--neutral-off-white);
    color: var(--text-primary);
    border-radius: 0 !important; /* Cantos retos */
    border-bottom: 1px solid var(--neutral-medium-gray) !important;
}
.accordion-button:not(.collapsed) { 
    background-color: var(--primary-orange); color: var(--text-on-primary); 
    box-shadow: none;
}
.accordion-button:not(.collapsed) i { color: var(--text-on-primary) !important; }
.accordion-button:not(.collapsed)::after { 
    filter: brightness(0) invert(1); /* Torna a seta branca */
}
.accordion-button:focus { box-shadow: 0 0 0 0.15rem var(--form-control-focus-shadow); }
.accordion-body { padding: 1rem; background-color: var(--neutral-white); }
.accordion-body .form-label { 
    font-size: 0.85rem; font-weight: 500; 
    color: var(--text-secondary); margin-bottom: 0.25rem; 
    display: flex; align-items: center;
}
.accordion-body .form-label i { margin-right: 0.3rem; font-size: 0.95em; }
.accordion-body .form-control, .accordion-body .form-select { 
    font-size: 0.88rem; padding: 0.45rem 0.7rem; 
    border-color: var(--form-control-border);
    border-radius: var(--border-radius-sm); /* Cantos mais retos */
    background-color: var(--form-control-bg);
}
.accordion-body .form-control::placeholder { color: #999; font-style: italic; font-size: 0.9em; }
.accordion-body .form-text { font-size: 0.75rem; margin-top: 0.2rem; color: #6c757d; }

.item-row-modernized { 
    transition: background-color 0.2s; 
    border: 1px solid var(--neutral-medium-gray) !important;
    background-color: #f8f9fa !important; /* Um pouco mais claro que bg-light-subtle */
    border-radius: var(--border-radius-sm) !important;
}
.item-row-modernized:hover { background-color: #eef2f7 !important; }
.item-row-modernized .form-control { height: calc(1.5em + 0.9rem + 2px); font-size: 0.88rem; }
.item-row-modernized .item-remove-btn { height: calc(1.5em + 0.9rem + 2px); line-height: 1.2; padding: 0.4rem 0.6rem;}


/* A4 Document Preview - Estilos para o conteúdo do documento gerado */
.document-preview-content-a4 {
    width: 210mm; min-height: 297mm; height: auto; 
    background-color: var(--neutral-white);
    padding: 12mm; /* Margem interna do A4, um pouco menor para mais conteúdo */
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(0,0,0,0.1); /* Sombra mais suave */
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
    font-size: 9.5pt; /* Um pouco menor para caber mais */
    color: #222222; /* Texto mais escuro */
    line-height: 1.4;
    margin: 0 auto; 
}
/* Certifique-se que as imagens dentro do A4 tenham max-width: 100% */
.document-preview-content-a4 img { max-width: 100%; height: auto; }
.document-preview-content-a4 * { box-sizing: border-box; } /* Garante que padding e border não aumentem o tamanho */

.document-preview-content-a4 .doc-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: 2px solid var(--primary-orange);
    padding-bottom: 10px; margin-bottom: 18px;
}
.document-preview-content-a4 .company-info-doc { width: 58%; }
.document-preview-content-a4 .company-info-doc h2 {
    margin: 0 0 3px 0; font-size: 15pt; font-weight: bold;
    color: var(--primary-orange);
}
.document-preview-content-a4 .company-info-doc p { margin: 1.5px 0; font-size: 8pt; color: #484848; }
.document-preview-content-a4 .logo-container img { 
    max-width: 170px; max-height: 65px; margin-bottom: 4px; 
    object-fit: contain;
}

.document-preview-content-a4 .doc-title-section { width: 40%; text-align: right; }
.document-preview-content-a4 .doc-title-section h1 {
    font-size: 17pt; margin: 0 0 3px 0; color: #222;
    text-transform: uppercase; font-weight: bold; /* Mais forte */
}
.document-preview-content-a4 .doc-title-section p { margin: 1.5px 0; font-size: 8.5pt; color: #484848; }

.document-preview-content-a4 .doc-addresses { 
    display: flex; justify-content: space-between; 
    margin-bottom: 22px; font-size: 8.5pt; 
}
.document-preview-content-a4 .doc-addresses > div { width: 48.8%; }
.document-preview-content-a4 .doc-addresses h3 {
    font-size: 10pt; margin-bottom: 5px;
    border-bottom: 1px solid var(--neutral-medium-gray);
    padding-bottom: 3px; color: var(--primary-orange); font-weight: 500;
}
.document-preview-content-a4 .doc-addresses p { margin: 2.5px 0; }

.document-preview-content-a4 .doc-items-table {
    width: 100%; border-collapse: collapse;
    margin-bottom: 18px; font-size: 8.5pt;
}
.document-preview-content-a4 .doc-items-table th,
.document-preview-content-a4 .doc-items-table td {
    border: 1px solid #D0D0D0; /* Borda mais fina */
    padding: 6px 5px; text-align: left; vertical-align: top;
}
.document-preview-content-a4 .doc-items-table th {
    background-color: #EAEAEA; font-weight: 500; color: #333;
}
.document-preview-content-a4 .doc-items-table td.number-cell { text-align: right; }
.document-preview-content-a4 .doc-items-table td.description-cell { width: 48%; }

.document-preview-content-a4 .doc-summary { 
    margin-top: 18px; width: 45%; 
    margin-left: auto; font-size: 9pt; 
}
.document-preview-content-a4 .doc-summary table { width: 100%; border-collapse: collapse; }
.document-preview-content-a4 .doc-summary td { padding: 5px 4px; }
.document-preview-content-a4 .doc-summary .summary-label { 
    text-align: right; font-weight: 500; 
    padding-right: 10px; color: #333; 
}
.document-preview-content-a4 .doc-summary .summary-value { text-align: right; font-weight: 500; }
.document-preview-content-a4 .doc-summary .grand-total td {
    border-top: 1.5px solid var(--primary-orange); /* Linha mais fina */
    font-size: 10.5pt; font-weight: bold; color: var(--primary-orange);
}
.document-preview-content-a4 .doc-notes-banking {
    margin-top: 25px; font-size: 8pt;
    border-top: 1px solid var(--neutral-medium-gray);
    padding-top: 12px;
}
.document-preview-content-a4 .doc-notes-banking h4 {
    font-size: 9.5pt; margin-bottom: 5px;
    color: var(--primary-orange); font-weight: 500;
}
.document-preview-content-a4 .doc-notes-banking p { margin: 2.5px 0; color: #505050; }
.document-preview-content-a4 .doc-notes-banking .banking-details { margin-top: 10px; }

.document-preview-content-a4 .doc-footer-signature {
    margin-top: auto; padding-top: 35px; 
    border-top: 1px solid var(--neutral-medium-gray); font-size: 8pt;
}
.document-preview-content-a4 .doc-footer-signature .signature-area { 
    display: flex; justify-content: space-around; text-align: center; 
}
.document-preview-content-a4 .doc-footer-signature .signature-area > div { width: 46%; padding-top: 6px; }
.document-preview-content-a4 .doc-footer-signature p.signature-line { 
    border-top: 1px solid #666; margin-top: 35px; margin-bottom: 3px; 
}

.document-preview-content-a4 .doc-agt-notice {
    text-align: center; font-size: 7.5pt; color: #666;
    margin-top: 18px; border-top: 1px dashed var(--neutral-medium-gray);
    padding-top: 10px;
}
.document-preview-content-a4 .document-general-footer-image {
    text-align: center; padding-top: 8px; margin-top: auto; 
    border-top: 1px solid #E0E0E0;
}
.document-preview-content-a4 .document-general-footer-image img {
    max-width: 100%; height: auto; max-height: 50px; /* Mais sutil */
    display: block; margin-left: auto; margin-right: auto;
    object-fit: contain;
}


/* DataTables Styling */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--form-control-border);
    padding: 0.35rem 0.55rem; 
    transition: var(--default-transition);
    font-size: 0.85rem;
    background-color: var(--form-control-bg);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--form-control-focus-border);
    box-shadow: 0 0 0 0.15rem var(--form-control-focus-shadow);
}
.dataTables_wrapper .page-item.active .page-link {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}
.dataTables_wrapper .page-link {
    color: var(--primary-orange); font-size: 0.85rem;
    border-radius: var(--border-radius-sm);
}
.dataTables_wrapper .page-link:hover { color: var(--primary-orange-dark); }
.dataTables_wrapper .table th { font-size: 0.85rem; font-weight: 500; background-color: #f3f4f6; color: #374151;}
.dataTables_wrapper .table td { font-size: 0.83rem; }
.dataTables_wrapper .table td span.text-proforma-invoice { color: var(--color-proforma-invoice); }
.dataTables_wrapper .table td span.text-commercial-invoice { color: var(--color-commercial-invoice); }
.dataTables_wrapper .table td span.text-delivery-note { color: var(--color-delivery-note); }
.dataTables_wrapper .table td span.text-settlement-note { color: var(--color-settlement-note); }
.dataTables_wrapper .table td span.text-payslip { color: var(--color-payslip); }
.dataTables_wrapper .table td span.text-payment-note { color: var(--color-payment-note); }


/* Thin Scrollbar */
.thin-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 3px; }
.thin-scrollbar::-webkit-scrollbar-thumb { background: var(--neutral-dark-gray); border-radius: 3px; }
.thin-scrollbar::-webkit-scrollbar-thumb:hover { background: #888; }

/* Responsive Adjustments */
@media (max-width: 1199.98px) { 
    .document-editor-layout {
        /* Mantém o preview com largura A4 + padding, e o controle flexível */
        grid-template-columns: 1fr minmax(auto, calc(210mm + 30px)); 
    }
}
@media (max-width: 991.98px) { 
    .sidebar { margin-left: -250px; }
    .main-content-wrapper { margin-left: 0; }
    .sidebar.open { margin-left: 0; box-shadow: 4px 0 15px rgba(0,0,0,0.15); }

    .document-editor-layout {
        grid-template-columns: 1fr; 
        height: auto; min-height: 0;
    }
    .editor-controls-panel { margin-bottom: 1.25rem; height: auto; max-height: 65vh; }
    .editor-preview-panel { height: 65vh; min-height: 380px; padding: 15px; }
    .topbar { padding: 0 1rem; --topbar-height: 54px; } 
    .page-content { padding: 1rem; --page-padding-y: 2rem; }
}
@media (max-width: 767.98px) { 
    .topbar-title { font-size: 1.2rem; }
    .topbar-title i { font-size: 1.1rem; }
    .topbar-actions .btn-sm, .topbar-actions .btn { padding: 0.3rem 0.6rem; font-size: 0.75rem; }

    .item-row-modernized .row > div { margin-bottom: 0.4rem !important; }
    .item-row-modernized .item-remove-btn { width: 100% !important; }

    .document-preview-content-a4 { padding: 8mm; font-size: 8.5pt; }
    .document-preview-content-a4 .doc-header, 
    .document-preview-content-a4 .doc-addresses { gap: 10px; }
    .document-preview-content-a4 .doc-footer-signature .signature-area > div { width: 90%; }
    .document-preview-content-a4 .doc-footer-signature p.signature-line { margin-top: 20px; }

    .editor-controls-panel .panel-body, .editor-controls-panel .panel-footer { padding: 0.8rem; }
    .editor-preview-panel { padding: 10px; }
}

/* Print Styles */
@media print {
    body { background-color: white !important; -webkit-print-color-adjust: exact !important; color-adjust: exact !important; }
    
    /* Esconde tudo por padrão */
    body * { visibility: hidden !important; background-color: transparent !important; box-shadow: none !important; }

    /* Torna visível o conteúdo do modal SE ele estiver aberto e sendo exibido */
    .modal.show #modalPreviewContent, 
    .modal.show #modalPreviewContent *,
    .modal.show #modalPreviewContent iframe { /* Garante que o iframe e seu conteúdo também sejam visíveis */
        visibility: visible !important;
    }
    /* Se o conteúdo do modal for um iframe, precisamos especificar que o conteúdo DENTRO do iframe deve ser impresso. */
    /* Isso é geralmente tratado pelo navegador ao imprimir um iframe, mas garantir a visibilidade é chave. */


    /* OU, se o modal não estiver aberto, torna visível o preview principal */
    body:not(.modal-open) #documentOutput, 
    body:not(.modal-open) #documentOutput * {
        visibility: visible !important;
    }
    
    /* Estilos para o container do A4 na impressão (seja do modal ou do preview principal) */
    .document-preview-content-a4-wrapper, 
    #documentOutput,
    #modalPreviewContentWrapper, 
    #modalPreviewContent {
        position: static !important; 
        width: 100% !important; 
        height: auto !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        overflow: visible !important;
        box-shadow: none !important;
        border: none !important; /* Remove bordas do wrapper do modal na impressão */
        background-color: white !important; 
    }
    
    .document-preview-content-a4 {
        width: 100% !important; /* Ocupa a largura da área de impressão */
        max-width: none !important; 
        min-height: 0 !important; /* Deixa o conteúdo ditar a altura */
        margin: 0 !important; 
        padding: 0 !important; /* As margens são controladas pelo @page */
        font-size: 9.5pt !important; 
        color: #000000 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Se o modal estiver mostrando um iframe de PDF, o próprio iframe cuidará da impressão */
    .modal.show #modalPreviewContent iframe {
        width: 100vw !important; /* Ocupa toda a viewport de impressão */
        height: 100vh !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    @page {
        size: A4;
        margin: 10mm; /* Margens de impressão para conteúdo HTML; PDFs em iframes podem ter suas próprias margens */
    }

    /* Manter cores de marca para HTML (não afeta PDF em iframe) */
    .document-preview-content-a4 .company-info-doc h2,
    .document-preview-content-a4 .doc-addresses h3,
    .document-preview-content-a4 .doc-notes-banking h4,
    .document-preview-content-a4 .doc-summary .grand-total td,
    .document-preview-content-a4 .doc-header { 
        color: var(--primary-orange) !important; 
        border-color: var(--primary-orange) !important; 
        -webkit-print-color-adjust: exact !important; 
    }
    .document-preview-content-a4 .doc-title-section h1 { color: #1c1c1c !important; -webkit-print-color-adjust: exact !important; }
    .document-preview-content-a4 .doc-items-table th { 
        background-color: #E8E8E8 !important; /* Um cinza bem claro para cabeçalho */
        color: #000000 !important; 
        -webkit-print-color-adjust: exact !important; 
    }
    .document-preview-content-a4 .doc-items-table td { border: 1px solid #C0C0C0 !important; } /* Bordas mais claras na tabela */

    /* Controle de quebra de página para HTML */
    .doc-header, .doc-addresses, .doc-items-table thead, .doc-summary table, 
    .doc-notes-banking, .doc-footer-signature,
    .company-info-doc p, .doc-title-section p, .doc-addresses p, .doc-notes-banking p,
    .document-general-footer-image,
    .doc-items-table tbody tr { 
        page-break-inside: avoid !important; 
    }
}

/* TELA DE BOAS-VINDAS - Estilo Metro/Fluent */
:root {
    --welcome-overlay-bg: var(--primary-orange); /* Fundo sólido */
    --welcome-card-bg: var(--neutral-white);
    --welcome-card-shadow: 0 8px 25px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.05); /* Sombra mais definida */
    --welcome-text-primary: var(--text-primary);
    --welcome-text-secondary: var(--text-secondary);
    --welcome-accent-color: var(--primary-orange);
}
#welcome-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--welcome-overlay-bg);
    display: flex; justify-content: center; align-items: center;
    z-index: 10000; opacity: 1; visibility: visible;
    transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    font-family: var(--font-primary); overflow: hidden;
}
#welcome-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.welcome-card {
    background-color: var(--welcome-card-bg); color: var(--welcome-text-primary);
    border-radius: var(--border-radius-md); /* Menos arredondado */
    box-shadow: var(--welcome-card-shadow);
    width: 90%; max-width: 450px; padding: 0; text-align: center; overflow: hidden;
    transform: scale(0.9) translateY(15px); opacity: 0;
    animation: cardEnterWelcome 0.7s 0.15s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
@keyframes cardEnterWelcome { to { transform: scale(1) translateY(0); opacity: 1; } } /* Renomeado para evitar conflito */
.welcome-header { padding: 25px 20px 15px; }
.welcome-logo-enhanced {
    max-width: 130px; max-height: 60px; margin-bottom: 8px;
    opacity: 0; transform: translateY(8px);
    animation: itemFadeInUpWelcome 0.5s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.welcome-content { padding: 20px 25px; }
.welcome-title-enhanced {
    font-family: var(--font-secondary); font-size: 1.6em; color: var(--welcome-accent-color);
    font-weight: 500; margin-bottom: 6px; line-height: 1.25;
    opacity: 0; transform: translateY(8px);
    animation: itemFadeInUpWelcome 0.5s 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.welcome-subtitle-enhanced {
    font-size: 1em; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.5;
    max-width: 360px; margin-left: auto; margin-right: auto;
    opacity: 0; transform: translateY(8px);
    animation: itemFadeInUpWelcome 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.welcome-progress-bar-container {
    height: 6px; background-color: rgba(var(--primary-orange-rgb), 0.1);
    border-radius: var(--border-radius-sm); margin: 0 auto 12px auto; width: 65%; overflow: hidden;
    opacity: 0; transform: translateY(8px);
    animation: itemFadeInUpWelcome 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.welcome-progress-bar {
    width: 0%; height: 100%; background-color: var(--welcome-accent-color);
    border-radius: var(--border-radius-sm);
    animation: fillProgressBarWelcome 1.8s 1.2s ease-out forwards; /* Renomeado */
}
@keyframes fillProgressBarWelcome { 0% { width: 0%; } 100% { width: 100%; } }
.welcome-message-enhanced {
    font-size: 0.85em; color: var(--text-secondary); opacity: 0.7; margin-top: 15px;
    opacity: 0; transform: translateY(8px);
    animation: itemFadeInUpWelcome 0.5s 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.welcome-footer {
    background-color: var(--neutral-light-gray); padding: 10px 20px;
    font-size: 0.75em; color: var(--text-secondary); opacity: 0.65;
    border-top: 1px solid var(--neutral-medium-gray);
    opacity: 0; animation: itemFadeInUpWelcome 0.5s 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
@keyframes itemFadeInUpWelcome { to { opacity: 1; transform: translateY(0); } } /* Renomeado */
.page-wrapper.initially-hidden { visibility: hidden; opacity: 0; }

/* Modal de Preview de Documento */
#documentPreviewModalBody {
    background-color: var(--neutral-medium-gray); /* Fundo para o corpo do modal */
    display: flex; 
    justify-content: center;
    align-items: flex-start; 
    padding: 20px; 
    overflow: hidden; /* Scroll será no wrapper interno */
}
#modalPreviewContentWrapper { /* Este wrapper terá o scroll */
    width: auto; 
    max-width: calc(210mm + 4px); /* A4 + pequena borda visual, caso o A4 interno não tenha sombra */
    height: 100%; /* Ocupa a altura do modal-body */
    /* max-height: calc(75vh - 50px); Altura máxima, ajustável - O min-height do modal-body já controla isso */
    overflow-y: auto; 
    background-color: transparent;
    /* border: 1px solid var(--neutral-dark-gray); */ /* Removido para dar destaque ao A4 interno */
    /* box-shadow: 0 0 20px rgba(0,0,0,0.15); */ /* Sombra no A4 interno é melhor */
}
#modalPreviewContent {
    /* O .document-preview-content-a4 (ou iframe) será inserido aqui */
    /* width e height são ditados pelo conteúdo (A4 ou iframe) */
    background-color: white; /* Fundo do "papel" se o A4 não preencher */
    display: flex; /* Para centralizar o A4 se ele for menor que o wrapper */
    justify-content: center;
}
#modalPreviewContent > .document-preview-content-a4 { /* Estilo para o A4 dentro do modal */
    margin:0; /* Remove margens automáticas se houver */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Adiciona sombra ao A4 */
}

#modalPreviewContent iframe { 
    width: 210mm; /* Largura fixa do A4 para o iframe */
    max-width: 100%; /* Garante responsividade dentro do wrapper */
    height: calc(100% - 2px); /* Altura do wrapper - pequena margem. min-height abaixo é mais importante */
    min-height: 297mm; /* Altura mínima do A4 para o iframe */
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Sombra no iframe */
}