/*
 * The staff side.
 *
 * A dense, plain, information-first sheet. This is a screen somebody uses for
 * six hours a day, so it is optimised for reading numbers in columns rather
 * than for looking generous, and the four internal columns (cost, markup,
 * margin) are shaded so that "this is ours, not theirs" is visible at a glance
 * rather than something you have to remember.
 *
 * No webfont. A quote builder that waits on a font to render its numbers is a
 * quote builder that feels slow, and the production host has no build step.
 */

:root {
    --ink: #14171a;
    --muted: #6b7480;
    --line: #d8dde3;
    --bg: #f6f7f9;
    --panel: #fff;
    --accent: #1c4f8b;
    --ok: #1c6b3f;
    --okbg: #eaf5ee;
    --stop: #a32626;
    --stopbg: #fbecec;
    --warnbg: #fff6e3;
    --internal: #f3f0ea;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1 { font-size: 20px; margin: 0 0 2px; }
h2 { font-size: 14px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
p { margin: 0 0 6px; }
a { color: var(--accent); }
code { background: #eceff2; padding: 1px 4px; border-radius: 3px; font-size: 12px; }

/* ---- chrome ---------------------------------------------------------- */

.topbar {
    display: flex; align-items: center; gap: 24px;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 0 20px; height: 52px;
}
.topbar .brand { font-weight: 700; font-size: 16px; text-decoration: none; color: var(--ink); }
.topbar nav { display: flex; gap: 16px; }
.topbar nav a { text-decoration: none; font-weight: 500; }
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar .who .name { font-weight: 600; }

.devbanner {
    margin: 0; padding: 6px 20px;
    background: var(--warnbg); border-bottom: 1px solid #e6d9b8;
    font-size: 12px; color: #6b5626;
}

.page { max-width: 1400px; margin: 0 auto; padding: 20px; }

.pagehead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.pagehead h1 { margin: 0; }
.pagehead-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lead { color: var(--muted); font-size: 15px; }

/* ---- panels ---------------------------------------------------------- */

.card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
    padding: 14px 16px; margin-bottom: 16px;
}
.cols { display: flex; gap: 16px; align-items: flex-start; }
.cols > .card { flex: 1; }

.empty { background: var(--panel); border: 1px dashed var(--line); padding: 40px; text-align: center; border-radius: 4px; }

.notice { border-radius: 4px; padding: 10px 12px; margin-bottom: 14px; border: 1px solid; }
.notice-ok { background: var(--okbg); border-color: #b9dcc6; color: var(--ok); }
.notice-stop { background: var(--stopbg); border-color: #e7bcbc; color: var(--stop); }
.notice ul { margin: 0; padding-left: 18px; }

.hint { color: var(--muted); font-size: 12px; margin-top: 6px; }
.muted { color: var(--muted); }

/* ---- tables ---------------------------------------------------------- */

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.grid thead th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
    color: var(--muted); border-bottom: 2px solid var(--line); white-space: nowrap;
}
table.grid tbody tr:hover { background: #fafbfc; }
.col-num { text-align: right; white-space: nowrap; }
.col-action { text-align: right; width: 1%; white-space: nowrap; }
table.grid .is-current { background: var(--okbg); }

/* The columns that are ours. Shaded so the boundary is visible rather than
   remembered. The customer-facing document has none of these. */
.internal { background: var(--internal); }
th.internal { background: #e9e4da; }
.under-floor { background: var(--stopbg) !important; color: var(--stop); font-weight: 600; }

.sku { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--muted); background: #eef1f4; padding: 0 4px; border-radius: 2px; }
.src { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; }

table.summary { width: 100%; border-collapse: collapse; }
table.summary th { text-align: left; font-weight: 400; color: var(--muted); padding: 3px 0; }
table.summary td { text-align: right; padding: 3px 0; white-space: nowrap; }
table.summary tr.grand th, table.summary tr.grand td { border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); padding-top: 6px; }

.bucketmargin { margin-top: 8px; padding: 5px 8px; border-radius: 3px; font-size: 13px; }

/* ---- status and role chips ------------------------------------------- */

.status, .role {
    display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
}
.status { background: #eceff2; color: #47505a; }
.status-draft { background: #eceff2; color: #47505a; }
.status-sent { background: #e4edf8; color: var(--accent); }
.status-signed { background: var(--okbg); color: var(--ok); }
.status-declined, .status-void, .status-expired { background: var(--stopbg); color: var(--stop); }
.status-changes_requested, .status-pending_approval { background: var(--warnbg); color: #8a6d1f; }

.role { background: #eceff2; color: #47505a; }
.role-owner { background: #efe6f7; color: #5b3184; }
.role-office_admin { background: #e4edf8; color: var(--accent); }
.role-sales_manager { background: var(--okbg); color: var(--ok); }

/* ---- forms ----------------------------------------------------------- */

label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 3px; }
input[type=text], input[type=date], select, textarea {
    width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px;
    font: inherit; font-size: 13px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
textarea { resize: vertical; }

.stack > * + * { margin-top: 10px; }
.stack label { margin-top: 4px; }
.actions { margin-top: 12px; }
.inline-form { display: flex; gap: 8px; margin-top: 10px; }
.inline-form select { flex: 1; }

button, .button {
    font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 3px;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap;
}
button:hover, .button:hover { background: #f2f4f6; }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover, .button.primary:hover { background: #17416f; }
button.linkish { border: none; background: none; color: var(--accent); padding: 0; }
button.linkish.danger { color: var(--stop); }
.topbar .who form { display: inline; }

/* The add-line row. Wraps rather than scrolls: a rep on a laptop should not
   have to scroll sideways to reach the discount field. */
.linegrid { display: flex; flex-wrap: wrap; gap: 10px; }
.linegrid .f { flex: 1 1 140px; min-width: 120px; }
.linegrid .f-item { flex: 2 1 320px; }
.linegrid .f-desc { flex: 2 1 280px; }
.linegrid .f-narrow { flex: 0 1 110px; min-width: 90px; }

/* ---- the logo screen -------------------------------------------------- */

/* A checkerboard behind the preview, because a logo is usually a PNG with a
   transparent background and white-on-white looks like a broken image. */
.logopreview {
    margin: 0 0 10px; padding: 12px; border: 1px solid var(--line); border-radius: 3px;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eef0f2 25%, transparent 25%, transparent 75%, #eef0f2 75%),
        linear-gradient(45deg, #eef0f2 25%, transparent 25%, transparent 75%, #eef0f2 75%);
    background-size: 16px 16px; background-position: 0 0, 8px 8px;
}
.logopreview img { max-width: 100%; height: auto; display: block; }
.col-thumb { width: 1%; }
.col-thumb img { display: block; max-width: 120px; height: auto; }
.checkline { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.checkline input { width: auto; margin: 0; }

/* ---- editing a line in place ----------------------------------------- */

/* The edit row sits under the line it edits and is collapsed by the browser,
   not by script, so it still opens with JavaScript off. The cell loses the
   table's usual padding when shut, so twelve closed rows read as twelve thin
   "Edit line n" links rather than twelve empty bands. */
.line-edit-row > td { padding: 0; border-top: 0; background: var(--rowalt, #fbfbfc); }
.line-edit summary {
    padding: 4px 10px; cursor: pointer; font-size: 12px; color: var(--muted);
    list-style-position: inside;
}
.line-edit summary:hover { color: inherit; }
.line-edit[open] summary { color: inherit; font-weight: 600; }
.line-edit[open] > form { padding: 4px 10px 14px; }
.line-edit .actions { margin-top: 10px; display: flex; align-items: center; gap: 12px; }
.line-edit .actions .hint { margin: 0; }

/* ---- the live preview ------------------------------------------------ */

.preview { margin-top: 12px; padding: 10px 12px; background: #f9fafb; border: 1px solid var(--line); border-radius: 3px; }
.preview dl { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.preview dl > div { min-width: 96px; }
.preview dt { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.preview dd { margin: 0; font-size: 14px; font-weight: 600; }
.preview.preview-error { background: var(--stopbg); border-color: #e7bcbc; color: var(--stop); }
.preview .warn { margin: 8px 0 0; color: var(--stop); font-weight: 600; }
.preview.under-floor { background: var(--stopbg) !important; border-color: #e7bcbc; color: inherit; }

/* ---- send panel ------------------------------------------------------ */

.send .gates { margin: 6px 0 0; padding-left: 18px; }
.send .gates li { margin-bottom: 4px; }
.gate-blocking { color: var(--stop); }
.gate-approvable { color: #8a6d1f; }

.tokenlink {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; word-break: break-all; background: #fff;
    padding: 6px 8px; border: 1px solid #b9dcc6; border-radius: 3px;
}

.digests { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: 12px; }
.digests dt { color: var(--muted); }
.digests dd { margin: 0; }
.hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; word-break: break-all; }

@media (max-width: 900px) {
    .cols { flex-direction: column; }
    .cols > .card { width: 100%; }
}

/* ---- the catalog ------------------------------------------------------ */

/* Group rail plus content. The rail is navigation rather than a filter
   control, because with a few hundred products the group IS how you get
   around, and a dropdown would hide the shape of the catalog. */
.catalog { display: flex; gap: 16px; align-items: flex-start; }
.grouprail { flex: 0 0 190px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.grouprail a {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 7px 11px; text-decoration: none; color: var(--ink);
    border-bottom: 1px solid var(--line); font-size: 13px;
}
.grouprail a:last-child { border-bottom: none; }
.grouprail a:hover { background: #f2f4f6; }
.grouprail a.is-on { background: var(--accent); color: #fff; font-weight: 600; }
.grouprail a.is-off { color: var(--muted); font-style: italic; }
.grouprail .count { font-size: 11px; opacity: .7; }
.catalogmain { flex: 1; min-width: 0; }

.filterbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.filterbar input[type=text] { flex: 1; max-width: 340px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; white-space: nowrap; }
.check input { width: auto; }

table.catalogitems .is-retired td { opacity: .55; }
.fielderror { color: var(--stop); font-size: 12px; margin-top: 3px; }

/* A currency or percent sign welded to its input, so the unit is never in
   doubt while several hundred costs are being typed. */
.moneyinput { display: flex; align-items: stretch; }
.moneyinput span {
    display: flex; align-items: center; padding: 0 8px;
    background: #eceff2; border: 1px solid var(--line); color: var(--muted); font-size: 13px;
}
.moneyinput span:first-child { border-right: none; border-radius: 3px 0 0 3px; }
.moneyinput span:last-child { border-left: none; border-radius: 0 3px 3px 0; }
.moneyinput input { border-radius: 0; }
.moneyinput span:first-child + input { border-radius: 0 3px 3px 0; }
.moneyinput input:has(+ span) { border-radius: 3px 0 0 3px; }

input.tiny, .inline-form input.tiny { width: 68px; flex: 0 0 68px; }
.preview dd.big { font-size: 20px; }
.grouprow { padding: 8px !important; }
.grouprow .inline-form { margin-top: 0; align-items: center; flex-wrap: wrap; }
.grouprow .inline-form input[type=text] { flex: 0 1 190px; }
.grouprow .inline-form select { flex: 0 1 170px; }
.linegrid .f-group { flex: 1 1 170px; }

@media (max-width: 900px) {
    .catalog { flex-direction: column; }
    .grouprail { width: 100%; flex: none; }
}

/* ---- the order book -------------------------------------------------- */
/* The five sales_order states. Colour carries the same meaning it does on a
   quote: blue is new, amber is in hand, green is done, red is blocked, grey is
   finished with. `closed` deliberately takes the plain chip rather than a
   colour of its own: a closed order needs no attention, and giving it one
   would make the finished rows the loudest thing on a queue screen. */
.status-received { background: #e4edf8; color: var(--accent); }
.status-in_review { background: var(--warnbg); color: #8a6d1f; }
.status-ordered { background: var(--okbg); color: var(--ok); }
.status-held { background: var(--stopbg); color: var(--stop); }

/* A filter rail across the top of a list, rather than tabs. Every state stays
   reachable and nothing is hidden: see the note in orders/index.blade.php. */
.rail { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.rail a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border: 1px solid var(--line); border-radius: 12px;
    text-decoration: none; color: var(--ink); font-size: 13px; background: var(--panel);
}
.rail a:hover { background: #f2f4f6; }
.rail a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rail .count { font-size: 11px; opacity: .7; }

/* Label and value pairs, for a record somebody reads rather than edits. */
.pairs { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; margin: 0; }
.pairs dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.pairs dd { margin: 0; }

/* Quoted beside actual. Narrow on purpose: two money columns and a label. */
table.totals { max-width: 460px; }
table.totals input { text-align: right; }

/* ---- the sign-in screen ---------------------------------------------- *
 *
 * Two panes: the form on the left, the project mark on the right. The mark is
 * the only picture anywhere on the staff side, and it is here rather than in
 * the topbar because the topbar is chrome a rep looks past for six hours a
 * day.
 *
 * THE FORM COLUMN IS FIXED AND THE MARK COLUMN TAKES WHAT IS LEFT. The other
 * way round, the mark grows with the window until the form is a narrow strip
 * beside a poster. minmax(0, 1fr) rather than 1fr because a grid track sized
 * 1fr will not shrink below the intrinsic width of an image inside it, which
 * is 1408px here, and the whole row would overflow the page.
 */
.signin {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    max-width: 1080px;
}

/* The inputs fill the column. Left at their default size they sit at roughly
   175px in a 320px pane, which reads as an unfinished form rather than a
   deliberately small one. */
.signin-form input[type="email"],
.signin-form input[type="password"] { width: 100%; }
.signin-form form { margin-bottom: 14px; }

.signin-mark { display: block; }
.signin-mark img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* One column below this, and the form is first in the markup so it lands on
   top. The mark keeps a ceiling so it cannot push the sign-in button off a
   phone screen, which is the failure this layout replaced. */
@media (max-width: 860px) {
    .signin { grid-template-columns: 1fr; gap: 22px; max-width: 420px; }
    .signin-mark img { max-height: 34vh; width: auto; max-width: 100%; }
}