/* download-view-styles.css */

body.download-view-page {
    /* Override general body styles if they conflict with a wider layout.
       For example, if the main CSS forces a narrow centered column for all pages.
       The flex properties from your original 'styles.css' might still be okay,
       as the child container will dictate its own width. */
    padding: 20px; /* Maintain some padding around the very edge of the viewport */
}

/*
 * Wider Page Container for the Download View
 * Replace or use this INSTEAD of '.page-container' from your original
 * styles.css on your download view properties page.
 */
.download-view-main-container {
    width: 95%; /* Utilize a large percentage of the viewport width */
    max-width: 1800px; /* Set a generous max-width, adjust as needed, or remove for full fluid width */
    margin: 20px auto; /* Center the container with some top/bottom margin */
    padding: 25px 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid #ccd0d5;
}

/*
 * Specific styling for the "output content" area on the download view page.
 * This is the area you want to be wide and potentially scroll internally
 * if the content is still excessively wide.
 */
.download-view-output-content {
    width: 100%; /* Take the full width of its parent (.download-view-main-container) */
    padding: 20px;
    margin-top: 20px; /* Space below a title, if any */
    background-color: #f8f9fa; /* A slightly different background to distinguish the content block */
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-family: "Menlo", "Consolas", "Courier New", Courier, monospace; /* Monospaced font for properties/data */
    font-size: 0.9rem; /* Adjust as needed */
    line-height: 1.6;
    white-space: pre; /*
                        Use 'pre' to preserve all whitespace and line breaks, content will not wrap.
                        Use 'pre-wrap' to preserve whitespace and line breaks, but content WILL wrap.
                        Use 'nowrap' if you only want to prevent wrapping and don't need strict space preservation.
                      */
    overflow-x: auto; /* IMPORTANT: Add a horizontal scrollbar to THIS container if its content still overflows,
                         instead of making the whole page scroll. */
}

/* If your output content is a table, you might want to ensure it behaves well */
.download-view-output-content table {
    width: 100%; /* Makes the table attempt to fit within the .download-view-output-content */
    border-collapse: collapse;
}

.download-view-output-content th,
.download-view-output-content td {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    text-align: left;
    vertical-align: top;
}

.download-view-output-content th {
    background-color: #e9ecef;
    font-weight: 600;
}

/* You can still use general heading styles if needed */
.download-view-main-container h1,
.download-view-main-container h2 {
    text-align: center;
    color: #1877f2; /* From original styles.css */
    font-size: 28px;
    margin-bottom: 25px;
}

/* If you have buttons or other elements from your original stylesheet you want to reuse,
   you can either:
   1. Ensure your original 'styles.css' is also loaded on this page (and these new rules override where necessary).
   2. Copy specific relevant styles (like button styles) into this 'download-view-styles.css'.
   For example, if you need the form submit button:
*/
/*
button.form-submit-button {
    background-color: #1877f2;
    color: white;
    padding: 12px 0;
    width: auto; // Adjust width as needed, maybe not 100% for this page
    min-width: 150px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: block; // Or inline-block, depending on layout
    margin: 20px auto; // Example centering
}

button.form-submit-button:hover {
    background-color: #166fe5;
}
*/

.nav-tab, .nav-link {
    padding: 10px 15px; /* */
    cursor: pointer; /* */
    border: 1px solid transparent; /* */
    border-bottom: none; /* */
    margin-right: 5px; /* */
    margin-bottom: -1px; /* */
    border-radius: 8px 8px 0 0; /* */
    background-color: #e4e6eb; /* */
    font-weight: 600; /* */
    color: #333; /* */
    text-decoration: none; /* */
    display: inline-block; /* */
    white-space: nowrap; /* */
}

.tab-content.active {
    display: block; /* */
    border-radius: 0 12px 12px 12px; /* */
}

.nav-tabs .nav-tab.active {
    position: relative; /* */
    z-index: 1; /* */
}

label {
    display: block; /* */
    margin-bottom: 8px; /* */
    font-weight: 600; /* */
    font-size: 15px; /* */
    color: #606770; /* */
}

input[type="text"], input[type="number"], select {
    width: 100%; /* */
    padding: 14px 16px; /* */
    border: 1px solid #ccd0d5; /* */
    border-radius: 8px; /* */
    box-sizing: border-box; /* */
    font-size: 16px; /* */
    background-color: #fff; /* */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* */
}

input[type="text"]:focus, input[type="number"]:focus, select:focus {
    border-color: #1877f2; /* */
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2); /* */
    outline: none; /* */
}

.button-container {
    text-align: center; /* */
}

button.form-submit-button {
    background-color: #1877f2; /* */
    color: white; /* */
    padding: 12px 0; /* */
    width: 100%; /* */
    border: none; /* */
    border-radius: 8px; /* */
    cursor: pointer; /* */
    font-size: 18px; /* */
    font-weight: 600; /* */
    transition: background-color 0.2s ease-in-out; /* */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* */
}

button.form-submit-button:hover {
    background-color: #166fe5; /* */
}

.nav-tabs {
    display: flex; /* */
    flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */ /* */
    margin-bottom: 20px; /* */
    border-bottom: 1px solid #ccd0d5; /* */
}    /* width: 100% */

.nav-tab, .nav-link {
    padding: 10px 15px; /* */
    cursor: pointer; /* */
    border: 1px solid transparent; /* */
    border-bottom: none; /* */
    margin-right: 5px; /* */
    margin-bottom: -1px; /* */
    border-radius: 8px 8px 0 0; /* */
    background-color: #e4e6eb; /* */
    font-weight: 600; /* */
    color: #333; /* */
    text-decoration: none; /* */
    display: inline-block; /* */
    white-space: nowrap; /* */
}

.nav-tab.active, .nav-link.active {
    background-color: #ffffff; /* */
    border-color: #ccd0d5; /* */
    border-bottom-color: #ffffff; /* */
    color: #1877f2; /* */
}

.nav-link:hover {
    background-color: #d1d3d6; /* */
}