/* WATEEN_ADMIN_DESKTOP_LAYOUT_STAGE=1 */
@media (min-width:1024px){
  .app{min-height:100vh}
  .side{
    width:228px;
    padding:20px 14px 18px;
    box-shadow:-8px 0 24px rgba(8,42,54,.05);
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  .side::-webkit-scrollbar{width:7px}
  .side::-webkit-scrollbar-track{background:transparent}
  .side::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:999px}
  .side::-webkit-scrollbar-thumb:hover{background:#ffffff4a}
  .sideFoot{
    position:sticky;
    right:auto;
    left:auto;
    bottom:0;
    margin-top:18px;
    padding-top:10px;
    padding-bottom:2px;
    background:linear-gradient(180deg,rgba(17,20,27,0),#11141b 26%);
    z-index:2;
  }
  .main{margin-right:228px;min-width:0}
  .brand{gap:12px;padding:4px 8px 22px}
  .brandIcon{width:44px;height:44px;border-radius:14px;font-size:18px}
  .brand b{font-size:16px;line-height:1.35}
  .brand small{font-size:10px;margin-top:2px}
  .navTitle{font-size:10.5px;padding:12px 11px 6px}
  .nav{
    padding:12px 13px;
    margin:3px 0;
    border-radius:12px;
    font-size:13px;
    line-height:1.35;
  }
  .nav.on{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}

  .top{
    height:68px;
    padding:0 28px;
    gap:8px;
  }
  .top>b{font-size:17px}
  .top button{
    margin-right:0;
    min-height:42px;
    padding:10px 15px;
    font-size:12.5px;
  }

  .content{
    width:100%;
    max-width:1480px;
    margin:0 auto;
    padding:26px 28px 36px;
  }
  .hero{
    min-height:104px;
    align-items:center;
    margin-bottom:18px;
    padding:20px 24px;
    border:1px solid var(--line);
    border-radius:19px;
    background:#fff;
    box-shadow:var(--shadow);
  }
  .hero h1{font-size:29px;line-height:1.25}
  .hero p{font-size:13px;line-height:1.7;margin-top:7px}
  .heroActions{gap:10px}
  .phase{
    padding:8px 12px;
    font-size:11px;
  }

  .metrics{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
  }
  .metric{
    min-height:112px;
    padding:19px 20px;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .metric small{
    font-size:12px;
    line-height:1.5;
  }
  .metric b{
    font-size:30px;
    line-height:1.2;
    margin-top:9px;
    letter-spacing:-.2px;
  }

  .panel{border-radius:18px}
  .toolbar{gap:10px;padding:14px}
  .toolbar.orders{gap:10px}
  .search{min-height:43px}
  .search input{font-size:13px;padding:11px 6px}
  .toolbar select{font-size:12.5px;padding:11px}
  .meta{font-size:11px;padding:11px 14px}

  .tbl th{
    padding:12px 13px;
    font-size:11px;
    line-height:1.45;
  }
  .tbl td{
    padding:13px;
    font-size:12px;
    line-height:1.55;
  }
  .prod{gap:11px}
  .prodPic{width:52px;height:52px;border-radius:12px}
  .prod b{font-size:12px}
  .prod small{font-size:10px;margin-top:4px}
  .badge{font-size:10px;padding:6px 9px}

  .primary,.secondary,.danger{
    font-size:12.5px;
  }
  .field label{font-size:11px}
  .field input,.field select,.field textarea{font-size:13px}
  .empty{font-size:12px}
  .sec h3{font-size:14px}
  .info small,.mini small{font-size:10px}
  .info b,.mini b{font-size:12px}
  .sum{font-size:12px}
  .sum.total{font-size:15px}
}

@media (min-width:1500px){
  .side{width:238px}
  .main{margin-right:238px}
  .content{padding-left:34px;padding-right:34px}
  .metric{min-height:118px}
}

@media (min-width:1024px) and (max-width:1180px){
  .side{width:214px}
  .main{margin-right:214px}
  .content{padding-left:20px;padding-right:20px}
  .metrics{gap:10px}
  .metric{padding:16px;min-height:104px}
  .metric b{font-size:26px}
}