@import "variables.css";

@font-face {
    font-family: Inter-bold;
    src: url('../fonts/Inter/static/Inter_24pt-Bold.ttf');
}
@font-face {
    font-family: Inter-medium;
    src: url('../fonts/Inter/static/Inter_24pt-Medium.ttf');
}
@font-face {
    font-family: Inter;
    src: url('../fonts/Inter/static/Inter_24pt-Light.ttf');
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
}

:root {
    --k-login-page-bg-color : #0C140C;
    --k-login-page-gradient-start-color: #16B14B;
    --k-login-page-gradient-end-color: #737373;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: Inter, Arial, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    background-color: #fff;
    overflow: hidden;
}

/*******************************************************
* SIDEBAR DESIGN                                       *
********************************************************/
aside#main-sidebar {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 40;
    width: 237px;
    height: 100vh;
    border-right: #D3D3D3 1px solid;
    background-color: #fff;
    padding: 16px 16px 16px 16px;
    transition: transform 0.2s;
    transform: translate(var(--k-eye-xs-sidebar-x-pos), 0px);
}
aside#main-sidebar.open {
    transform: translate(0px, 0px);
}

@media screen and (min-width: 768px){
    aside#main-sidebar {
        transform: translate(0px, 0px);
    }
}

aside#main-sidebar .sidebar-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 116px;
    margin-bottom: 16px;
}

aside#main-sidebar .sidebar-header .logo-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

aside#main-sidebar .sidebar-header img {
    width: 65px;
}

aside#main-sidebar .sidebar-footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-top: #d4d4d4 1px solid;
    background-color: #f2f2f2;
    width: 100%;
    padding: 25px 10px;
}

aside#main-sidebar .sidebar-content {
    position: relative;
    display: flex;
    width: 100%;
    height: calc(100vh - 250px);
    overflow-y: auto;
}

aside#main-sidebar .sidebar-content::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

aside#main-sidebar .sidebar-content::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

aside#main-sidebar .sidebar-content::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #ddd;
}

.nav-toggle {
    margin-left: auto;
}

.nav-menu-item.has-submenu ul.sub-menu {
    display: none;
    padding: 0px;
    background-color:#fff;
    padding: 5px;
    border: #bebebe 1px solid;
    list-style-type: none;
    width: 100%;
    transition: all 0.5ms;
}

.nav-menu-item.has-submenu.open ul.sub-menu {
    display: block;
}

.nav-menu-item.has-submenu ul.sub-menu li {
    margin: 10px 0px;
    width: 100%;
}
.nav-menu-item.has-submenu .up {
    display: none;
}
.nav-menu-item.has-submenu .down {
    display: block;
}

.nav-menu-item.has-submenu.open .down {
    display: none;
}
.nav-menu-item.has-submenu.open .up {
    display: block;
}

.nav-menu-item.has-submenu ul.sub-menu li a {
    margin: 10px 0px;
    width: 100%;
    display: block;
    color: #0C140C;
    text-decoration: none;
    font-size: 14px !important;
    font-weight: 500;
    letter-spacing: 0.15px;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.nav-menu-item.has-submenu ul.sub-menu li a:hover {
    /* text-decoration: none; */
}


aside#main-sidebar .main-nav {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

aside#main-sidebar li.nav-menu-item {
    width: 100%;
    background-color: transparent;
    padding: 0px;
    left: 0px;
}

aside#main-sidebar li.nav-menu-item> a{
    width: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 15px;
    border-radius: 6px;
    color: #0C140C;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.15px;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

aside#main-sidebar li.nav-menu-item.active> a {
    background-color: #C1FFCB;
    border: #0C140C 1px dashed;
}


.nav-icon {
    /* border: #0C140C 1px solid; */
    padding: 0px 5px;
    font-size: 1.2em;
    /* border-radius: 5px; */
}
/* Highlight parent menu */
.nav-menu-item.active-parent > a {
    background-color: #d1f7d1; /* Soft green highlight */
    color: #000; /* Dark text for readability */
    border-radius: 8px; /* Rounded corners */
}

/* Highlight active submenu */
.sub-menu .active-submenu a {
    background-color: #a8e6a8; /* Brighter green for active submenu */
    color: #000; 
    border-radius: 6px; /* Slightly smaller corners for submenu */
    padding: 10px; /* Indent for better visibility */
    font-weight: bold;
}

/* absolute bottom-0 left-0 border-t-[1px] w-[100%] border-t-[#d4d4d4] bg-[#f2f2f2] pt-[10px] pb-[10px] pl-[25px] pr-[25px] */


/**********************************************
* Main content                                *
***********************************************/
#main {
    margin-left: 0px;
    transition: transform 0.2s;
}

#main.sidebar-open {
    transform: translate(var(--k-eye-md-sidebar-length), 0px);
}

@media screen and (min-width: 768px) {
    #main {
        margin-left: var(--k-eye-md-sidebar-length);
    }
}

#main-header {
    width: 100%;
    border-bottom: var(--k-eye-header-border-bottom-color) 1px solid;
    padding: 10px;
}

.toggle-menu {
    color: #0C140C;
}
.toggle-menu .open-menu {
    display: block;
}
.toggle-menu .close-menu {
    display: none;
}

#main.sidebar-open .toggle-menu .open-menu {
    display: none;
}


#main.sidebar-open .toggle-menu .close-menu {
    display: block;
}

.header-brand img {
    width: 50px;
}

.login-user img {
    width: 35px;
    height: 35px;
    border-radius: 100%;
}

.login-user {
    color: #0C140C;
}

/********************************************
* content area                              *
*********************************************/
#main-content {
    width: 100%;
    padding: 20px 10px;
    height: calc(100vh - 71px);
    overflow-y: auto;
}