/*
  1. Centering the main container (.centered-box)
  2. Styling the content inside (text and image)
  3. Ensuring a responsive, clean layout
*/

/* --- Global Reset & Body Styling --- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px; /* Add some padding around the content */
    background-color: #f4f4f4; /* Light gray background for contrast */
}

p {
    margin-bottom:  0em;
}

ol > li::marker {
  font-weight: bold;
}
.left-box {
    margin-top: 75px;
    margin-bottom: 25px;
    /* Set a maximum width so it doesn't span the whole page */
    width: 75%; /* Use 90% of the screen up to the max-width */
    
    /* Center the box horizontally using margin auto */
    margin-left: auto;
    margin-right: auto;
    
    /* Add padding, background, and a subtle shadow */
    padding: 20px;
    background-color: #ffffff; /* White background for the box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    border-radius: 8px; /* Rounded corners */
    
    /* Use Flexbox for side-by-side layout (text on left, image on right) */
    display: flex;
    justify-content: space-between; /* Puts space between the left and right items */
    align-items: left; /* Vertically centers items in the box */
    gap: 10px; /* Space between the text and the image */
}


/* --- The Main Centered Box --- */
.centered-box {
    margin-top: 75px;
    margin-bottom: 25px;
    /* Set a maximum width so it doesn't span the whole page */
    width: 75%; /* Use 90% of the screen up to the max-width */
    
    /* Center the box horizontally using margin auto */
    margin-left: auto;
    margin-right: auto;
    
    /* Add padding, background, and a subtle shadow */
    padding: 20px;
    background-color: #ffffff; /* White background for the box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    border-radius: 8px; /* Rounded corners */
    
    /* Use Flexbox for side-by-side layout (text on left, image on right) */
    display: flex;
    justify-content: space-between; /* Puts space between the left and right items */
    align-items: center; /* Vertically centers items in the box */
    gap: 10px; /* Space between the text and the image */
}

/* --- Table Specific Styling --- */
.data-table {
    /* Ensure the table fills the entire width of the centered box */
    width: 100%; 
    /* Collapse borders into a single, clean line */
    border-collapse: collapse; 
    /* Remove any default margin or spacing */
    margin: 0; 
}

/* Style for all table cells (header and data) */
.data-table th, 
.data-table td {
    /* Add internal padding for better spacing */
    padding: 12px 15px; 
    /* Add a light border to separate rows */
    border-bottom: 1px solid #ddd; 
    /* Left-align text for readability */
    text-align: left; 
}

/* Style for the table header */
.data-table thead th {
    background-color: #333; /* Dark background for headers */
    color: white; /* White text for contrast */
    border-bottom: 2px solid #555; /* Thicker border below header */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
}

/* Add a hover effect for better user experience */
.data-table tbody tr:hover {
    background-color: #f5f5f5;
}

/* Style the last row specifically to remove the bottom border */
.data-table tbody tr:last-child td {
    border-bottom: none;
}

        h1 {
            color: #333;
            text-align: center;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
            margin-bottom: 0;
        }
 /* --- Table Specific Styling --- */
        .software-table {
            width: 100%; 
            border-collapse: collapse; /* Single, clean borders */
            margin-top: 20px;
            font-size: 1.5em;
            table-layout: fixed; /* Ensures column widths are respected */
        }

        /* Style for all table cells (header and data) */
        .software-table th, 
        .software-table td {
            padding: 15px 20px; 
            border: 1px solid #e0e0e0; /* Light borders */
            text-align: left; 
            vertical-align: top; /* Align content to the top */
        }
        
        /* Header Styling */
        .software-table thead th {
            background-color: white; /* Primary blue color */
            color: black; 
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 3px solid #0056b3;
        }
        
        /* Column Widths */
        .software-table th:first-child,
        .software-table td:first-child {
            width: 35%; /* Module/Version column takes 35% */
            background-color: #f9f9f9; /* Light background for the module column */
            font-weight: 500;
            color: #333;
        }

        .software-table td:last-child {
            width: 65%; /* Description column takes 65% */
        }

        /* Stripe rows for readability */
        .software-table tbody tr:nth-child(even) {
            background-color: #f7f7f7;
        }

        /* Hover effect */
        .software-table tbody tr:hover {
            background-color: #e9ecef;
            cursor: default;
        }
/* --- Code Block Styling (Critical Improvement) --- */

/*
The code snippets are inside simple tables. We need to style these tables to look like
proper code blocks. This targets all tables not in the header/menu, assuming they are
for code, but you may need to add a class (e.g., <table class="code-block">) for safety.
*/
.code-block { /* Target generic tables for styling */
    width: 75%;
    margin: 20px 0;
    border-collapse: collapse;
    background-color: #272822; /* Dark background for code (Monokai theme) */
    color: #f8f8f2; /* Light text color */
    border: 1px solid #ffcc00; /* Gold border accent */
    border-radius: 6px;
    overflow: hidden; /* Ensures content stays inside rounded corners */
}

/* Remove default table borders */
.code-block th,
.codeb-lock td {
    border: none;
    padding: 15px; /* Increased padding inside the code block */
    vertical-align: top;
    font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.95em;
    white-space: pre-wrap; /* Allows the code to wrap if necessary */
}

/* Remove the header/separator line inside the code tables */
.code-block thead {
    display: none;
} 
/* Command prompt style for run commands */
p > code {
    background-color: #eee;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
    color: #c0392b; /* A darker color to stand out from regular text */
}
/* --- Content Sections Styling --- */
.content-left,
.image-right {
    /* Each item takes up roughly equal space */
    flex: 1; 
    /* Ensures the image section content doesn't get squeezed too small */
    min-width: 250px; 
}

/* --- Image Specific Styling --- */
.image-right img {
    /* Makes the image fill the width of its container */
    width: 100%;
    /* Ensures the image doesn't distort and maintains aspect ratio */
    height: auto; 
    /* Optional: round the corners of the image */
    border-radius: 6px; 
    /* Ensures the image doesn't overflow its container if it's too big */
    display: block; 
}

/* --- Responsive Design: Stack on Small Screens --- */
@media (max-width: 600px) {
    .centered-box {
        /* On small screens, change the direction to stack vertically */
        flex-direction: column;
        /* Increase padding on small screens if desired */
        padding: 15px; 
    }
    
    .content-left {
        /* Add some space below the text when stacked */
        margin-bottom: 15px;
        text-align: center; /* Center text on small screens */
    }
    
    /* Optionally, reduce the image size slightly on small screens */
    .image-right {
        width: 100%;
    }
}