* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 "Segoe UI", Arial, sans-serif; color: #222; background: #f3f4f6; }
a { color: #1f5fa8; text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; margin: 4px 0 14px; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 18px 0 8px; }
main { padding: 16px; max-width: 1400px; margin: 0 auto; }

header.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; background: #2d3748; color: #fff; padding: 8px 16px; }
header.top .brand { font-weight: 600; font-size: 16px; }
header.top nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
header.top nav a { color: #e2e8f0; padding: 6px 10px; border-radius: 4px; }
header.top nav a:hover { background: #4a5568; text-decoration: none; }
header.top nav a.on { background: #fff; color: #2d3748; }
header.top .user a { color: #cbd5e0; }

.card { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
.card.narrow { max-width: 380px; margin: 40px auto; }
.muted { color: #777; }
.msg { padding: 10px 12px; border-radius: 4px; margin-bottom: 12px; }
.msg.ok { background: #e6f4ea; border: 1px solid #a8d5b5; }
.msg.err { background: #fdecea; border: 1px solid #f1b0a9; }

label { display: flex; flex-direction: column; font-size: 12px; color: #555; gap: 3px; }
label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: #222; }
input, select, button { font: inherit; padding: 6px 8px; border: 1px solid #bbb; border-radius: 4px; background: #fff; color: #222; min-width: 0; }
input[readonly] { background: #f3f4f6; }
button, .btn { background: #1f5fa8; color: #fff; border-color: #1f5fa8; cursor: pointer; padding: 6px 14px; border-radius: 4px; display: inline-block; }
button:hover, .btn:hover { background: #174a85; text-decoration: none; }
.btn.light { background: #fff; color: #1f5fa8; }
.btn.light.on { background: #1f5fa8; color: #fff; }
h3 .muted { font-weight: normal; font-size: 13px; }
button.link { background: none; border: 0; color: #1f5fa8; padding: 0; }
button.link.danger { color: #c0392b; }
button.danger { background: #c0392b; border-color: #c0392b; }
button.danger:hover { background: #a93226; }
.card.danger-zone { border-color: #e8b4ae; }
.narrow-form { max-width: 560px; margin-top: 12px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 12px; align-items: end; }
.grid .wide { grid-column: span 2; }
.grid1 { display: grid; gap: 12px; }
.grid .full { grid-column: 1 / -1; }

/* Multi-line item tables */
table.lines { margin-bottom: 6px; }
table.lines td { padding: 3px 4px; vertical-align: middle; }
table.lines input, table.lines select { width: 100%; min-width: 80px; }
table.lines tbody { counter-reset: line; }
table.lines tbody tr { counter-increment: line; }
table.lines td.sno { width: 30px; text-align: center; color: #777; }
table.lines td.sno::before { content: counter(line); }
table.lines tfoot td { background: #f6f7f9; font-weight: 600; }
button.del-line { background: #fff; color: #c0392b; border-color: #e2b3ad; padding: 2px 9px; font-size: 16px; line-height: 1; }
button.del-line:hover { background: #fdecea; }
input.r { text-align: right; }
.actions { display: flex; gap: 10px; align-items: center; }
form.inline { display: inline; }
form.pay { display: flex; gap: 4px; flex-wrap: wrap; }
form.pay input[type=number] { width: 100px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0 10px; }

.scroll { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 12px; border: 1px solid #b8c0cc; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
table.list th, table.list td { border: 1px solid #d5dae1; padding: 6px 9px; text-align: left; vertical-align: top; }
table.list th { background: #2d3748; color: #fff; font-weight: 700; white-space: nowrap; border-color: #4a5568; letter-spacing: .2px; }
table.list tr:nth-child(even) td { background: #f7f9fb; }
table.list tr:hover td { background: #eef4fb; }
table.list tr.tot td { font-weight: 700; background: #e2e8f0; border-top: 2px solid #718096; }
table.list tr.ok td, table.list tr.ok:hover td { background: #c6f6d5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
table.list .muted { font-size: 12px; }
table.lines th { background: #edf0f4; color: #222; border-color: #d5dae1; }
h2, h3 { font-weight: 700; color: #1a202c; }
h3 { border-left: 4px solid #1f5fa8; padding-left: 8px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge.ok { background: #e6f4ea; color: #276738; }
.badge.part { background: #fff4d6; color: #8a5a00; }
.badge.due { background: #fdecea; color: #a93226; }
.r { text-align: right !important; }
.nowrap { white-space: nowrap; }
.neg { color: #c0392b; }
.warn { color: #b7791f; font-weight: 600; }

.stock-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.stat { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 8px 14px; min-width: 130px; }
.stat span { display: block; font-size: 12px; color: #666; }
.stat b { font-size: 18px; }
.stat.big b { font-size: 26px; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.tabs a { padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
.tabs a.on { background: #2d3748; color: #fff; border-color: #2d3748; }

.report-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.report-links .card { margin: 0; font-weight: 600; }

/* Plain print pages */
body.plain { background: #fff; }
body.plain main { max-width: none; }
.ptitle { margin: 0; font-size: 16px; }
.psub { margin: 2px 0 10px; }
.slip { max-width: 720px; margin: 0 auto; }
.slip h2 { text-align: center; letter-spacing: 1px; }
table.kv { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
table.kv th, table.kv td { border: 1px solid #999; padding: 6px 8px; text-align: left; }
table.kv th { width: 18%; background: #f3f3f3; }
.sign { display: flex; justify-content: space-between; margin-top: 60px; }
.sign span { border-top: 1px solid #333; padding-top: 4px; min-width: 150px; text-align: center; }

@media print {
  header.top, .filters, .no-print { display: none !important; }
  main { padding: 0; }
  table.list th, table.list td { border-color: #666; padding: 3px 5px; font-size: 12px; }
  table.list th { background: #eee !important; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .scroll { overflow: visible; }
}

@media (max-width: 640px) {
  main { padding: 10px; }
  .grid .wide { grid-column: auto; }
}