/* ==========================================================================
   1. Design System & Variables (Based on your example)
   ========================================================================== */
:root {
    /* Colors */
    --color-primary: #003366;         /* A professional, dark university blue */
    --color-primary-light: #0055a4;   /* For hover effects */
    --color-background: #f0f0f0;      /* Light grey from your example */
    --color-surface: #ffffff;         /* White for cards/panels */
    --color-text-primary: #333333;    /* Dark text from your example */
    --color-text-secondary: #6c757d;  /* Lighter grey for secondary text */
    --color-border: #dee2e6;          /* A soft, modern border color */
    --color-success: #28a745;
    --color-warning: #dc3545;
    --color-table-header: #f8f9fa;    /* Very light grey for table headers */
    --color-table-row-alt: #f8f9fa;   /* Same for alternating rows for a subtle look */

    /* Typography */
    --font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 14px;           /* Compact base font size */
    --line-height-base: 1.6;

    /* Spacing & Shape */
    --spacing-unit: 8px;
    --border-radius: 6px;             /* A slightly more subtle rounding than 10px */
    --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Soft shadow from your example */
}

/* ==========================================================================
   2. Global Resets & Base Styles
   ========================================================================== */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--color-primary-light);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary);
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
    font-weight: 600;
}
h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }

/* ==========================================================================
   3. Layout Structure
   ========================================================================== */
#page-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#banner {
    background-color: var(--color-surface);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

#main-area {
    display: flex;
    flex-grow: 1;
}

#left {
    width: 230px;
    background-color: var(--color-primary);
    color: var(--color-surface);
    padding: calc(var(--spacing-unit) * 2);
    flex-shrink: 0;
}

#content {
    padding: calc(var(--spacing-unit) * 3);
    flex-grow: 1;
    overflow-x: auto;
}

#footer {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    text-align: right;
    color: var(--color-text-secondary);
    font-size: 0.9em;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface);
    flex-shrink: 0;
}

.content-wrapper {
    max-width: 1200px; /* A comfortable max-width for content */
    margin: 0 auto;    /* Center the wrapper on very wide screens */
}

/* ==========================================================================
   4. Component Styles
   ========================================================================== */

/* --- Header / Banner --- */
#header-title h2 {
    margin: 0;
    font-size: 1.5em;
    color: var(--color-text-primary);
}
#header-right {
    text-align: left;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}
#header-right img {
    vertical-align: middle;
    margin-left: var(--spacing-unit);
    max-width: 80px;
    margin-bottom: 5px;
}

/* --- Main Navigation (Left Sidebar) --- */
#left ul { list-style-type: none; padding: 0; margin: 0; }
#left li.main_menu { margin-bottom: var(--spacing-unit); }
#left a {
    color: #ffffff;
    display: block;
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
}
#left a:hover, #left a.selected {
    background-color: var(--color-primary-light);
    text-decoration: none;
}

/* --- Submenu --- */
#submenu {
    margin-bottom: calc(var(--spacing-unit) * 2);
    padding-bottom: var(--spacing-unit);
    border-bottom: 1px solid var(--color-border);
}
#submenu li.submenu {
    list-style-type: none;
    display: inline-block;
    margin-right: calc(var(--spacing-unit) * 2);
}

/* --- Login Page --- */
.login-container {
    width: 100%;
    max-width: 420px;
    margin: calc(var(--spacing-unit) * 4) auto;
    padding: calc(var(--spacing-unit) * 5);
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
}
.login-container h1 { margin-bottom: calc(var(--spacing-unit) * 3); }
.login-container table { width: 100%; text-align: left; }
.login-container td { padding: var(--spacing-unit); }
.login-container img {
            max-width: 80px;
            margin-bottom: 20px;
        }


/* --- Tables --- */
.table_main, .table_list {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: calc(var(--spacing-unit) * 2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden; /* Ensures border-radius clips content */
}
.table_main th, .table_list th, .table_main td, .table_list td {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}
.table_main tr:last-child td, .table_list tr:last-child td {
    border-bottom: none;
}
.table_main th, .table_list_header {
    background-color: var(--color-table-header);
    font-weight: 600;
}
tr.r1, .table_list tr:nth-child(even) { background-color: var(--color-table-row-alt); }
tr.rh { background-color: var(--color-table-header); font-weight: bold; }

/* --- Forms & Buttons --- */
form { display: inline; }
input[type="text"], input[type="password"], input[type="email"], select {
    width: 100%;
    padding: var(--spacing-unit);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 1em;
    background-color: #fff;
}
input[type="submit"], button {
    display: inline-block;
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: background-color 0.2s;
}
input[type="submit"]:hover, button:hover {
    background-color: var(--color-primary-light);
}

/* --- Utility & Message Classes --- */
.warning, .error {
    color: var(--color-warning);
    background-color: #fdf preparazione;
    border: 1px solid var(--color-warning);
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.ok { color: var(--color-success); font-weight: bold; }
.noprint { display: revert; }
@media print {
    .noprint, #left, #mobile-menu-toggle { display: none !important; }
    body, #page-container, #main-area, #content {
        display: block; padding: 0; margin: 0; box-shadow: none; border: none;
        background-color: #fff !important;
    }
}

/* ==========================================================================
   5. Responsive Design (Mobile First)
   ========================================================================== */
#mobile-menu-toggle {
    display: block;
    position: fixed; /* Changed to fixed to stay in place on scroll */
    top: 16px;
    left: 16px;
    z-index: 1001; /* Highest z-index */
    background: var(--color-primary);
    color: white;
    border: none;
    padding: var(--spacing-unit);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1.5em;
    line-height: 1;
}
#menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998; /* Below the menu, but above everything else */
}
body.menu-open #menu-overlay {
    display: block;
}

#main-area { flex-direction: column; }
#left {
    width: 250px;
    position: fixed;
    top: 0; left: 0; height: 100%;
    z-index: 1000; /* Higher z-index than the overlay */
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
    box-shadow: var(--box-shadow);
}
#content { padding: calc(var(--spacing-unit) * 2); }
#banner {
    padding-left: calc(var(--spacing-unit) * 8); /* Increased padding to not overlap button */
}

/* --- Modify the Desktop Media Query --- */
@media (min-width: 768px) {
    #mobile-menu-toggle { display: none; }
    #main-area { flex-direction: row; }
    #left {
        position: static;
        transform: translateX(0);
        height: auto;
        box-shadow: none;
    }
    #banner { padding-left: calc(var(--spacing-unit) * 3); }
    #content { padding: calc(var(--spacing-unit) * 4); }
    
    /* --- Add this rule to reset the wrapper for desktop --- */
    .content-wrapper {
        margin: 0; /* No centering needed when sidebar is present */
        max-width: none; /* Allow it to fill the content area */
    }
}

/* --- Add a new media query for very wide screens --- */
@media (min-width: 1600px) {
    .content-wrapper {
        max-width: 1200px;
        margin: 0 auto; /* Re-center the content on extra-wide displays */
    }
}

/* ==========================================================================
   6. Landing Page Styles (Add this to the end of your style.css)
   ========================================================================== */

.choice-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Makes cards the same height */
    gap: calc(var(--spacing-unit) * 4);
    padding: calc(var(--spacing-unit) * 2);
    width: 100%;
}

a.choice-card {
    /* Card Styling (from your example) */
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: calc(var(--spacing-unit) * 4);
    text-align: center;
    
    /* Layout for content inside the card */
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Link Behavior */
    text-decoration: none;
    color: var(--color-text-primary);
    
    /* Sizing */
    flex-basis: 400px; /* Base width for each card */
    max-width: 450px;
    
    /* Interactive Effect */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

a.choice-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    color: var(--color-text-primary);
    text-decoration: none;
}

.choice-card img {
    max-height: 80px;
    width: auto;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.choice-card h2 {
    color: var(--color-primary);
    font-size: 1.5em;
    margin-bottom: var(--spacing-unit);
}

.choice-card p {
    color: var(--color-text-secondary);
    font-size: 0.95em;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1; /* Allows paragraph to push footer content down */
}

/* --- Responsive stacking for the choice cards --- */
@media (max-width: 900px) {
    .choice-container {
        flex-direction: column;
        align-items: center;
    }
    a.choice-card {
        width: 100%;
        max-width: 450px; /* Constrain width on tablets */
    }
}