/*
 * Main Body & Layout
 * We use flexbox to center the content vertically on pages like 'login'.
 */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa; /* Light gray background */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes full vertical height */
}

/*
 * Content Wrapper
 * This is the new class you will add to your .php files.
 * It centers the content, sets a max-width for large desktops,
 * and adds padding.
 */
.content-wrapper {
    width: 100%;
    max-width: 1140px; /* Standard container width */
    margin: 20px auto;  /* Centers the content */
    padding: 20px;
    background-color: #ffffff; /* White background for the content box */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/*
 * Specific centering for the login page
 * On a page with the .login-body class, we center the wrapper
 */
body.login-body {
    justify-content: center; /* Vertically center the login box */
}
body.login-body .content-wrapper {
    max-width: 450px; /* Make the login box narrower */
}

/*
 * Headings & Links
 */
h1, h2 {
    color: #333;
}

/*
 * Forms
 * Bootstrap handles most of this, but we remove old, broken styles.
 */
form {
    margin-top: 20px;
}

/* * Tables
 * Make the table layout more consistent.
 */
table {
    width: 100%; /* Table should be responsive */
    margin-top: 20px;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 12px; /* More padding for readability */
    text-align: left; /* Align text left for tables */
    vertical-align: middle; /* Center content vertically */
}

th {
    background-color: #f2f2f2;
}

/*
 * Responsive Table
 * On small screens, force a minimum width and allow horizontal scrolling
 * This is inside a .table-responsive div in index.php
 */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.table-responsive table {
    min-width: 750px; /* Force scroll if screen is smaller */
}

/*
 * Actions Column
 * Make sure buttons don't wrap awkwardly
 */
td:last-child {
    white-space: nowrap; /* Keep all action buttons on one line */
}

/*
 * Button styles
 * Add some margin for buttons in the action column
 */
.btn {
    margin: 2px;
}