/* ==========================================================================
   1. Design System & Variables 
   ========================================================================== */
:root {
    /* Colors */
    --color-primary: #003366;         /* A professional, dark university blue */
    --color-primary-light: #0055a4;   /* For hover effects */
    --color-background: #f0f0f0;      /* Light grey  */
    --color-surface: #ffffff;         /* White for cards/panels */
    --color-text-primary: #333333;    /* Dark text  */
    --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  */
}

/* ==========================================================================
   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, .table_main td_2, .table_list td_2 {
    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 FIRST: Hide hamburger by default, show on mobile */
#mobile-menu-toggle {
    display: none; /* Hidden by default */
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1001;
    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;
}

/* Show hamburger menu ONLY on mobile devices */
@media (max-width: 767px) {
    #mobile-menu-toggle {
        display: block; /* Show on mobile */
    }
    
    /* Mobile layout adjustments */
    #banner {
        padding-left: calc(var(--spacing-unit) * 8); /* Space for hamburger */
        padding-right: var(--spacing-unit);
    }
    
    #main-area {
        flex-direction: column;
    }
    
    /* Hide sidebar by default on mobile */
    #left {
        width: 280px; /* Slightly wider for better touch targets */
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
        box-shadow: var(--box-shadow);
        padding-top: 60px;
    }
    
    /* Show sidebar when menu is open */
    body.menu-open #left {
        transform: translateX(0);
    }
    
    /* Overlay for mobile menu */
    #menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    
    body.menu-open #menu-overlay {
        display: block;
    }
    
    /* Adjust content padding for mobile */
    #content {
        padding: calc(var(--spacing-unit) * 2);
    }
    
    /* Make tables responsive */
    .table_main, .table_list {
        font-size: 0.9em;
    }
    
    /* Adjust form inputs for mobile */
    .table_list[width='450'] {
        width: 100%;
        max-width: none;
        min-width: auto;
    }
    
    .table_list[width='450'] input[type="text"] {
        width: 120px; /* Smaller inputs for mobile */
    }
}

/* DESKTOP: 768px and above */
@media (min-width: 768px) {
    #mobile-menu-toggle {
        display: none; /* Explicitly hide on desktop */
    }
    
    #menu-overlay {
        display: none !important; /* Never show overlay on desktop */
    }
    
    #main-area {
        flex-direction: row;
    }
    
    #left {
        position: static;
        transform: translateX(0);
        height: auto;
        box-shadow: none;
        width: 230px; /* Back to original desktop width */
    }
    
    #banner {
        padding-left: calc(var(--spacing-unit) * 3);
    }
    
    #content {
        padding: calc(var(--spacing-unit) * 3);
    }
    
    .content-wrapper {
        margin: 0;
        max-width: none;
    }
}

/* LARGE DESKTOP: 1600px and above */
@media (min-width: 1600px) {
    .content-wrapper {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   6. Specific Component Overrides (Add this to the end of your style.css)
   ========================================================================== */

/* --- Fix for legacy '.table_list' form tables --- */

/* 1. Override the inline width and control the table's size */
.table_list[width='450'] {
    width: auto;          /* Let the table size itself naturally */
    max-width: 450px;     /* Enforce a maximum width */
    min-width: 350px;     /* Prevent it from becoming too squished */
    table-layout: auto;   /* Ensure columns size to content */
}

/* 2. Target the columns specifically within this table type */
/* First column (the label): let it size automatically */
.table_list[width='450'] td:first-child {
    width: auto;
    white-space: nowrap; /* Respect the 'nowrap' from the HTML */
}

/* Second column (the input): let it take the remaining space */
.table_list[width='450'] td:nth-child(2) {
    width: 100%; /* This tells the column to be flexible and fill space */
}

/* 3. CRITICAL FIX: Override the global input style for this specific table */
/* This selector is more specific and will win against the general rule */
.table_list[width='450'] input[type="text"] {
    width: 150px; /* Set a fixed, reasonable width for the text inputs */
    /* Or use 'auto' if you prefer it to size based on the 'size' attribute */
    /* width: auto; */
}

.table_list[width='450'] select {
    width: auto;      /* Hebt die globale 'width: 100%' auf */
    min-width: 150px; /* Stellt eine vernünftige Mindestbreite sicher */
}

/* Optional: Style the submit button column */
.table_list[width='450'] input[type="submit"] {
    width: auto; /* Let the button size itself */
}

/* Reduce the vertical padding on ALL table cells */
.table_main td, .table_list td,
.table_main th, .table_list th {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Reduce the vertical padding INSIDE form elements within tables */
/* This makes the input/select fields themselves shorter */
.table_main input[type="text"], .table_list input[type="text"],
.table_main input[type="password"], .table_list input[type="password"],
.table_main select, .table_list select {
    padding-top: 4px;
    padding-bottom: 4px;
}