/* =====================================================
   OZONTECK.EU • PREMIUM LAYOUT SYSTEM
   ENTERPRISE WEB3 MASTER LAYOUT
===================================================== */

/* =====================================================
   APP LAYOUT
===================================================== */

.app-layout{

  width:100%;

  min-height:100vh;

}

/* =====================================================
   SIDEBAR PREMIUM
===================================================== */

.sidebar{

  position:fixed;

  top:14px;
  left:14px;
  bottom:14px;

  width:232px;

  padding:20px 14px;

  display:flex;

  flex-direction:column;

  background:
    linear-gradient(
      180deg,
      rgba(7,15,28,.94),
      rgba(4,9,18,.98)
    );

  border:
    1px solid rgba(255,255,255,.04);

  border-radius:30px;

  backdrop-filter:blur(18px);

  box-shadow:
    0 20px 60px rgba(0,0,0,.34),
    0 0 40px rgba(0,229,255,.04);

  overflow:hidden;

  z-index:999;

}

/* =====================================================
   LOGO
===================================================== */

.logo{

  padding:0 10px;

  margin-bottom:28px;

}

.logo strong{

  display:block;

  font-size:18px;

  font-weight:900;

  letter-spacing:-1px;

  color:#FFFFFF;

  line-height:1;

}

.logo span{

  display:block;

  margin-top:5px;

  font-size:10px;

  font-weight:700;

  letter-spacing:.8px;

  text-transform:uppercase;

  color:#64748B;

}

/* =====================================================
   NAVIGATION
===================================================== */

.nav{

  flex:1;

  display:flex;

  flex-direction:column;

  gap:6px;

}

/* =====================================================
   MENU ITEM
===================================================== */

.nav a{

  position:relative;

  display:flex;

  align-items:center;

  gap:12px;

  min-height:50px;

  padding:0 15px;

  border-radius:18px;

  border:
    1px solid transparent;

  color:#CBD5E1;

  font-size:14px;

  font-weight:700;

  letter-spacing:-0.2px;

  transition:all .22s ease;

}

/* =====================================================
   ICON
===================================================== */

.nav a i{

  width:18px;
  height:18px;

  display:flex;

  align-items:center;

  justify-content:center;

  color:#94A3B8;

  transition:all .22s ease;

}

/* =====================================================
   HOVER
===================================================== */

.nav a:hover{

  transform:translateX(2px);

  background:
    rgba(255,255,255,.025);

  border:
    1px solid rgba(255,255,255,.03);

  color:#FFFFFF;

}

.nav a:hover i{

  color:#D6F8FF;

}

/* =====================================================
   ACTIVE
===================================================== */

.nav a.active{

  background:
    linear-gradient(
      90deg,
      rgba(0,229,255,.08),
      rgba(0,184,255,.03)
    );

  border:
    1px solid rgba(0,229,255,.10);

  color:#FFFFFF;

  box-shadow:
    0 0 24px rgba(0,229,255,.04);

}

.nav a.active i{

  color:#00D9FF;

}

.nav a.active::before{

  content:"";

  position:absolute;

  left:0;
  top:18%;

  width:3px;
  height:64%;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #00E5FF,
      #00B8FF
    );

}

/* =====================================================
   SIDEBAR FOOTER
===================================================== */

.sidebar-footer{

  margin-top:auto;

  padding-top:16px;

}

/* =====================================================
   LOGOUT BUTTON
===================================================== */

.logout-btn-sidebar{

  width:100%;

  min-height:52px;

  border:none;

  border-radius:18px;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.03)
    );

  border:
    1px solid rgba(255,255,255,.08);

  color:#F8FAFC;

  font-size:14px;

  font-weight:700;

  transition:all .22s ease;

}

.logout-btn-sidebar:hover{

  transform:translateY(-2px);

  border-color:
    rgba(0,229,255,.18);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.04)
    );

}

/* =====================================================
   MAIN
===================================================== */

.main{

  position:relative;

  z-index:2;

  margin-left:260px;

  width:
    calc(100% - 260px);

  max-width:
    calc(100% - 260px);

  min-height:100vh;

  padding:28px;

  overflow-x:hidden;

}

/* =====================================================
   CONTAINER
===================================================== */

.container{

  width:100%;

  max-width:1600px;

  margin:0 auto;

}

/* =====================================================
   PAGE HEADER
===================================================== */

.page-header{

  margin-bottom:22px;

}

/* =====================================================
   HERO PREMIUM
===================================================== */

.hero-section{

  position:relative;

  overflow:hidden;

  border-radius:34px;

  padding:26px;

  background:
    radial-gradient(
      circle at top right,
      rgba(0,229,255,.06),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(20,28,48,.94) 0%,
      rgba(7,12,24,.99) 50%,
      rgba(5,10,20,1) 100%
    );

  border:
    1px solid rgba(0,229,255,.10);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 20px 60px rgba(0,0,0,.42),
    0 0 50px rgba(0,229,255,.05);

  backdrop-filter:blur(14px);

}

.hero-section::before{

  content:"";

  position:absolute;

  top:-180px;
  right:-180px;

  width:420px;
  height:420px;

  background:
    radial-gradient(
      circle,
      rgba(0,229,255,.14),
      transparent 72%
    );

  pointer-events:none;

  opacity:.9;

}

/* =====================================================
   HERO CONTENT
===================================================== */

.hero-content{

  position:relative;

  z-index:2;

}

/* =====================================================
   GRID SYSTEM
===================================================== */

.grid{

  display:grid;

  gap:20px;

}

.grid-2{

  grid-template-columns:
    repeat(2,1fr);

}

.grid-3{

  grid-template-columns:
    repeat(3,1fr);

}

.grid-4{

  grid-template-columns:
    repeat(4,1fr);

}

/* =====================================================
   SECTION
===================================================== */

.section{

  margin-bottom:20px;

}

/* =====================================================
   MOBILE CLEAN
===================================================== */

@media(max-width:768px){

  .sidebar{
    display:none;
  }

  .main{

    margin-left:0;

    width:100%;

    max-width:100%;

    padding:18px 18px 84px;

  }

  .grid-2,
  .grid-3,
  .grid-4{

    grid-template-columns:1fr;

  }

}


/* =====================================================
   LIGHT MODE • LAYOUT FIX
===================================================== */

body.theme-light .sidebar{

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(248,250,252,.99)
    ) !important;

  border:
    1px solid rgba(15,23,42,.06) !important;

  box-shadow:
    0 20px 60px rgba(15,23,42,.08) !important;

}

body.theme-light .logo strong,
body.theme-light .nav a,
body.theme-light .logout-btn-sidebar{

  color:#0F172A !important;

}

body.theme-light .logo span{

  color:#64748B !important;

}

body.theme-light .nav a i{

  color:#475569 !important;

}

body.theme-light .nav a.active{

  background:
    rgba(8,145,178,.08) !important;

  border:
    1px solid rgba(8,145,178,.10) !important;

  color:#0F172A !important;

}

body.theme-light .nav a.active i{

  color:#0891B2 !important;

}