/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Main Container */
.main-container {
    display: flex;
    min-height: 100vh;
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    background-color: #2c3e50;
    color: #ecf0f1;
    width: 250px;
    flex-shrink: 0;
    transition: transform 0.3s ease-in-out;
}

.sidebar .logo {
    padding: 20px;
    font-size: 1.5rem;
    text-align: center;
    background: #34495e;
}

.sidebar .nav-menu {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.sidebar .nav-menu a {
    color: #ecf0f1;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    margin: 5px 0;
    transition: background 0.3s;
}

.sidebar .nav-menu a:hover {
    background: #1abc9c;
}

/* Top Bar */
.top-bar {
    background: #3498db;
    color: white;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-bar h1 {
    font-size: 1.5rem;
}
.menu-toggle {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Content Area */
.content {
    flex: 1;
    background: #ecf0f1;
    transition: margin-left 0.3s ease-in-out;
}

.main-content {
    padding: 20px;
}

main section {
    margin: 20px 0;
}

/* Responsive Sidebar */
.sidebar.hidden {
    transform: translateX(-100%);
}

.content.shifted {
    margin-left: 0;
}

@media (min-width: 768px) {
    .content.shifted {
        margin-left: -250px;
    }
}