/* ============================================================
   WarehouseIQ Application Shell
   Navigation + single-screen workspace
   ============================================================ */

/* Fail-safe:
   only one WarehouseIQ screen may be visible.
   JS changes body[data-wq-screen] and activates the matching screen.
*/
#genel,
#stok,
#mal-kabul,
#yerlestirme,
#toplama-yonetim,
#toplama,
#paketleme,
#sayim,
#sevkiyat-panel,
#surecler,
#uyarilar,
#raporlar,
#depo-yonetimi,
#lokasyonlar,
#copilot,
#aksiyonlar{
  display:none !important;
}

body:not([data-wq-screen]) #genel{
  display:block !important;
}

body[data-wq-screen="genel"] #genel,
body[data-wq-screen="stok"] #stok,
body[data-wq-screen="mal-kabul"] #mal-kabul,
body[data-wq-screen="yerlestirme"] #yerlestirme,
body[data-wq-screen="paketleme"] #paketleme,
body[data-wq-screen="sayim"] #sayim,
body[data-wq-screen="sevkiyat-panel"] #sevkiyat-panel,
body[data-wq-screen="surecler"] #surecler,
body[data-wq-screen="uyarilar"] #uyarilar,
body[data-wq-screen="raporlar"] #raporlar,
body[data-wq-screen="depo-yonetimi"] #depo-yonetimi,
body[data-wq-screen="lokasyonlar"] #lokasyonlar,
body[data-wq-screen="copilot"] #copilot,
body[data-wq-screen="aksiyonlar"] #aksiyonlar,
body[data-wq-screen="toplama"] #toplama-yonetim,
body[data-wq-screen="toplama"] #toplama{
  display:block !important;
}

.wq-screen-active{
  animation:wq-enter .18s ease-out;
}

@keyframes wq-enter{
  from{
    opacity:0;
    transform:translateY(5px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* Sidebar always visible on desktop */
@media (min-width:761px){
  .side{
    display:flex !important;
    flex-direction:column !important;
    width:272px !important;
    min-width:272px !important;
  }

  .side #warehouse-nav{
    display:flex !important;
    flex-direction:column !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .side #warehouse-nav > p{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    margin:18px 8px 7px !important;
    color:#8491aa !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.12em !important;
  }

  .side #warehouse-nav > a{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}

/* Navigation */
#warehouse-nav{
  gap:4px !important;
}

#warehouse-nav a{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-height:43px !important;
  padding:10px 13px !important;
  border-radius:11px !important;
  color:#c8d1e2 !important;
  text-decoration:none !important;
  font-size:13px !important;
  font-weight:600 !important;
  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease !important;
}

#warehouse-nav a:hover{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  transform:translateX(2px);
}

#warehouse-nav a.active{
  background:linear-gradient(
    135deg,
    rgba(73,104,218,.96),
    rgba(49,87,213,.84)
  ) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(49,87,213,.28) !important;
}

#warehouse-nav a.active::before{
  content:"";
  position:absolute;
  left:-16px;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:4px;
  background:#a5b8ff;
}

/* Workspace */
.main{
  min-width:0 !important;
  max-width:none !important;
}

.wq-screen-active > article,
.wq-screen-active > section,
.wq-screen-active > .panel{
  width:100% !important;
  max-width:none !important;
  margin-bottom:0 !important;
}

/* Mobile bottom nav */
.warehouse-mobile-bottom-nav{
  display:none !important;
}

@media (max-width:760px){
  .warehouse-mobile-bottom-nav{
    display:grid !important;
  }
}