/* static/styles.css */

/* Base colors */
:root {
    --plava: #879cfe;
    --rosa: #d0a1eb;
    --bijela: #F0F8FC;
    --blue: #0096FF;
    --green: #22DD22;
    --yellow: #FFFF00;
    --red: #FF3131;
    --excel-green: #1D6F42; /* Added for Export button */
    --hover-excel-green: #1b5633; /* Slightly darker for hover state */
    --hover-plava: #a0b1ff; /* Slightly lighter than plava */
    --header-height: 70px; /* Defined header height for sticky header */
}

/* Global Box Sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* General styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bijela); /* Light background color */
    padding-top: var(--header-height);  /* Add this to prevent content from hiding under header */
}

/* Center titles */
h1, h2, h3 {
    text-align: center;
}

/* Center the filters */
.filters {
    text-align: center;
    margin: 20px 0; /* Adds vertical spacing above and below */
}

/* --- Sticky Header Styles --- */

/* Modified nav to be sticky */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--plava); /* Background color matching existing nav */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
    z-index: 1000;   /* Highest level for main navigation */
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically centers nav items */
    padding: 0 20px; /* Horizontal padding */
}

/* App Brand (Icon and Name) */
nav .menu {
    display: flex;
    align-items: center;
}

.app-brand {
    display: flex;
    align-items: center;
}

.app-icon {
    display: block; /* Ensures the icon is rendered */
    width: 80px; /* Adjust size as needed */
    height: 80px;
    margin-right: 10px; /* Space between icon and name */
}

.app-name {
    font-size: 1.2em; /* Reduced font size for better aesthetics */
    color: #fff; /* White color to contrast the background */
    font-weight: bold;
}

/* Navigation Menu Styles */
nav .menu .menu-items {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav .menu .menu-items li {
    margin: 0 10px; /* Spacing between menu items */
}

nav .menu .menu-items li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
}

nav .menu .menu-items li a:hover {
    background-color: var(--hover-plava); /* Slightly lighter on hover */
}

/* Adjust .logout */
nav .logout a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    background-color: var(--plava);
    border-radius: 5px;
    font-weight: bold;
}

nav .logout a:hover {
    background-color: var(--hover-plava);
}

/* Hamburger Icon */
nav .menu .hamburger {
    display: none; /* Hidden by default, shown on small screens via media queries */
    cursor: pointer;
    font-size: 24px;
}

/* Responsive Design for Smaller Screens */
@media screen and (max-width: 600px) {
    /* Show hamburger menu */
    nav .menu .hamburger {
        display: block;
    }

    /* Hide menu items by default */
    nav .menu .menu-items {
        display: none;
        flex-direction: column;
        align-items: center;
        width: 100%;
        background-color: var(--plava); /* Optional: Background for dropdown */
        position: absolute;
        top: var(--header-height);
        left: 0;
    }

    /* Show menu items when menu is active */
    nav.active .menu .menu-items {
        display: flex;
    }

    /* Adjust menu-items to be vertical */
    nav .menu .menu-items li {
        margin: 10px 0;
    }
}

/* --- End of Sticky Header Styles --- */

/* Add styles for the main content to account for the fixed header */
.content {
    margin-top: var(--header-height);  /* Single source of truth for header spacing */
    padding: 20px;
}

/* Keep this base table header style */
table thead th {
    position: sticky;
    top: var(--header-height);
    background-color: var(--plava);
    color: #fff;
    z-index: 500;
}

/* Admin table header style - fix positioning */
.admin-table th {
    position: sticky;
    top: 0;  /* This will position it right at the top of the table */
    background-color: var(--plava);
    color: white;
    z-index: 500;
    padding: 12px;
    text-align: left;
    border: none;
}

/* Flash Messages */
.flash-messages {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--header-height) + 20px);
    width: 80%;
    max-width: 600px;
    z-index: 1001;
    padding: 15px 20px;  /* Added more horizontal padding */
    margin: 0;
    text-align: center;
    border-radius: 8px;  /* Slightly more rounded corners */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* Enhanced shadow */
    animation: fadeInOut 4s ease-in-out forwards;
    font-weight: 500;  /* Slightly bolder text */
    border: 1px solid transparent;  /* For better border colors */
}

/* Flash message categories with enhanced colors */
.flash-messages.success {
    background-color: #ecf7ed;  /* Light green background */
    color: #0a5d1c;  /* Darker green text */
    border-color: #b7e4bf;  /* Light green border */
}

.flash-messages.warning {
    background-color: #fff8e6;  /* Light yellow background */
    color: #8a5d00;  /* Dark yellow/brown text */
    border-color: #ffe5a3;  /* Light yellow border */
}

.flash-messages.danger,
.flash-messages.error {
    background-color: #fef0f0;  /* Light red background */
    color: #b71c1c;  /* Dark red text */
    border-color: #fcd9d9;  /* Light red border */
}

.flash-messages.info {
    background-color: #e8f4fd;  /* Light blue background */
    color: #0c4a8c;  /* Dark blue text */
    border-color: #b8e2f9;  /* Light blue border */
}

/* Keep existing animation */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translate(-50%, -20px); }
    10% { opacity: 1; transform: translate(-50%, 0); }
    90% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -20px); }
}

/* Prevent stacking of multiple flash messages */
.flash-messages + .flash-messages {
    display: none;
}

/* Cleanup Container */
.cleanup-container {
    width: 90%;
    margin: 20px auto;
    padding: 0;  /* Removed padding for cleaner layout */
    background-color: transparent; /* Transparent background */
}

/* --- Form Styles --- */
/* Centered and Restricted Width Forms */
form {
    width: 100%;
    max-width: none;           /* Remove max-width restriction */
    margin: 20px auto;
    padding: 0;
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Reset previous form styles to original */
form label {
    display: block;             
    margin-top: 10px;
    text-align: center;         
}

form input, form select, form textarea {
    width: 100%;                
    max-width: 300px;           
    padding: 8px;
    box-sizing: border-box;     
}

/* Form Group Styling - back to original */
.form-group {
    display: flex;
    flex-direction: column;     
    margin-bottom: 15px;
    align-items: center;        
    width: 100%;                
}

/* Specific styles for checkbox containers only */
.checkbox-container {
    display: flex;
    flex-direction: row;        /* Force horizontal layout */
    justify-content: center;    /* Center the content */
    align-items: center;        /* Vertically align items */
    gap: 10px;                  /* Space between label and checkbox */
    margin: 10px 0;
    width: 100%;
    max-width: 300px;
}

.checkbox-container label {
    margin: 0;                  /* Remove default label margin */
    text-align: right;         /* Align text to the right of its space */
}

.checkbox-container input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;                 /* Remove default checkbox margin */
}

/* Style for buttons to match original design */
button,
form button {
    width: 100%;
    max-width: 300px;
    padding: 10px;
    margin: 5px 0;
    background-color: var(--plava);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover,
form button:hover {
    background-color: var(--rosa);
}

/* Button Container */
.button-container {
    text-align: center;           /* Centers buttons within the container */
    margin-top: 10px;             /* Minimal top margin for spacing */
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: #fff;
}

table, th, td {
    border: 1px solid #ccc;
}

th, td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: var(--plava);
    color: #fff;
}

/* Row Color Classes */
/* Preserved original course color classes */
.blue {
    background-color: var(--blue);
    color: #fff;
}

.green {
    background-color: var(--green);
    color: #fff;
}

.yellow {
    background-color: var(--yellow);
}

.red {
    background-color: var(--red);
    color: #fff;
}

/* Filters */
.filters a {
    margin-right: 10px;
    text-decoration: none;
    color: #333;
}

.filters a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media screen and (min-width: 600px) {
    nav .menu .menu-items {
        display: flex; /* Displays menu items horizontally on larger screens */
    }

    nav .menu .menu-items li {
        margin-right: 20px; /* Spacing between menu items */
    }

    nav .menu .hamburger {
        display: none; /* Hides hamburger icon on larger screens */
    }
}

/* --- New Styles for Statistics Page --- */

/* Statistics Container */
.statistics-container {
    width: 90%;
    margin: 20px auto;
    padding: 0;
    background-color: transparent;
}

/* Filter Section */
.filter-section {
    display: flex;
    flex-direction: row; /* Changed from column to row for horizontal layout */
    align-items: center; /* Vertically centers items within the flex container */
    justify-content: space-between; /* Distributes space evenly between items */
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: nowrap; /* Prevents items from wrapping to the next line */
    width: 100%; /* Utilizes full width of the container */
}

/* Form Groups within Filter Section */
.filter-section .form-group {
    display: flex;
    flex-direction: column; /* Keeps labels above selects */
    align-items: flex-start; /* Aligns labels to the start */
    flex: 1; /* Allows form groups to grow and fill available space */
    min-width: 150px; /* Ensures a minimum width for each form group */
}

/* Labels within Filter Section */
.filter-section .form-group label {
    width: auto; /* Allows labels to adjust based on content */
    max-width: 200px;
    text-align: left;
    margin-bottom: 5px; /* Reduced to align with horizontal layout */
}

/* Select Dropdowns within Filter Section */
.filter-section .form-group select {
    width: 100%; /* Takes full width of the form group */
    max-width: 250px; /* Increased from 200px to 250px for better visibility */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* --- Specific Adjustments for Statistics Section --- */

/* Make "Filter Anwenden" button wider */
.filter-section .filter-button {
    width: 300px; /* Increased by approximately 5mm (~19px) from original 200px */
    max-width: 400px; /* Ensures consistent width */
}

/* Style "Export" button with Excel green color */
.filter-section .export-button {
    background-color: var(--excel-green); /* Changed to Excel green */
    width: auto; /* Maintains original width based on content */
    padding: 10px 20px; /* Adds horizontal padding for better appearance */
}

/* If .filter-button and .export-button classes do not exist, use alternative selectors */
/* For example, if "Filter Anwenden" is the first button and "Export" is the second button */
.filter-section button:first-child {
    width: 219px; /* Increased by approximately 5mm (~19px) from original 200px */
    max-width: 219px; /* Ensures consistent width */
}

.filter-section button:last-child {
    background-color: var(--excel-green); /* Excel green */
    padding: 10px 20px; /* Adds horizontal padding for better appearance */
}

/* Ensure buttons do not have conflicting styles */
.filter-section button {
    /* Retain existing button styles */
    box-sizing: border-box;     /* Includes padding and border in width */
    text-align: center;         /* Centers text inside buttons */
    border-radius: 5px;         /* Rounded corners for consistency */
    color: #fff;                /* Consistent text color */
    border: none;               /* No border */
    cursor: pointer;            /* Pointer cursor on hover */
    text-decoration: none;      /* Removes underline from links styled as buttons */
    /* Width and max-width are handled above */
}

/* Override background color for "Export" button */
.filter-section button:last-child {
    background-color: var(--excel-green); /* Excel green */
}

.filter-section button:last-child:hover {
    background-color: var(--hover-excel-green); /* Darker shade on hover */
}

/* Optional: Use CSS variables for hover states */
:root {
    /* Existing variables */
    --hover-plava: #a0b1ff; /* Slightly lighter than plava */
    --hover-excel-green: #1b5633; /* Slightly darker than excel green */
}

button:hover,
form button:hover,
.login-form button:hover,
.forbidden-container a:hover {
    background-color: var(--rosa); /* Default hover color */
}

/* Override hover for "Export" button */
.filter-section button:last-child:hover {
    background-color: var(--hover-excel-green); /* Darker Excel green on hover */
}

/* Summary Section */
.summary-section {
    margin-bottom: 20px;
    font-size: 1.1em;
}

/* Statistics Table */
.statistics-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.statistics-table, .statistics-table th, .statistics-table td {
    border: 1px solid #ccc;
}

.statistics-table th, .statistics-table td {
    padding: 10px;
    text-align: left;
}

.statistics-table th {
    background-color: var(--plava);
    color: #fff;
}

/* Chart Section */
.chart-section {
    width: 100%;
    text-align: center;
}

.chart-section canvas {
    max-width: 100%;
    height: auto;
}

/* --- New Styles for Centering Login Form --- */

/* Center Alignment for Login Form */
.login-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;  /* Changed from center to flex-start */
    min-height: 100vh;
    padding-top: 100px;  /* Add padding from top instead of negative margin */
}

.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-form h2 {
    text-align: center;
    margin-bottom: 20px; /* Adds space below the title */
}

.login-form label {
    width: 100%;
    max-width: 300px; /* Limits the label width for better appearance */
    text-align: left; /* Keeps the label text left-aligned */
    margin-bottom: 5px;
}

.login-form input {
    width: 100%;
    max-width: 300px; /* Ensures inputs don't stretch too wide */
    padding: 10px;
    margin-bottom: 10px; /* Reduced bottom margin for minimal spacing */
    border: 1px solid #ccc;
    border-radius: 4px;
}

.login-form button {
    width: 100%;
    max-width: 300px; /* Ensures the button aligns with the input fields */
    padding: 10px;
    background-color: var(--plava);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.login-form button:hover {
    background-color: var(--rosa);
}

/* Optional: Center the flash messages within the form */
.login-form .flash-messages {
    width: 100%;
    max-width: 300px;
}

/* --- New Styles for Confirmation Pages --- */

/* Confirmation Container */
.statistics-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

/* Responsive Adjustments */
@media screen and (min-width: 600px) {
    /* Ensure forms are centered */
    .statistics-container form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* Forbidden Container */
.forbidden-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80vh;
    text-align: center;
}

.forbidden-container h2 {
    font-size: 2em;
    color: var(--red);
    margin-bottom: 20px;
}

.forbidden-container p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.forbidden-container a {
    padding: 10px 20px;
    background-color: var(--plava);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.forbidden-container a:hover {
    background-color: var(--rosa);
}

/* --- Performance Optimizations --- */

/* Removed redundant tr:nth-child(even) to prevent overriding row-specific colors */

/* Removed duplicate button styles to minimize CSS size */
/* Ensured that all button styles are defined once and reused */

/* Ensured that course color classes are not overridden by any other styles */

/* --- End of styles.css --- */

/* Dropdown styles */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Style for the dropdown toggle */
.dropdown-toggle {
    position: relative;
    padding-right: 25px !important; /* Make room for the arrow */
}

.dropdown-toggle:after {
    content: '▼';
    font-size: 0.7em;
    margin-left: 5px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: var(--plava); /* Match the nav background */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 5px;
    margin-top: 5px; /* Add some space between toggle and menu */
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu a {
    color: white !important; /* Force white text */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background: none !important; /* Force no background */
}

.dropdown-menu a:hover {
    background-color: var(--hover-plava) !important; /* Use hover color */
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/* Add these styles to your existing styles.css */

.admin-container {
    padding: 10px 20px;
    margin-top: 0;  /* Remove this as body padding handles spacing */
}

.table-selector {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;  /* Center the buttons horizontally */
    margin: 0 auto 10px auto;  /* Reduce bottom margin to bring closer to search */
    padding: 10px 0;  /* Add some vertical padding */
}

.table-link {
    padding: 8px 16px;
    background-color: var(--plava);
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

.table-link.active {
    background-color: var(--rosa);
}

.search-bar {
    margin: 10px auto 20px auto;  /* Center and add margins */
    text-align: center;  /* Center the search input and button */
    width: 100%;
    max-width: 600px;  /* Limit maximum width */
}

.search-bar form {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0;  /* Remove default form margin */
}

.search-bar input {
    padding: 8px;
    width: 300px;
    margin: 0;  /* Remove default input margin */
}

.search-bar button {
    padding: 8px 16px;
    background-color: var(--plava);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.search-bar button:hover {
    background-color: var(--hover-plava);
}

.admin-table {
    min-width: 100%;
    width: auto;
    white-space: nowrap;
    border-collapse: collapse;
    margin: 0;
}

.admin-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px;
    border-bottom: 1px solid #ddd;
    box-shadow: none;
}

/* Resize handle styles */
.admin-table th .resize-handle {
    position: absolute;
    right: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: col-resize;
    z-index: 501;   /* Slightly above table headers */
}

.admin-table th .resize-handle:hover,
.admin-table th .resize-handle:active {
    background-color: rgba(255, 255, 255, 0.8);
}

.admin-table th.resizing {
    cursor: col-resize;
}

.admin-table td.editable {
    cursor: pointer;
}

.admin-table td.editable:hover {
    background-color: #f5f5f5;
}

.cell-editor {
    width: 100%;
    padding: 4px;
    border: none;
    background: transparent;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.pagination a {
    padding: 8px 16px;
    background-color: var(--plava);
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

.pagination span {
    font-weight: bold;
    margin: 0 10px;
}

/* Table wrapper needs correct positioning */
.table-wrapper {
    position: relative;
    margin-top: 20px;
    border: none;
}

.table-scroll {
    overflow-x: auto;
    margin-bottom: 20px;
    max-height: calc(100vh - var(--header-height) - 180px);
    overflow-y: auto;
}

.save-container {
    text-align: center;
    margin: 20px 0;
}

.save-button {
    background-color: var(--green);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.save-button:hover {
    background-color: #1a991a;
}

/* Make sure horizontal scrollbar is visible */
.table-scroll::-webkit-scrollbar {
    height: 12px;
}

.table-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-scroll::-webkit-scrollbar-thumb {
    background: var(--plava);
    border-radius: 6px;
}

.table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--hover-plava);
}

.new-row-container {
    text-align: center;
    margin: 10px 0;
}

.new-row-button {
    background-color: var(--green);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.new-row-button:hover {
    background-color: #1a991a;
}

.pending-id {
    color: #999;
    font-style: italic;
}

td.editable {
    cursor: pointer;
}

td.editable:hover {
    background-color: #f5f5f5;
}

/* Replace with proper CSS */
.flash-messages + .flash-messages {
    display: none;
}

/* Update form group styles */
.form-group {
    width: 100%;
    max-width: 400px;           /* Match input width */
    margin: 0 auto;             /* Center the form group */
    text-align: left;           /* Left align contents */
}

/* Update checkbox container styles */
.checkbox-container {
    width: 100%;
    max-width: 400px;           /* Match other elements */
    margin: 10px auto;          /* Center and add vertical spacing */
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Left align contents */
    gap: 10px;
}

.checkbox-container label {
    margin: 0;                  /* Remove margin from checkbox labels */
    flex: none;                 /* Don't allow label to grow */
}

.checkbox-container input[type="checkbox"] {
    width: 20px;               /* Fixed width for checkbox */
    height: 20px;              /* Fixed height for checkbox */
    margin: 0;                 /* Remove margin */
    flex: none;                /* Don't allow checkbox to grow */
}

/* Update edit container to use full width */
.edit-container {
    width: 100%;              /* Use full width */
    max-width: none;          /* Remove max-width restriction */
    margin: 0 auto;
    padding: 20px;
}

/* Update form grid to show more columns */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Show 3 columns by default */
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;              /* Use full width */
}

/* Add responsive breakpoints */
@media (max-width: 1200px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
    }
}

@media (max-width: 600px) {  /* Changed from 768px to 600px for mobile breakpoint */
    .form-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
        padding: 10px;  /* Add some padding */
    }

    .form-section {
        width: 100%;
        margin: 0 0 15px 0;  /* Adjust margins for mobile */
    }

    /* Adjust courses table for mobile */
    .table-wrapper {
        overflow-x: auto;  /* Enable horizontal scrolling if needed */
    }

    .courses-page table td,
    .courses-page table th {
        padding: 8px;  /* Reduce padding on mobile */
        font-size: 14px;  /* Slightly smaller font */
    }

    /* Make course rows wrap text on mobile */
    .courses-page table td {
        white-space: normal;  /* Allow text to wrap */
        min-width: 120px;  /* Minimum width for cells */
    }

    /* Adjust action buttons for mobile */
    .action-buttons {
        flex-direction: column;  /* Stack buttons vertically */
        width: 100%;  /* Full width */
        gap: 10px;  /* Reduce gap between buttons */
    }

    .action-buttons .btn {
        width: 100%;  /* Full width buttons */
        max-width: none;  /* Remove max-width restriction */
    }

    /* Adjust input groups for mobile */
    .input-group {
        margin-bottom: 10px;
    }

    .input-group input,
    .input-group select {
        width: 100%;
        max-width: none;
    }

    /* Adjust status groups for mobile */
    .status-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    /* Adjust filter tabs for mobile */
    .filter-tabs {
        flex-direction: column;
        gap: 5px;
        width: 100%;
    }

    .filter-tabs .tab {
        width: 100%;
        text-align: center;
    }

    .courses-page {
        padding: 0 10px;  /* Reduce padding on mobile */
    }
    
    .table-wrapper {
        margin: 0 -10px;  /* Negative margin to allow full width */
    }
    
    .courses-page table {
        display: block;  /* Change table display for mobile */
        width: 100%;
    }
    
    .courses-page table thead {
        display: none;  /* Hide table headers on mobile */
    }
    
    .courses-page table tbody {
        display: block;
        width: 100%;
    }
    
    .courses-page table tr {
        display: block;
        margin-bottom: 15px;
        background: white;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .courses-page table td {
        display: block;
        padding: 8px 5px;
        text-align: left;
        border: none;
        
        /* Add labels before content */
        position: relative;
        padding-left: 120px;  /* Make room for labels */
        min-height: 35px;
    }
    
    /* Add labels for each column */
    .courses-page table td:before {
        content: attr(data-label);
        position: absolute;
        left: 5px;
        width: 110px;
        font-weight: bold;
        text-align: left;
    }
    
    /* Specific styling for the actions column */
    .courses-page table td:last-child {
        border-bottom: none;
        text-align: center;
        padding-left: 5px;  /* Reset padding for actions */
    }
    
    .courses-page .btn-action {
        width: 100%;
        display: block;
        text-align: center;
        margin-top: 5px;
    }
    
    /* Filter tabs adjustments */
    .filter-tabs {
        display: flex;
        flex-direction: row;  /* Keep tabs horizontal */
        gap: 10px;
        padding: 10px 0;
        overflow-x: auto;  /* Allow horizontal scroll if needed */
        margin: 0 -10px;
        padding: 10px;
    }
    
    .filter-tabs .tab {
        flex: 1;  /* Equal width tabs */
        white-space: nowrap;  /* Prevent text wrapping */
        min-width: auto;  /* Allow tabs to shrink */
    }
}

/* Update form sections to fit grid better */
.form-section {
    width: 100%;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Make input groups use full width */
.input-group input,
.input-group select {
    width: 100%;
    max-width: none;         /* Remove max-width restriction */
}

/* Update/Add these button styles */
.action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    width: 200px;  /* Fixed width */
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--plava);
    color: white;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Remove different colors for primary/secondary since we want them identical */
.btn.primary, .btn.secondary {
    background-color: var(--plava);
    color: white;
}

/* Consolidate and fix table styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: #fff;
}

/* Base courses page styles */
.courses-page {
    padding: 0 20px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Filter tabs base styles */
.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.tab {
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    color: white;
    background: var(--plava);
    transition: all 0.2s;
    opacity: 0.7;
}

/* Table wrapper base styles */
.table-wrapper {
    position: relative;
    margin-top: 5px;
    width: 100%;
}

/* Button styles consolidation */
.btn-action {
    padding: 6px 16px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.9em;
    display: inline-block;
}

/* Consolidated mobile styles */
@media screen and (max-width: 600px) {
    /* Form grid mobile styles */
    .form-grid {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .form-section {
        width: 100%;
        margin: 0 0 15px 0;
    }

    /* Courses page mobile styles */
    .courses-page {
        padding: 0 10px;
    }
    
    .table-wrapper {
        margin: 0;
        overflow-x: visible;
    }
    
    /* Mobile table transformation */
    .courses-page table {
        display: block;
        width: 100%;
        border: none;
    }
    
    .courses-page table thead {
        display: none;
    }
    
    .courses-page table tbody {
        display: block;
        width: 100%;
    }
    
    .courses-page table tr {
        display: block;
        margin-bottom: 15px;
        background: white;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .courses-page table td {
        display: block;
        padding: 8px 5px;
        text-align: left;
        border: none;
        position: relative;
        padding-left: 120px;
        min-height: 35px;
        white-space: normal;
    }
    
    .courses-page table td:before {
        content: attr(data-label);
        position: absolute;
        left: 5px;
        width: 110px;
        font-weight: bold;
        text-align: left;
    }
    
    .courses-page table td.col-actions {
        border-bottom: none;
        text-align: center;
        padding-left: 5px;
    }
    
    .courses-page .btn-action {
        width: 100%;
        display: block;
        text-align: center;
        margin-top: 5px;
        box-sizing: border-box;
    }
    
    /* Filter tabs mobile styles */
    .filter-tabs {
        display: flex;
        flex-direction: row;
        gap: 10px;
        padding: 10px;
        overflow-x: auto;
        margin: 0;
        -webkit-overflow-scrolling: touch;
    }
    
    .filter-tabs .tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Preserve row colors on mobile */
    .courses-page table tr.blue,
    .courses-page table tr.green,
    .courses-page table tr.yellow,
    .courses-page table tr.red {
        color: white;
    }
}

/* Base table styles */
.courses-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Column widths for desktop */
.col-kurs { width: 30%; }
.col-datum { width: 20%; }
.col-zeit { width: 15%; }
.col-teilnehmer { width: 15%; }
.col-actions { width: 20%; }

/* Row colors */
tr.blue { background-color: #4285f4; color: white; }
tr.green { background-color: #34a853; color: white; }
tr.yellow { background-color: #fbbc05; }
tr.red { background-color: #ea4335; color: white; }

/* Mobile styles */
@media screen and (max-width: 600px) {
    .courses-page {
        padding: 0 10px;
    }

    .table-wrapper {
        margin: 0 -10px;
    }

    /* Hide table headers on mobile */
    .courses-page table thead {
        display: none;
    }

    /* Make each row a card */
    .courses-page table tr {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
        padding: 8px;
        border-radius: 4px;
    }

    /* Style each cell */
    .courses-page table td {
        padding: 4px 8px;
        font-size: 14px;
        border: none;
    }

    /* Specific column styles for mobile */
    .courses-page .col-kurs {
        width: auto;
        font-weight: bold;
        margin-right: 8px;
    }

    .courses-page .col-datum,
    .courses-page .col-zeit {
        width: auto;
        font-size: 13px;
    }

    .courses-page .col-teilnehmer {
        width: auto;
        margin-left: 8px;
        margin-right: 8px;
    }

    .courses-page .col-actions {
        width: auto;
        margin-left: auto;
    }

    /* Style the action button */
    .btn-action {
        padding: 2px 8px;
        font-size: 13px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.9);
    }

    /* Add separators between cells */
    .courses-page .col-datum::after,
    .courses-page .col-zeit::after {
        content: "|";
        margin: 0 4px;
        opacity: 0.5;
    }
}

/* Admin Tools Styles */
.admin-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 0 10px;
}

.admin-tool-link {
    text-decoration: none;
}

.admin-tool-button {
    padding: 10px 15px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.admin-tool-button:hover {
    background-color: #2980b9;
}

/* User Management Styles */
.user-management-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px;
    justify-content: center;
}

.user-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: white;
}

.user-table th, 
.user-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.user-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.user-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.user-table tr:hover {
    background-color: #f0f0f0;
}

.section {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 45%;
    min-width: 300px;
}