:root {
    --bg: #f5f6f8;
    --card: #fff;
    --text: #1f2933;
    --muted: #6b7280;
    --border: #e5e7eb;
    --primary: #d4001a;
    --ok: #15803d;
    --ok-bg: #dcfce7;
    --warn: #a16207;
    --warn-bg: #fef9c3;
    --err: #b91c1c;
    --err-bg: #fee2e2;
    --info: #1d4ed8;
    --info-bg: #dbeafe;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .75rem; }
code { background: #eef0f3; padding: 0 .25em; border-radius: 3px; }

.topbar { display: flex; align-items: center; gap: 1.5rem; padding: .6rem 1.5rem; background: #111827; color: #fff; }
.topbar .brand { font-weight: 700; color: #fff; }
.topbar nav { display: flex; gap: 1rem; flex: 1; }
.topbar nav a { color: #d1d5db; }
.topbar nav a:hover { color: #fff; }
.topbar form { margin: 0; }
.topbar .user { color: #9ca3af; font-size: .85rem; }

main { padding: 1.5rem; max-width: 1600px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.narrow { max-width: 420px; margin: 3rem auto; }

.flash { padding: .6rem .9rem; border-radius: 6px; margin-bottom: 1rem; white-space: pre-wrap; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.error { background: var(--err-bg); color: var(--err); }

form.inline { display: inline; }
.row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .75rem; }
.field label { font-weight: 600; font-size: .85rem; }
.field .hint { color: var(--muted); font-size: .8rem; }
.field .error { color: var(--err); font-size: .8rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 1.25rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
    padding: .4rem .55rem; border: 1px solid #cbd5e1; border-radius: 5px; font: inherit; background: #fff; width: 100%;
}
.row input, .row select { width: auto; }
textarea { font-family: ui-monospace, Consolas, monospace; font-size: 12px; min-height: 8rem; }
textarea.tall { min-height: 22rem; }
label.check { display: flex; align-items: center; gap: .4rem; font-weight: normal; }

.btn, button { display: inline-block; padding: .42rem .8rem; border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; color: var(--text); font: inherit; cursor: pointer; }
.btn:hover, button:hover { background: #f1f5f9; text-decoration: none; }
.btn.primary, button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover, button.primary:hover { filter: brightness(.93); }
button.danger { color: var(--err); border-color: #fca5a5; }
button.small, .btn.small { padding: .15rem .45rem; font-size: .8rem; }
button:disabled { opacity: .5; cursor: wait; }

table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { text-align: left; padding: .45rem .55rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: #fafafa; white-space: nowrap; }
tr.muted td { color: var(--muted); }
td .sub { display: block; color: var(--muted); font-size: .8rem; }
td.actions { white-space: nowrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }

.badge { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; background: #eef0f3; color: var(--muted); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.info { background: var(--info-bg); color: var(--info); }

pre.log { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: 8px; white-space: pre-wrap; font-size: 12px; max-height: 75vh; overflow: auto; }

.tabs { display: flex; gap: .25rem; margin-bottom: .5rem; }
.tab { border-radius: 5px 5px 0 0; }
.tab.active { background: #111827; border-color: #111827; color: #fff; }
.products-table td { padding: .25rem; }
.products-table input, .products-table textarea { padding: .25rem .35rem; font-size: 12px; font-family: inherit; min-height: 0; }
.products-table td:nth-child(1) input { min-width: 14rem; }
.products-table td:nth-child(2) input { min-width: 14rem; }
.products-table textarea { min-width: 22rem; height: 3.2rem; }
.template-editor { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.template-editor textarea.tall { height: calc(297mm * .6); }
.proforma-preview { width: calc(210mm * .6); height: calc(297mm * .6); overflow: hidden; border: 1px solid var(--border); border-radius: 5px; background: #fff; }
.proforma-preview iframe { width: 210mm; height: 297mm; border: 0; transform: scale(.6); transform-origin: 0 0; }
@media (max-width: 1000px) { .template-editor { grid-template-columns: 1fr; } }
.products-table td:nth-child(4) input, .products-table td:nth-child(8) input, .products-table td:nth-child(9) input, .products-table td:nth-child(10) input { width: 5rem; }
.pager { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; }
.muted { color: var(--muted); }
.error-text { color: var(--err); font-size: .8rem; }