/* Don Mac POS v1.5.57: restore genuinely expanded sidebar on responsive
   tablet/desktop-site widths, while preserving an intentional compact rail. */
@media (min-width:700px) and (max-width:1180px){
  .app:not(.sidebar-collapsed){
    display:grid!important;
    grid-template-columns:clamp(170px,19vw,212px) minmax(0,1fr)!important;
  }
  .app.sidebar-collapsed{
    display:grid!important;grid-template-columns:78px minmax(0,1fr)!important;
  }
  .app .main{min-width:0!important;width:100%!important}
  .app .sidebar{
    min-width:0!important;width:100%!important;overflow:hidden!important;
    display:flex!important;flex-direction:column!important;
    height:100dvh!important;max-height:100dvh!important;
    padding:13px 9px!important;
  }
  .app .sidebar #mainNav{
    display:flex!important;flex-direction:column!important;
    align-items:stretch!important;gap:12px!important;min-width:0!important;
    flex:1 1 auto!important;overflow-y:auto!important;overflow-x:hidden!important;
    padding:0 2px 8px!important;scrollbar-width:thin;
  }
  .app .sidebar #mainNav .nav-section{
    display:flex!important;flex-direction:column!important;
    align-items:stretch!important;gap:5px!important;min-width:0!important;
  }
  .app:not(.sidebar-collapsed) .sidebar #mainNav .nav-section-label{
    display:block!important;width:100%!important;max-width:100%!important;
    padding:0 8px!important;margin:2px 0 5px!important;
    white-space:nowrap!important;overflow:hidden!important;
    text-overflow:ellipsis!important;font-size:9px!important;
    letter-spacing:.09em!important;
  }
  .app:not(.sidebar-collapsed) .sidebar #mainNav .nav{
    display:flex!important;flex-direction:row!important;align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    min-height:43px!important;height:auto!important;
    padding:9px 10px!important;gap:10px!important;
    font-size:12px!important;text-align:left!important;
  }
  .app:not(.sidebar-collapsed) .sidebar #mainNav .nav .nav-icon{
    flex:0 0 19px!important;width:19px!important;height:19px!important;
  }
  .app:not(.sidebar-collapsed) .sidebar #mainNav .nav .nav-label{
    display:block!important;flex:1 1 auto!important;min-width:0!important;
    width:auto!important;max-width:100%!important;
    overflow:hidden!important;text-overflow:ellipsis!important;
    white-space:nowrap!important;overflow-wrap:normal!important;
    word-break:normal!important;writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
    line-height:1.3!important;font-size:12px!important;text-align:left!important;
  }
  .app:not(.sidebar-collapsed) .sidebar #logoutButton{
    width:100%!important;min-height:40px!important;
    display:flex!important;justify-content:center!important;
    font-size:11px!important;padding:8px!important;
  }
  /* Collapsed mode remains a clean icon rail, without stacked letter fragments. */
  .app.sidebar-collapsed .sidebar{padding:12px 8px!important}
  .app.sidebar-collapsed .sidebar #mainNav{
    align-items:center!important;gap:13px!important;
  }
  .app.sidebar-collapsed .sidebar #mainNav .nav-section{
    align-items:center!important;
  }
  .app.sidebar-collapsed .sidebar #mainNav .nav{
    display:flex!important;flex-direction:row!important;
    justify-content:center!important;align-items:center!important;
    width:47px!important;min-width:47px!important;
    height:47px!important;min-height:47px!important;
    padding:0!important;font-size:0!important;
  }
  .app.sidebar-collapsed .sidebar #mainNav .nav .nav-label{
    display:none!important;
  }
  .app.sidebar-collapsed .sidebar #mainNav .nav .nav-icon{
    width:21px!important;height:21px!important;flex:0 0 21px!important;
  }
  .app.sidebar-collapsed .sidebar #mainNav .nav-section-label{
    display:block!important;width:100%!important;height:9px!important;
    overflow:hidden!important;white-space:nowrap!important;
    font-size:8px!important;text-align:center!important;
  }
  .app.sidebar-collapsed .sidebar #logoutButton{
    width:44px!important;min-height:40px!important;
    display:grid!important;font-size:0!important;
  }
  /* Preserve the full, square logo instead of squeezing the image
     through a smaller max-width while an older flex-basis stays fixed. */
  .app .topbar .topbar-heading .topbar-logo{
    display:grid!important;place-items:center!important;
    width:clamp(72px,8.2vw,94px)!important;
    height:clamp(72px,8.2vw,94px)!important;
    flex:0 0 clamp(72px,8.2vw,94px)!important;
    min-width:0!important;max-width:none!important;
    aspect-ratio:1!important;border-radius:16px!important;
    overflow:hidden!important;
  }
  .app .topbar .topbar-heading .topbar-logo img{
    display:block!important;object-fit:contain!important;
    width:96%!important;height:96%!important;
    max-width:96%!important;max-height:96%!important;
    aspect-ratio:1!important;
  }
  .app .topbar .topbar-heading{min-width:0!important;max-width:none!important}
  .app .topbar .topbar-heading-copy{min-width:0!important;flex:1 1 auto!important}
  .app .topbar #viewTitle{
    white-space:nowrap!important;overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}
@media (min-width:700px) and (max-width:850px){
  .app:not(.sidebar-collapsed){grid-template-columns:170px minmax(0,1fr)!important}
  .app .topbar .topbar-heading .topbar-logo{
    width:70px!important;height:70px!important;flex-basis:70px!important;
  }
  .app .topbar #viewTitle{font-size:clamp(12px,1.5vw,16px)!important}
}
@media (max-width:699px){
  /* The true phone viewport uses the app's existing mobile bottom navigation. */
  .app .topbar .topbar-heading .topbar-logo{
    width:54px!important;height:54px!important;
    flex:0 0 54px!important;max-width:none!important;
    display:grid!important;place-items:center!important;aspect-ratio:1!important;
  }
  .app .topbar .topbar-heading .topbar-logo img{
    width:96%!important;height:96%!important;
    max-width:96%!important;max-height:96%!important;
    object-fit:contain!important;
  }
}