/* ====== Reset / base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: #f6f7fb;
  color:#0f172a;
}

/* ====== Layout ====== */
.topbar{
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px;
  background:#ffffffcc;
  backdrop-filter: blur(10px);
  border-bottom:1px solid #e5e7eb;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  background:#111827; color:white; font-weight:800;
}
.title{font-weight:800; letter-spacing:.2px}
.subtitle{font-size:12px; color:#64748b}

.top-actions{display:flex; gap:10px; flex-wrap:wrap}

.container{
  max-width:1100px;
  margin:18px auto;
  padding:0 16px 30px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.panel{
  background:white;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  padding:14px 14px 12px;
}
.panel-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:2px 4px 10px;
}
h2{
  margin:0;
  font-size:16px;
}

/* ====== Fields ====== */
.grid{
  display:grid;
  grid-template-columns: 1.1fr 2fr 1.4fr;
  gap:12px;
}
@media (max-width: 960px){
  .grid{grid-template-columns:1fr; }
  .topbar{position:static}
}
.field{display:flex; flex-direction:column; gap:6px}
.field > span{font-size:12px; color:#334155; font-weight:700}
.field input[type="text"]{
  height:42px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:0 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
.field input[type="text"]:focus{
  border-color:#94a3b8;
  box-shadow:0 0 0 3px rgba(148, 163, 184, .25);
}
.field.file input[type="file"]{
  width:100%;
}
.file-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.hint{font-size:12px; color:#64748b}
code{background:#f1f5f9; padding:2px 6px; border-radius:8px}

/* ====== Buttons ====== */
.btn{
  height:40px;
  border-radius:12px;
  padding:0 12px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  cursor:pointer;
  font-weight:700;
  color:#0f172a;
}
.btn:hover{background:#f8fafc}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.primary{
  border-color:#111827;
  background:#111827;
  color:white;
}
.btn.primary:hover{filter:brightness(1.05)}

/* ====== Status ====== */
.status{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid;
  white-space:nowrap;
}
.status.info{background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a}
.status.ok{background:#ecfdf5; border-color:#bbf7d0; color:#065f46}
.status.warn{background:#fffbeb; border-color:#fde68a; color:#92400e}
.status.err{background:#fef2f2; border-color:#fecaca; color:#7f1d1d}

/* ====== Search suggestions ====== */
.search-wrap{position:relative}
.suggestions{
  position:absolute;
  top:44px; left:0; right:0;
  background:white;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 10px 25px rgba(15,23,42,.08);
  max-height:320px;
  overflow:auto;
  padding:6px;
}
.suggestions.hidden{display:none}
.sug{
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  display:flex; justify-content:space-between; gap:12px;
}
.sug:hover, .sug.active{background:#f1f5f9}
.sug .left{display:flex; flex-direction:column; gap:3px}
.sug .code{font-weight:800; font-size:13px}
.sug .desc{font-size:12px; color:#64748b}
.sug .price{font-weight:800; font-size:13px}

/* ====== Table ====== */
.table-wrap{overflow:auto}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table thead th{
  text-align:left;
  font-size:12px;
  color:#334155;
  padding:10px 10px;
  border-bottom:1px solid #e5e7eb;
}
.table tbody td{
  padding:10px 10px;
  border-bottom:1px solid #f1f5f9;
  vertical-align:middle;
}
.table tbody tr:hover{background:#fafafa}
.table .num{text-align:right}
.table .center{text-align:center}
.table tbody tr.empty td{
  text-align:center;
  color:#64748b;
  padding:18px 10px;
}

.qty{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:6px 8px;
}
.qty button{
  width:30px; height:30px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-weight:900;
  cursor:pointer;
}
.qty button:hover{background:#f8fafc}
.qty b{min-width:26px; display:inline-block}

.icon-btn{
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
}
.icon-btn:hover{background:#f8fafc}

/* ====== Totals ====== */
.totals{display:flex; gap:10px; flex-wrap:wrap}
.pill{
  display:flex; align-items:center; gap:8px;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  color:#334155;
}
.pill b{font-size:13px; color:#0f172a}
.pill.total{
  background:#111827;
  border-color:#111827;
  color:white;
}
.pill.total b{color:white}

/* ====== Saved list ====== */
.saved-list{display:flex; flex-direction:column; gap:8px; padding:4px}
.saved-item{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:10px;
  display:flex; justify-content:space-between; gap:10px; align-items:center;
}
.saved-item .meta{display:flex; flex-direction:column; gap:2px}
.saved-item .meta b{font-size:13px}
.saved-item .meta span{font-size:12px; color:#64748b}
.saved-item .actions{display:flex; gap:8px; flex-wrap:wrap}

/* ====== Footer ====== */
.footer{
  max-width:1100px;
  margin:0 auto 22px;
  padding:0 16px;
  color:#64748b;
  font-size:12px;
}