/**
 * Hedefimo LMS rol panelleri.
 * Öğretmen ve öğrenci sayfalarında sabit, okunaklı ve mobil uyumlu kenar menü sağlar.
 */
:root{
  --role-sidebar-width:260px;
  --role-sidebar-bg:#24292e;
  --role-sidebar-text:#f7f8fa;
  --role-sidebar-muted:#9da7b2;
  --role-sidebar-hover:rgba(255,255,255,.08);
  --role-sidebar-active:#fff;
  --role-sidebar-active-text:#24292e;
  --role-sidebar-divider:rgba(255,255,255,.10);
}

.role-fixed-sidebar{
  position:fixed!important;
  inset:0 auto 0 0;
  width:var(--role-sidebar-width)!important;
  min-width:var(--role-sidebar-width);
  height:100dvh;
  z-index:1040;
  padding:0!important;
  display:flex!important;
  flex-direction:column;
  align-items:stretch;
  background:var(--role-sidebar-bg)!important;
  border:0!important;
  box-shadow:8px 0 28px rgba(20,27,34,.08);
}
.role-fixed-sidebar>.role-sidebar-brand{
  min-height:132px;
  padding:26px 16px 16px;
  display:flex;
  align-items:flex-start;
  flex:0 0 auto;
}
.role-fixed-sidebar .navbar-brand{margin:0;padding:0;display:block;width:100%}
.role-fixed-sidebar .navbar-brand-item{height:50px!important;max-width:180px;width:auto!important;object-fit:contain}
.role-fixed-sidebar .offcanvas{
  position:static!important;
  transform:none!important;
  visibility:visible!important;
  width:100%!important;
  max-width:none!important;
  flex:1 1 auto;
  min-height:0;
  background:transparent!important;
  border:0!important;
}
.role-fixed-sidebar .offcanvas-body{
  padding:0 16px 18px!important;
  display:flex!important;
  flex-direction:column;
  min-height:0;
  overflow:hidden!important;
}
.role-sidebar-title{
  color:var(--role-sidebar-muted);
  font-size:.78rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:0 0 12px;
  flex:0 0 auto;
}
.role-sidebar-mobile-head{display:none}
.role-fixed-sidebar-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 2px 10px 0!important;
  scrollbar-width:thin;
  scrollbar-color:#59636d transparent;
}
.role-fixed-sidebar-scroll::-webkit-scrollbar{width:6px}
.role-fixed-sidebar-scroll::-webkit-scrollbar-thumb{background:#59636d;border-radius:10px}
.role-sidebar-footer{
  flex:0 0 auto;
  margin-top:4px;
  padding-top:10px;
  border-top:1px solid var(--role-sidebar-divider);
  background:var(--role-sidebar-bg);
}
.role-panel-menu{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;max-height:none!important;overflow:visible!important}
.role-panel-menu .list-group{gap:3px}
.role-panel-menu .list-group-item{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:9px 13px;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:var(--role-sidebar-text)!important;
  font-size:.91rem;
  font-weight:600;
  line-height:1.2;
  transition:background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.role-panel-menu .list-group-item i{width:20px;text-align:center;color:inherit!important;flex:0 0 20px}
.role-panel-menu .list-group-item:hover,
.role-panel-menu .list-group-item:focus{background:var(--role-sidebar-hover)!important;color:#fff!important;transform:translateX(2px)}
.role-panel-menu .list-group-item.active{
  color:var(--role-sidebar-active-text)!important;
  background:var(--role-sidebar-active)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.role-panel-footer-menu .list-group-item{min-height:38px;padding-top:8px;padding-bottom:8px}
.role-panel-menu .role-logout{color:#ff4057!important;margin-top:3px}
.role-panel-menu .role-logout:hover{color:#fff!important;background:rgba(255,64,87,.16)!important}
.role-mobilebar{display:none}

body.role-panel-body{background:#f7f8fb}
body.role-panel-body>main,
body.role-panel-body>.role-panel-main,
body.role-panel-body>footer{margin-left:var(--role-sidebar-width)}
body.role-panel-body>main{min-height:100vh}
body.role-panel-body>footer{width:auto}
body.role-panel-body .container{max-width:1320px}

/* Eski öğrenci/öğretmen içerik menülerini kaldırır ve içerik alanını tam genişliğe açar. */
.role-legacy-sidebar-column,
.role-legacy-sidebar-trigger{display:none!important}
.role-panel-content-column{
  flex:0 0 100%!important;
  width:100%!important;
  max-width:100%!important;
}
@supports selector(:has(*)){
  body.role-panel-body main .row:has(> .col-xl-3 #offcanvasSidebar) > .col-xl-3,
  body.role-panel-body .role-panel-main .row:has(> .col-xl-3 #offcanvasSidebar) > .col-xl-3{
    display:none!important;
  }
  body.role-panel-body main .row:has(> .col-xl-3 #offcanvasSidebar) > .col-xl-9,
  body.role-panel-body .role-panel-main .row:has(> .col-xl-3 #offcanvasSidebar) > .col-xl-9{
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
  }
}

@media (max-height:820px) and (min-width:1200px){
  .role-fixed-sidebar>.role-sidebar-brand{min-height:108px;padding-top:20px;padding-bottom:10px}
  .role-fixed-sidebar .navbar-brand-item{height:44px!important}
  .role-panel-menu .list-group-item{min-height:37px;padding-top:7px;padding-bottom:7px;font-size:.88rem}
  .role-sidebar-title{padding-bottom:8px}
  .role-sidebar-footer{padding-top:7px}
}

@media (max-width:1199.98px){
  .role-fixed-sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(88vw,310px)!important;
    min-width:0;
    height:100dvh;
    z-index:1065!important;
    isolation:isolate;
    transform:translate3d(-105%,0,0);
    -webkit-transform:translate3d(-105%,0,0);
    transition:transform .25s ease;
    box-shadow:12px 0 32px rgba(0,0,0,.24);
    pointer-events:none;
    opacity:1!important;
    background:var(--role-sidebar-bg)!important;
  }
  .role-fixed-sidebar.role-sidebar-open,
  .role-fixed-sidebar:has(.offcanvas.show){
    transform:translate3d(0,0,0)!important;
    -webkit-transform:translate3d(0,0,0)!important;
    pointer-events:auto;
  }
  .role-fixed-sidebar>.role-sidebar-brand{
    position:relative;
    z-index:3;
    min-height:104px;
    padding:18px 16px 10px;
    background:var(--role-sidebar-bg)!important;
  }
  .role-fixed-sidebar .navbar-brand-item{height:45px!important}
  .role-fixed-sidebar .offcanvas{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    z-index:2!important;
    transform:none!important;
    -webkit-transform:none!important;
    visibility:visible!important;
    opacity:1!important;
    background:var(--role-sidebar-bg)!important;
    pointer-events:auto;
  }
  .role-fixed-sidebar .offcanvas-body{
    height:100dvh!important;
    padding:104px 16px max(18px, env(safe-area-inset-bottom))!important;
    background:var(--role-sidebar-bg)!important;
    overflow:hidden!important;
  }
  .role-sidebar-mobile-head{
    position:absolute;
    top:max(18px, env(safe-area-inset-top));
    right:16px;
    left:150px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    color:#fff;
    z-index:4;
  }
  .role-sidebar-mobile-head span{display:none}
  .role-mobilebar{
    position:sticky;
    top:0;
    z-index:1030;
    height:64px;
    padding:10px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fff;
    border-bottom:1px solid #e8ebef;
    box-shadow:0 2px 12px rgba(24,33,43,.06);
  }
  .role-mobilebar .role-mobile-logo{height:42px;width:auto}
  .role-mobilebar .role-menu-toggle{
    width:44px;
    height:44px;
    border-radius:10px;
    display:grid;
    place-items:center;
    position:relative;
    z-index:1;
  }
  body.role-sidebar-active{overflow:hidden!important;touch-action:none}
  body.role-sidebar-active .offcanvas-backdrop,
  .offcanvas-backdrop.role-panel-backdrop{
    z-index:1055!important;
    opacity:.48!important;
    background:#0d1721!important;
  }
  body.role-panel-body>main,
  body.role-panel-body>.role-panel-main,
  body.role-panel-body>footer{margin-left:0!important}
}

/* V11.1 mobil dokunma ve bağlantı düzeltmesi */
@media (max-width:1199.98px){
  .role-fixed-sidebar{
    z-index:2147483001!important;
  }
  .role-fixed-sidebar.role-sidebar-open{
    pointer-events:auto!important;
  }
  .role-fixed-sidebar.role-sidebar-open,
  .role-fixed-sidebar.role-sidebar-open .role-panel-offcanvas,
  .role-fixed-sidebar.role-sidebar-open .offcanvas-body,
  .role-fixed-sidebar.role-sidebar-open .role-fixed-sidebar-scroll,
  .role-fixed-sidebar.role-sidebar-open .role-panel-menu,
  .role-fixed-sidebar.role-sidebar-open .list-group,
  .role-fixed-sidebar.role-sidebar-open .list-group-item{
    pointer-events:auto!important;
  }
  .role-fixed-sidebar .role-panel-offcanvas{
    z-index:5!important;
  }
  .role-fixed-sidebar .offcanvas-body{
    position:relative;
    z-index:6;
    pointer-events:auto!important;
  }
  .role-fixed-sidebar-scroll{
    position:relative;
    z-index:7;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y!important;
  }
  .role-panel-menu,
  .role-panel-menu .list-group{
    position:relative;
    z-index:8;
  }
  .role-panel-menu .list-group-item{
    position:relative;
    z-index:9;
    cursor:pointer;
    touch-action:manipulation!important;
    -webkit-user-select:none;
    user-select:none;
  }
  .role-panel-menu .list-group-item:active{
    transform:translateX(2px) scale(.992);
    background:var(--role-sidebar-hover)!important;
  }
  body.role-sidebar-active{
    overflow:hidden!important;
    touch-action:auto!important;
    overscroll-behavior:contain;
  }
  .role-panel-custom-backdrop{
    position:fixed!important;
    inset:0!important;
    display:block;
    width:100vw;
    height:100dvh;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:#0d1721!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:2147483000!important;
    transition:opacity .18s ease,visibility .18s ease;
  }
  .role-panel-custom-backdrop.show:not([hidden]){
    opacity:.48!important;
    visibility:visible;
    pointer-events:auto;
  }
  .role-panel-custom-backdrop[hidden]{display:none!important}
  body.role-sidebar-active > .offcanvas-backdrop:not(.role-panel-custom-backdrop){
    display:none!important;
    pointer-events:none!important;
  }
}
