/* 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:#0e1116;
  --card:#151a22;
  --muted:#8b98a5;
  --text:#e6edf3;
  --primary:#2ea043;
  --primary-ink:#051b0e;
  --primary-weak:#1f6f2f;
  --danger:#d23c3c;
  --border:#273240;
  --focus:#5ab1ff;
}

*{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;
}

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

.app-header{
  background:linear-gradient(180deg, #111723 0%, #0e1116 100%);
  border-bottom:1px solid var(--border);
  padding:20px 0 14px;
}
.app-header h1{
  margin:0 0 6px;
  font-size:1.6rem;
  letter-spacing:.3px;
}
.subtitle{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

.app-footer{
  margin-top:36px;
  border-top:1px solid var(--border);
  background:#0f141c;
  padding:14px 0;
  color:var(--muted);
}

main{padding:16px 0 24px}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin:14px 0;
  box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.25);
}
.card h2{
  margin:0 0 12px;
  font-size:1.2rem;
}

.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:#0f141c;
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  outline:none;
  transition:border .15s, box-shadow .15s;
}
.field input:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(90,177,255,.15);
}

.toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
#search{
  flex:1 1 320px;
  background:#0f141c;
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  outline:none;
}
#search:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(90,177,255,.15);
}
.summary{
  color:var(--muted);
  font-weight:600;
  white-space:nowrap;
}

.table-wrap{
  overflow:auto;
  border-radius:10px;
  border:1px solid var(--border);
}
table.items{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
  background:#0f141c;
}
.items thead th{
  position:sticky;
  top:0;
  background:#0f141c;
  z-index:1;
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  font-size:.9rem;
  color:#b8c3cf;
}
.items tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);
  vertical-align:middle;
}
.items .num{ text-align:right; white-space:nowrap }
.items .qty{ width:180px }

tr.category-row td{
  background:#0f151d;
  color:#b8c3cf;
  font-weight:600;
  border-bottom:1px solid var(--border);
}
tr.hidden{ display:none }

.qty-control{
  display:flex; align-items:center; gap:8px; justify-content:flex-end;
}
.qty-control button{
  width:32px; height:32px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#0f141c;
  color:var(--text);
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .06s;
}
.qty-control button:active{ transform:translateY(1px) }
.qty-control button:hover{ border-color:#3a485e }
.qty-control input[type="number"]{
  width:72px; text-align:center;
  background:#0f141c;
  border:1px solid var(--border);
  color:var(--text);
  padding:6px 8px;
  border-radius:8px;
}
.qty-control input[type="number"]:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(90,177,255,.15);
  outline:none;
}

.actions{
  display:flex; gap:10px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap;
}
button.primary, button.secondary{
  padding:10px 14px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-weight:600;
}
button.primary{
  background:var(--primary);
  color:#eaffea;
  border-color:var(--primary-weak);
}
button.primary:disabled{
  background:#1f2a36; color:#8ea3b5; border-color:#263447; cursor:not-allowed;
}
button.secondary{
  background:#10151d;
  color:#c9d3de;
  border-color:#243141;
}
button.secondary:hover{ border-color:#3a485e }

.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.1) blur(6px);
  background: linear-gradient(180deg, rgba(17,23,35,0.92) 0%, rgba(14,17,22,0.92) 100%);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* 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:10px;
  }
  .product-card{
    background:#0f141c;
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px;
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name price"
      "sku stock"
      "qty qty"
      "sum sum";
    row-gap:8px;
    column-gap:10px;
  }
  .pc-name{ grid-area:name; font-weight:600; }
  .pc-price{ grid-area:price; text-align:right; color:#cfe7d6; font-weight:700 }
  .pc-sku{ grid-area:sku; color:var(--muted); font-size:.9rem }
  .pc-stock{ grid-area:stock; text-align:right; color:#a9b6c3; font-size:.9rem }
  .pc-qty{ grid-area:qty }
  .pc-sum{ grid-area:sum; text-align:right; color:#cfe7d6; font-weight:700 }
  .label{
    display:inline-block; font-size:.78rem; color:#9cb1c4; border:1px solid var(--border);
    border-radius:999px; padding:1px 6px; margin-right:6px
  }
}

/* Sticky mini-cart at bottom (mobile) */
.sticky-cart{
  position: fixed;
  left:0; right:0; bottom:0;
  background:linear-gradient(180deg, #0f141c 0%, #0c1016 100%);
  border-top:1px solid var(--border);
  padding:8px 12px;
  display:none;
  align-items:center;
  justify-content:space-between;
  z-index:40;
}
.sticky-cart .summary{
  color:#cfe7d6; font-weight:700;
}
.sticky-cart .actions{
  margin:0;
}
.sticky-cart .primary{
  padding:8px 12px;
}

@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:36px; height:36px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#10151d;
  color:#c9d3de;
  cursor:pointer;
}
.pagination button:hover{ border-color:#3a485e }
.pagination button[disabled]{ opacity:.6; cursor:not-allowed }
.pagination .active{
  background:var(--primary);
  border-color:var(--primary-weak);
  color:#eaffea;
}

/* 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(15,20,28,0) 0%, rgba(15,20,28,.85) 60%, rgba(15,20,28,1) 100%);
}

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