body { font-family: 'Tahoma', sans-serif; background-color: #008080; margin: 0; padding: 20px; color: #000; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .window { background-color: #c0c0c0; border: 3px solid #dfdfdf; border-right-color: #808080; border-bottom-color: #808080; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); width: 90%; max-width: 800px; margin: 0 auto; position: relative; /* Changed from absolute for initial placement */ display: flex; /* Use flex for layout */ flex-direction: column; /* Stack vertically */ } .window.maximized { /* Style for maximized state */ width: 100%; max-width: 100%; height: calc(100vh - 40px); /* Adjust height */ position: fixed; top: 20px; left: 0; margin: 0; padding: 0; border: none; /* Remove border when maximized */ box-shadow: none; } .title-bar { background: linear-gradient(90deg, #000080, #1084d0); color: white; padding: 3px 5px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; /* Prevent title bar from shrinking */ } .title-text { font-weight: bold; font-size: 12px; } .title-buttons { display: flex; } .title-button { background-color: #c0c0c0; border: 2px solid; border-color: #dfdfdf #808080 #808080 #dfdfdf; box-shadow: 1px 1px 0 #dfdfdf inset, -1px -1px 0 #707070 inset; margin-left: 2px; width: 16px; height: 14px; font-size: 10px; display: flex; justify-content: center; align-items: center; text-align: center; cursor: pointer; line-height: 14px; color: black; } .title-button:active { border-color: #808080 #dfdfdf #dfdfdf #808080; box-shadow: -1px -1px 0 #dfdfdf inset, 1px 1px 0 #707070 inset; } .menu-tabs { display: flex; background-color: #c0c0c0; border-bottom: 1px solid #848484; padding: 2px 2px 0; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; margin-bottom: 4px; /* Add space after the tabs */ padding-bottom: 6px; /* Add more space for the scrollbar */ flex-shrink: 0; /* Prevent menu from shrinking */ } .menu-tab { padding: 3px 10px; font-size: 12px; background-color: #c0c0c0; border: 1px solid #848484; border-bottom: none; margin-right: 2px; cursor: pointer; position: relative; top: 1px; } .menu-tab.active { background-color: #f0f0f0; border-bottom-color: #f0f0f0; z-index: 2; } .menu-tab:hover:not(.active) { background-color: #e0e0e0; } .content-area { padding: 15px; background-color: #f0f0f0; border: 1px solid #848484; border-right-color: #fff; border-bottom-color: #fff; margin: 3px; min-height: 300px; overflow: auto; flex-grow: 1; /* Allow content area to grow */ } .win98-button { background-color: #c0c0c0; border: 2px solid; border-color: #dfdfdf #808080 #808080 #dfdfdf; padding: 4px 10px; font-size: 12px; margin: 5px; cursor: pointer; position: relative; box-shadow: 1px 1px 0 #dfdfdf inset, -1px -1px 0 #707070 inset; } .win98-button:active { border-color: #808080 #dfdfdf #dfdfdf #808080; box-shadow: -1px -1px 0 #dfdfdf inset, 1px 1px 0 #707070 inset; padding-top: 5px; padding-left: 11px; padding-bottom: 3px; padding-right: 9px; } .status-bar { border-top: 1px solid #848484; padding: 3px 5px; font-size: 11px; display: flex; justify-content: space-between; flex-shrink: 0; /* Prevent status bar from shrinking */ } table { border-collapse: collapse; width: 100%; font-size: 12px; table-layout: auto; /* Allow table to adjust */ } th, td { border: 1px solid #848484; padding: 4px 8px; text-align: left; white-space: nowrap; /* Prevent text wrapping */ overflow: hidden; /* Hide overflow */ text-overflow: ellipsis; /* Add ellipsis for overflow */ } th { background-color: #c0c0c0; position: sticky; top: 0; z-index: 3; /* Ensure header stays above table content */ } .table-container { max-height: 300px; /* Initial max height */ overflow: auto; margin-top: 10px; border: 1px solid #848484; border-right-color: #fff; border-bottom-color: #fff; width: 100%; /* Ensure it takes full width */ } .window.maximized .table-container { max-height: calc(100% - 150px); /* Adjust height when maximized, considering controls */ } .window.maximized .content-area { overflow: hidden; /* Prevent double scrollbars */ } .message { padding: 8px; margin: 5px 0; border: 1px solid; font-size: 12px; } .message.error { background-color: #fdd; border-color: #faa; color: #900; } .message.success { background-color: #dfd; border-color: #afa; color: #090; } .welcome-message { background-color: #ddf; border-color: #aaf; color: #009; padding: 15px; margin: 15px 0; font-size: 14px; border: 1px solid #aaf; } .chart-container { height: 300px; margin-top: 10px; border: 1px solid #848484; background-color: white; } .chart-tabs { display: flex; margin-top: 10px; } .chart-tab { padding: 3px 8px; border: 1px solid #848484; border-bottom: none; margin-right: 2px; background-color: #c0c0c0; cursor: pointer; font-size: 11px; } .chart-tab.active { background-color: white; position: relative; z-index: 1; top: 1px; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 1000; } .loader { border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 2s linear infinite; display: none; position: fixed; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; z-index: 1001; } /* Estilos para a tela de carregamento do Windows 98 */ .win98-loading-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 2000; } .win98-loading-dialog { width: 400px; background-color: #c0c0c0; border: 3px solid #dfdfdf; border-right-color: #808080; border-bottom-color: #808080; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); padding: 2px; } .win98-loading-title { background: linear-gradient(90deg, #000080, #1084d0); color: white; padding: 3px 5px; font-weight: bold; font-size: 12px; display: flex; justify-content: space-between; align-items: center; } .win98-loading-content { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; background-color: #D4D0C8; } .win98-loading-text { font-size: 24px; margin-bottom: 40px; } .win98-loading-progress { width: 100%; height: 20px; background-color: white; border: 1px inset #848484; margin-bottom: 40px; position: relative; overflow: hidden; display: flex; } .progress-segment { width: 8.33%; /* 12 segments */ height: 100%; border-right: 1px solid #f0f0f0; background-color: transparent; } .progress-segment.active { background-color: #000080; } .win98-loading-buttons { display: flex; justify-content: center; } /* Estilo específico para o botão OK */ .ok-button { width: 70px; height: 23px; background-color: #c0c0c0; border: 2px solid; border-color: #dfdfdf #808080 #808080 #dfdfdf; box-shadow: 1px 1px 0 #dfdfdf inset, -1px -1px 0 #707070 inset; font-family: 'Tahoma', sans-serif; font-size: 12px; text-align: center; line-height: 20px; cursor: pointer; } .ok-button:active { border-color: #808080 #dfdfdf #dfdfdf #808080; box-shadow: -1px -1px 0 #dfdfdf inset, 1px 1px 0 #707070 inset; } /* Windows 98 scrollbar styles */ ::-webkit-scrollbar { width: 16px; height: 16px; background-color: #dfdfdf; } ::-webkit-scrollbar-thumb { background-color: #c0c0c0; border: 2px solid; border-color: #dfdfdf #808080 #808080 #dfdfdf; } ::-webkit-scrollbar-button { background-color: #c0c0c0; border: 2px solid; border-color: #dfdfdf #808080 #808080 #dfdfdf; display: block; height: 16px; width: 16px; box-shadow: 1px 1px 0 #dfdfdf inset, -1px -1px 0 #707070 inset; } ::-webkit-scrollbar-button:active { border-color: #808080 #dfdfdf #dfdfdf #808080; box-shadow: -1px -1px 0 #dfdfdf inset, 1px 1px 0 #707070 inset; } ::-webkit-scrollbar-button:vertical:start { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 4 L4 0 L8 4 Z' fill='black'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } ::-webkit-scrollbar-button:vertical:end { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 0 L4 4 L8 0 Z' fill='black'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* Scrollbar styling for menu tabs */ .menu-tabs::-webkit-scrollbar { height: 12px; /* Increased height */ background-color: #d4d0c8; /* Windows 98 background color */ } .menu-tabs::-webkit-scrollbar-thumb { background-color: #c0c0c0; border: 1px solid #848484; border-radius: 0; /* Windows 98 style - no rounded corners */ } .menu-tabs::-webkit-scrollbar-button { background-color: #c0c0c0; border: 1px solid #848484; width: 16px; display: block; /* Ensure buttons are visible */ } .menu-tabs::-webkit-scrollbar-track { margin-top: 4px; background-color: #d4d0c8; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* INÍCIO DOS NOVOS ESTILOS */ /* 1. CHART PICKER RETRÔ */ .chart-type-selector { background-color: #d4d0c8; border: 1px solid #848484; border-right-color: #fff; border-bottom-color: #fff; padding: 8px; margin: 10px 0; display: flex; flex-wrap: wrap; } .chart-type-selector label { margin-right: 12px; font-size: 12px; display: flex; align-items: center; cursor: pointer; } .chart-type-selector input[type="radio"] { margin-right: 4px; } /* 2. HISTÓRICO DE VISUALIZAÇÕES */ .win98-window { background-color: #c0c0c0; border: 3px solid #dfdfdf; border-right-color: #808080; border-bottom-color: #808080; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); position: absolute; /* Changed to absolute for draggable */ top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1500; width: 400px; display: none; } .win98-window-title { background: linear-gradient(90deg, #000080, #1084d0); color: white; padding: 3px 5px; font-weight: bold; font-size: 12px; display: flex; justify-content: space-between; align-items: center; cursor: move; } .win98-window-content { padding: 10px; background-color: #f0f0f0; border: 1px solid #848484; border-right-color: #fff; border-bottom-color: #fff; margin: 3px; max-height: 300px; overflow: auto; } #listaHistorico { list-style-type: none; padding: 0; margin: 0; } #listaHistorico li { padding: 5px; border-bottom: 1px solid #ccc; font-size: 12px; cursor: pointer; } #listaHistorico li:hover { background-color: #e5e5e5; } /* 4. PRINT STYLE DOS */ .terminal-dos { background: black; color: lime; font-family: 'Courier New', monospace; white-space: pre; padding: 1em; font-size: 14px; border: 1px solid #ccc; margin-top: 10px; overflow: auto; max-height: 300px; display: none; } /* 5. VISUALIZADOR DE COLUNAS */ #checkboxColunas { max-height: 200px; overflow-y: auto; padding: 5px; margin-bottom: 10px; border: 1px inset #848484; background-color: white; } /* 6. GRÁFICOS EM JANELAS MÓVEIS */ .graph-window { position: absolute; width: 420px; border: 3px solid #dfdfdf; border-right-color: #808080; border-bottom-color: #808080; background: #c0c0c0; z-index: 1000; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); display: flex; /* Use flex for layout */ flex-direction: column; /* Stack vertically */ } .graph-title-bar { background: linear-gradient(90deg, #000080, #1084d0); color: white; padding: 3px 5px; font-weight: bold; font-size: 12px; display: flex; justify-content: space-between; align-items: center; cursor: move; flex-shrink: 0; } .graph-content { padding: 10px; background-color: #f0f0f0; border: 1px solid #848484; border-right-color: #fff; border-bottom-color: #fff; margin: 3px; height: 300px; flex-grow: 1; /* Allow content to grow */ overflow: hidden; /* Prevent canvas overflow issues */ } .graph-content canvas { max-width: 100%; max-height: 100%; } /* 8. BENCHMARK RETRÔ */ .loading-text { background: black; color: #00ff00; font-family: 'Courier New', monospace; white-space: pre; padding: 1em; font-size: 13px; border: 1px solid #848484; margin-top: 10px; display: none; max-height: 300px; overflow-y: auto; } /* 9. ANÁLISES ESTATÍSTICAS */ .stats-container { margin-top: 10px; font-size: 12px; border: 1px solid #848484; padding: 8px; background-color: #f5f5f5; max-height: 300px; overflow-y: auto; } .stats-title { font-weight: bold; margin-bottom: 5px; border-bottom: 1px solid #ccc; padding-bottom: 3px; } .stats-row { display: flex; margin-bottom: 3px; } .stats-label { width: 100px; font-weight: bold; flex-shrink: 0; } .stats-value { flex-grow: 1; word-break: break-all; /* Prevent long numbers from overflowing */ } /* Anotações para relatório */ .anotacoes-textarea { width: calc(100% - 12px); /* Account for padding */ height: 80px; margin-top: 10px; font-family: 'Tahoma', sans-serif; font-size: 12px; padding: 5px; border: 1px inset #848484; box-sizing: border-box; /* Include padding in width calculation */ } /* Estilos para Infográfico */ #infographicContainer { display: none; /* Oculto por padrão */ background-color: #f0f0f0; /* Cor de fundo semelhante ao content-area */ border: 1px solid #848484; border-right-color: #fff; border-bottom-color: #fff; margin-top: 10px; padding: 15px; font-family: 'Tahoma', sans-serif; font-size: 12px; max-height: 400px; /* Limit height */ overflow-y: auto; /* Add scroll if needed */ } /* Style for the content within the infographic container, used for html2canvas */ #infographicContent { background-color: #f0f0f0; /* Ensure background matches for export */ padding: 1px; /* Prevent margin collapse issues */ } .infographic-section { background-color: #ffffff; /* Fundo branco para seções */ border: 1px solid #848484; padding: 10px; margin-bottom: 10px; box-shadow: 1px 1px 0 #dfdfdf inset, -1px -1px 0 #707070 inset; /* Efeito 3D sutil */ } .infographic-title { font-size: 14px; font-weight: bold; color: #000080; /* Azul escuro Win98 */ border-bottom: 1px solid #848484; padding-bottom: 5px; margin-bottom: 10px; } .infographic-stats { white-space: pre-wrap; /* Mantém a formatação das estatísticas */ font-family: 'Courier New', monospace; /* Fonte monoespaçada */ line-height: 1.4; margin-bottom: 10px; font-size: 11px; /* Slightly smaller for pre */ } .infographic-chart-placeholder { height: 200px; border: 1px dashed #848484; display: flex; justify-content: center; align-items: center; color: #808080; margin-bottom: 10px; background-color: #e8e8e8; overflow: hidden; /* Prevent image overflow */ } .infographic-chart-placeholder img { max-width: 100%; max-height: 100%; object-fit: contain; } .infographic-notes { white-space: pre-wrap; /* Mantém a formatação das anotações */ font-style: italic; color: #555; } /* Style to prevent text selection during drag */ body.dragging-window { user-select: none; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10+ */ } /* Highlight style for drag and drop */ .content-area.dragover { background-color: #e5f2ff !important; /* Light blue highlight */ border: 2px dashed #0055cc !important; } @media (max-width: 600px) { body { padding: 5px; /* Reduce padding on small screens */ } .window { width: 100%; max-width: none; height: calc(100vh - 10px); /* Almost full height */ margin: 0; border: 1px solid #808080; /* Simpler border */ top: 5px; /* Adjust top */ left: 0; } .window.maximized { /* Adjust maximized state for mobile */ height: 100vh; top: 0; } .content-area { min-height: 200px; padding: 8px; } .table-container, .chart-container, .stats-container, .terminal-dos, .loading-text, #infographicContainer { max-height: 200px; /* Reduce max height further */ } .window.maximized .table-container { max-height: calc(100% - 180px); /* Adjust maximized height more aggressively */ } .win98-loading-dialog, .win98-window, .graph-window { width: 90%; max-width: 95%; /* Allow slightly wider */ } .chart-type-selector { flex-direction: column; } .chart-type-selector label { margin-bottom: 5px; margin-right: 0; /* Stack vertically */ } .title-text { font-size: 11px; /* Slightly smaller title */ } .win98-button { padding: 3px 8px; font-size: 11px; margin: 3px; } .help-window .content-area { /* Specific adjustment for help window */ max-height: 300px; }