.sup-wrap{display:flex;flex-direction:column;gap:16px}
.sup-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.sup-head h3{margin:0 0 4px}
.sup-tabs{display:flex;gap:8px;flex-wrap:wrap}
.sup-tab{border:1px solid #e5e7eb!important;background:#fff!important;color:#111827!important;border-radius:999px;padding:8px 13px;cursor:pointer}
.sup-tab.active{background:#111827!important;color:#fff!important}
.sup-btn{border:0!important;border-radius:10px;padding:9px 13px;cursor:pointer;font-weight:600;background:#e5e7eb!important;color:#111827!important}
.sup-primary{background:#111827!important;color:#fff!important}
.sup-success{background:#dcfce7!important;color:#166534!important}
.sup-danger{background:#fee2e2!important;color:#991b1b!important}
.sup-toolbar{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.sup-search{min-width:280px;padding:10px 12px;border:1px solid #d1d5db;border-radius:10px}
.sup-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sup-kpi{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px}
.sup-kpi span{display:block;font-size:12px;color:#64748b}
.sup-kpi strong{display:block;margin-top:5px;font-size:20px}
.sup-table-wrap{overflow:auto;background:#fff;border:1px solid #e5e7eb;border-radius:14px}
.sup-table{width:100%;border-collapse:collapse}
.sup-table th,.sup-table td{padding:11px 12px;border-bottom:1px solid #f1f5f9;text-align:left;white-space:nowrap}
.sup-table th{font-size:12px;color:#64748b}
.sup-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700}
.sup-status-draft{background:#f3f4f6;color:#475569}
.sup-status-submitted{background:#fef3c7;color:#92400e}
.sup-status-approved{background:#dbeafe;color:#1d4ed8}
.sup-status-ordered,.sup-status-partially_received{background:#ede9fe;color:#6d28d9}
.sup-status-received{background:#dcfce7;color:#166534}
.sup-status-cancelled{background:#fee2e2;color:#991b1b}
.sup-modal-bg{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.sup-modal{width:min(1000px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;padding:20px}
.sup-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.sup-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.sup-grid input,.sup-grid select,.sup-grid textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #d1d5db;border-radius:10px;background:#fff;color:#111827}
.sup-full{grid-column:1/-1}
.sup-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:18px}
.sup-error{padding:10px 12px;background:#fee2e2;color:#991b1b;border-radius:10px}
.sup-items{margin-top:18px}
.sup-item-row{display:grid;grid-template-columns:2fr .7fr .8fr .7fr .7fr auto;gap:8px;margin-bottom:8px;align-items:end}
.sup-item-row input,.sup-item-row select{width:100%;box-sizing:border-box;padding:9px;border:1px solid #d1d5db;border-radius:9px}
.sup-empty{padding:30px;text-align:center;color:#64748b}
@media(max-width:800px){
  .sup-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sup-grid{grid-template-columns:1fr}
  .sup-full{grid-column:auto}
  .sup-item-row{grid-template-columns:1fr 1fr}
}

#purchaseBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  margin-left:8px;
  border-radius:999px;
  background:#dc2626 !important;
  color:#fff !important;
  font-size:11px;
  font-weight:700;
}

#purchaseBadge.hidden{
  display:none !important;
}


/* =====================================================
   SUPPLIERS MOBILE UX V2
   ===================================================== */

@media(max-width:900px){

  #suppliers,
  #suppliers *{
    box-sizing:border-box;
  }

  #suppliers .sup-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #suppliers .sup-head{
    width:100% !important;
    align-items:stretch !important;
  }

  #suppliers .sup-tabs{
    width:100% !important;
  }

  #suppliers .sup-tab{
    min-height:42px !important;
  }

  #suppliers .sup-toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    gap:8px !important;
  }

  #suppliers .sup-search{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:44px !important;
    min-height:44px !important;
  }

  #suppliers .sup-toolbar .sup-btn{
    width:100% !important;
    min-height:44px !important;
  }

  #suppliers .sup-table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  #suppliers .sup-table{
    width:max-content !important;
    min-width:760px !important;
  }


  /* Modal */

  #suppliers .sup-modal-bg{
    align-items:flex-end !important;
    padding:0 !important;
  }

  #suppliers .sup-modal{
    width:100% !important;
    max-width:100% !important;
    max-height:94dvh !important;
    margin:0 !important;
    padding:16px 14px 22px !important;
    border-radius:18px 18px 0 0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  #suppliers .sup-modal-head{
    position:sticky;
    top:-16px;
    z-index:4;
    background:#fff;
    padding:16px 0 10px !important;
  }

  #suppliers .sup-grid{
    grid-template-columns:1fr !important;
  }

  #suppliers .sup-item-row{
    grid-template-columns:1fr 1fr !important;
    width:100% !important;
  }

  #suppliers .sup-actions{
    gap:8px !important;
  }

  #suppliers .sup-actions .sup-btn{
    flex:1 1 140px !important;
    min-height:44px !important;
  }
}


@media(max-width:520px){

  #suppliers .sup-kpis{
    grid-template-columns:1fr 1fr !important;
  }

  #suppliers .sup-item-row{
    grid-template-columns:1fr !important;
  }
}

/* =====================================================
   SUPPLIERS MOBILE UX V2
   ===================================================== */

@media(max-width:900px){

  #suppliers,
  #suppliers *{
    box-sizing:border-box;
  }

  .sup-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .sup-head{
    width:100% !important;
    max-width:100% !important;
  }

  .sup-tabs{
    width:100% !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }

  .sup-tab{
    flex:0 0 auto !important;
    min-height:42px !important;
  }

  .sup-toolbar{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .sup-search{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
  }

  .sup-toolbar .sup-btn{
    width:100% !important;
    min-height:44px !important;
  }

  .sup-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .sup-table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .sup-table{
    width:max-content !important;
    min-width:760px !important;
  }

  .sup-modal-bg{
    padding:0 !important;
    align-items:flex-end !important;
  }

  .sup-modal{
    width:100% !important;
    max-width:100% !important;
    max-height:92dvh !important;
    margin:0 !important;
    padding:16px 14px 22px !important;
    border-radius:18px 18px 0 0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  .sup-modal-head{
    position:sticky;
    top:-16px;
    z-index:4;
    background:#fff;
    padding-top:16px;
    padding-bottom:10px;
  }

  .sup-grid{
    grid-template-columns:1fr !important;
  }

  .sup-item-row{
    grid-template-columns:1fr !important;
    padding:10px 0 !important;
    border-bottom:1px solid #eef2f7;
  }

  .sup-actions{
    width:100% !important;
  }

  .sup-actions .sup-btn{
    flex:1 1 140px !important;
    min-height:44px !important;
  }
}

@media(max-width:520px){

  .sup-kpis{
    grid-template-columns:1fr 1fr !important;
  }

  .sup-table{
    min-width:700px !important;
  }
}