/**
 * global css file included in every page
 */

@import url('../../LW_libraries/GoogleFonts/Outfit.css');

*{
    /* Lightweb Font Family */
    font-family: 'Outfit', sans-serif;
}
*::selection{
    /* New Markup Color */
    background: #3f51b5;
    color: #fff;
}

body{
    display: flex;
    background: linear-gradient(
        to bottom right,
        black 0%,
        color-mix(in srgb, var(--kyber-bg-color) 20%, black) 100%
      );
}

a{
    text-decoration: none;
}

.unselectable *{
   -webkit-tap-highlight-color: transparent;

   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

/* Side and Top Navigation */
.side-navigation{
    width: 250px;
    height: 100%;
    background: var(--bs-body-bg);
    position: relative;
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.side-navigation > ul.nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.brand-logo{
    max-width: 100%;
    max-height: 190px;
    margin: 40px 0px;
}
.sidenav-update-note{
    padding: 10px 6px 0;
    color: var(--bs-secondary-color);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}
.sidenav-update-note a{
    color: inherit;
    text-underline-offset: 2px;
}
.side-navigation .nav-link{
    font-size: 18px;
    color: var(--bs-secondary-text-emphasis);
    width: 100%;
}
.side-navigation .nav-link:hover, .side-navigation .nav-link.active {
    background-color: #1d2024;
}
.side-navigation .nav-link:hover svg, .side-navigation .nav-link.active svg,
.icon-link svg.glowing {
    fill: var(--kyber-color);
    -webkit-filter: drop-shadow( 0px 0px 12px var(--kyber-bg-color));
    filter: drop-shadow( 0px 0px 12px var(--kyber-bg-color));
}
.side-navigation .icon-link{
    gap: 1.5rem;
}
.side-navigation .copyright{
    color: grey;
    font-size: 10px;
    padding: 10px;
    flex-shrink: 0;
}

.top-navigation .nav{
    padding: 0px 10px;
}
.top-navigation .nav-link{
    font-size: 20px;
    color: var(--bs-secondary-text-emphasis);
    padding: 20px 10px;
}
.top-navigation .nav-link:hover{
    color: var(--bs-primary);
}
.top-navigation .top-brand-logo{
    max-width: 100%;
    max-height: 50px;
}

/* Orden logo replacing person-circle in top nav */
.topnav-orden-link{
    padding: 15px 10px !important;
}
.topnav-orden-logo{
    height: 30px;
    max-height: 30px;
    object-fit: cover;
    /*border-radius: 50%;*/
    /*border: 1.5px solid rgba(255, 255, 255, .18);*/
    background: #0a0d12;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    display: block;
}
.top-navigation .nav-link:hover .topnav-orden-logo,
.topnav-orden-logo.glowing{
    border-color: var(--kyber-color);
    box-shadow:
        0 0 12px var(--kyber-bg-color),
        0 0 4px color-mix(in srgb, var(--kyber-color) 80%, transparent);
}
.top-navigation .nav-link:hover .topnav-orden-logo{
    transform: scale(1.05);
}

@media (max-width: 1200px){
    body{
        display:block;
    }
    .sidenav-toggle, .top-brand-logo{
        display: block !important;
    }
    .side-navigation{
      position:fixed; inset:0 auto 0 0;
      transform:translateX(-100%);
      transition:transform .25s ease;
      z-index:1000;
    }
    .side-navigation.open{
        transform:translateX(0); 
      box-shadow:0 8px 34px rgba(0,0,0,.2);
    }
    .main{
        width:100% !important;
    }
}


/* Pages Default Section */
.lw-section{
    background-color: var(--bs-body-bg);
    border-radius: var(--bs-border-radius);
    padding: 30px;
    margin-top: 30px;
}
@media (max-width: 575px){
    .lw-section{
        padding: 10px;
    }
}

/* NOTIFICATIONS STYLE for unread notifications popup */
#lightwebNotificationsPopup{
    background-color: var(--bs-secondary-bg);
    position: fixed;
    top:55;
    right: 5;
    padding: 10px;
    border-radius: var(--bs-border-radius);
    border-top-right-radius: 0px;
    z-index: 100;
}
.notification-list-item{
    background-color: #151515;
    filter: brightness(1.03);
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    color: #ffb1b1;
    min-width: 350px;
    margin-bottom: 10px;
}
.notification-list-item:hover{
}
.notification-list-item-title{
    font-size: 18px;
}
.notification-list-item-timestamp{
    float: right;
    font-size: 12px;
}
.notification-list-item-timestamp-div{
    min-height: 21px;
}



/* Container: fixer Neon-Strich oben */
#lightwebTopLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 2000;
    pointer-events: none;
}
/* Neon-Linie */
#lightwebTopLoader .lw-neon-bar {
    width: 100%;
    height: 100%;
    background: var(--kyber-color);
    box-shadow:
        0 0 20px var(--kyber-bg-color);
    opacity: 1;
    transition: opacity 0.2s ease-out;
}

/* Wenn Loader aktiv ist, glüht er auf/ab */
#lightwebTopLoader.is-loading .lw-neon-bar {
    animation: kyberGlow 1.2s ease-in-out infinite;
}

@keyframes kyberGlow {
    0% {
        background: white;
        opacity: 0.5;
        box-shadow:
            0 0 20px var(--kyber-bg-color);
    }
    50% {
        background: white;
        opacity: 1;
        box-shadow:
            0 0 40px var(--kyber-bg-color);
    }
    100% {
        background: white;
        opacity: 0.5;
        box-shadow:
            0 0 20px var(--kyber-bg-color);
    }
}