@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');
:root {
    /* Primary Colors */
    --primary: #e04826; /* Main primary color */
    --secondary: #FFA725; /* Secondary color */
    --accent: #f6f9fc; /* Accent color */

    /* Background Colors */
    --bg-body: #fef4ea; /* Body background color */
    --bg-card: #ffffff; /* Card or container background color */
    --dark-bg: #001d3d; /* Dark mode background */
    --contrast-bg: #000000; /* High contrast background */
    --overlay-bg: rgba(0, 0, 0, 0.7); /* Overlay background for modals, etc. */

    /* Text Colors */
    --text-main: #213343; /* Main text color */
    --text-light: #6c757d; /* Light text color */
    --text-dark: #ffffff; /* Dark mode text color */
    --contrast-text: #f1f1f1; /* High contrast text color */
    --link: #007bff; /* Link color */
    --link-hover: #B7B1F2; /* Link hover color */
    --link-light: blanchedalmond; /* Light mode link color */
    --link-dark: #D3E671; /* Dark mode link color */

    /* Button Colors */
    --btn1-bg: #e04826; /* Primary button background */
    --btn1-text: #ffffff; /* Primary button text */
    --btn1-hover-bg: #ff5c35; /* Primary button hover background */
    --btn1-hover-text: #ffffff; /* Primary button hover text */
    
    --btn2-bg: #ffffff; /* Secondary button background */
    --btn2-text: #ff5c35; /* Secondary button text */
    --btn2-hover-bg: #ffebe6; /* Secondary button hover background */
    --btn2-hover-text: #e35126; /* Secondary button hover text */

    /* Dark Mode Buttons */
    --btn-dark-bg: #444444; /* Dark mode button background */
    --btn-dark-text: #ffffff; /* Dark mode button text */
    --btn-dark-hover-bg: #555555; /* Dark mode button hover background */
    
    /* Border Colors */
    --border: #d4dde7; /* Default border color */
    --input-border: #d4dde7; /* Input field border color */
    --dark-border: #3a4d59; /* Dark mode border */
    --contrast-border: #f1f1f1; /* High contrast border */
    
    /* Success and Error Colors */
    --success: #28a745; /* Success color */
    --error: #dc3545; /* Error color */
    --warning: #ffc107; /* Warning color */
    --info: #17a2b8; /* Info color */

    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.1); /* Light mode shadow */
    --shadow-dark: rgba(0, 0, 0, 0.5); /* Dark mode shadow */

    /* Grayscale Colors */
    --white: #ffffff; /* White color */
    --black: #000000; /* Black color */
    --gray-light: #f8f9fa; /* Light gray color */
    --gray-dark: #343a40; /* Dark gray color */
    --gray: #6c757d; /* Standard gray color */

    /* Modes Switch */
    --mode-light: #ffffff;
    --mode-dark: #212529;

    /* High Contrast Mode */
    --high-contrast-text: #ffffff;
    --high-contrast-bg: #000000;
}
 /*Dark Mode Specific */
/*@media (prefers-color-scheme: dark) {*/
/*  :root {*/
/*    --bg-body: #1a1a1a;*/
/*    --black: White;*/
/*    --text-main: var(--text-dark);*/
/*    --link: var(--link-dark);*/
/*    --border: var(--dark-border);*/
/*    --shadow: var(--shadow-dark);*/
/*    --white:var(--black);*/
/*    --black:var(--white);*/
/*    --bg-white:red;*/
/*  }*/
/*}*/


::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--shadow-light);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--primary);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

*{
    /*border:1px solid var(--border);*/
    
}
body{
    background: var(--bg-body);
    font-family: "Lexend Deca", sans-serif;
}
a{
    text-decoration:none;
    color: var(--text-main);
}
.a:hover, form a{
    color:var(--link);
}
.file-name:hover, a:hover{
    color: var(--link);
    transition: transform 0.3s;
    
}

#header{
  position: sticky ;
  top:0;
  left:0;
  z-index:878;
  background:var(--white);
  transition: transform 0.3s;
  border-bottom:1px solid var(--border);
    transition: 0.3s;
}
#header.invisible {
transform: translateY(-100%);
}
#openSideBarBtn{
    cursor:pointer;
    color:var(--primary);
}
#sideBar {
    position: fixed;
    top: 0;
    right: -100%; /* Initially hide the sidebar */
    width: 75%;
    height: 100%;
    background-color: var(--white);
    padding: 10px;
    transition: right 0.3s ease;
    z-index: 900;
    overflow-y:auto;
    
}
#overlay {
    display: none; /* Initially hide the overlay */
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    
    transition: right 0.3s ease;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 899; /* Ensure overlay is above other content */
}
    .sidebar ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    /* Nav link style */
    .sidebar .nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.7rem 1rem;
        color: var(--black);
        text-decoration: none;
        border-radius: 5px;
        font-weight: 600;
        transition: background-color 0.3s ease, color 0.3s ease;
        cursor: pointer;
        user-select: none;
    }

    .sidebar .nav-link:hover,
    .sidebar .nav-link.active {
        background-color: var(--shadow-light);
        color: var(--primary);
    }

    /* Icon spacing */
    .sidebar .nav-link i {
        min-width: 20px;
        text-align: center;
    }

    /* Submenu container (hidden by default) */
    .submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        padding-left: 1.2rem;
        margin-top: 0.2rem;
        margin-bottom: 0.6rem;
        border-left: 2px solid var(--secondary);
    }

    /* Show submenu when active */
    .submenu.show {
        max-height: 1000px; /* large enough for any submenu */
    }

    /* Submenu links style */
    .submenu .nav-link {
        font-weight: 400;
        padding-left: 1rem;
        color: var(--black);
    }
    .submenu .nav-link:hover {
        background-color: var(--shadow-sm);
        color: var(--primary);
    }

    /* Toggle arrow */
    .toggle-arrow {
        font-size: 0.8rem;
        transition: transform 0.3s ease;
    }

    /* Rotate arrow when submenu is open */
    .nav-link.active > .toggle-arrow {
        transform: rotate(180deg);
    }
    #header .navbar-toggler {
        display: none;
    }
    @media (min-width: 992px){
    #openSideBarBtn, #sidebar{
        display: none;
    }
    #closeSideBarBtn{
        display:block;
    }
}