/* Fix table overflow and wrapping (desktop) */
html, body { overflow-x: hidden; }

.items td:first-child, .items th:first-child {
  white-space: normal;          /* allow wrapping for long names */
  overflow-wrap: anywhere;      /* break long tokens if needed */
  word-break: break-word;
}
:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --surface:#f8fbff;
  --muted:#6b7280;
  --text:#101828;
  --primary:#2563eb;
  --primary-ink:#1d4ed8;
  --primary-weak:#93c5fd;
  --danger:#dc2626;
  --border:#d6e2f3;
  --focus:#82b5ff;
  --shadow-soft:0 18px 45px rgba(15,23,42,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

.app-header{
  background:linear-gradient(130deg, #e8efff 0%, #fefefe 70%, #f8fbff 100%);
  border-bottom:1px solid rgba(148,163,184,.4);
  padding:28px 0 18px;
}
.app-header h1{
  margin:0 0 6px;
  font-size:1.8rem;
  letter-spacing:.3px;
  color:var(--text);
}
.subtitle{
  margin:0;
  color:#566076;
  font-size:1rem;
}

.app-footer{
  margin-top:36px;
  border-top:1px solid rgba(148,163,184,.35);
  background:#fdfdff;
  padding:18px 0;
  color:#64748b;
}

main{padding:16px 0 24px}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  margin:18px 0;
  box-shadow:var(--shadow-soft);
}
.card h2{
  margin:0 0 12px;
  font-size:1.2rem;
  color:var(--text);
}

.file-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.hint{
  margin-top:10px;
  color:var(--muted);
  font-size:.9rem;
}
.muted{color:var(--muted);font-size:.9rem;margin-top:8px}

.grid{
  display:grid;
  gap:12px;
}
.grid-3{
  grid-template-columns: repeat(3, 1fr);
}
.field{display:flex; flex-direction:column; gap:6px}
.field-wide{grid-column:1/-1}
.field span{color:var(--muted); font-size:.9rem}
.field input{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 14px;
  border-radius:12px;
  outline:none;
  transition:border .15s, box-shadow .15s, background .15s;
}
.field input:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
  background:#fff;
}
.field input::placeholder{
  color:#94a3b8;
}

.toolbar{
  display:flex;
  gap:16px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.filter-control{
  flex:1 1 360px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--primary);
  background:#e7efff;
  border-radius:999px;
  padding:4px 12px;
  font-weight:700;
  width:max-content;
}
#search{
  width:100%;
  flex:1 1 auto;
  background:#fff;
  border:1px solid transparent;
  color:var(--text);
  padding:14px 16px;
  border-radius:12px;
  outline:none;
  box-shadow:0 12px 30px rgba(37,99,235,.12);
}
#search:focus{
  border-color:#bfdbfe;
  box-shadow:0 0 0 3px rgba(37,99,235,.2), 0 10px 24px rgba(37,99,235,.18);
}
.summary{
  color:#475467;
  font-weight:600;
  white-space:nowrap;
}

.table-wrap{
  overflow:auto;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:var(--shadow-soft);
}
table.items{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
  background:#fff;
}
.items thead th{
  position:sticky;
  top:0;
  background:#eef2ff;
  z-index:1;
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid #dfe7fb;
  font-size:.9rem;
  color:#475467;
}
.items tbody td{
  padding:12px 14px;
  border-bottom:1px solid #edf1f7;
  vertical-align:middle;
  color:#1f2937;
}
.items .num{ text-align:right; white-space:nowrap }
.items .qty{ width:180px }

tr.category-row td{
  background:#f8fbff;
  color:#334155;
  font-weight:600;
  border-bottom:1px solid #e1e8f5;
}
tr.hidden{ display:none }

.qty-control{
  display:flex; align-items:center; gap:8px; justify-content:flex-end;
}
.qty-control button{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid #cfd8ea;
  background:#f3f6ff;
  color:#0f172a;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .06s, box-shadow .15s;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.qty-control button:active{ transform:translateY(1px) }
.qty-control button:hover{ border-color:#94a3b8; background:#e0e7ff; }
.qty-control input[type="number"]{
  width:78px; text-align:center;
  background:#fff;
  border:1px solid #d5def2;
  color:#0f172a;
  padding:8px 10px;
  border-radius:10px;
  font-weight:600;
}
.qty-control input[type="number"]:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(37,99,235,.2);
  outline:none;
}

.actions{
  display:flex; gap:10px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap;
}
button.primary, button.secondary{
  padding:12px 18px; border-radius:12px; border:1px solid transparent; cursor:pointer; font-weight:600;
  transition:box-shadow .2s, transform .15s, background .2s;
}
button.primary{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary-ink);
  box-shadow:0 15px 30px rgba(37,99,235,.25);
}
button.primary:hover:not(:disabled){
  transform:translateY(-1px);
}
button.primary:disabled{
  background:#dbe3f5; color:#94a3b8; border-color:#dbe3f5; cursor:not-allowed; box-shadow:none;
}
button.secondary{
  background:#eef2ff;
  color:#1d3a6d;
  border-color:transparent;
}
button.secondary:hover{ border-color:#c7d2fe; background:#dfe7ff }

.badge{
  display:inline-block;
  padding:2px 8px; border-radius:999px; font-size:.8rem; border:1px solid var(--border); color:#9cb1c4;
}

@media (max-width: 920px){
  .grid-3{ grid-template-columns:1fr 1fr }
  .items .qty{ width:160px }
}
@media (max-width: 720px){
  .grid-3{ grid-template-columns:1fr }
  .toolbar{ gap:8px }
  #search{ flex:1 1 100% }
  .summary{ width:100%; text-align:left }
  .items{ min-width:100% }
  .items thead th, .items tbody td{ padding:10px 10px }
}
/* === Production polish: sticky header, mobile cards, sticky cart, pagination === */

/* Sticky search/tool bar */
#searchSection{
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: saturate(1.2) blur(10px);
  background: rgba(255,255,255,.96);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 18px 45px rgba(15,23,42,.12);
}

/* Helpers to toggle UI per breakpoint */
.show-on-mobile{ display:none !important }
.hide-on-mobile{ display:initial !important }

@media (max-width: 720px){
  .show-on-mobile{ display:initial !important }
  .hide-on-mobile{ display:none !important }
  body{ padding-bottom: 66px } /* space for sticky cart bar */
}

/* Mobile product cards layout (instead of wide table) */
#itemsList{ display:none }

@media (max-width: 720px){
  .table-wrap, table.items{ display:none }
  #itemsList{
    display:grid;
    gap:12px;
  }
  .product-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name price"
      "sku stock"
      "qty qty"
      "sum sum";
    row-gap:8px;
    column-gap:10px;
    box-shadow:var(--shadow-soft);
  }
  .pc-name{ grid-area:name; font-weight:600; color:#0f172a; }
  .pc-price{ grid-area:price; text-align:right; color:var(--primary); font-weight:700 }
  .pc-sku{ grid-area:sku; color:#64748b; font-size:.9rem }
  .pc-stock{ grid-area:stock; text-align:right; color:#475467; font-size:.9rem }
  .pc-qty{ grid-area:qty }
  .pc-sum{ grid-area:sum; text-align:right; color:var(--primary); font-weight:700 }
  .label{
    display:inline-block; font-size:.78rem; color:#1d4ed8; border:1px solid #bfdbfe;
    border-radius:999px; padding:2px 8px; margin-right:6px; background:#e0e7ff;
  }
}

/* Sticky mini-cart at bottom (mobile) */
.sticky-cart{
  position: fixed;
  left:0; right:0; bottom:0;
  background:rgba(255,255,255,.96);
  border-top:1px solid rgba(148,163,184,.35);
  padding:10px 16px;
  display:none;
  align-items:center;
  justify-content:space-between;
  z-index:40;
  backdrop-filter:blur(12px);
  box-shadow:0 -18px 40px rgba(15,23,42,.15);
}
.sticky-cart .summary{
  color:#0f172a; font-weight:700;
}
.sticky-cart .actions{
  margin:0;
  width:140px;
}
.sticky-cart .primary{
  padding:10px 16px;
  width:100%;
}
.sticky-order-btn{
  position:relative;
}
.sticky-order-btn.ready{
  box-shadow:0 12px 32px rgba(37,99,235,.35);
}
.sticky-order-btn[aria-disabled="true"]{
  background:#e2e8f0;
  color:#94a3b8;
  border-color:#e2e8f0;
  box-shadow:none;
}
.sticky-order-btn.is-busy{
  opacity:.85;
  cursor:progress;
}

@media (max-width: 720px){
  .sticky-cart{ display:flex }
}

/* Pagination */
.pagination{
  display:flex; gap:6px; justify-content:center; align-items:center;
  padding:10px 0; flex-wrap:wrap;
}
.pagination button{
  min-width:40px; height:38px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid #d6e2f3;
  background:#f8fbff;
  color:#475467;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.pagination button:hover{ border-color:#94a3b8; background:#eef4ff }
.pagination button[disabled]{ opacity:.5; cursor:not-allowed }
.pagination .active{
  background:var(--primary);
  border-color:var(--primary-ink);
  color:#fff;
}

/* Narrow table tweaks (desktop/tablet) */
.items thead th, .items tbody td{
  white-space:nowrap;
}
.table-wrap::after{
  content:"";
  position:sticky; right:0; top:0; bottom:0; width:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(244,247,255,.85) 60%, rgba(244,247,255,1) 100%);
}

/* Admin-only visibility helper (if needed) */
.only-admin{ display:none }