/* RÜYA MOBILE BOTTOM NAV V3.0
   Yönetici + Öğretmen + Veli
*/
@media (max-width:980px){

  /* =========================
     VELİ + ÖĞRETMEN
     ========================= */
  html body #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]{
    position:fixed!important;
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    height:68px!important;
    min-height:68px!important;
    margin:0!important;
    padding:6px 7px!important;

    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center!important;

    border:1px solid rgba(23,48,122,.10)!important;
    border-radius:999px!important;

    background:rgba(255,255,255,.96)!important;
    background-image:none!important;

    box-shadow:0 8px 24px rgba(23,48,122,.13)!important;

    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;

    transform:none!important;
    filter:none!important;
    overflow:visible!important;
    isolation:isolate!important;
    z-index:6000!important;
    box-sizing:border-box!important;
  }

  html body #root nav.ruya-r793-bottom-nav::before,
  html body #root nav.ruya-r793-bottom-nav::after{
    content:none!important;
    display:none!important;
  }

  html body #root nav.ruya-r793-bottom-nav>button{
    position:relative!important;
    min-width:0!important;
    width:auto!important;
    height:56px!important;
    min-height:56px!important;

    margin:0!important;
    padding:4px 2px!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;

    border:0!important;
    border-radius:18px!important;

    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;

    color:#17307a!important;
    opacity:.82!important;
    transform:none!important;
    font:inherit!important;
  }

  html body #root nav.ruya-r793-bottom-nav>button.active{
    background:#eef4fb!important;
    color:#17307a!important;
    opacity:1!important;
    box-shadow:none!important;
  }

  html body #root nav.ruya-r793-bottom-nav>button:active{
    transform:scale(.96)!important;
  }

  html body #root nav.ruya-r793-bottom-nav .ruyaBottomNavIcon{
    position:relative!important;
    width:28px!important;
    height:27px!important;
    display:grid!important;
    place-items:center!important;
    color:#17307a!important;
  }

  html body #root nav.ruya-r793-bottom-nav .monoIcon,
  html body #root nav.ruya-r793-bottom-nav svg{
    color:#17307a!important;
    stroke:currentColor!important;
  }

  html body #root nav.ruya-r793-bottom-nav>button>small{
    position:static!important;
    display:block!important;
    max-width:100%!important;

    margin:0!important;
    overflow:hidden!important;

    color:#17307a!important;

    font-size:9.5px!important;
    font-weight:760!important;
    line-height:1.05!important;

    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  html body #root nav.ruya-r793-bottom-nav>button.active>small{
    font-weight:900!important;
  }

  /* ORTA MENÜ */
  html body #root nav.ruya-r793-bottom-nav .ruya-r793-quick-button{
    height:56px!important;
    min-height:56px!important;

    padding:0!important;
    gap:0!important;

    background:transparent!important;
    opacity:1!important;
    overflow:visible!important;
  }

  html body #root nav.ruya-r793-bottom-nav
  .ruya-r793-quick-button>.ruyaBottomMenuGlyph{
    position:static!important;
    inset:auto!important;

    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;

    margin:0!important;
    padding:0!important;

    border:0!important;
    border-radius:50%!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;

    background:#17307a!important;
    background-image:none!important;

    color:#fff!important;

    box-shadow:0 5px 14px rgba(23,48,122,.22)!important;

    transform:none!important;
  }

  html body #root nav.ruya-r793-bottom-nav
  .ruyaBottomMenuGlyph>i{
    display:block!important;

    width:21px!important;
    height:2px!important;
    min-height:2px!important;

    margin:0!important;
    padding:0!important;

    border:0!important;
    border-radius:999px!important;

    background:#fff!important;
  }


  /* =========================
     YÖNETİCİ
     ========================= */
  html.ruyaMobileShell body #ruyaMobileBottomNav{
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;

    width:auto!important;
    height:68px!important;
    min-height:68px!important;

    margin:0!important;
    padding:6px 7px!important;

    align-items:center!important;

    border:1px solid rgba(23,48,122,.10)!important;
    border-radius:999px!important;

    background:rgba(255,255,255,.96)!important;
    background-image:none!important;

    box-shadow:0 8px 24px rgba(23,48,122,.13)!important;

    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;

    overflow:visible!important;
  }

  html.ruyaMobileShell body #ruyaMobileBottomNav button{
    position:relative!important;

    height:56px!important;
    min-height:56px!important;

    margin:0!important;
    padding:4px 2px!important;

    gap:4px!important;

    border-radius:18px!important;

    background:transparent!important;
    background-image:none!important;

    color:#17307a!important;

    opacity:.82!important;
  }

  html.ruyaMobileShell body #ruyaMobileBottomNav button.active{
    background:#eef4fb!important;
    color:#17307a!important;
    opacity:1!important;
  }

  html.ruyaMobileShell body #ruyaMobileBottomNav button>span{
    position:relative!important;

    width:28px!important;
    height:27px!important;

    color:#17307a!important;
  }

  html.ruyaMobileShell body #ruyaMobileBottomNav button svg{
    color:#17307a!important;
    stroke:currentColor!important;
  }

  html.ruyaMobileShell body #ruyaMobileBottomNav button small{
    color:#17307a!important;
    font-size:9.5px!important;
    font-weight:760!important;
  }

  /* ADMIN ORTA MENÜ */
  html.ruyaMobileShell body #ruyaMobileBottomNav .ruyaMobileCenter{
    height:56px!important;
    min-height:56px!important;

    margin-top:0!important;
    padding:0!important;

    justify-content:center!important;
    gap:0!important;

    background:transparent!important;

    opacity:1!important;
    overflow:visible!important;
  }

  html.ruyaMobileShell body #ruyaMobileBottomNav .ruyaMobileCenter>span{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;

    border:0!important;
    border-radius:50%!important;

    background:#17307a!important;
    color:#fff!important;

    box-shadow:0 5px 14px rgba(23,48,122,.22)!important;
  }

  html.ruyaMobileShell body #ruyaMobileBottomNav .ruyaMobileCenter>span svg{
    color:#fff!important;
    stroke:#fff!important;
  }

  html.ruyaMobileShell body #ruyaMobileBottomNav .ruyaMobileCenter>small{
    display:none!important;
  }


  /* =========================
     MESAJ ROZETİ
     ========================= */
  html body .ruyaBottomNavBadge{
    position:absolute!important;
    top:-5px!important;
    right:-8px!important;
    z-index:5!important;

    min-width:17px!important;
    height:17px!important;

    padding:0 4px!important;

    border:2px solid #fff!important;
    border-radius:999px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    background:#d92d3f!important;
    color:#fff!important;

    box-sizing:border-box!important;

    font-size:8px!important;
    font-style:normal!important;
    font-weight:900!important;
    line-height:1!important;

    box-shadow:0 2px 6px rgba(166,24,44,.20)!important;
  }


  /* İçerik menünün altında kalmasın */
  html body #root .v225ReferenceShell .main,
  html body #root .role-parent .parentMain{
    padding-bottom:calc(98px + env(safe-area-inset-bottom))!important;
  }
}


/* Dar telefonlar */
@media (max-width:390px){

  html body #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"],
  html.ruyaMobileShell body #ruyaMobileBottomNav{
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
  }

  html body #root nav.ruya-r793-bottom-nav>button>small,
  html.ruyaMobileShell body #ruyaMobileBottomNav button small{
    font-size:8.8px!important;
  }
}

/* V3.0.1 · ADMIN CENTER OPTICAL ALIGNMENT */
@media (max-width:980px){
  html.ruyaMobileShell body #ruyaMobileBottomNav .ruyaMobileCenter{
    align-self:center!important;
    align-items:center!important;
    justify-content:center!important;
  }

  html.ruyaMobileShell body #ruyaMobileBottomNav .ruyaMobileCenter>span{
    position:relative!important;
    top:7px!important;
    margin:0 auto!important;
  }
}

/* V3.0.2 · PARENT BOTTOM NAV FINAL OVERRIDE */
@media (max-width:980px){

  html body:has(#root .shell.role-parent)
  #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]{
    height:68px!important;
    min-height:68px!important;
    padding:6px 7px!important;
    align-items:center!important;
    border:1px solid rgba(23,48,122,.10)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.96)!important;
    background-image:none!important;
    box-shadow:0 8px 24px rgba(23,48,122,.13)!important;
  }

  html body:has(#root .shell.role-parent)
  #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]>button{
    height:56px!important;
    min-height:56px!important;
    margin:0!important;
    padding:4px 2px!important;
    border-radius:18px!important;
    background:transparent!important;
    background-image:none!important;
    color:#17307a!important;
    opacity:1!important;
    box-shadow:none!important;
    transform:none!important;
  }

  html body:has(#root .shell.role-parent)
  #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]>button.active{
    background:#eef4fb!important;
    background-image:none!important;
    color:#17307a!important;
    box-shadow:none!important;
  }

  html body:has(#root .shell.role-parent)
  #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]>button small{
    color:#17307a!important;
    opacity:1!important;
  }

  html body:has(#root .shell.role-parent)
  #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"] svg{
    color:#17307a!important;
    stroke:currentColor!important;
  }

  html body:has(#root .shell.role-parent)
  #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]
  .ruya-r793-quick-button{
    height:56px!important;
    min-height:56px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  html body:has(#root .shell.role-parent)
  #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]
  .ruya-r793-quick-button>.ruyaBottomMenuGlyph{
    position:static!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;

    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;

    margin:0 auto!important;
    padding:0!important;

    border:0!important;
    border-radius:50%!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;

    background:#17307a!important;
    background-image:none!important;

    box-shadow:0 5px 14px rgba(23,48,122,.22)!important;

    transform:none!important;
  }

  html body:has(#root .shell.role-parent)
  #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]
  .ruyaBottomMenuGlyph>i{
    display:block!important;
    width:21px!important;
    height:2px!important;
    min-height:2px!important;
    border:0!important;
    border-radius:999px!important;
    background:#fff!important;
  }
}

/* V3.0.3 · PARENT PORTAL NAV FIX */
@media (max-width:980px){

  html body:has(#root .shell.role-parent)
  nav.ruya-r793-bottom-nav.ruya-hf85-parent-fixed-nav[aria-label="Mobil navigasyon"]{
    height:68px!important;
    min-height:68px!important;
    padding:6px 7px!important;
    align-items:center!important;

    border:1px solid rgba(23,48,122,.10)!important;
    border-radius:999px!important;

    background:rgba(255,255,255,.96)!important;
    background-image:none!important;

    box-shadow:0 8px 24px rgba(23,48,122,.13)!important;

    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }

  html body:has(#root .shell.role-parent)
  nav.ruya-hf85-parent-fixed-nav>button{
    height:56px!important;
    min-height:56px!important;

    margin:0!important;
    padding:4px 2px!important;

    border:0!important;
    border-radius:18px!important;

    background:transparent!important;
    background-image:none!important;

    color:#17307a!important;
    opacity:1!important;

    box-shadow:none!important;
    transform:none!important;
  }

  html body:has(#root .shell.role-parent)
  nav.ruya-hf85-parent-fixed-nav>button.active{
    background:#eef4fb!important;
    background-image:none!important;
    color:#17307a!important;
    box-shadow:none!important;
  }

  html body:has(#root .shell.role-parent)
  nav.ruya-hf85-parent-fixed-nav>button small{
    color:#17307a!important;
    opacity:1!important;
  }

  html body:has(#root .shell.role-parent)
  nav.ruya-hf85-parent-fixed-nav svg{
    color:#17307a!important;
    stroke:currentColor!important;
  }

  html body:has(#root .shell.role-parent)
  nav.ruya-hf85-parent-fixed-nav .ruya-r793-quick-button{
    height:56px!important;
    min-height:56px!important;

    margin:0!important;
    padding:0!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    background:transparent!important;
    background-image:none!important;

    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  html body:has(#root .shell.role-parent)
  nav.ruya-hf85-parent-fixed-nav
  .ruya-r793-quick-button>.ruyaBottomMenuGlyph{
    position:static!important;
    inset:auto!important;

    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;

    margin:0!important;
    padding:0!important;

    border:0!important;
    border-radius:50%!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;

    background:#17307a!important;
    background-image:none!important;

    box-shadow:0 5px 14px rgba(23,48,122,.22)!important;

    transform:none!important;
  }

  html body:has(#root .shell.role-parent)
  nav.ruya-hf85-parent-fixed-nav
  .ruyaBottomMenuGlyph>i{
    display:block!important;

    width:21px!important;
    height:2px!important;
    min-height:2px!important;

    margin:0!important;
    padding:0!important;

    border:0!important;
    border-radius:999px!important;

    background:#fff!important;
  }
}


/* V3.0.3 · ACTIVE TAB = SOFT GRAY · NO BACKGROUND */
@media (max-width:980px){

  /* Öğretmen + Veli */
  html body #root .shell.role-teacher
  nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]>button.active,

  html body:has(#root .shell.role-parent)
  #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]>button.active{
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    color:#8b95a5!important;
    opacity:.58!important;
  }

  html body #root .shell.role-teacher
  nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]>button.active small,

  html body:has(#root .shell.role-parent)
  #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]>button.active small{
    color:#8b95a5!important;
    opacity:1!important;
  }

  html body #root .shell.role-teacher
  nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]>button.active svg,

  html body:has(#root .shell.role-parent)
  #root nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]>button.active svg{
    color:#8b95a5!important;
    stroke:currentColor!important;
  }

  /* Yönetici */
  html.ruyaMobileShell body #ruyaMobileBottomNav button.active{
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    color:#8b95a5!important;
    opacity:.58!important;
  }

  html.ruyaMobileShell body #ruyaMobileBottomNav button.active small,
  html.ruyaMobileShell body #ruyaMobileBottomNav button.active svg{
    color:#8b95a5!important;
  }

  html.ruyaMobileShell body #ruyaMobileBottomNav button.active svg{
    stroke:currentColor!important;
  }

  /* Orta Menü hiçbir zaman sönükleşmez */
  html body #root nav.ruya-r793-bottom-nav
  .ruya-r793-quick-button{
    opacity:1!important;
  }

  html.ruyaMobileShell body #ruyaMobileBottomNav
  .ruyaMobileCenter{
    opacity:1!important;
  }
}

/* V3.0.4 · ACTIVE TAB FINAL HARD OVERRIDE */
@media (max-width:980px){

  /* VELİ */
  html body:has(#root .shell.role-parent)
  #root .shell.role-parent
  nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]
  >button.active,

  /* ÖĞRETMEN */
  html body #root .shell.role-teacher
  nav.ruya-r793-bottom-nav[aria-label="Mobil navigasyon"]
  >button.active,

  /* YÖNETİCİ */
  html.ruyaMobileShell body:has(#root .shell.role-admin)
  #ruyaMobileBottomNav
  >button.active{
    background:none!important;
    background-color:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    border-color:transparent!important;
    color:#9aa3af!important;
    opacity:1!important;
  }

  html body:has(#root .shell.role-parent)
  #root .shell.role-parent
  nav.ruya-r793-bottom-nav
  >button.active::before,

  html body:has(#root .shell.role-parent)
  #root .shell.role-parent
  nav.ruya-r793-bottom-nav
  >button.active::after,

  html body #root .shell.role-teacher
  nav.ruya-r793-bottom-nav
  >button.active::before,

  html body #root .shell.role-teacher
  nav.ruya-r793-bottom-nav
  >button.active::after,

  html.ruyaMobileShell body:has(#root .shell.role-admin)
  #ruyaMobileBottomNav
  >button.active::before,

  html.ruyaMobileShell body:has(#root .shell.role-admin)
  #ruyaMobileBottomNav
  >button.active::after{
    content:none!important;
    display:none!important;
    background:none!important;
    box-shadow:none!important;
  }

  html body:has(#root .shell.role-parent)
  #root .shell.role-parent
  nav.ruya-r793-bottom-nav
  >button.active span,

  html body:has(#root .shell.role-parent)
  #root .shell.role-parent
  nav.ruya-r793-bottom-nav
  >button.active small,

  html body:has(#root .shell.role-parent)
  #root .shell.role-parent
  nav.ruya-r793-bottom-nav
  >button.active svg,

  html body #root .shell.role-teacher
  nav.ruya-r793-bottom-nav
  >button.active span,

  html body #root .shell.role-teacher
  nav.ruya-r793-bottom-nav
  >button.active small,

  html body #root .shell.role-teacher
  nav.ruya-r793-bottom-nav
  >button.active svg,

  html.ruyaMobileShell body:has(#root .shell.role-admin)
  #ruyaMobileBottomNav
  >button.active span,

  html.ruyaMobileShell body:has(#root .shell.role-admin)
  #ruyaMobileBottomNav
  >button.active small,

  html.ruyaMobileShell body:has(#root .shell.role-admin)
  #ruyaMobileBottomNav
  >button.active svg{
    background:none!important;
    color:#9aa3af!important;
    opacity:.58!important;
    box-shadow:none!important;
  }

  html body #root nav.ruya-r793-bottom-nav >button.active svg *,
  html.ruyaMobileShell body #ruyaMobileBottomNav >button.active svg *{
    stroke:#9aa3af!important;
  }

  /* Orta menü her zaman lacivert kalır */
  html body #root nav.ruya-r793-bottom-nav
  >button.ruya-r793-quick-button,
  html.ruyaMobileShell body #ruyaMobileBottomNav
  >button.ruyaMobileCenter{
    opacity:1!important;
    color:#17307a!important;
  }
}