:root {
    --primary-color:            #000000;                            /* Black: base UI text */
    --secondary-color:          #0074d9;                            /* Bright blue: links, minor buttons */
    --accent-color:             #00274d;                            /* Deep navy: headers, panels, emphasis */
    --highlight-color:          #f26522;                            /* Orange: callouts, highlights */

    --background-color:         #626262;                            /* Medium gray background */
    --surface-color:            #f2f2f2;                            /* Light gray cards/panels */
    --modal-background-color:   rgba(98, 98, 98, 0.5);
    --border-color:             #333333;
    --shadow-color:             rgba(0, 0, 0, 0.2);

    --text-dark:                #333333;                            /* Primary text */
    --text-light:               #f2f2f2;                            /* Text on dark surfaces */
    --text-muted:               #626262;                            /* Secondary/disabled text */

    --table-header:             var(--highlight-color);
    --table-hover:              var(--accent-color);

    --button-radius:            6px;
    --card-radius:              8px;
    --transition-speed:         0.2s;

    --space-xs:                 4px;
    --space-sm:                 8px;
    --space-md:                 16px;
    --space-lg:                 24px;
    --space-xl:                 32px;

    --font-sans:                "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-size-base:           16px;
    --font-weight-normal:       400;
    --font-weight-bold:         600;

    --label-color: var(--highlight-color);
    --light-text-color: var(--text-light);
    --dark-text-color: var(--text-dark);
    --table-highlight: var(--highlight-color);
}

/* General Styles */
body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	background: var(--primary-color);
	color: var(--light-text-color);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* HEADER */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--accent-color);
	color: var(--light-text-color);
	padding: 15px 20px;
	border-bottom: 3px solid var(--label-color);
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
	width: 100%;
	height: 60px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

.logo {
	display: flex;
	align-items: center;
}

.logo img {
	height: 50px;
	margin-right: 15px;
}

.title {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--label-color);
}

/* User Menu */
.user-menu {
	position: absolute;
	right: 5em;
}

.user-menu a {
	color: var(--label-color);
	text-decoration: none;
	font-weight: bold;
}

.dropbtn {
	background: none;
	color: var(--label-color);
	border: none;
	cursor: pointer;
	font-size: 1rem;
}

.dropdown-content {
	display: none;
	position: absolute;
	right: 0;
	background: var(--primary-color);
	min-width: 120px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	padding: 10px;
}

.dropdown-content a {
	display: block;
	padding: 10px;
	color: var(--light-text-color);
}

.dropdown-content a:hover {
	background: var(--accent-color);
}

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

/* MAIN CONTAINER */
.container {
	display: flex;
	min-height: 100vh;
	flex-grow: 1;
}

.sidebar {
	width: 12em;
	margin-top: 60px;
	flex-shrink: 0;
	background: var(--accent-color);
	color: var(--text-light);
	padding: 20px;
	border-right: 3px solid var(--label-color);
}

.sidebar ul {
	list-style: none;
	padding: 0;
}

.sidebar ul li {
	margin-bottom: 10px;
}

.sidebar ul li a {
	color: var(--text-light);
	text-decoration: none;
	display: block;
	padding: 12px 20px;
	font-size: 1.1rem;
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
	font-weight: bold;
	background: var(--highlight-color);
	padding-left: 15px;
	transition: 0.3s;
}

/* Ensure submenu items are properly indented */
.has-submenu>ul.submenu {
	padding-left: 1.5em;
	/* Indentation for submenu */
	display: block;
	/* Ensure it's always visible */
}

.submenu {
	list-style: none;
	padding-left: 1em;
	display: block;
}

.submenu li a {
	font-size: 0.9rem;
	padding-left: 1em;
	color: var(--light-text-color);
}

.submenu li a:hover {
	background: var(--accent-color);
}

.content {
    margin-top: 60px;
    flex-grow: 1;
    padding: 15px;
    width: 100%;
}

.pagination-controls {
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 5px;
}

@media (min-width: 1024px) {
    .menu-toggle {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .sidebar {
        display: none;
		visibility: hidden;
        position: fixed;
        top: 60px;
        left: 0;
        width: 80%;
        height: 100%;
        background-color: var(--primary-color);
        z-index: 1000;
    }

    .sidebar.open {
        display: block;
		visibility: visible;
    }

    .sidebar ul li a {
        font-size: 1.2rem;
        padding: 15px 20px;
    }

    .menu-toggle {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 48px;
        height: 48px;
        background-color: var(--accent-color);
		color: var(--light-text-color);
		font-size: 1.1rem;
        padding: 14px 24px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .menu-toggle:hover {
        background-color: var(--secondary-color);
    }

    .container {
        margin-left: 0;
    }

    .content {
        padding: 10px;
    }

    .pagination-controls {
        flex-direction: column;  /* Stack pagination controls vertically */
    }

   .header {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    .logo img {
        height: 35px;  /* Adjust logo size */
    }

    .title {
        font-size: 1.2rem;  /* Adjust title size */
    }

    .user-menu {
        position: relative;
        margin-top: 10px;
    }
	.user-menu {
		margin-top: 10px;
	}
}