@import url("../fonts/Gotham/style.css");

:root {
    --font-family: 'Gotham Book';
    /* Primary Color */
    --GPEMain: hsl(41, 71%, 50%); /* #DA9823 */
    --GPEMainLight: hsl(41, 88%, 88%); /* #F9DFA2 */
    --GPEMainDark: hsl(41, 100%, 13%); /* #402900 */
    --GPEMainTranslucent: hsla(41, 71%, 50%, 0.2);
    /* Typography */
    --confirmText: rgb(151, 255, 151);
    --cancelText: rgb(255, 151, 151);
}

:root[data-theme="dark"] {
    /* Neutrals - using lightness to create depth */
    --back: hsl(0, 0%, 10%); /* Base background */
    --box1: hsl(0, 0%, 16%); /* Surface */
    --box2: hsl(0, 0%, 21%); /* Raised element */
    --box3: hsl(0, 0%, 27%);
    --box4: hsl(0, 0%, 35%);

    /* Typography */
    --font: hsl(0, 0%, 95%); /* Brighter for headings */
    --secondaryText: hsl(0, 0%, 75%); /* Muted for body text */
    --deactiveFont: hsl(0, 0%, 40%);

    /* Border */
    --border: 1px solid hsl(0, 0%, 27%);
}

:root[data-theme="light"] {
    /* Neutrals - inverting lightness from dark theme */
    --back: hsl(0, 0%, 100%); /* Base background */
    --box1: hsl(0, 0%, 95%);  /* Surface */
    --box2: hsl(0, 0%, 90%);  /* Raised element */
    --box3: hsl(0, 0%, 85%);
    --box4: hsl(0, 0%, 80%);

    /* Typography */
    --font: hsl(0, 0%, 5%); /* Darker for headings */
    --secondaryText: hsl(0, 0%, 25%); /* Muted for body text */
    --deactiveFont: hsl(0, 0%, 60%);

    /* Border */
    --border: 1px solid hsl(0, 0%, 85%);
}

:root[data-theme="system"] {
    @media (prefers-color-scheme: light) {
        /* Neutrals - inverting lightness from dark theme */
        --back: hsl(0, 0%, 100%); /* Base background */
        --box1: hsl(0, 0%, 95%);  /* Surface */
        --box2: hsl(0, 0%, 90%);  /* Raised element */
        --box3: hsl(0, 0%, 85%);
        --box4: hsl(0, 0%, 80%);

        /* Typography */
        --font: hsl(0, 0%, 5%); /* Darker for headings */
        --secondaryText: hsl(0, 0%, 25%); /* Muted for body text */
        --deactiveFont: hsl(0, 0%, 60%);

        /* Border */
        --border: 1px solid hsl(0, 0%, 85%);
    }

    @media (prefers-color-scheme: dark) {
        /* Neutrals - using lightness to create depth */
        --back: hsl(0, 0%, 10%); /* Base background */
        --box1: hsl(0, 0%, 16%); /* Surface */
        --box2: hsl(0, 0%, 21%); /* Raised element */
        --box3: hsl(0, 0%, 27%);
        --box4: hsl(0, 0%, 35%);

        /* Typography */
        --font: hsl(0, 0%, 95%); /* Brighter for headings */
        --secondaryText: hsl(0, 0%, 75%); /* Muted for body text */
        --deactiveFont: hsl(0, 0%, 40%);

        /* Border */
        --border: 1px solid hsl(0, 0%, 27%);
    }
}

.theme-transition * {
    transition: all 0.2s ease-in-out!important;
}

html {
    height: 100vh;
}

body {
    padding: 0;
    margin: 0;
    background-color: var(--back);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-family: var(--font-family), serif;
    height: calc(100vh - 100px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Gotham Bold', serif;
    font-weight: normal;    
}

strong {
    font-family: 'Gotham Bold', serif;
    font-weight: normal;
}

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

::-webkit-scrollbar-track {
    background-color: #363535;
}

::-webkit-scrollbar-thumb {
    background-color: var(--GPEMain);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--GPEMainDark);
}

::-webkit-scrollbar:horizontal {
    display: none;
}

::selection {
    background-color: var(--GPEMainDark);
}

h1,
h3 {
    color: var(--font);
}

.logo {
    width: 100%;
    margin-bottom: 10px;
}

.sidenav {
    height: calc(100vh - 50px * 2);
    width: 260px;
    position: fixed;
    z-index: 99;
    top: calc(72px + 15px);
    left: 15px;
    background-color: var(--box1);
    overflow-x: hidden;
    scrollbar-width: none;
    transition: all 0.2s;
    text-wrap: nowrap;
    border-radius: 15px;
}

.sidenav[data-minimode="true"] a span,
.sidenav[data-minimode="true"] .collapse_sidenav span{
    display: none;
}

.sidenav[data-minimode="true"] a i,
.sidenav[data-minimode="true"] .collapse_sidenav i {
    font-size: 20px;
}

.sidenav[data-minimode="true"] a,
.sidenav[data-minimode="true"] .collapse_sidenav {
    background: none!important;
    padding: 6px 0 6px 0;
    width: 100%;
    margin: auto;
    text-align: center;
    border-right: none;
}

.sidenav[data-minimode="true"] a,
.sidenav[data-minimode="true"] .collapse_sidenav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
}

.sidenav[data-minimode="true"] a:hover {
    border-right: none;
}

.sidenav[data-minimode="true"]{
    overflow-y: scroll;
    overflow-x: visible;
}

/* add label on hober */
.sidenav[data-minimode="true"] a:hover span {
    display: block;
    position: absolute;
    background-color: var(--box4);
    color: var(--font);
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
    margin-left: 60px;
    margin-top: -20px;
    z-index: 100;
    animation: spanAnimation 0.2s;
}

@keyframes spanAnimation {
    0% {
        opacity: 0;
        margin-top: 0px;
    }

    100% {
        opacity: 1;
        margin-top: -20px;
    }
}

.sidenav[data-minimode="true"] h6 {
    color: transparent;
    padding: 6px 0 6px 0;
    margin-top: 5px!important;
    margin-right: 0;
}

/* Cirle to represent section */
.sidenav[data-minimode="true"] h6::after{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: var(--GPEMain);
    border-radius: 50%;
    margin: auto;
}

.sidenav[data-minimode="true"] ~ .main .topbar {
    width: calc(100vw - 80px)!important;
    padding-right: 10px;
}

.sidenav[data-minimode="true"] ~ .main {
    margin-left: 60px;
}

.sidenav[data-minimode="true"] {
    width: 60px;
}

.topbar .activeDrivers{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px;
    width: fit-content;
    max-height: calc(67px - 20px);
}

.topbar .activeDrivers img {
    height: calc(67px - 20px);
}

.topbar .activeDrivers i{
    font-size: 20px;
    color: var(--font);
    margin-right: 20px;
    transition: all 0.2s;
    rotate: 0deg;
}

.topbar .activeDrivers i:hover{
    color: var(--GPEMain);
    cursor: pointer;
}

.sidenav::-webkit-scrollbar{
    width: 0;
}

.sidenav h6 {
    color: var(--GPEMain);
    margin-bottom: 1%;
    padding: 0 0 0 6px;
    font-size: 14px;
    display: block;
    transition: all 0.2s;
    font-family: "Gotham Bold", serif;
    font-weight: normal;
    position: relative;
    z-index: 2;
    margin-top: 25px;
}

.sidenav h6:first-child{
    margin-top: 15px;
}

.sidenav h6 span {
    position: relative;
    background-color: var(--box1);
    z-index: 2;
    padding: 0 10px;
}

.sidenav h6::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--deactiveFont);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1; /* behind the span */
}

.sidenav a,
.sidenav .collapse_sidenav{
    margin: 3px 10px;
    padding: 6px 16px;
    width: calc(100% - 10px * 2 - 16px * 2);
    text-decoration: none;
    font-size: 15px;
    color: var(--font);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
}

.sidenav a i,
.sidenav .collapse_sidenav i {
    display: flex;
    align-items: center;
}

.sidenav .collapse_sidenav{
    background: none;
    border: none;
    text-align: left;
    width: calc(100% - 10px * 2);
    font-family: "Gotham Book", serif;
}

.sidebarContent {
    height: fit-content;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 110px; /* To prevent content from being hidden behind the sticky footer */
}

.sidenav i{
    transition: all 0.2s;
}

.sidenav .notActive:hover i,
.sidenav .collapse_sidenav:hover i{
    color: var(--GPEMain);
}

.sidenav .collapse_sidenav i {
    transition: all 0.3s;
}

.sidenav .collapse_sidenav i.inverted {
    transform: rotate(180deg);
}

.sidenav .collapse_sidenav i.non-inverted {
    transform: rotate(0deg);
}

.sidenav .notActive{
    border-right: 0 solid var(--box1);
    color: var(--secondaryText);
}

.sidenav .notActive:hover,
.sidenav .active,
.sidenav .collapse_sidenav:hover {
    background-color: var(--box2);
    border-radius: 5px;
    cursor: pointer;
}

.sidenav .active i{
    color: var(--GPEMain);
}

/* End Of Sidebar */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px 15px;
    width: calc(100vw - 30px);
    background-color: var(--box1);
    color: var(--font);
    font-size: smaller;
    z-index: 97;
    display: flex;
    gap: 5px;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
    transition: all 0.2s;
}

.sidenav[data-minimode="true"] ~ .body_main_content{
    margin-left: 75px;
    width: calc(100vw - 115px);
}

@media screen and (max-height: 450px) {
    .sidenav a {
        font-size: 18px;
    }
}

.body_main_content {
    margin-left: 275px;
    margin-top: 87px;
    font-size: 28px;
    padding: 0 10px 0 15px;
    width: calc(100vw - 315px);
    height: 100%;
    overflow-y: auto;
    transition: width 0.2s;
}

.swal2-confirm,
.swal2-cancel {
    background-color: var(--box2) !important;
    color: var(--font) !important;
    border-radius: 10px !important;
    border: none !important;
    padding: 10px !important;
    transition: all 0.2s !important;
    width: 98%;
    margin: auto!important;
}

.swal2-confirm:hover,
.swal2-cancel:hover {
    cursor: pointer;
    background-color: var(--box4);
}

.swal2-actions {
    gap: 20px;
    width: 100%;
    display: grid!important;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
}

.swal2-actions.swal2-loading {
    display: flex!important;
    justify-content: center!important;
}

.swal2-actions.swal2-loading .swal2-loader {
    border-color: var(--GPEMain) var(--GPEMain) var(--GPEMain) rgba(0,0,0,0) !important;
}

.swal2-popup {
    background-color: var(--box1) !important;
    color: var(--font) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    margin: 0 !important;
    transition: all 0.2s !important;
}

.swal2-input,
.swal2-html-container textarea{
    background-color: var(--box1) !important;
    color: var(--font) !important;
    border-radius: 10px !important;
    border: 1px solid var(--deactiveFont) !important;
    padding: 10px !important;
    transition: all 0.2s !important;
    width: calc(100% - 20px)!important;
    margin: 10px 0!important;
}

.swal2-textarea {
    resize: vertical !important;
    max-height: 350px !important;
    font-family: Gotham Book, serif;
}

.swal2-select {
    background-color: var(--box1) !important;
    color: var(--font) !important;
    border-radius: 10px !important;
    border: 1px solid var(--deactiveFont) !important;
    padding: 10px !important;
    transition: all 0.2s !important;
    width: calc(100% - 20px)!important;
    margin: 10px auto!important;
}

.swal2-validation-message {
    background-color: var(--box2) !important;
    color: var(--cancelText) !important;
}

.swal2-title {
    color: var(--font) !important;
    font-weight: normal;
}

.right {
    width: fit-content;
    float: right;
    margin: 0px;
}

.topbar .user {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    margin: 0;
    float: right;
    width: fit-content;
}

.topbar .user img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    border: var(--border);
}

.topbar .user .username {
    font-size: 16px;
    color: var(--font);
    margin: 0px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
}

.topbar .user a {
    text-decoration: none;
}

.topbar .user .username:hover {
    color: var(--GPEMain);
}

.topbar .user .role {
    font-size: 14px;
    color: var(--font);
    margin: 0px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.topbar .user .dropdown {
    position: relative;
    display: inline-block;
}

.topbar .user .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--box4);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    z-index: 1;
    right: -30px;
    border: var(--border);
    padding: 7px 10px;
    margin-top: 22px;
}

.topbar .user .dropdown-content a {
    color: var(--font);
    padding: 5px 16px;
    text-decoration: none;
    display: block;
    border-radius: 5px;
    font-size: 16px;
    transition: 0.3s;
}

.topbar .user .dropdown-content a:hover {
    background-color: var(--GPEMain);
    color: var(--font);
    cursor: pointer;
}

.openDropDownButton {
    background-color: transparent;
    border: none;
    color: var(--font);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    margin: 0 10px;
}

.user:hover .dropdown-content,
.dropdown-content:hover {
    display: block!important;
}

.feedback-modal-form{
    display: flex!important;
    flex-direction: column;
    gap: 10px;
}

.feedback-modal-form input,
.feedback-modal-form textarea{
    padding: 10px;
    border-radius: 10px;
    border: none;
    background-color: var(--box1);
    color: var(--font);
    resize: none;
    font-family: var(--font-family);
}

.feedback-modal-form input:focus,
.feedback-modal-form textarea:focus{
    outline: none;
}

.feedback-modal-form input:read-only{
    color: var(--deactiveFont);
}

.sidenav .sidebarNavHolder {
    position: relative;
    height: 100%;
    overflow-y: auto;
}

.sidenav .sidebarFooterContent {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 35px;
    background: linear-gradient(-360deg, var(--box1) 75%, rgba(0, 0, 0, 0) 100%);
    z-index: 99;
    padding-bottom: 10px;
}

/*Mobile side navigation*/
@media screen and (max-width: 1100px)  {
    .sidenav [data-phone_view="false"] {
        display: none;
    }

    .sidenav .sidebarFooterContent .collapse_sidenav {
        display: none;
    }

    .sidenav a span {
        display: none;
    }

    .sidenav a i{
        font-size: 20px;
    }

    .sidenav a {
        padding: 6px 0 6px 0;
        margin: auto;
        text-align: center;
        border-right: none!important;
        background: none!important;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .sidenav a:hover {
        border-right: none;
    }

    .sidenav{
        overflow-y: scroll;
        overflow-x: visible;
    }

    /*.sidenav a:hover span {*/
    /*    display: block;*/
    /*    position: absolute;*/
    /*    background-color: var(--box4);*/
    /*    color: var(--font);*/
    /*    padding: 5px;*/
    /*    border-radius: 5px;*/
    /*    font-size: 14px;*/
    /*    margin-left: 60px;*/
    /*    margin-top: -20px;*/
    /*    z-index: 100;*/
    /*    animation: spanAnimation 0.2s;*/
    /*}*/

    .sidenav h6::after{
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background-color: var(--GPEMain);
        border-radius: 50%;
        margin: auto;
    }

    .sidenav ~ .main .topbar {
        width: calc(100vw - 80px)!important;
        padding-right: 10px;
    }

    .sidenav ~ .main {
        margin-left: 60px;
    }

    .sidenav {
        width: 60px;
    }

    .sidenav ~ .main .topbar .activeDrivers i{
        rotate: 180deg;
    }

    .sidenav ~ .topbar {
        left: 0;
        width: 100vw;
    }

    .sidenav ~ .body_main_content{
        margin-left: 75px;
        width: calc(100vw - 100px);
    }

    .sidenav h6 {
        color: transparent;
        padding: 6px 0 6px 0;
        margin-right: 0!important;
        margin-top: 0!important;
    }

    .topbar .activeDrivers {
        display: none;
    }

    .topbar {
        flex-direction: row;
    }

    .topbar .user,
    .topbar .right {
        width: 100%;
    }
}