/*@import url("https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;1,400;1,500&display=swap");*/

@font-face {
    font-family: 'Visual Geez Unicode';
    src: url('../../fonts/VGUnicode.woff2') format('woff2'),
         url('../../fonts/VGUnicode.woff') format('woff'),
         url('../../fonts/VGUnicode.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;	
}

@font-face {
	font-family: 'Besley';
	src: url('../../fonts/besley-v22-latin-italic.woff2') format('woff2'),
		 url('../../fonts/besley-v22-latin-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Besley';
	src: url('../../fonts/besley-v22-latin-regular.woff2') format('woff2'),		 
         url('../../fonts/besley-v22-latin-regular.ttf') format('truetype');         
    font-weight: normal;
    font-style: normal;
}
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;	
	/*font-family: "Besley", 'Besley', 'Visual Geez Unicode', 'Abyssinica SIL', sans-serif, serif;*/
	font-family: 'Besley', 'Visual Geez Unicode', 'Abyssinica SIL', sans-serif, serif;
}

:root 
{
	--blue: #287bff;
	--white: #fff;
	--grey: #f5f5f5;
	--black1: #222;
	--black2: #999;
	--box_shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.9);
	--dark_blue: #124674;
}

body 
{
	min-height: 100vh;
	overflow-x: hidden;
}

.containner
{
	position: relative;
	width: 100%;
	height: 100%;	
	display: flex;
}

.navigation {
	position: fixed;
	width: 300px;
	height: 100%;
	background: #124674;
	/*background: var(--blue);*/
	/*border-left: 10px solid var(--blue);*/
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    transition: 0.5s all ease;
	overflow-y: auto;
    overflow-x: hidden;
	/*overflow: hidden;
	z-index: 1000;*/
}

.profile {
    text-align: center;
    padding-top: 5px;	
	padding-bottom: 5px;	
	margin-bottom: 20px;
	pointer-events: none;
	width: 100%;
}

.bg-img {
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    background-size: cover;
}

.profile-img {
    height: 80px;
    width: 80px;
    /*display: inline-block;*/
	display: block;
    margin: 0 auto .5rem auto;
    border: 3px solid #899DC1;
	
	border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.profile h4 {
    color: #fff;
    font-weight: 600;
	display: block;
	
	margin: 5px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 0 10px;
}

.profile small {
    color: #899DC1;
    font-weight: 600;
	
	display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 0 10px;
}

/* When sidebar is minimized (desktop mode) */
.navigation.minimized {
    width: 100px;
}

/* Hide text when sidebar is minimized */
.navigation.minimized .profile h4,
.navigation.minimized .profile small,
.navigation.minimized .title {
    display: none;
}

.navigation.minimized .profile-img {
    height: 60px;
    width: 60px;
    margin: 0 auto;
}

/* Center icons when minimized */
.navigation.minimized ul li a .icon {
    text-align: center;
}

.navigation.minimized ul li a .icon ion-icon {
    margin-left: 0;
}

.navigation.active {
	width: 100px;
}

.navigation.active .profile h4,
.navigation.active .profile small,
.navigation.active .title {
    display: none;
}

.navigation.active .profile-img {
    height: 60px;
    width: 60px;
    margin: 0 auto;
}

.navigation.active ul li a .icon ion-icon {
	margin-left: 40px;	
}

.navigation ul {
	position: absolute;
	top: 5;
	left: 0;
	width: 100%;
}

.navigation ul li {
	position: relative;
	width: 100%;
	list-style: none;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

.navigation ul li:hover,
.navigation ul li.hovered
{
	background: var(--grey);
}

/*.navigation ul li:nth-child(1) {
	margin-bottom: 40px;
	pointer-events: none;
}*/

.navigation ul li a {
	position: relative;
	display: block;
	width: 100%;
	display: flex;
	text-decoration: none;
	color: var(--grey);	
}

.navigation ul li:hover a,
.navigation ul li.hovered a 
{
	color: var(--blue);
	/*color: #124674;*/
}

.navigation ul li a .icon {
	position: relative;
	display: block;
	min-width: 60px;
	height: 60px;
	line-height: 70px;
	text-align: center;		
}

.navigation ul li a .icon ion-icon {
	font-size: 1.50em;	
}

.navigation ul li a .title {
	position: relative;
	display: block;
	padding: 0 10px;
	height: 60px;
	line-height: 60px;
	text-align: start;
	white-space: nowrap;	
}

/*.navigation.active ul li a .title {
	display: none;		
} */


/* curve outside */

.navigation ul li:hover a::before, 
.navigation ul li.hovered a::before 
{
	content: '';
	position: absolute;
	right: 0;
	top: -50px;
	width: 50px;
	height: 50px;
	background: transparent;
	border-radius: 50%;
	box-shadow: 35px 35px 0 10px var(--grey);
	pointer-events: none;
}

.navigation ul li:hover a::after,
.navigation ul li.hovered a::after 
{
	content: '';
	position: absolute;
	right: 0;
	bottom: -50px;
	width: 50px;
	height: 50px;
	background: transparent;
	border-radius: 50%;
	box-shadow: 35px -35px 0 10px var(--grey);
	pointer-events: none;
}

/* main */
 
.main {
	position: absolute;
	width: calc(100% - 300px);
	/*height: 100%;*/
	left: 300px;	
	min-height: 100vh;
	/*background: var(--white);--grey*/
	background: var(--grey);
	transition: 0.5s;
	
}

.main.active {
	width: calc(100% - 100px);
	left: 100px;	
}

.topbar 
{
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	background-color: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    transition: 0.5s all ease;
}

.toggle 
{
	position: relative;
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.5em;
	cursor: pointer;
	color: #287bff;
}

.logo h2 {
    position: relative;
	color: #124674;
	cursor: pointer;
	justify-self: left;
}

.search 
{
	position: relative;
	width: 400px;
	margin: 0 10px;
}

.search label 
{
	position: relative;
	width: 100%;
}

.search label input 
{
	width: 100%;
	height: 40px;
	border-radius: 40px;
	padding: 5px 20px;
	padding-left: 35px;
	font-size: 18px;
	outline: none;
	border: 1px solid var(--black2);
}

.search label ion-icon 
{
	position: absolute;
	top: 0;
	left: 10px;
	font-size: 1.2em;
}
.notifications {
    position: relative;
	color: #287bff;
	font-size: 1.5em;
	align-items: center;
	padding-top: 5px;
	justify-self: right;
}
.topbar ul li ul li a.logout {
  color: red;
}
.topbar ul li a {
  display: block;
  padding: 21px;
  font-size: 1.1em;
  text-decoration: none;
}
/* User Menu Styles */
.user-menu {
    position: relative;
    margin-left: 15px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 30px;
    transition: background-color 0.3s ease;
}

.user-info:hover {
    background-color: rgba(40, 123, 255, 0.1);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e0e0e0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar ion-icon {
    font-size: 32px;
    color: #287bff;
}

.username {
    font-weight: 500;
    color: #333;
    font-size: 0.95rem;
}

.dropdown-icon {
    font-size: 1.2rem;
    color: #666;
    transition: transform 0.3s ease;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-size: 0.9rem;
}

.dropdown-item:hover {
    background-color: #f5f5f5;
    text-decoration: none;
}

.dropdown-item:first-child {
    border-radius: 12px 12px 0 0;
}

.dropdown-item:last-child {
    border-radius: 0 0 12px 12px;
}

.dropdown-item ion-icon {
    font-size: 1.2rem;
    color: #287bff;
}

.dropdown-divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 5px 0;
}

.logout-item {
    color: #dc3545;
}

.logout-item ion-icon {
    color: #dc3545;
}

/* Auth Buttons */
.auth-buttons {
    display: flex;
    gap: 12px;
    margin-left: 15px;
}

.auth-btn {
    padding: 8px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.login-btn {
    background: transparent;
    color: #287bff;
    border: 1px solid #287bff;
}

.login-btn:hover {
    background: #124674;
    color: white;
    text-decoration: none;
}

.signup-btn {
    background: #124674;
    color: white;
    border: 1px solid #287bff;
}

.signup-btn:hover {
    background: #1a5fcc;
    color: white;
    text-decoration: none;
}

/*.user 
{
	position: relative;
	color: #287bff;
	font-size: 2.5em;
	align-items: center;
	justify-self: right;
}*/

.user 
{
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
}
.user img 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cards {
    width: 100%;
    padding: 35px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}

.cards .card {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 10px;
    /*box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);*/
	box-shadow: var(--box_shadow);
}

.number {
    font-size: 35px;
    font-weight: 500;
    color: #287bff;
}

.card-name {
    color: #888;
    font-weight: 600;
}

.icon-box ion-icon {
    font-size: 45px;
    color: #287bff;
}

/* charts */

.charts {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 20px;
    width: 100%;
    padding: 20px;
    padding-top: 0;
}

.chart {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
    width: 100%;
}

.chart h2 {
    margin-bottom: 5px;
    font-size: 20px;
    color: #666;
    text-align: center
}

.content-wrapper {
	flex: 1;
	padding: 1px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

/* PDF Viewer Container 
.pdf-viewer-container {
	flex: 1;
	background-color: #e0e0e0;
	border-radius: 0px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	min-height: 0;
	position: relative;
}*/

/* PDF.js toolbar customization */
#pdfViewer {
	flex: 1;
	background-color: #e0e0e0;
	height: 100%;
	width: 100%;
	border: none;
}

/* Loading indicator */
.loading-indicator {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 1000;
	background: white;
	padding: 20px 30px;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
	display: none;
}

.loading-indicator i {
	font-size: 40px;
	color: #4da5d4;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Error message */
.error-message {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	background: white;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
	max-width: 400px;
	z-index: 2000;
}

.error-message i {
	font-size: 48px;
	color: #dc3545;
	margin-bottom: 15px;
}

.error-message h3 {
	margin-bottom: 10px;
	color: #333;
}

.error-message p {
	color: #666;
	margin-bottom: 20px;
	word-break: break-all;
}

.error-message .btn-group {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.error-message .btn {
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 600;
}

.btn-primary {
	background-color: #4da5d4;
	color: white;
}

.btn-success {
	background-color: #28a745;
	color: white;
}
		
.admin-content {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;	
    padding-left: 20px;
}

.page-titlee {
	text-align: center;
}

.content {
  width: 100%;
  margin: 0px auto 0px;
}

.content .title-button
{
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;	
}

.content .page-title {
	text-align: center;	
	justify-self: left;
}

.content .button-title-button {
	padding-top: 5px;	
	justify-self: right;
}

.upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;    
}

.upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
	text-transform: uppercase;
    border-radius: 10px;
    border: none;    
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.1rem;
	border-radius: 20px;
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
}

thead {
	/*background-color: #287bff;*/
	background-color: #124674;
	color: #fff;
}

th {
	padding: 15px;
	text-align: left;
	border-bottom: 2px solid #33ddff;	
	border-top: 2px solid #33ddff;
}

td {
	padding: 15px;
	text-align: left;
	border-bottom: 1px solid #33ddff;	
}

.edit {
	color: green;
}

.delete {
	color: red;
}

.publish {
	color: blue;
}

.edit:hover,
.delete:hover,
.publish:hover {
	text-decoration: underline;
}

form div {
	margin-bottom: 15px;
}


/* Directorate Filter Navigation Menu Styles */
.filter-nav-wrapper {
	background: linear-gradient(135deg, #124674 0%, #1a5a8a 100%);
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;				
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	position: relative;
	display: flex;
	align-items: center;
}

/* Navigation Arrows */
.nav-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 50px;
	background: rgba(255,255,255,0.1);
	cursor: pointer;
	transition: all 0.3s ease;
	color: white;
	flex-shrink: 0;
	z-index: 10;
}

.nav-arrow:hover {
	background: rgba(255,255,255,0.25);
}

.nav-arrow.disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.nav-arrow.disabled:hover {
	background: rgba(255,255,255,0.1);
}

.nav-arrow-left {
	border-radius: 12px 0 0 12px;
}

.nav-arrow-right {
	border-radius: 0 12px 12px 0;
}

.nav-arrow ion-icon {
	font-size: 20px;
}

/* Scrollable Navigation Container */
.filter-nav-container {
	flex: 1;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	position: relative;
}

.filter-nav-container::-webkit-scrollbar {
	height: 3px;
}

.filter-nav-container::-webkit-scrollbar-track {
	background: rgba(255,255,255,0.1);
	border-radius: 3px;
}

.filter-nav-container::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.3);
	border-radius: 3px;
}

.filter-nav-container::-webkit-scrollbar-thumb:hover {
	background: rgba(255,255,255,0.5);
}

.filter-nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
	min-width: max-content;
}

.filter-nav-item {
	position: relative;
	flex-shrink: 0;
}

.filter-nav-link {
	display: flex;
	align-items: center;
	/*gap: 8px;*/
	padding: 14px 20px;
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.3s ease;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}

.filter-nav-link:hover {
	color: white;
	background: rgba(255,255,255,0.1);
	border-bottom-color: rgba(255,255,255,0.5);
}

.filter-nav-link.active {
	color: white;
	background: rgba(255,255,255,0.15);
}

.filter-nav-link.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #4da5d4;
}

.filter-nav-icon {
	font-size: 18px;
	display: flex;
	align-items: center;
}

.filter-nav-text {
	font-size: 13px;
	font-weight: 500;
}

.filter-nav-text small {
	font-size: 10px;
	opacity: 0.8;
	display: block;
	font-weight: normal;
}

/* Dropdown for mobile (when arrows are not enough) */
.filter-nav-dropdown {
	display: none;
	position: relative;
	flex-shrink: 0;
}

.filter-nav-dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	background: rgba(255,255,255,0.1);
	color: white;
	cursor: pointer;
	font-weight: 500;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.filter-nav-dropdown-toggle:hover {
	background: rgba(255,255,255,0.2);
}

.filter-nav-dropdown-menu {
	position: absolute;
	top: 100%;
	right: 0;
	background: white;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	z-index: 1000;
	max-height: 400px;
	overflow-y: auto;
	display: none;
	margin-top: 5px;
	min-width: 200px;
}

.filter-nav-dropdown-menu.show {
	display: block;
	animation: dropdownFade 0.3s ease;
}

@keyframes dropdownFade {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.filter-nav-dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	color: #333;
	text-decoration: none;
	transition: background 0.2s ease;
	border-bottom: 1px solid #e0e0e0;
}

.filter-nav-dropdown-item:last-child {
	border-bottom: none;
}

.filter-nav-dropdown-item:hover {
	background: #f5f5f5;
}

.filter-nav-dropdown-item.active {
	background: #e3f2fd;
	color: #124674;
	font-weight: 600;
}

.filter-nav-dropdown-item.active ion-icon {
	color: #124674;
}

.filter-nav-dropdown-item ion-icon {
	font-size: 18px;
	color: #4da5d4;
}

.filter-nav-dropdown-menu::-webkit-scrollbar {
	width: 6px;
}

.filter-nav-dropdown-menu::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}

.filter-nav-dropdown-menu::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 3px;
}

/* Count badge */
.filter-count {
	display: inline-block;
	background: rgba(255,255,255,0.25);
	border-radius: 20px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	margin-left: 6px;
}

.filter-nav-link.active .filter-count {
	background: #4da5d4;
}

/* Scroll indicators */
.scroll-indicator {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 30px;
	pointer-events: none;
	z-index: 5;
}

.scroll-indicator-left {
	left: 40px;
	background: linear-gradient(to right, rgba(18,70,116,0.9), transparent);
	display: none;
}

.scroll-indicator-right {
	right: 40px;
	background: linear-gradient(to left, rgba(18,70,116,0.9), transparent);
	display: none;
}

/* DataTable layout customization */
.dt-layout-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.dt-layout-cell {
	display: flex;
	align-items: center;
}

.dt-layout-start {
	justify-content: flex-start;
}

.dt-layout-end {
	justify-content: flex-end;
}

/* Animation for active indicator */
.filter-nav-link {
	position: relative;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Large Tablets and Small Desktops (1024px) */
@media (max-width: 1024px) {
    .cards {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 15px;
        padding: 25px 15px;
    }
    
    .charts {
        grid-template-columns: 1fr;
    }
    
    .number {
        font-size: 28px;
    }
    
    .icon-box ion-icon {
        font-size: 40px;
    }
    
    .card-name {
        font-size: 13px;
    }
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
    .navigation {
        left: -300px;
        width: 280px;
    }
    
    .navigation.active {
        left: 0;
		width: 280px;        
    }
    
	/* Ensure profile section is properly aligned */
    .navigation.active .profile {
        text-align: center;
        padding: 20px 0;
    }
    
    .navigation.active .profile-img {
        height: 80px;
        width: 80px;
        margin: 0 auto 0.5rem auto;
        display: block;
    }
    
    .navigation.active .profile h4,
    .navigation.active .profile small,
    .navigation.active .title {
        display: block !important;
    }
    
    .navigation.active .profile h4 {
        font-size: 16px;
    }
    
    .navigation.active .profile small {
        font-size: 12px;
    }
    
    .navigation.active ul li a .icon {
        min-width: 60px;
    }
    
    .navigation.active ul li a .icon ion-icon {
        margin-left: 0;
    }
    
    /* Override any minimized styles on mobile */
    .navigation.active.minimized {
        width: 280px;
    }
    
    .navigation.active.minimized .profile h4,
    .navigation.active.minimized .profile small,
    .navigation.active.minimized .title {
        display: block !important;
    }
    
    .navigation.active.minimized .profile-img {
        height: 80px;
        width: 80px;
    }
	
    .main {
        width: 100%;
        left: 0;
    }
    
    .main.active {
        left: 280px;
        width: calc(100% - 280px);
    }
    
    .toggle {
        z-index: 1001;
    }
    
    .search {
        width: 250px;
    }
    
    .search label input {
        font-size: 14px;
    }
    
    .logo h2 {
        font-size: 1.2rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .username {
        display: none;
    }
    
    .user-menu {
        margin-left: 5px;
    }
    
    .auth-buttons {
        gap: 8px;
    }
    
    .auth-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .dropdown-menu {
        min-width: 180px;
    }
}

/* Tablets (768px) */
@media (max-width: 768px) {
    .topbar {
        padding: 0 15px;
        height: 65px;
    }
    
    .toggle {
        font-size: 2rem;
        width: 45px;
        height: 45px;
    }
    
    .search {
        width: 200px;
    }
    
    .search label input {
        font-size: 13px;
        padding-left: 30px;
    }
    
    .search label ion-icon {
        font-size: 1em;
    }
    
    .cards {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        padding: 20px 15px;
        gap: 15px;
    }
    
    .cards .card {
        padding: 15px;
    }
    
    .number {
        font-size: 24px;
    }
    
    .icon-box ion-icon {
        font-size: 35px;
    }
    
    .card-name {
        font-size: 12px;
    }
    
    .charts {
        padding: 15px;
    }
    
    .chart {
        padding: 15px;
    }
    
    .chart h2 {
        font-size: 16px;
    }
    
    table {
        font-size: 0.9rem;
    }
    
    th, td {
        padding: 10px 12px;
    }
    
    .admin-content {
        padding: 15px;
    }
    
    .page-title {
        font-size: 1.3rem;
    }
    
    /* Hide username on smaller tablets */
    .username {
        display: none;
    }
    
    .user-menu {
        margin-left: 5px;
    }
    
    .auth-buttons {
        gap: 8px;
    }
    
    .auth-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* Mobile Landscape (480px - 767px) */
@media (max-width: 767px) {
    .topbar {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 15px;
        gap: 10px;
    }
    
    .toggle {
        order: 1;
    }
    
    .logo {
        order: 2;
        flex: 1;
    }
    
    .logo h2 {
        font-size: 1rem;
    }
    
    .search {
        order: 3;
        width: 100%;
        margin: 5px 0;
    }
    
    .notifications {
        order: 4;
    }
    
    .user-menu {
        order: 5;
    }
    
    .auth-buttons {
        order: 5;
    }
    
    .cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 15px;
    }
    
    .charts {
        padding: 10px;
        gap: 15px;
    }
    
    .controls-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0 15px;
    }
    
    .left-controls,
    .right-controls {
        justify-content: center;
        width: 100%;
        margin-left: 0;
    }
    
    .table-controls {
        justify-content: center;
    }
    
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    th, td {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    
    .dropdown-menu {
        min-width: 180px;
        right: -10px;
    }
}

/* Landscape mode fix for small devices */
@media (max-width: 767px) and (orientation: landscape) {
    .navigation.active {
        width: 260px;
    }
    
    .navigation.active .profile {
        padding: 10px 0;
    }
    
    .navigation.active .profile-img {
        height: 50px;
        width: 50px;
    }
    
    .navigation.active .profile h4 {
        font-size: 12px;
    }
    
    .navigation.active .profile small {
        font-size: 10px;
    }
    
    .navigation.active ul li a {
        padding: 8px 12px;
    }
}


@media (max-width: 480px) {
    .auth-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
    
    .user-avatar {
        width: 35px;
        height: 35px;
    }
}

/* Mobile Portrait (480px and below) */
@media (max-width: 480px) {
    .navigation {
        width: 100%;
        left: -100%;
        z-index: 1000;
    }
    
    .navigation.active {
        width: 100%;
        left: 0;
        right: 0;
		
		overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
	
	/* Fix profile section alignment on small screens */
    .navigation.active .profile {
        text-align: center;
        padding: 15px 0;
        margin: 0 auto;
        width: 100%;
		
		position: relative;
        left: 0;
        right: 0;
    }
    
    .navigation.active .profile-img {
        height: 70px;
        width: 70px;
        margin: 0 auto 0.5rem auto;
        display: block;
        float: none;
        clear: both;
    }
    
    .navigation.active .profile h4 {
        font-size: 14px;
        display: block !important;
        text-align: center;
        width: 100%;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 15px;
        margin: 5px 0;
    }
    
    .navigation.active .profile small {
        font-size: 11px;
        display: block !important;
        text-align: center;
        width: 100%;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 15px;
    }
	
	/* Ensure text doesn't overflow */
    .navigation.active .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
	
	.main.active {
        left: 100%;
        width: 100%;
        position: relative;
        z-index: 1;
    }
	
	/* Ensure the toggle button is visible when sidebar is open */
    .main.active .toggle {
        position: fixed;
        right: 15px;
        left: auto;
        color: var(--white);
        z-index: 1002;
        background: var(--blue);
        border-radius: 50%;
        padding: 8px;
        top: 10px;
    }
    
    .cards {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }
    
    .cards .card {
        padding: 12px;
    }
    
    .number {
        font-size: 28px;
    }
    
    .icon-box ion-icon {
        font-size: 38px;
    }
    
    .card-name {
        font-size: 13px;
    }
    
    .charts {
        padding: 10px;
        gap: 12px;
    }
    
    .chart {
        padding: 12px;
    }
    
    .chart h2 {
        font-size: 14px;
    }
    
    .admin-content {
        padding: 12px;
    }
    
    .page-title {
        font-size: 1.2rem;
    }
    
    .btn, .upload-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .auth-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
    
    .user-avatar {
        width: 35px;
        height: 35px;
    }
    
    .user-avatar ion-icon {
        font-size: 28px;
    }
    
    .dropdown-menu {
        min-width: 160px;
        right: -5px;
    }
    
    .dropdown-item {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    
    /*.profile-img {
        height: 60px;
        width: 60px;
    }
    
    .profile h4 {
        font-size: 14px;
    }
    
    .profile small {
        font-size: 12px;
    }*/
    
	 /* Fix list items alignment */
    .navigation.active ul {
        /*padding: 0;*/
        margin: 0;
        width: 100%;
		padding-bottom: 20px;
    }
    
    .navigation.active ul li {
        width: 100%;
        display: block;
    }
    
    .navigation.active ul li a {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 12px 15px;
		
		min-height: 48px;
    }
    
    .navigation.active ul li a .icon {
        min-width: 50px;
        text-align: center;
    }
    
    .navigation.active ul li a .icon ion-icon {
        font-size: 1.3em;
        margin: 0;
    }
    
    .navigation.active ul li a .title {
        display: inline-block !important;
        font-size: 14px;
        white-space: normal;
        word-wrap: break-word;
        padding: 0 10px;
        flex: 1;
    }
	
    .navigation ul li a .title {
        font-size: 14px;
    }
    
    .navigation ul li a .icon ion-icon {
        font-size: 1.3em;
    }
}

/* Very Small Devices (380px and below) */
@media (max-width: 380px) {
    .navigation.active .profile-img {
        height: 60px;
        width: 60px;
    }
    
    .navigation.active .profile h4 {
        font-size: 13px;
    }
    
    .navigation.active .profile small {
        font-size: 10px;
    }
    
    .navigation.active ul li a {
        padding: 10px 12px;
    }
    
    .navigation.active ul li a .icon {
        min-width: 45px;
    }
    
    .navigation.active ul li a .title {
        font-size: 13px;
    }
}

/* Very Small Devices (320px) */
@media (max-width: 320px) {
    .number {
        font-size: 24px;
    }
    
    .icon-box ion-icon {
        font-size: 32px;
    }
    
    .card-name {
        font-size: 11px;
    }
    
    .btn, .upload-btn {
        padding: 5px 10px;
        font-size: 0.7rem;
    }
    
    th, td {
        padding: 6px 8px;
        font-size: 0.75rem;
    }
}

/* Responsive styles for mobile */
@media (max-width: 991px) {
    /* Sidebar hidden by default on mobile */
    .navigation {
        left: -300px;
        width: 280px;
    }
    
    /* When active, show sidebar */
    .navigation.active {
        left: 0;
        width: 280px;
    }
    
    /* When active on mobile, always show text */
    .navigation.active .profile h4,
    .navigation.active .profile small,
    .navigation.active .title {
        display: block !important;
    }
    
    /* Ensure icons are properly aligned when text is visible */
    .navigation.active ul li a .icon {
        min-width: 60px;
    }
    
    .navigation.active ul li a .icon ion-icon {
        margin-left: 0;
    }
    
    /* Override any minimized styles on mobile when active */
    .navigation.active.minimized {
        width: 280px;
    }
    
    .navigation.active.minimized .profile h4,
    .navigation.active.minimized .profile small,
    .navigation.active.minimized .title {
        display: block !important;
    }
    
    /* Main content adjustments */
    .main {
        width: 100%;
        left: 0;
    }
    
    .main.active {
        left: 280px;
        width: calc(100% - 280px);
    }
}

/* Responsive breakpoints */
@media (max-width: 768px) {
	.nav-arrow {
		width: 35px;
		height: 45px;
	}
	.nav-arrow ion-icon {
		font-size: 18px;
	}
	.filter-nav-link {
		padding: 10px 15px;
	}
	.dt-layout-row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.dt-layout-start, .dt-layout-end {
		justify-content: center;
	}
}

@media (max-width: 576px) {
	.nav-arrow {
		width: 30px;
		height: 40px;
	}
	.filter-nav-link {
		padding: 8px 12px;
	}
	.filter-nav-text {
		font-size: 11px;
	}
	.filter-nav-icon ion-icon {
		font-size: 14px;
	}
}

/* Ensure proper transitions */
.navigation,
.main,
.navigation .title,
.navigation .profile h4,
.navigation .profile small {
    transition: all 0.3s ease;
}

/* ============================================
   PDF VIEWER STYLES (moved from simple_pdf_viewer.php)
   ============================================ */

/* Fix for ion-icon visibility */
ion-icon {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
}

/* PDF Viewer container */
.pdf-viewer-container {
    flex: 1;
    /*background: #525659; #f5f5f5;
	background-color: #e0e0e0;*/
	background: #e0e0e0; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    height: calc(100vh - 60px);
}

/* Fixed Toolbar */
.pdf-toolbar {
    position: sticky;
    top: 0;
    /*background: #323639;*/
	background: #124674;
    color: white;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    min-height: 48px;
    z-index: 100;
    flex-shrink: 0;
}

.toolbar-left, .toolbar-center, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-center {
    gap: 8px;
}

.toolbar-btn {
    background: transparent;
    border: none;
    color: #e0e0e0;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    text-decoration: none;
    min-width: 36px;
}

.toolbar-btn:hover { background: rgba(255,255,255,0.12); color: white; }
.toolbar-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.toolbar-btn.active { background: #4da5d4; color: white; }

.separator {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.2);
    margin: 0 4px;
}

.page-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.3);
    padding: 4px 12px;
    border-radius: 4px;
}

.page-current, .page-total { font-size: 14px; }
.page-current { font-weight: 500; color: white; min-width: 40px; text-align: center; }
.page-separator { color: #888; }
.page-total { color: #aaa; }

.zoom-indicator {
    background: rgba(0,0,0,0.3);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-family: monospace;
    color: #e0e0e0;
    min-width: 55px;
    text-align: center;
}

.pdf-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    /*background: #525659;
	background: #e0e0e0; #f5f5f5*/
	background: #f5f5f5;
    padding: 20px;
}

.pdf-pages-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.pdf-page-wrapper {
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    background: white;
}

.pdf-page-wrapper canvas {
    display: block;
    margin: 0 auto;
    pointer-events: none;
}

.pdf-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: 0.2;
    pointer-events: auto;
    cursor: text;
}

.pdf-text-layer span {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    font-size: 1px;
}

.pdf-text-layer ::selection {
    background: rgba(0, 100, 255, 0.4);
    color: transparent;
}

.pdf-copy-notification {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
    animation: fade-out 2s ease-in-out;
    pointer-events: none;
}

@keyframes fade-out {
    0% { opacity: 1; transform: translateY(0); }
    70% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

.pdf-page-number {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-family: monospace;
    pointer-events: none;
    z-index: 10;
}

.pdf-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.pdf-loading-content {
    background: white;
    padding: 20px 30px;
    border-radius: 8px;
    text-align: center;
}

.pdf-spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #4da5d4;
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.pdf-error-message {
    text-align: center;
    color: white;
    padding: 50px;
}

.pdf-scroll-info {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-family: monospace;
    z-index: 99;
    pointer-events: none;
}

.pdf-highlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.search-container {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 2px;
}

.search-container input {
    background: transparent;
    border: none;
    padding: 6px 8px;
    font-size: 13px;
    width: 140px;
    color: white;
}

.search-container input:focus { outline: none; }
.search-container input::placeholder { color: #888; }

/* PDF Viewer Responsive */
@media (max-width: 768px) {
    .pdf-toolbar { padding: 4px 8px; gap: 4px; }
    .toolbar-btn { padding: 6px 8px; font-size: 16px; min-width: 32px; }
    .search-container input { width: 100px; font-size: 11px; }
    .page-current, .page-total { font-size: 12px; }
    .zoom-indicator { font-size: 11px; min-width: 45px; padding: 3px 6px; }
}