/* Quinprint MIS design system.
   Fonts: Sora for headings (600, 700), Work Sans for body (400 to 600).
   Grape is the primary action and the active nav item. Dark grape marks
   margin figures and secondary button text. Wisteria and Thistle are
   borders and selected states; Magnolia is the selected fill. The flag
   colours are for below-floor warnings and nothing else. */

:root {
  --grape: #7340B5;
  --grape-dark: #4E2A80;
  --wisteria: #B9A0DA;
  --thistle: #DCD0ED;
  --magnolia: #EEE8F6;
  --bg: #F7F4FB;
  --card: #FFFFFF;
  --card-border: #E6E0EF;
  --text: #06070E;
  --text-2: #5E5E66;
  --flag-text: #7A3E00;
  --flag-bg: #FFE9C7;
  --ok-text: #1E4D2B;
  --ok-bg: #DDF3E4;
  --error-text: #7F1D1D;
  --error-bg: #FDE2E2;
  --radius: 16px;
  --radius-sm: 10px;
  --touch: 44px;
  --font-head: "Sora", system-ui, sans-serif;
  --font-body: "Work Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; margin: 0 0 .5rem; color: var(--text); }
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1rem; }
a { color: var(--grape-dark); }
.muted { color: var(--text-2); }
.small { font-size: .875rem; }

/* Numbers: right-aligned, tabular figures */
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.margin { color: var(--grape-dark); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Top bar */
.topbar { background: var(--card); border-bottom: 1px solid var(--card-border); }
.topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 64px;
}
.brand { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; color: var(--grape-dark); text-decoration: none; padding: 10px 0; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 14px;
  border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 500;
}
.nav a:hover { background: var(--magnolia); }
.nav a.active { background: var(--grape); color: #fff; }
.whoami { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 0; }
.whoami-name { font-size: .9375rem; }
@media (max-width: 720px) {
  .nav { order: 3; flex-basis: 100%; padding-bottom: 8px; }
  .whoami { margin-left: auto; }
  .whoami-name { display: none; }
}

/* Page */
.page { max-width: 1280px; margin: 0 auto; padding: 24px 16px 48px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-head h1 { margin-bottom: .25rem; }
.page-head p { margin: 0; }
.narrow { max-width: 560px; }

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 20px;
}
.card + .card { margin-top: 16px; }
.card-link { display: block; text-decoration: none; color: inherit; min-height: 88px; }
.card-link:hover { border-color: var(--wisteria); }
.card-grape { background: var(--grape); border-color: var(--grape); color: #fff; }
.card-grape h2, .card-grape h3, .card-grape .muted { color: #fff; }
.card-grape .muted { opacity: .85; }
.card-selected { background: var(--magnolia); border-color: var(--wisteria); }
.card h2:first-child, .card h3:first-child { margin-top: 0; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch); padding: 0 18px; border-radius: var(--radius-sm);
  font: 600 .9375rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.btn:focus-visible { outline: 3px solid var(--wisteria); outline-offset: 2px; }
.btn-primary { background: var(--grape); color: #fff; }
.btn-primary:hover { background: var(--grape-dark); }
.btn-secondary { background: var(--card); color: var(--grape-dark); border-color: var(--thistle); }
.btn-secondary:hover { background: var(--magnolia); border-color: var(--wisteria); }
.btn-danger { background: var(--card); color: var(--error-text); border-color: var(--thistle); }
.btn-danger:hover { background: var(--error-bg); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .875rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }

/* Choice buttons: quantity breaks, colour modes */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); min-width: var(--touch);
  padding: 0 16px; border: 1px solid var(--thistle); border-radius: var(--radius-sm); background: var(--card);
  font-weight: 500; font-variant-numeric: tabular-nums;
}
.choice input:checked + span { background: var(--magnolia); border-color: var(--grape); color: var(--grape-dark); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--wisteria); outline-offset: 2px; }

/* Forms */
.stack > * + * { margin-top: 16px; }
.field { display: block; }
.field > span, .field-label { display: block; font-weight: 500; margin-bottom: 6px; font-size: .9375rem; }
.field .help { display: block; margin-top: 4px; font-size: .8125rem; color: var(--text-2); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; min-height: var(--touch); padding: 10px 12px; border: 1px solid var(--thistle); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); font: 400 1rem/1.3 var(--font-body);
}
input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--grape); box-shadow: 0 0 0 3px var(--thistle); }
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--error-text); }
.field-error { color: var(--error-text); font-size: .8125rem; margin-top: 4px; }
.check { display: flex; align-items: center; gap: 12px; min-height: var(--touch); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--grape); flex: none; }
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row input { flex: 1 1 auto; }
.input-suffix { color: var(--text-2); white-space: nowrap; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 24px; }
.form-actions .right { margin-left: auto; display: flex; gap: 12px; }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--card-border); text-align: left; vertical-align: top; }
th { font-weight: 600; font-size: .8125rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .02em; }
tbody tr:hover { background: var(--bg); }
tr.total td { font-weight: 600; border-top: 2px solid var(--thistle); border-bottom: none; }
td .detail { display: block; color: var(--text-2); font-size: .8125rem; }
td.actions { white-space: nowrap; text-align: right; }
td.actions a { margin-left: 12px; }

/* Flags and flashes */
.flag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--flag-bg); color: var(--flag-text); font-weight: 600; font-size: .8125rem;
}
.flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-weight: 500; }
.flash-ok { background: var(--ok-bg); color: var(--ok-text); }
.flash-error { background: var(--error-bg); color: var(--error-text); }
.flash-info { background: var(--magnolia); color: var(--grape-dark); }
.empty { padding: 32px; text-align: center; color: var(--text-2); }

/* Login */
.login-wrap { min-height: calc(100vh - 64px - 72px); display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 420px; padding: 32px; }
.login-card h1 { margin-bottom: .25rem; }

/* Summary tiles */
.summary { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .summary { grid-template-columns: 1fr; } }
.summary .card { padding: 16px 20px; }
.summary .label { display: block; font-size: .8125rem; font-weight: 500; color: var(--text-2); margin-bottom: 4px; }
.summary .value { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.75rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.summary .sub { display: block; font-size: .8125rem; color: var(--text-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.card-grape .label, .card-grape .sub { color: #fff; opacity: .85; }
.summary .value.margin { color: var(--grape-dark); }

/* Calculator */
.calc { display: grid; gap: 16px; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); align-items: start; }
@media (max-width: 960px) { .calc { grid-template-columns: 1fr; } }
.calc-options fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-options legend { padding: 0; }
.calc-results > * + * { margin-top: 16px; }
.choice-custom span { padding-right: 8px; gap: 8px; }
.choice-custom input[type=number] { width: 96px; min-height: 32px; padding: 4px 8px; border-color: var(--thistle); }
.choice-custom input[type=number]:focus { box-shadow: none; }
.imposition { border-top: 1px solid var(--card-border); padding-top: 16px; }
.imposition-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 1rem; }
.imposition-summary strong { font-family: var(--font-head); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.breakdown td:first-child { font-weight: 500; white-space: nowrap; }
.breakdown td:nth-child(2) { max-width: 320px; }
.card-flagged { border-color: var(--flag-bg); }
.market .input-row { max-width: 260px; }
.market .label { display: block; font-size: .8125rem; font-weight: 500; color: var(--text-2); margin-bottom: 4px; }
.market .value { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.market-result { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; }
.market-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.market-note { margin: 12px 0 0; }
[aria-busy=true] { opacity: .6; transition: opacity .15s; }
.code { background: var(--magnolia); color: var(--grape-dark); padding: 12px 16px; border-radius: var(--radius-sm); font-size: .9375rem; overflow-x: auto; }

/* Forms in cards */
.form-card .form-grid + .form-actions { border-top: 1px solid var(--card-border); padding-top: 20px; }
.input-row .num { text-align: right; }

/* Tab strip under a page head */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: -8px 0 16px; border-bottom: 1px solid var(--card-border); }
.tabs a { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 16px; text-decoration: none; color: var(--text-2); font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); background: var(--magnolia); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tabs a.active { color: var(--grape-dark); border-bottom-color: var(--grape); font-weight: 600; }

/* Related rows inside a form */
.related { border-top: 1px solid var(--card-border); margin-top: 24px; padding-top: 20px; }
.related h2 { font-size: 1.0625rem; }
.related-table td { vertical-align: middle; }
.related-table input[type=number], .related-table input[type=text], .related-table select { min-height: 40px; padding: 6px 10px; }

/* Market pricing */
.pricing td { vertical-align: middle; }
.pricing .flag { margin-left: 6px; }

/* Inventory */
td.variance { color: var(--flag-text); font-weight: 600; }

/* In house or trade comparison */
.compare-table tr.cheaper td { background: var(--magnolia); }
.compare-table tr.cheaper td:first-child { border-left: 3px solid var(--grape); }
.cheaper-tag { color: var(--grape-dark); font-weight: 600; font-size: .8125rem; white-space: nowrap; }
.breaks-table input[type=text], .breaks-table input[type=number], .breaks-table select { min-height: 40px; padding: 6px 10px; }

/* Inventory decisions and reversals */
.card-pending { border-color: var(--flag-bg); background: #FFFBF3; }
.card-pending h2 { color: var(--flag-text); }
tr.reversed td { text-decoration: none; }
tr.reversed td:nth-child(4) { text-decoration: line-through; }
ul.plain { margin: 0; padding-left: 18px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0 0 16px; }
.facts div { display: flex; flex-direction: column; }
.facts dt { font-size: .8125rem; color: var(--text-2); }
.facts dd { margin: 0; font-weight: 500; }

/* Section rows inside breakdown and related tables: a heading that spans the table */
tr.section th { background: var(--magnolia); color: var(--grape-dark); font-family: var(--font-head); font-weight: 600; font-size: .8125rem; text-align: left; padding: 8px 12px; }