.disk-logs-modal { display: flex; flex-direction: column; height: 100%; max-height: 90vh; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #e0e0e0; background-color: #fafafa; } .modal-header h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.25rem; color: #333; } .header-actions { display: flex; gap: 8px; } .modal-content { flex: 1; padding: 24px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } .client-info { margin-bottom: 16px; padding: 12px; background-color: #f5f5f5; border-radius: 4px; border-left: 4px solid #2196f3; flex-shrink: 0; } .client-info p { margin: 4px 0; font-size: 0.9rem; } .client-info strong { color: #333; } .log-container { flex: 1; display: flex; flex-direction: column; min-height: 0; border: 1px solid #e0e0e0; border-radius: 4px; background-color: #1e1e1e; overflow: hidden; } .log-loading, .log-error { display: flex; align-items: center; justify-content: center; gap: 12px; flex: 1; color: #aaa; padding: 32px; } .log-error { color: #f44336; } .log-content { flex: 1; margin: 0; padding: 16px; overflow: auto; font-family: 'Courier New', Courier, monospace; font-size: 0.82rem; line-height: 1.5; color: #d4d4d4; background-color: transparent; white-space: pre-wrap; word-break: break-all; } .modal-actions { padding: 16px 24px; border-top: 1px solid #e0e0e0; display: flex; justify-content: flex-end; background-color: #fafafa; } .action-button { border-radius: 8px; font-weight: 500; padding: 12px 24px; transition: all 0.3s ease; } .action-button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }