@media (max-width:1100px){
  .toolbar{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:980px){
  .toolbar{
    grid-template-columns: 1fr 1fr;
  }

  .summary,
  .receipt-summary,
  .turnover-grid,
  .grid.cols-2,
  .grid.cols-3,
  .footer-grid,
  .invoice-top,
  .search-grid{
    grid-template-columns: 1fr;
  }

  .turnover-kpis,
  .kpis{
    grid-template-columns: repeat(2, 1fr);
  }

  .grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width:900px){
  .products-toolbar{
    grid-template-columns: 1fr;
  }

  .nav{
    position: sticky;
    top: 0;
  }

  .nav-inner{
    position: relative;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .brand{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand h1{
    margin: 0;
    font-size: 13px;
    line-height: 1.15;
  }

  .menu-toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    flex: 0 0 auto;
  }

  .menu{
    display: none !important;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: var(--shadow);
    border-radius: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px;
    background: linear-gradient(180deg, rgba(15,21,40,.98), rgba(15,21,40,.95));
    border: 1px solid var(--border);
  }

  .menu.show{
    display: flex !important;
  }

  .menu a{
    width: 100%;
    padding: 12px;
    display: block;
  }

  .right{
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
  }

  .role-badge{
    font-size: 11px;
    padding: 6px 9px;
  }
}

@media (max-width:768px){
  .products-toolbar{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .products-toolbar .input,
  .products-toolbar .select{
    grid-column: 1 / -1;
    width: 100% !important;
    justify-self: stretch;
  }

  .products-toolbar #addBtn{
    width: 100%;
  }

  .products-toolbar #exportBtn{
    width: auto !important;
    justify-self: start;
    padding: 8px 10px;
    font-size: 12px;
    opacity: .9;
  }

}

@media (max-width:720px){
  .products-modal-body,
  .modal-body{
    grid-template-columns: 1fr;
  }

  .field.span-2{
    grid-column: span 1;
  }
}

@media (max-width:700px){
  body.login-page{
    padding: 14px;
  }

  .container{
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .side{
    order: 2;
  }

  .login-card{
    order: 1;
  }

  .wrap,
  .invoice-wrap,
  .sales-wrap,
  .turnover-wrap{
    margin: 16px auto;
    padding: 0 12px 28px;
  }

  .card-header,
  .products-toolbar,
  .sales-toolbar,
  .turnover-toolbar,
  .turnover-kpis,
  .turnover-bars,
  .turnover-grid,
  .receipt-toolbar,
  .receipt-summary,
  .actions,
  .grid,
  .table-wrap,
  .summary,
  .footer-grid,
  .invoice-top{
    padding-left: 14px;
    padding-right: 14px;
  }

  .headline{
    font-size: 22px;
  }

  .title{
    font-size: 20px;
  }

  .row{
    flex-direction: column;
    align-items: stretch;
  }

  .btn{
    width: 100%;
    display: block;
    text-align: center;
  }

  .toolbar{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .toolbar .input,
  .toolbar .select{
    grid-column: 1 / -1;
  }

  #addBtn{
    width: 100%;
  }

  #exportBtn{
    padding: 8px 10px;
    font-size: 12px;
    opacity: .9;
  }

  .meta-row,
  .totals-grid,
  .sum-grid,
  .print-header,
  .print-grid,
  .print-bottom,
  .print-signatures,
  .sales-modal-grid{
    grid-template-columns: 1fr;
  }

  .bar{
    grid-template-columns: 100px 1fr 80px;
  }

}

@media (max-width:640px){
  .turnover-toolbar{
    grid-template-columns: 1fr;
  }
}

@media (max-width:560px){
  .brand h1{
    font-size: 14px;
  }

  .menu a{
    font-size: 13px;
    padding: 7px 10px;
  }

  .btn-outline{
    padding: 7px 10px;
    font-size: 13px;
  }

  .role-badge{
    font-size: 11px;
  }

  .products-table{
    min-width: 1100px;
  }

  .sales-table{
    min-width: 980px;
  }

  .receipt-table{
    min-width: 1100px;
  }

  .turnover-kpis{
    grid-template-columns: 1fr;
  }

  .modal,
  .sales-modal{
    width: 100%;
    max-width: 100%;
  }

  .modal-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .modal-actions .btn,
  .modal-actions .btn-secondary,
  .modal-btn{
    width: 100%;
  }

  .save-status{
    margin-right: 0;
    margin-bottom: 6px;
  }
}

@media (max-width:700px){
  #searchForm.receipt-toolbar{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  #searchForm.receipt-toolbar #searchField{
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  #searchForm.receipt-toolbar #searchBy,
  #searchForm.receipt-toolbar #findBtn{
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px){
  .products-toolbar{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .products-toolbar #q{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .products-toolbar #stockFilter{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}