:root{
    --primary:#0a74da;
    --bg:#ffffff;
    --text:#111
    --muted:#666;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial;
    background:#f6f7fb;color:var(--text)}
.topbar{display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px;
    background:var(--primary);
    color:#fff}

.div1{font-size:1.25rem;font-weight:700}
.div2{font-size:1rem;font-weight:400}

.inline-form{display:flex;gap:8px}
.inline-form input{padding:8px;border-radius:4px;border:1px solid rgba(255,255,255,0.2)}

.menu{display:flex;gap:8px;padding:10px;background:#fff;border-bottom:1px solid #e6e6e6;flex-wrap:wrap}
.menu .item{padding:8px 12px;background:#fff;border:1px solid #eee;border-radius:6px}

/* To test container */
.container{max-width:1000px;
  margin:10px auto;
  padding:16px;
  background:#fff;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,0.04);
  min-height:60vh}


  /* To test grid */
.grid{display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px}
.grid label{display:block}

/* To test actions */
.actions{margin-top:12px}
/* Buttons */
.btn{padding:8px 12px;border-radius:4px;border:1px solid #d0d7df;background:#f7f9fb;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff;border:0}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #e6eef5;padding:8px}

.mainframe{padding:16px;min-height:60vh}
.footer{padding:10px;background:#0752c9;color:#fff;text-align:center}

.notice{padding:8px;border-radius:6px;margin:8px 0}
.notice.error{background:#fff1f1;border:1px solid #e0a1a1}
.notice.success{background:#e6ffed;border:1px solid #8fd19e}

.suggestion-box{position:absolute;background:#fff;border:1px solid #ddd;max-height:220px;overflow:auto;z-index:1000;width:100%}
.suggestion-item{padding:8px;cursor:pointer}
.suggestion-item.highlight{background:var(--primary);color:#fff}

.salesTable th, #salesTable td {
  white-space: nowrap;
  vertical-align: middle;
  padding: 6px 8px;
}
.salesTable td:nth-child(3), /* Quantity column */
#salesTable th:nth-child(3) {
  text-align: center;
  width: 80px;
}
.salesTable td:nth-child(5), /* Amount column */
.salesTable th:nth-child(5) {
  text-align: right;
  width: 120px;
}
/*
.sales-table{width:100%;border-collapse:collapse;margin-top:8px}
.sales-table th,.sales-table td{border:1px solid #eee;padding:8px;text-align:left}
*/
.header-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sales-table input[type="text"], .sales-table input[type="number"]{width:100%}
.msg-success{background:#e6ffed;border:1px solid #8fd19e;padding:8px;margin:8px 0;color:#0a5}
.msg-error{background:#fff1f1;border:1px solid #e0a1a1;padding:8px;margin:8px 0;color:#a00}
.print-link{margin-left:12px}
@media(max-width:700px){ .form-grid{grid-template-columns:1fr} }