| : the header is two rows, and pinning cells individually would stack the sub-header on top of the row above it. The th backgrounds keep rows from showing through. */ .pm-table thead { position: sticky; top: 0; z-index: 2; } .pm-table thead th { vertical-align: bottom; text-align: center; max-width: 120px; white-space: normal; line-height: 1.25; } /* Group band row: one coloured bar per contiguous same-group run of columns. Band colours are applied inline per | ; this styles the shared typography. max-width is cleared because a band | spans several columns. */
.pm-table thead .pm-band-row th.pm-band {
max-width: none;
padding: 3px 8px;
text-align: center;
vertical-align: middle;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
border-right: 1px solid var(--border-light);
}
.pm-table thead .pm-band-row th.pm-band-info {
text-align: left;
}
.pm-table tbody td {
padding: 6px 10px;
text-align: center;
vertical-align: top;
font-weight: 600;
}
/* Row banding reads better than a hover tint on a grid this wide. */
.pm-table tbody > tr:nth-child(even) > td {
background: rgba(237, 232, 225, 0.35);
}
.pm-table tbody > tr:hover > td {
background: rgba(212, 144, 106, 0.1);
}
/* Client and project names are the only prose here; left-aligned and capped
so a long project title cannot set the height of the whole row. */
.pm-text {
text-align: left !important;
/* min as well as max: the surrounding columns are all nowrap chips, so
without a floor the browser squeezes these two down to a word per line. */
min-width: 160px;
max-width: 200px;
white-space: normal;
font-weight: 600;
line-height: 1.35;
}
.pm-work-order {
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 700;
color: var(--accent-walnut);
text-decoration: none;
}
.pm-work-order:hover {
text-decoration: underline;
}
.pm-date {
font-family: var(--font-mono);
font-size: 0.76rem;
white-space: nowrap;
}
/* A deadline that has already passed is the signal these columns exist for. */
.pm-overdue {
color: var(--unfulfilled);
font-weight: 700;
}
/* An unconfirmed ship date is a weaker deadline than a confirmed one, and the
app already reads these colours this way (ship_date_status_highlight). */
.pm-ship-confirmed {
color: var(--fulfilled);
}
.pm-ship-not_confirmed {
color: var(--text-tertiary);
}
.pm-badges {
display: flex;
flex-wrap: wrap;
gap: 3px;
justify-content: center;
margin-top: 4px;
}
.pm-thumb {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
background: var(--bg-secondary);
}
/* ---- NESTED LINE TABLES (inside an expanded cell) ---- */
.pm-sub-table {
width: 100%;
border-collapse: collapse;
font-size: 0.76rem;
}
.pm-sub-table thead th {
padding: 5px 8px;
font-size: 0.64rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-tertiary);
text-align: left;
background: var(--bg-secondary);
white-space: nowrap;
}
.pm-sub-table td {
padding: 4px 8px;
border-bottom: 1px solid rgba(200, 189, 178, 0.35);
vertical-align: middle;
text-align: left;
}
.pm-sub-table tbody tr:last-child td {
border-bottom: none;
}
.pm-line-table td {
white-space: nowrap;
}
.pm-sub-label {
color: var(--text-tertiary);
font-weight: 700;
white-space: nowrap;
}
/* ---- STATUS CHIPS ----
Every "is this step done" cell reduces to one chip: green done, red
outstanding, neutral when the column tracks nothing on this order. A chip
rather than a tinted cell — orders run to a dozen lines, and tinting the
cell would paint a slab of colour hundreds of pixels tall. */
.pm-cell {
white-space: nowrap;
}
.pm-chip {
display: inline-block;
padding: 3px 9px;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.35;
border-radius: 999px;
white-space: nowrap;
text-decoration: none;
}
.pm-chip-done {
background: var(--fulfilled-bg);
color: var(--fulfilled);
}
.pm-chip-todo {
background: var(--unfulfilled-bg);
color: var(--unfulfilled);
}
.pm-chip-none {
background: var(--bg-secondary);
color: var(--text-tertiary);
font-weight: 600;
}
/* Tracked, but blocked on an earlier step. Dashed to say "this becomes your
problem later" — as against pm-chip-none, which never will. */
.pm-chip-pending {
background: transparent;
color: var(--text-tertiary);
border: 1px dashed var(--border-medium);
font-weight: 600;
cursor: help;
}
.pm-chip-hold {
background: var(--status-hold-bg);
color: var(--status-hold);
text-transform: uppercase;
font-size: 0.62rem;
letter-spacing: 0.06em;
}
.pm-chip-working {
background: var(--status-shipped-bg);
color: var(--status-shipped);
}
/* Chips that do something get an affordance; static ones must not look clickable. */
a.pm-chip {
cursor: pointer;
transition: filter var(--transition-fast);
}
a.pm-chip:hover {
filter: brightness(0.94);
color: inherit;
text-decoration: none;
}
/* In flight — these fire real emails, so the chip must not invite a second click. */
a.pm-chip.pm-busy {
opacity: 0.5;
pointer-events: none;
}
/* ---- ATTENTION CELLS ---- */
.pm-attention-toggle::after {
content: "▸";
margin-left: 5px;
font-size: 0.7em;
display: inline-block;
transition: transform var(--transition-fast);
}
.pm-cell.open .pm-attention-toggle::after {
transform: rotate(90deg);
}
.pm-attention-detail {
display: none;
}
.pm-cell.open .pm-attention-detail {
display: block;
/* Give the panel room to breathe: left to the column's own width, tag ids
and item names wrap onto three lines each. */
min-width: 340px;
margin-top: 6px;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
overflow: hidden;
text-align: left;
white-space: normal;
}
}
/* Expanded sibling rows sit visually under their representative rather than
reading as a flat list of equals. Deliberately OUTSIDE any @layer: the
vendored sfr-ui stylesheet is unlayered and so beats layered rules whatever
their specificity. */
table.list tr.ol-expanded-row > td:first-child {
padding-left: 24px;
}
table.list tr.ol-expanded-row {
background-color: #f7f9fc;
}
.ol-more-badge {
margin-left: 6px;
padding: 0 5px;
font-size: 11px;
line-height: 16px;
color: #06c;
background: #eef;
border: 1px solid #ccd;
border-radius: 3px;
cursor: pointer;
}
.ol-more-badge:hover {
background: #dde;
}
.ol-more-badge[disabled] {
color: #999;
cursor: default;
}
/* "Showing the first 100 of N" / "no other matches" — a note about the rows
above it, not another row of data. Same layer note as above. */
table.list tr.ol-expand-note > td {
font-style: italic;
color: #666;
}
@charset "UTF-8";
/*
* DEPRECATED — rebuild CSS has been merged into application.css.scss
* This file is kept empty to avoid Sprockets errors from any lingering references.
*/
.commission-item-ul {
list-style-type: none;
margin: 0;
padding: 5px 0px 5px 0px;
overflow: hidden;
width: 100%;
border-bottom: 1px solid #ccc;
}
.commission-item-ul li {
float: left;
padding-right: 15px;
width: 12%;
}
.commission-item-ul li:nth-child(1) {
text-align: left;
width: 20%;
}
.picker-wrapper {
overflow: hidden;
white-space: nowrap !important;
}
.legend TABLE {
border-spacing: 0;
width: 100%;
}
.legend TABLE TD {
padding: 4px;
border: 1px solid #ccc;
}
.legend TABLE TR.unfulfilled TD {
background: rgb(255, 221, 221);
}
.legend TABLE TR.partial TD {
background: rgb(255, 254, 204);
}
.legend TABLE TR.fulfilled TD {
background: rgb(230, 251, 229);
}
.legend TABLE TR.overage TD {
background: rgb(221, 238, 255);
}
#flash {
text-align: center;
background-color: rgb(250, 194, 69);
padding: 6px;
margin: 4px;
border: 1px solid rgb(237, 134, 24);
}
#sfr-body {
position: relative;
}
.popup-trigger {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A3E36' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center right/11px 11px no-repeat;
padding-right: 14px;
white-space: nowrap;
text-decoration: none;
color: black;
}
.popup-trigger.popped {
background-color: #222;
background-position-4: 2px;
background-position-y: 2px;
color: #eee !important;
border: none;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
padding: 4px 8px 4px 8px;
margin: -3px -8px -3px -8px;
box-shadow: 0 3px 5px #555;
}
.popup-container {
border: 3px solid #222;
background: #eee;
border-radius: 4px;
border-top-left-radius: 0;
box-shadow: 0 3px 5px #555;
padding: 4px;
margin-right: 8px;
z-index: 10001;
position: absolute;
}
.popup-container P {
padding: 5px 0;
margin: 0;
}
.popup-container .buttons {
width: 130px;
margin-top: -5px;
}
.popup-container .buttons A {
display: block;
text-align: center;
margin-top: 5px;
}
.blank-cell {
background: none !important;
border-bottom: none !important;
}
IMG.swatch {
height: 32px;
width: 32px;
max-height: 32px;
max-width: 32px;
}
TD.drag-handle {
width: 16px;
background-repeat: no-repeat;
background-position: left center;
background-size: 14px 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6C62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3C/svg%3E") !important;
}
DIV.gallery-div {
border: solid 1px gray;
margin: 5px;
width: 125px;
float: left;
}
DIV.gallery-div IMG.gallery {
height: 125px;
width: 125px;
max-height: 125px;
max-width: 125px;
align: center;
}
DIV.order-picture-div {
border: solid 1px gray;
margin: 5px;
width: 500px;
display: table;
margin: 0 auto;
}
DIV.order-picture-div IMG.gallery {
height: 500px;
width: 500px;
align: center;
}
SPAN.gallery-title {
display: table;
margin: 0 auto;
text-align: center;
font-weight: bold;
word-break: break-all;
}
SPAN.gallery-description {
display: table;
margin: 0 auto;
text-align: center;
}
#busy {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
background: #555;
opacity: 0.4;
color: white;
text-align: center;
padding-top: 20%;
font-size: 18px;
font-weight: bold;
text-shadow: 3px 3px 3px black;
}
BODY .field-pair TABLE.edit-fabrics TH {
text-align: center;
}
BODY .field-pair TABLE.edit-fabrics TD {
padding: 2px;
}
BODY .field-pair TABLE.edit-fabrics TD.tool {
width: 1px;
}
TABLE.purchase-report TR.separator {
font-weight: bold;
}
TABLE.purchase-report TR.fabric TD:nth-child(1), TABLE.purchase-report TR.item TD:nth-child(1) {
padding-left: 20px;
}
table#notes-table TR.bottom TD {
background-color: white !important;
}
table#notes-table TR.client-note TD {
background-color: #FF7878 !important;
}
table#notes-table TR.top {
background-color: #ffe;
}
DIV.note-doc {
margin-bottom: 2px;
padding: 3px;
background: #eee;
border: 1px solid #ddd;
}
.resolvable {
background-color: #FF7878;
}
TR.even TD {
background-color: white !important;
}
TR.odd TD {
background-color: #ffe !important;
}
a.asc {
padding: 4px 18px 4px 14px !important;
background-repeat: no-repeat;
background-position: right center;
background-size: 13px 13px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6C62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
a.desc {
padding: 4px 18px 4px 14px !important;
background-repeat: no-repeat;
background-position: right center;
background-size: 13px 13px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6C62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
}
TABLE.list TR.totals TD {
font-weight: bold;
border-top: 1px solid black;
background: #ccc;
}
TABLE.commission TR :nth-child(4) {
text-align: right;
}
TABLE.commission TR :nth-child(5) {
text-align: right;
}
TABLE.commission TR :nth-child(6) {
text-align: right;
}
TABLE.commission TR :nth-child(7) {
text-align: right;
}
TABLE.commission TR :nth-child(8) {
text-align: right;
}
TABLE#commission-items TR :nth-child(4) {
text-align: right;
font-weight: bold;
}
TABLE#commission-items TR :nth-child(4) {
text-align: right;
}
TABLE#commission-items TR :nth-child(5) {
text-align: right;
}
TABLE#commission-items TR :nth-child(6) {
text-align: right;
}
TABLE#commission-items TR :nth-child(7) {
text-align: right;
}
TABLE#commission-items TR :nth-child(8) {
text-align: right;
font-weight: bold;
}
TABLE#commission-items TR :nth-child(9) {
text-align: right;
font-weight: bold;
}
TABLE#commission-items TR :nth-child(10) {
text-align: right;
padding-right: 12px;
}
.bottom-line {
border-bottom: 2px solid black !important;
}
.barcode-row {
width: 15%;
text-align: center;
verticle-align: center;
padding: 10px;
}
.barcode-order-row {
width: 25%;
text-align: center;
verticle-align: center;
padding: 5px;
}
.highlight_green {
color: rgb(32, 182, 42);
}
.highlight_red {
color: rgb(250, 69, 69);
}
@charset "UTF-8";
/* Costing worksheets — the ledger (see app/javascript/controllers/costing_form_controller.js
and app/views/costing_worksheets/_ledger.html.erb) and its EN/ES toggle
(app/views/costing_worksheets/_locale_toggle.html.erb).
Reuses the app's existing CSS custom properties (defined on :root in
application.css.scss) rather than introducing new colors: --border-light /
--radius-sm for the table, --bg-secondary to shade the read-only computed
cells against --bg-card, and the same --status-rush / --status-rush-bg pair
.rb-flash-alert already uses for an attention-worthy message, so the
stale-results notice reads as the same "something needs your attention"
signal the rest of the app already uses — just scoped to sit inline next to
the ledger instead of as a page-wide banner. */
/* Capped rather than full-width, same reasoning as before the rework: a label
has to sit close enough to its figure to be read as a pair, and a wide
screen strands them apart otherwise. */
.costing-ledger {
width: 100%;
max-width: 40rem;
border-collapse: collapse;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.costing-ledger th,
.costing-ledger td {
padding: 0.35rem 0.6rem;
border-bottom: 1px solid var(--border-light);
text-align: left;
vertical-align: middle;
}
.costing-ledger th {
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.costing-ledger tbody tr:last-child th,
.costing-ledger tbody tr:last-child td {
border-bottom: none;
}
/* A section banner row — where the sheet itself breaks into ENVIO Y COSTO...,
TARIFF..., and the scenario's markup block. Spans the full row so it reads
as a divider between blocks, not another line item. */
.costing-ledger tr.costing-banner th {
padding-top: 0.9rem;
padding-bottom: 0.35rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--accent-walnut);
border-bottom: 2px solid var(--border-medium);
white-space: normal;
}
/* A running total — the figure every row above it in that block rolls up to
(TOTAL BURDEN FACTORY COST, MEXICO COST INCLUDING TARIFF). Reads as a
subtotal, matching the weight the old .costing-total row had. */
.costing-ledger tr.costing-total th,
.costing-ledger tr.costing-total td {
font-weight: 700;
border-top: 2px solid var(--border-light);
}
/* A server-computed, read-only figure sitting inline with editable input
cells in the same row — shaded so its non-editability is visible without
reading the row, the same way a spreadsheet greys a formula cell apart
from an input cell. */
.costing-ledger td.costing-computed {
background: var(--bg-secondary);
font-variant-numeric: tabular-nums;
}
/* Each row reads left to right as "input × factor = total", so the numbers
sit in two right-aligned stacks: what you type, and what the sheet works
out. Every total lands in .costing-amount at the right edge — no cell in
either column spans, or a colspan'd figure would right-align against the
table edge instead of against its column and break the stack exactly at the
rows that matter most. */
.costing-ledger td.costing-input,
.costing-ledger td.costing-amount,
.costing-ledger td.costing-percent {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* min-width, not width: under auto table layout `width` is only a suggestion,
so a column of placeholders would still render hairline-thin and then shove
the ledger sideways the moment the first figure was computed. min-width is
honoured, so both columns hold their size from the first render. */
.costing-ledger td.costing-input,
.costing-ledger td.costing-amount {
min-width: 7.5rem;
white-space: nowrap;
}
/* The digits inside an editable cell have to line up with the figures above
and below it, not just the input box itself. */
.costing-ledger td.costing-input input[type=number],
.costing-ledger td.costing-input input[type=text] {
text-align: right;
font-variant-numeric: tabular-nums;
}
.costing-ledger td.costing-percent {
color: var(--text-tertiary);
font-size: 0.85rem;
}
.costing-ledger td.costing-factor {
color: var(--text-secondary);
font-size: 0.85rem;
white-space: nowrap;
}
/* Every editable cell in the ledger sits beside its label and, often, beside
a computed figure and a percentage on the same row — a full-width input
would crowd all of that out. */
.costing-ledger input[type=number],
.costing-ledger input[type=text] {
width: 5.5rem;
}
.costing-results-notice {
margin: 0 0 1rem;
padding: 0.6rem 0.9rem;
border-radius: var(--radius-sm);
background: var(--status-rush-bg);
color: var(--status-rush);
font-size: 0.85rem;
font-weight: 600;
}
.costing-locale-toggle {
margin: 0 0 0.75rem;
font-size: 0.85rem;
color: var(--text-tertiary);
}
.costing-locale-toggle strong {
color: var(--text-primary);
}
/* .legacy-content sets `overflow-x: auto` so wide sfr-ui views can scroll
sideways, and that quietly computes overflow-y to `auto` too — making it a
scroll container, and the nearest scrollport for anything sticky inside it.
It never actually scrolls (its height is content-driven; the page scrolls on
), so a sticky descendant would resolve against a scrollport that
never moves and simply never stick. Restored to `visible` on the costing
pages only — nothing here is wide enough to have wanted the sideways scroll,
and body's own `overflow-x: hidden` is still the backstop. */
.legacy-content:has(.costing-costable) {
overflow: visible;
}
/* The costable header (app/views/costing_worksheets/_costable.html.erb) —
what this worksheet prices, shown above the ledger on every costing page.
Wider than the ledger's 40rem, unlike the rest of the page: it carries the
piece's dimensions and spec sheet alongside the thumbnail now, and squeezing
three regions into the ledger's column would stack them into a wall. Regions
wrap (and the spec grid drops columns) below that, so a narrower viewport
reflows rather than overflowing.
Frozen under the app's own sticky top bar, so the piece being costed — its
image, dimensions and specs — stays readable the whole way down a ledger
that runs several screens long. z-index below .rb-top-bar's 50 so the bar
still covers it, above the ledger so rows pass underneath rather than
through — which only works because the background is opaque. */
.costing-costable {
position: sticky;
top: var(--header-height);
z-index: 20;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.6rem 1.25rem;
max-width: 64rem;
margin-bottom: 1rem;
padding: 0.6rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-secondary);
/* Ledger rows pass UNDER this block once it is pinned, and they meet its
bottom edge mid-row. The shadow puts the card visibly in front of them, so
that reads as one thing overlapping another rather than as a row that has
been cut in half. */
box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.35);
}
/* Each region names itself, or the dimensions and the specs run together as
one undifferentiated block of small text. */
.costing-costable-label {
display: block;
margin-bottom: 0.2rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-tertiary);
}
/* Identity (number + description) sits narrow; the spec sheet takes what is
left. min-width: 0 on both, or a long description or spec value would refuse
to wrap and push the card past its max-width. */
.costing-costable-facts {
flex: 1 1 12rem;
min-width: 0;
}
.costing-costable-specs {
flex: 2 1 18rem;
min-width: 0;
}
.costing-costable-dimensions {
margin-top: 0.5rem;
}
.costing-costable-quantity {
margin-top: 0.5rem;
}
/* Set larger than everything else in the card on purpose: the ledger below
costs and prices exactly ONE of the piece, so how many are being made is the
figure a reader has to carry with them and the one thing here that is not
already implied by the drawing and the specs. */
.costing-costable-quantity-value {
font-size: 1.35rem;
font-weight: 700;
line-height: 1.1;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
}
/* Starting the first worksheet (app/views/costing_worksheets/_new_worksheet_buttons.html.erb).
Full-size buttons under the header rather than toolbar items, so the page's
only available action looks like one. Matches the header's width so the two
share an edge, and wraps when the order's type maps to no rate row and every
type is offered at once. */
.costing-new-worksheets {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
max-width: 64rem;
margin-bottom: 1rem;
}
/* Bigger than the app's default .rb-btn, which is sized for a row of actions
sitting beside content — these stand alone. Scoped to this block so nothing
else picks the size up. */
.costing-new-worksheets .rb-btn {
padding: 0.7rem 1.4rem;
font-size: 0.95rem;
}
/* .rb-btn-primary's own `color: var(--text-inverse)` is inside
`@layer components`, and `.legacy-content a` is not — an unlayered rule beats
a layered one whatever their specificity, so on these pages a primary button
rendered as a LINK came out walnut text on a walnut background: invisible.
Restated here, where the file is itself unlayered and the selector outweighs
`.legacy-content a`. */
.costing-new-worksheets .rb-btn-primary,
.bom-panel-find .rb-btn-primary {
color: var(--text-inverse);
}
/* Measurements read as a row of discrete figures, not as a sentence — each one
is looked up individually ("what's the seat height?"), so they get spacing
of their own rather than a separator to scan past. */
.costing-costable-dimension-list {
display: flex;
flex-wrap: wrap;
gap: 0.2rem 0.75rem;
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
/* The space between an abbreviation and its figure is a real one in the markup,
not margin alone: "W 20"" is what should land in the clipboard (and in a
screen reader) when someone copies a dimension out of here. */
.costing-costable-dimension-abbreviation {
font-weight: 600;
color: var(--text-tertiary);
}
/* Label over value, in as many columns as the region is wide enough for, so a
dozen specs fit in the height of a few lines.
Grid rather than CSS `columns`: multi-column layout answers a height limit by
spilling into FURTHER columns off to the side, so a capped multicol spec
sheet hides its overflow sideways behind a horizontal scrollbar instead of
scrolling down through it. Grid flows row by row and scrolls the way the cap
below intends. */
.costing-costable-spec-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
gap: 0.35rem 1.25rem;
margin: 0;
font-size: 0.8rem;
/* A line can carry a dozen-plus fields and this block is sticky — without a
ceiling the spec sheet alone would take the screen the ledger needs. */
max-height: 8.5rem;
overflow-y: auto;
}
.costing-costable-spec-list dt {
color: var(--text-tertiary);
}
.costing-costable-spec-list dd {
margin: 0;
color: var(--text-primary);
}
/* The thumbnail is wrapped in an (link_to_modal) — an inline element by
default, whose line-box adds descender space below the 60px image and leaves
the anchor taller than the picture it holds. Block-level makes it size
exactly to its image, so it lines up with the text beside it. */
.costing-costable a {
display: block;
}
.costing-costable-thumb {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.costing-costable-number {
font-weight: 600;
}
.costing-costable-description {
color: var(--text-secondary);
font-size: 0.9rem;
}
/* The line's "Item Notes", full-width under the thumb/facts/specs row —
flex-basis 100% forces the wrap. */
.costing-costable-note {
flex: 1 1 100%;
min-width: 0;
font-size: 0.85rem;
color: var(--text-primary);
}
/* pre-line: the note is typed into a textarea on the order line, and its line
breaks are its structure.
Uncapped, unlike the spec list beside it. A 5rem scroll box here clipped
~2-5% of real notes (up to 9 lines hidden, worst case 45% of the note
visible), and its only affordance was an inner scrollbar that macOS draws
only while scrolling — so a clipped note read as a complete one, which is
the opposite of what a note like "COM only" is on the page to do. A spec
value that gets cut off is still looked up by name; a truncated sentence
silently changes what it says. */
.costing-costable-note-text {
white-space: pre-line;
overflow-wrap: anywhere;
}
/* The order line's pricing note (app/views/costing_worksheets/_pricing_note.html.erb),
sitting between the costable header and the ledger. Matches the ledger's
width so the whole page reads as one column. */
.costing-pricing-note {
max-width: 40rem;
margin-bottom: 1rem;
}
.costing-pricing-note textarea {
width: 100%;
box-sizing: border-box;
}
.costing-pricing-note-label {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--text-secondary);
}
.costing-pricing-note p {
margin: 0.2rem 0 0;
color: var(--text-secondary);
}
/* The yardage and BOM PLANTILLA link, under the pricing note
(app/views/costing_worksheets/_recorded_fields.html.erb). Same width and
rhythm as the note above it, so the two read as one block of things recorded
about the piece rather than two unrelated ones. */
.costing-recorded-fields {
max-width: 40rem;
margin-bottom: 1rem;
}
.costing-recorded-fields p {
margin: 0.2rem 0 0;
}
/* Matches .costing-pricing-note-label — the read-only pages set these two
blocks' headings in the same voice. */
.costing-recorded-label {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--text-secondary);
margin-top: 0.6rem;
}
/* sfr sizes .pretty off the `size` attribute, leaving a ~150px box adrift in a
40rem column. The yardage keeps a narrower box on purpose — it is a two- or
three-digit figure, and a full-width input over "18.5" reads as a text area. */
.costing-recorded-fields input[type=text] {
width: 100%;
box-sizing: border-box;
}
.costing-recorded-fields input[type=number] {
width: 10rem;
box-sizing: border-box;
}
/* Trail back to the order or estimate (app/views/costing_worksheets/_breadcrumbs.html.erb). */
.costing-breadcrumbs {
margin: 0 0 0.5rem;
font-size: 0.85rem;
color: var(--text-tertiary);
}
.costing-breadcrumbs span {
margin-left: 0.35rem;
}
/* A read-only echo of the value a rate is being applied to (the burden rate
behind ENG & PROTYPING, the metal or frame cost behind a tariff). Styled as
a figure, not as a field, so it never reads as something you can edit. */
.costing-echo {
font-variant-numeric: tabular-nums;
color: var(--text-primary);
}
/* Evidence attached to one costing pass
(app/views/costing_worksheets/_documents_fields.html.erb). Matches the
ledger's width so the page keeps reading as one column. */
.costing-documents {
max-width: 40rem;
margin-bottom: 1rem;
padding: 0.6rem 0.8rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
}
.costing-documents legend {
font-weight: 600;
padding: 0 0.35rem;
}
.costing-documents-hint {
margin: 0 0 0.6rem;
font-size: 0.85rem;
color: var(--text-tertiary);
}
.costing-documents-table {
width: 100%;
}
/* sfr's .pretty text input sizes itself off the `size` attribute, which leaves
the caption a ~150px box adrift in a 60%-wide column. Fill the cell instead,
so the field lines up under its own heading. */
.costing-documents-table td input[type=text] {
width: 100%;
box-sizing: border-box;
}
/* Headings sit left over their columns; without this they centre and stop
pointing at the fields below them. */
.costing-documents-table th {
text-align: left;
}
.costing-document-name {
flex-shrink: 0;
}
/* The read-only document list on Show
(app/views/costing_worksheets/_documents.html.erb). */
.costing-documents-list {
max-width: 40rem;
margin-top: 1.5rem;
}
.costing-documents-list ul {
list-style: none;
margin: 0;
padding: 0;
}
.costing-document-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 0;
border-bottom: 1px solid var(--border-light);
}
.costing-document-thumb {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.costing-document-description {
color: var(--text-secondary);
font-size: 0.9rem;
}
/* The Save/Cancel pair, rendered at both ends of the form
(app/views/costing_worksheets/_form_actions.html.erb). Flex rather than the
bare inline whitespace the markup used to rely on: Save is an INPUT and
Cancel an A.button, two elements with different line-height and baseline, so
side by side they sat a pixel or two off each other with a single space
between them. */
.costing-form-actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 1rem 0;
}
/* Find-a-similar-BOM panel (app/views/costing_worksheets/_bom_panel.html.erb),
sitting between the costable header and the form on New/Edit. Same width and
card treatment as .costing-costable so the page still reads as one column of
boxed sections, not a mix of framed and unframed blocks. */
.bom-panel {
max-width: 64rem;
margin-bottom: 1rem;
padding: 0.6rem 0.8rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-secondary);
}
.bom-panel h3 {
margin: 0 0 0.5rem;
font-size: 0.95rem;
}
/* Heading carries the Hide/Show control, pushed to the far edge so the panel
reads as one collapsible block rather than a heading with a stray button. */
.bom-panel-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
}
/* The imported BOM collapses with a native rather than a scripted
toggle (it ships collapsed, so a JS-only opener would strand the section if
the controller module ever failed to load). Everything below is what turns
the default disclosure triangle into the same Hide/Show affordance the
search half above it uses. */
.bom-collapse > summary {
list-style: none; /* Firefox */
margin: 0 0 0.5rem;
font-size: 0.95rem;
font-weight: bold;
cursor: pointer;
}
.bom-collapse > summary::-webkit-details-marker {
display: none;
}
/* Row count and reference total, hoisted out of the fold: the material cost
inputs below are derived from them, so they have to read without opening. */
.bom-collapse-summary {
margin-left: 0.4rem;
color: var(--text-tertiary);
font-weight: normal;
}
.bom-collapse-label {
color: var(--link, #06c);
font-size: 0.8rem;
font-weight: normal;
}
/* One label is always hidden; which one is the disclosure's own state. */
.bom-collapse[open] .bom-collapse-show,
.bom-collapse:not([open]) .bom-collapse-hide {
display: none;
}
/* Provenance / reference-total / save-note lines under the current BOM
heading (app/views/costing_worksheets/_current_bom.html.erb). Same small,
muted treatment as the rest of the read-only annotations on this page
(.costing-echo, .costing-breadcrumbs). */
.bom-provenance,
.bom-reference-total,
.bom-immediate-note {
margin: 0.2rem 0 0.5rem;
font-size: 0.85rem;
color: var(--text-secondary);
}
.bom-reference-total {
font-variant-numeric: tabular-nums;
}
.bom-immediate-note {
color: var(--text-tertiary);
font-style: italic;
}
/* Price-source and waste markers on the Current BOM table's Description
cell (app/views/costing_worksheets/_current_bom.html.erb). Small pills
rather than plain text so they read as metadata about the row, not part
of the description itself. */
.bom-price-source,
.bom-waste {
display: inline-block;
margin-left: 0.35rem;
padding: 0.05rem 0.4rem;
border-radius: 0.7rem;
font-size: 0.72rem;
font-style: normal;
white-space: nowrap;
vertical-align: middle;
}
.bom-price-source.catalog {
background: var(--success-bg, #e3f6e8);
color: var(--success-text, #1a7a35);
}
.bom-price-source.imported {
background: var(--muted-bg, #eee);
color: var(--text-secondary);
}
.bom-waste {
background: var(--warning-bg, #fff3cd);
color: var(--warning-text, #8a6116);
cursor: help;
}
/* Inline qty editor and row-delete button on an editable Current BOM row. */
.bom-qty-input {
width: 5rem;
text-align: right;
}
.bom-row-delete {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
padding: 0 0.3rem;
}
.bom-row-delete:hover {
color: var(--danger-text, #c0392b);
}
/* Free-text add-row form under the Current BOM table. */
.bom-add-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
}
/* The one action left where the find-a-similar-BOM search used to be
(app/views/costing_worksheets/_bom_panel.html.erb). Sized like the
new-worksheet buttons rather than the toolbar links: on a line with no BOM
yet this is the primary thing to do on the panel. */
.bom-panel-find {
margin: 0.75rem 0 0.25rem;
}
@charset "UTF-8";
/* ============================================================
has_many widget — Kovet Design System
------------------------------------------------------------
The sfr-ui form builder renders `f.has_many` as nested tables
(table.deletable > table.field-pair) with a left-hand label
column, and its `.pretty` picker absolutely-positions the
link over a fixed-height field. That markup is built for the
legacy sfr-ui forms and looks cramped inside the new
card-style forms.
Opt in by wrapping the has_many in a `.has-many-field`
element — this restyles it to the new look and feel:
<%= fields_for :model, @model, builder: SfrUi::FormBuilder do |hf| %>
<%= hf.has_many :children, add: "Add..", delete: true do |cf| %>
<%= cf.hidden_field :id %>
<%= cf.picker_field :user, { label: "Rep" }, { user_type: "rep" } %>
<% end %>
<% end %>
Single-field rows can pass `label_style: :none` to drop the
redundant per-field label; rows with multiple fields keep
their labels (rendered small + stacked above each field).
Scoped to `.has-many-field` so the legacy sfr-ui forms are
left untouched. Uses the global design tokens from
application.css.scss :root.
============================================================ */
.has-many-field {
/* ----- Layout: linearize the nested sfr-ui tables ----- */
}
.has-many-field .has-many > table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.sfr-form .has-many-field .has-many {
overflow: visible;
}
.has-many-field table.deletable {
margin: 0 0 6px;
}
.has-many-field table.deletable > tbody {
display: block;
}
.has-many-field table.deletable > tbody > tr {
display: flex;
align-items: center;
gap: 8px;
}
.has-many-field table.deletable > tbody > tr > td {
display: block;
flex: 1 1 auto;
padding: 0;
}
.has-many-field table.deletable > tbody > tr > td.tool {
flex: 0 0 auto;
width: auto;
text-align: left;
}
.has-many-field .sub {
display: flex;
flex-direction: column;
gap: 6px;
}
.has-many-field .sub table.field-pair,
.has-many-field .sub table.field-pair tbody,
.has-many-field .sub table.field-pair tr {
display: block;
width: 100%;
}
.has-many-field .sub table.field-pair td {
display: block;
width: 100%;
padding: 0;
}
.has-many-field .sub th.sfr-left-label {
display: block;
width: auto;
padding: 0 0 2px;
text-align: left;
}
.has-many-field .sub th.sfr-left-label label {
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
}
.has-many-field .sub input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.has-many-field .sub select,
.has-many-field .sub textarea {
width: 100%;
box-sizing: border-box;
border: 1.5px solid var(--border-light);
border-radius: 5px;
padding: 7px 10px;
font-size: 0.84rem;
font-family: var(--font-body);
background: var(--bg-card);
color: var(--text-primary);
outline: none;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.has-many-field .sub input:not([type=hidden]):not([type=checkbox]):not([type=radio]):focus,
.has-many-field .sub select:focus,
.has-many-field .sub textarea:focus {
border-color: var(--accent-walnut);
box-shadow: 0 0 0 2px rgba(90, 45, 28, 0.08);
}
.has-many-field {
/* ----- Pickers: match the bordered design-system input ----- */
}
.has-many-field .picker-field {
display: flex;
align-items: center;
width: 100%;
height: auto;
min-height: 33px;
box-sizing: border-box;
border: 1.5px solid var(--border-light);
border-radius: 5px;
background: var(--bg-card);
background-image: none;
background-repeat: no-repeat;
padding: 0;
overflow: visible;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.has-many-field .picker-field:hover {
border-color: var(--accent-walnut);
background-image: none;
}
.has-many-field .picker-field .picker-link {
position: static;
display: block;
flex: 1 1 auto;
height: auto;
overflow: visible;
white-space: normal;
padding: 7px 10px;
font-size: 0.84rem;
line-height: 1.3;
font-family: var(--font-body);
color: var(--text-primary);
text-decoration: none;
}
.has-many-field .picker-field .picker-link .empty {
color: var(--text-tertiary);
}
.has-many-field .picker-field .picker-clear {
display: none;
}
.has-many-field {
/* ----- Add / delete controls ----- */
}
.has-many-field table.add-link-wrapper {
margin: 0;
}
.has-many-field table.add-link-wrapper th.sfr-left-label {
display: none;
}
.has-many-field table.add-link-wrapper td {
padding: 0;
}
.has-many-field a.add-button {
display: inline-block;
margin-top: 2px;
font-size: 0.8rem;
color: var(--accent-walnut);
text-decoration: none;
}
.has-many-field a.add-button:hover {
opacity: 0.75;
}
.has-many-field a.delete-button {
cursor: pointer;
}
.has-many-field a:hover {
text-decoration: none;
}
/* Lead Time Calculator (the COM calculator).
Rendered both as a full page and inside an sfr modal, so everything here is
scoped to .ltc and sized in relative units -- the modal is narrower than the
page and the panels have to stack in it.
The vendored sfr-ui table styles are unlayered and win on the cascade
regardless of specificity, so the table rules below carry !important where
they contradict them. */
.ltc {
font-family: var(--font-body);
color: var(--text-primary);
}
.ltc-order {
margin: 0 0 1rem;
font-size: 0.875rem;
color: var(--text-secondary);
}
.ltc-order-project {
margin-left: 0.5rem;
color: var(--text-tertiary);
}
.ltc-panels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 1.5rem;
align-items: start;
/* Above this the panels only add dead space between the lead time and its
date. Chosen to sit above a 1280px viewport, so only ultrawide is capped. */
max-width: 80rem;
}
.ltc-panel {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 1rem 1.125rem 1.125rem;
}
.ltc-panel-title {
margin: 0 0 0.875rem;
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 600;
color: var(--accent-walnut);
border-bottom: none;
}
.ltc-field {
margin-bottom: 1rem;
}
.ltc-field label {
display: block;
margin-bottom: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.ltc-field {
/* sfr-ui sizes date fields off its own form layout; inside a grid panel they
need to fill the column instead -- but capped, since a 10-character date
stretched to the full width of an ultrawide panel looks unfinished and is
out of step with the date inputs on neighbouring screens. */
/* .pretty carries the border, radius and font but sets no box metrics, since
sfr normally sizes its fields from the form-builder layout this one is not
part of. */
}
.ltc-field input[type=text] {
width: 100% !important;
max-width: 13rem;
height: 32px;
padding: 4px 8px;
box-sizing: border-box;
}
.ltc-table {
width: 100% !important;
border-collapse: collapse;
font-size: 0.875rem;
}
.ltc-table th,
.ltc-table td {
padding: 0.4375rem 0.5rem !important;
text-align: left !important;
border: none !important;
border-bottom: 1px solid var(--border-light) !important;
background: none !important;
}
.ltc-table thead th {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-tertiary);
border-bottom: 1px solid var(--border-medium) !important;
}
.ltc-table tbody th {
font-weight: 600;
white-space: nowrap;
}
.ltc-table tbody tr:last-child th,
.ltc-table tbody tr:last-child td {
border-bottom: none !important;
}
.ltc-days {
font-family: var(--font-mono);
color: var(--text-tertiary);
width: 3.5rem;
}
.ltc-result {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* The row matching the order's own lead time. */
.ltc-table tbody tr.is-highlighted th,
.ltc-table tbody tr.is-highlighted td {
background: var(--status-open-bg) !important;
color: var(--text-primary);
}
.ltc-table tbody tr.is-highlighted .ltc-result {
font-weight: 700;
}
.ltc-note {
margin: 1.25rem 0 0;
font-size: 0.75rem;
color: var(--text-tertiary);
}
/* Inside a modal the panels are already framed by the dialog, so their own
card chrome is a white box on a white surface. Strip it and let the grid gap
do the separating, the way the app's other modals present their content. */
.ltc-in-modal {
/* The modal supplies no body padding of its own -- sfr's forms bring their
own -- so without this the content sits flush against the dialog edge and
misaligns with the title above it. 18px matches the h1's horizontal
padding, so the content lines up with "COM Calculator". */
padding: 0.25rem 18px 18px;
}
.ltc-in-modal .ltc-panel {
background: none;
border: none;
border-radius: 0;
padding: 0;
}
.ltc-in-modal .ltc-panels {
gap: 1.25rem 2.25rem;
}
.ltc-in-modal .ltc-order {
margin-bottom: 1.25rem;
}
.ltc-in-modal .ltc-note {
margin-top: 1rem;
}
/* Modal only -- the full page has nothing to close. */
.ltc-actions {
display: flex;
justify-content: flex-end;
margin-top: 1.25rem;
}
@charset "UTF-8";
A.popup-trigger {
border-bottom: 1px dotted #aaa;
}
.orders_index .order, .orders_all_cad .order {
position: relative;
border-radius: 8px;
overflow: hidden;
margin-bottom: 12px;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
background: var(--bg-card);
}
.orders_index .order .status, .orders_all_cad .order .status {
position: absolute;
top: 9px;
padding: 3px 0;
width: 40px;
text-align: center;
font-family: var(--font-body);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.06);
/* Neutral default (e.g. ACC with no status set) */
background: var(--bg-secondary);
color: var(--text-tertiary);
line-height: 1.45;
}
.orders_index .order .status strong, .orders_all_cad .order .status strong {
font-weight: inherit;
}
.orders_index .order .status, .orders_all_cad .order .status {
/* 4 pills × 40px + 3 gaps × 8px = 184px.
Rightmost starts at right:120 to clear the Order Details link
(which sits at right:12 with ~90px width). */
}
.orders_index .order .status.acc, .orders_all_cad .order .status.acc {
right: 120px;
}
.orders_index .order .status.cad, .orders_all_cad .order .status.cad {
right: 168px;
}
.orders_index .order .status.fin, .orders_all_cad .order .status.fin {
right: 216px;
}
.orders_index .order .status.fab-us, .orders_all_cad .order .status.fab-us {
right: 264px;
}
.orders_index .order .status.all, .orders_all_cad .order .status.all {
background-color: var(--status-open-bg);
color: var(--status-open);
border-color: rgba(21, 94, 62, 0.2);
}
.orders_index .order .status.none, .orders_all_cad .order .status.none {
background-color: var(--status-rush-bg);
color: var(--status-rush);
border-color: rgba(127, 29, 34, 0.2);
}
.orders_index .order .status.partial, .orders_all_cad .order .status.partial {
background-color: var(--status-hold-bg);
color: var(--status-hold);
border-color: rgba(146, 64, 14, 0.2);
}
.orders_index .order, .orders_all_cad .order {
/* Mobile: pills and details link render inline at the top of the card
(natural DOM order), then the h2 title and meta below. */
}
@media (max-width: 700px) {
.orders_index .order, .orders_all_cad .order {
padding: 10px 12px 4px;
}
.orders_index .order .status, .orders_all_cad .order .status {
position: static !important;
right: auto !important;
display: inline-block;
margin: 0 6px 6px 0;
vertical-align: middle;
}
.orders_index .order .order-details-link, .orders_all_cad .order .order-details-link {
position: static !important;
top: auto !important;
right: auto !important;
display: inline-block;
margin: 0 0 6px 4px;
vertical-align: middle;
padding-left: 18px;
}
.orders_index .order H2, .orders_all_cad .order H2 {
padding: 8px 12px !important;
margin: 4px -12px 0 !important; /* edge-to-edge against card padding */
font-size: 0.88rem;
background-position-x: 12px !important;
padding-left: 38px !important;
}
.orders_index .order > p, .orders_all_cad .order > p {
padding-left: 12px !important;
}
}
.orders_index .order .order-details-link, .orders_all_cad .order .order-details-link {
position: absolute;
top: 11px;
right: 12px;
padding-left: 18px;
font-size: 0.78rem;
font-weight: 600;
color: var(--accent-walnut);
text-decoration: none;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A2D1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.35-4.35'/%3E%3C/svg%3E") left center no-repeat;
background-size: 14px 14px;
}
.orders_index .order .order-details-link:hover, .orders_all_cad .order .order-details-link:hover {
text-decoration: underline;
}
.orders_index .order H2, .orders_all_cad .order H2 {
margin: 0;
/* Right padding leaves room for 4 status pills + Order Details link
(~340px total). */
padding: 10px 340px 10px 40px;
background: var(--bg-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155E3E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E") 12px center no-repeat;
background-size: 15px 15px;
border-bottom: 1px solid var(--border-light);
font-weight: 600;
font-size: 0.95rem;
color: var(--text-primary);
}
.orders_index .order H2.unfulfilled, .orders_all_cad .order H2.unfulfilled {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.orders_index .order TABLE.items, .orders_all_cad .order TABLE.items {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.orders_index .order TABLE.items TH, .orders_all_cad .order TABLE.items TH {
background: rgba(240, 240, 240, 0.5);
color: rgba(0, 0, 0, 0.7);
font-weight: normal;
padding: 7px 4px 4px 4px;
font-size: 11px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.orders_index .order TABLE.items TH:last-child, .orders_all_cad .order TABLE.items TH:last-child {
border-right: none;
}
.orders_index .order TABLE.items TD, .orders_all_cad .order TABLE.items TD {
border: 1px solid #ccc;
padding: 4px;
}
.orders_index .order TABLE.items TD.yards, .orders_all_cad .order TABLE.items TD.yards {
text-align: center;
width: 1px;
white-space: nowrap;
padding: 4px 12px;
}
.orders_index .order TABLE.items TD.item, .orders_all_cad .order TABLE.items TD.item {
padding: 16px 4px 4px 4px !important;
font-weight: bold;
}
.orders_index .order TABLE.items TD.tool, .orders_all_cad .order TABLE.items TD.tool {
background: rgba(228, 232, 147, 0.3);
width: 1px;
}
.orders_index .order TABLE.items TD.icon, .orders_all_cad .order TABLE.items TD.icon {
padding-left: 20px;
border-left: none;
border-right: none;
width: 1px;
}
.orders_index .order TABLE.items TD.display, .orders_all_cad .order TABLE.items TD.display {
border-left: none;
}
.orders_index .order TABLE.items TD.top, .orders_all_cad .order TABLE.items TD.top {
border-bottom-color: #f7f7f7;
}
.orders_index .order TABLE.items TD:last-child, .orders_all_cad .order TABLE.items TD:last-child {
border-right: none;
}
.orders_index .order TABLE.items TR.needed TD.yards, .orders_all_cad .order TABLE.items TR.needed TD.yards {
color: #aaa;
}
.orders_index .order TABLE.items TR.needed TD.yards.unfulfilled, .orders_all_cad .order TABLE.items TR.needed TD.yards.unfulfilled {
color: #c00;
}
TABLE.items TD {
border-right: 1px solid #ccc;
}
TABLE.items TD.yards {
text-align: center;
width: 1px;
}
TABLE.items TD DIV.needed {
text-align: center;
padding: 8px 0 0 0;
color: #aaa;
}
TABLE.items TD.unfulfilled DIV.needed {
color: #c00;
}
/* Scoped with .legacy-content + compound .items.list to beat
`TABLE.list TR.odd TD, TABLE.list TR.even TD { background-color: transparent !important }`
in legacy_ui/base.scss, which otherwise wipes the cell colors on tables
that carry both `.items` and `.list` classes (e.g. the order show page). */
.legacy-content TABLE.items.list TR TD.fulfilled,
.legacy-content TABLE.items TR TD.fulfilled {
background: rgb(230, 251, 229) !important;
}
.legacy-content TABLE.items.list TR TD.unfulfilled,
.legacy-content TABLE.items TR TD.unfulfilled {
background: rgb(255, 221, 221) !important;
}
.legacy-content TABLE.items.list TR TD.partial,
.legacy-content TABLE.items TR TD.partial {
background: rgb(255, 254, 204) !important;
}
.legacy-content TABLE.items.list TR TD.overage,
.legacy-content TABLE.items TR TD.overage {
background: rgb(221, 238, 255) !important;
}
/* ── Order show: BOM tab ──
The tab's table carries wide imported content (plantilla filenames, import
status text, a nested materials table). Desktop scrolls it inside its
.legacy-table-scroll wrapper; ≤700px switches to the labeled-card layout
via the shared responsive-record-table pattern. */
#bom-tab-content {
/* legacy_ui/tab_set.scss sets `.tab-set .tab .scroll { overflow: visible }`,
which would beat .legacy-table-scroll's containment on specificity — the
ID restores the sideways scroll for this tab's wide table. */
}
#bom-tab-content .legacy-table-scroll {
overflow-x: auto;
}
#bom-tab-content {
/* The BOM Link column carries the workbook filename plus the import status
line. Without a floor, table auto-layout squeezes it to ~120px and the
text stacks 20 lines tall. */
}
#bom-tab-content .bom-list td.bom-link-cell {
min-width: 240px;
overflow-wrap: anywhere;
}
#bom-tab-content {
/* Keeps the Edit/Costing/Approve links on one line now that the inline
nowrap style moved here (mobile needs to override it below). */
}
#bom-tab-content td.tool {
white-space: nowrap;
}
#bom-tab-content {
/* Percent and dollars are one figure read together, and table auto-layout
otherwise squeezes the column until they break across two lines. */
}
#bom-tab-content .bom-list td.bom-gross-profit {
white-space: nowrap;
}
#bom-tab-content {
/* The estimate's own margin, under the per-unit rows it aggregates. The
rule and the bold type are what stop it from reading as one more line. */
}
#bom-tab-content .bom-list tr.bom-totals-row > td {
border-top: 2px solid #999;
font-weight: bold;
}
#bom-tab-content .bom-list td.bom-totals-label {
text-align: right;
}
#bom-tab-content .bom-list td.bom-totals-label small {
font-weight: normal;
}
@media (max-width: 700px) {
#bom-tab-content td.tool {
white-space: normal;
}
#bom-tab-content .bom-list td.bom-link-cell {
min-width: 0;
}
#bom-tab-content {
/* Card cells are 2-column grids (label ∷ value). Left to auto-placement,
a cell with several children (link + + , or three action links) spills its later children into the label column — pin everything to the value column, drop the s (each would occupy a grid cell of its own), and let the import-status line use the card's full width. */ } #bom-tab-content .bom-list > tbody > tr > td > br { display: none; } #bom-tab-content .bom-list td.bom-link-cell > a { grid-column: 2; } #bom-tab-content .bom-list td.bom-link-cell > small { grid-column: 1/-1; margin-top: 4px; } #bom-tab-content .bom-list td[data-label="Approved By"] > small { grid-column: 2; } #bom-tab-content .bom-list td.tool > a { grid-column: 2; } #bom-tab-content { /* The inline center alignment of the No/Qty columns would center the card labels too. */ } #bom-tab-content .bom-list > tbody > tr > td { text-align: left !important; } #bom-tab-content { /* Card mode renders each tr as its own box; pull a line's note and materials rows up against the line's card so they read as one record (same trick as .movement-note-row). */ } #bom-tab-content .bom-list tr.bom-note-row, #bom-tab-content .bom-list tr.bom-materials-row { margin-top: -13px; } #bom-tab-content { /* The card's grid already labels the cell "Pricing Note". */ } #bom-tab-content .bom-note-prefix { display: none; } } /* These override `!important` rules that live inside application.css.scss's `@layer layout` (the responsive-record-table card grid and the mobile `table.list { min-width: 0 }`). Important declarations in a layer beat unlayered important ones, so these must sit in the same layer — where the ID selector then wins on specificity. */ @layer layout { @media (max-width: 700px) { /* The materials cell holds the block, not a label/value pair —
let it span the card full-width instead of the label∷value grid. */
#bom-tab-content td.bom-materials-cell {
display: block !important;
}
/* Keep the materials table wide enough to stay legible; it pans sideways
inside its own .legacy-table-scroll wrapper. */
#bom-tab-content table.list.bom-materials-list {
min-width: 560px !important;
}
/* Card mode turns every cell into its own labelled row, so the totals
row's desktop label and its trailing spacer would render as two stray
cards above the figure. The figure's own cell carries the label. */
#bom-tab-content .bom-list tr.bom-totals-row > td.bom-totals-label,
#bom-tab-content .bom-list tr.bom-totals-row > td:last-child {
display: none !important;
}
}
}
/* Edit BOM modal (order_lines/edit_pricing). Flex-wrapped so the summary
items and the six cost fields reflow on narrow screens with each label
staying attached to its value — the old fixed 6-column table clipped
off-screen on phones. */
.bom-pricing-summary {
display: flex;
flex-wrap: wrap;
gap: 4px 24px;
margin: 0 0 12px;
}
.bom-cost-fields {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
margin: 8px 0 14px;
}
.bom-cost-fields .bom-cost-field {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1 1 96px;
min-width: 96px;
max-width: 170px;
}
.bom-cost-fields .bom-cost-field label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.bom-cost-fields .bom-cost-field {
/* sfr-ui sizes text inputs by type with fixed widths; unlayered, so
!important is required to win. */
}
.bom-cost-fields .bom-cost-field input {
width: 100% !important;
min-width: 0;
box-sizing: border-box;
}
.customer-priority {
text-align: center;
float: left;
width: 50px;
height: 50px;
}
.customer-priority.platinum {
background: rgb(229, 228, 226) !important;
}
.customer-priority.gold {
background: rgb(255, 215, 0) !important;
}
.customer-priority.silver {
background: rgb(192, 192, 192) !important;
}
.customer-priority.bronze {
background: rgb(205, 127, 50) !important;
}
.customer-priority.white {
background: white !important;
}
/* Copy-mode chrome on the item search, shown only when the page was reached
from a costing worksheet (app/views/order_lines/_image_search_results.html.erb). */
.ol-bom-scope {
margin: 0.5rem 0 0.75rem;
font-size: 0.9rem;
}
.ol-bom-scope-note {
color: var(--text-secondary);
margin-right: 0.5rem;
}
/* button_to emits a form per row; without this each one forces its own line and
pushes the Copy button below the View BOM link. */
.ol-bom-copy {
display: inline-block;
margin: 0.2rem 0 0;
}
/* Only 0.58% of order lines carry a BOM, so an empty result is a normal
outcome here and has to read as a place to go next rather than a dead end. */
.ol-image-search-empty {
margin: 1rem 0;
padding: 1rem 1.25rem;
border: 1px solid var(--border, #ddd);
border-radius: 4px;
max-width: 40rem;
}
.ol-image-search-empty p {
margin: 0 0 0.5rem;
font-weight: 600;
}
.ol-image-search-empty ul {
margin: 0;
padding-left: 1.1rem;
}
/* A fallback explanation ("no indexed photo yet"), not a failure. Same muted
treatment as the rest of the read-only annotations rather than error red. */
.ol-image-search-note {
color: var(--text-secondary);
}
/* Shown when the target's BOM is approved: the candidate list renders in full
but every Copy button is suppressed, and without a word here that reads as
the page being broken. */
.ol-bom-locked {
margin: 0.5rem 0;
padding: 0.5rem 0.75rem;
border-left: 3px solid var(--border, #ddd);
color: var(--text-secondary);
font-size: 0.9rem;
max-width: 40rem;
}
/* The program catalog renders through table.list like the rest of the app, so
only a few things need styling here. */
/* A main object (an area) is a parent: its name and actions sit together on one
row, and its children (items) nest beneath it — indented and rule-bordered so
the parent/child relationship reads at a glance. */
.program-object-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem 0.8rem;
padding: 0.35rem 0;
border-bottom: 1px solid var(--border-light);
}
.program-object-head h3 {
margin: 0;
}
.program-object-children {
margin: 0.6rem 0 1.6rem 0.4rem;
padding-left: 1.1rem;
border-left: 2px solid var(--border-light);
}
/* The price grid is a table.list like everywhere else, centered, with the cell
inputs styled like the app's other form fields instead of raw browser boxes. */
.program-price-grid-wrap {
display: flex;
justify-content: center;
}
.program-price-grid { margin: 0 auto; }
.price-input {
width: 100%;
min-width: 5rem;
padding: 4px 6px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font: inherit;
text-align: right;
background: #fff;
}
.price-input:focus {
outline: none;
border-color: var(--accent, #7a6c62);
}
/* A material row is an inline form — a label, its control, and the row's Save/
Clear actions on one line. It's laid out like every other edit form in the
app: the row's label sits in a fixed, right-aligned column the width of sfr's
field-pair TH (150px), so the controls line up down the modal whatever each
label reads. */
.program-material-form {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
}
/* The primary label — the BOM placement (fabrics) or location (finishes) — is
that field-pair column. The fabric row's second label ("Yards") is left as a
plain inline label sitting between its two fields. */
.program-material-form > label:first-of-type {
flex: 0 0 150px;
text-align: right;
}
/* The row's SELECTs carry .pretty; the text/number inputs can't — .pretty pulls
in width: 100% (via .sfr-full-width) and would stack every field on its own
line — so they're hand-styled to match, the same trade .price-input and
.qty-input below make. 1.5px border, not 1px: that's .pretty's border, and
these sit beside .pretty selects where a thinner edge reads as a mismatch. */
.program-material-form input[type="text"],
.program-material-form input[type="number"] {
padding: 4px 6px;
border: 1.5px solid var(--border-light);
border-radius: var(--radius-sm);
font: inherit;
background: #fff;
}
.program-material-form input[type="text"]:focus,
.program-material-form input[type="number"]:focus {
outline: none;
border-color: var(--accent-walnut);
}
/* A swatch is for identifying a fabric in a row, not admiring it — the PDF is
where the material gets shown properly. */
.swatch {
width: 28px;
height: 28px;
object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
display: block;
}
/* The Generate Order modal's item table: prices and quantities read as numbers,
so right-align them; the quantity input matches the app's other form fields. */
#generation-items .num { text-align: right; }
#generation-items .qty-input {
width: 4.5em;
text-align: right;
padding: 4px 6px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font: inherit;
}
/* An unfilled finish slot is a gap to close, not a failure — so the amber the
hold statuses use, not the rush red. */
.badge {
display: inline-block;
background: var(--status-hold-bg);
color: var(--status-hold);
font-size: 0.75em;
font-weight: 700;
padding: 1px 6px;
border-radius: var(--radius-sm);
vertical-align: middle;
white-space: nowrap;
}
@charset "UTF-8";
/* ============================================================
Quote Requests — Kovet Design System
Uses global CSS vars from application.css.scss :root
============================================================ */
/* ===== INDEX PAGE ===== */
.qr-page {
min-height: 100vh;
background: var(--bg-primary);
}
/* ===== TOP BAR ===== */
.qr-top-bar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(224, 216, 206, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1.5px solid var(--border-medium);
padding: 0 24px;
height: 52px;
display: flex;
align-items: center;
gap: 16px;
}
.qr-top-bar-title {
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
letter-spacing: -0.01em;
}
.qr-top-bar-search {
position: relative;
flex: 1;
max-width: 280px;
}
.qr-top-bar-search input {
width: 100%;
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
padding: 6px 12px 6px 32px;
border: 1.5px solid var(--border-light);
border-radius: 5px;
background: var(--bg-card);
color: var(--text-primary);
outline: none;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.qr-top-bar-search input:focus {
border-color: var(--accent-walnut);
box-shadow: 0 0 0 2px rgba(90, 45, 28, 0.08);
}
.qr-top-bar-search input::placeholder {
color: var(--text-tertiary);
font-weight: 600;
}
.qr-top-bar-search svg {
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 13px;
color: var(--text-tertiary);
pointer-events: none;
}
.qr-top-bar-actions {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
/* ===== FILTER DROPDOWNS (index top bar) ===== */
.qr-filter-form {
display: inline-flex;
align-items: center;
gap: 6px;
}
.qr-filter-select {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
padding: 6px 26px 6px 10px;
border: 1.5px solid var(--border-light);
border-radius: 5px;
background: var(--bg-card);
color: var(--text-primary);
outline: none;
cursor: pointer;
transition: border-color 150ms ease, box-shadow 150ms ease;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
}
.qr-filter-select:focus {
border-color: var(--accent-walnut);
box-shadow: 0 0 0 2px rgba(90, 45, 28, 0.08);
}
/* ===== DRAG / DROP ===== */
.qr-dragging {
opacity: 0.5;
}
.qr-drop-target td {
background: rgba(90, 45, 28, 0.06) !important;
}
.qr-order-row[draggable=true] {
cursor: grab;
}
.qr-order-row[draggable=true]:active {
cursor: grabbing;
}
/* ===== BUTTONS ===== */
.qr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 7px 14px;
font-family: var(--font-body);
font-size: 0.76rem;
font-weight: 700;
border-radius: 5px;
border: none;
cursor: pointer;
transition: all 120ms ease;
text-decoration: none;
white-space: nowrap;
letter-spacing: 0.01em;
line-height: 1;
}
.qr-btn svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
.qr-btn-primary {
background: var(--accent-walnut);
color: var(--text-inverse) !important;
box-shadow: 0 1px 2px rgba(90, 45, 28, 0.2);
}
.qr-btn-primary:hover, .qr-btn-primary:visited {
background: var(--accent-walnut-light);
color: var(--text-inverse) !important;
box-shadow: 0 2px 4px rgba(90, 45, 28, 0.25);
transform: translateY(-0.5px);
}
.qr-btn-primary:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(90, 45, 28, 0.15);
}
.qr-btn-secondary {
background: var(--bg-card);
color: var(--text-secondary) !important;
border: 1.5px solid var(--border-light);
box-shadow: var(--shadow-sm);
}
.qr-btn-secondary:hover, .qr-btn-secondary:visited {
border-color: var(--border-medium);
color: var(--text-primary) !important;
background: #FFFFFF;
}
.qr-btn-danger {
background: #991B1B;
color: #FFF !important;
box-shadow: 0 1px 2px rgba(153, 27, 27, 0.2);
}
.qr-btn-danger:hover, .qr-btn-danger:visited {
background: #7F1D1D;
color: #FFF !important;
box-shadow: 0 2px 4px rgba(153, 27, 27, 0.25);
transform: translateY(-0.5px);
}
.qr-btn-danger:active {
transform: translateY(0);
}
/* ===== TABLE ===== */
.qr-table-wrapper {
padding: 12px 24px 40px;
}
.qr-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
/* Column headers */
.qr-col-head {
background: var(--bg-secondary);
border-top: 1.5px solid var(--border-medium);
border-bottom: 1.5px solid var(--border-medium);
position: sticky;
top: 52px;
z-index: 40;
}
.qr-col-head th {
padding: 6px 8px;
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
text-align: left;
white-space: normal;
line-height: 1.2;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
border-right: 1px solid rgba(200, 189, 178, 0.4);
}
.qr-col-head th:last-child {
border-right: none;
}
/* ===== GROUP HEADERS ===== */
.qr-group-spacer td {
height: 18px;
background: var(--bg-primary);
border: none;
padding: 0;
}
.qr-group-header td {
padding: 0;
border: none;
background: var(--bg-primary);
}
.qr-group-header-inner {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
border-left: 3px solid transparent;
cursor: pointer;
user-select: none;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 0;
transition: filter 100ms ease;
}
.qr-group-header-inner:hover {
filter: brightness(0.96);
}
.qr-group-count {
background: rgba(0, 0, 0, 0.1);
padding: 1px 6px;
border-radius: 8px;
font-size: 0.65rem;
font-weight: 700;
line-height: 1.4;
}
.qr-group-collapse-icon {
margin-left: auto;
width: 12px;
height: 12px;
opacity: 0.5;
transition: transform 200ms ease, opacity 100ms ease;
}
.qr-group-collapse-icon.collapsed {
transform: rotate(-90deg);
}
.qr-group-header-inner:hover .qr-group-collapse-icon {
opacity: 0.8;
}
/* ===== DATA ROWS ===== */
.qr-order-row {
border-left: 3px solid transparent;
transition: background 80ms ease;
cursor: pointer;
}
.qr-order-row:hover td {
background: rgba(90, 45, 28, 0.03);
}
.qr-order-row td {
padding: 0 8px;
height: 36px;
border-bottom: 1px solid rgba(200, 189, 178, 0.35);
vertical-align: middle;
font-size: 0.8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: var(--bg-card);
transition: background 80ms ease;
}
.qr-overdue-row {
border-left-color: var(--unfulfilled) !important;
}
.qr-overdue-row td {
background: #FFF8F8;
}
.qr-overdue-row:hover td {
background: rgba(185, 28, 28, 0.04);
}
/* Cell styles */
.qr-id-cell {
font-family: var(--font-mono);
font-size: 0.76rem;
font-weight: 500;
}
.qr-id-link {
color: var(--accent-walnut);
text-decoration: none;
font-weight: 600;
}
.qr-id-link:hover {
text-decoration: underline;
}
.qr-client-cell {
font-weight: 700;
color: var(--text-primary);
font-size: 0.82rem;
}
.qr-desc-cell {
color: var(--text-tertiary);
font-weight: 500;
font-size: 0.78rem;
}
.qr-list-primary {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Note row — spans Customer → Costing by quoter */
.qr-order-note-row {
cursor: pointer;
}
.qr-order-note-row td {
background: var(--bg-card);
border-bottom: 1px solid rgba(200, 189, 178, 0.35);
padding: 0;
white-space: normal;
overflow: visible;
}
.qr-order-note-row:hover td {
background: rgba(90, 45, 28, 0.03);
}
.qr-order-row:has(+ .qr-order-note-row) td {
border-bottom: none;
}
.qr-order-row + .qr-order-note-row td {
border-top: none;
}
.qr-order-note-filler {
padding: 0 !important;
}
.qr-order-note-cell {
padding: 0 8px 8px !important;
}
.qr-overdue-row.qr-order-note-row td {
background: #FFF8F8;
}
.qr-overdue-row.qr-order-note-row:hover td {
background: rgba(185, 28, 28, 0.04);
}
.qr-list-note {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 7px 12px;
background: rgba(217, 179, 76, 0.1);
border-left: 3px solid rgba(184, 134, 11, 0.55);
border-radius: 3px;
font-size: 0.74rem;
font-weight: 500;
font-style: italic;
line-height: 1.45;
color: #7a5f1f;
}
.qr-list-note span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-width: 0;
}
.qr-list-note-icon {
flex-shrink: 0;
width: 13px;
height: 13px;
margin-top: 2px;
opacity: 0.8;
color: #a47d1f;
}
.qr-overdue-row .qr-list-note {
background: rgba(185, 28, 28, 0.06);
border-left-color: rgba(185, 28, 28, 0.5);
color: #7a2e2e;
}
.qr-overdue-row .qr-list-note-icon {
color: #a84141;
}
.qr-user-cell {
font-size: 0.74rem;
font-weight: 600;
color: var(--text-secondary);
}
.qr-rep-cell {
font-size: 0.72rem;
font-weight: 500;
color: var(--text-secondary);
line-height: 1.3;
}
.qr-age-cell {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
color: var(--text-tertiary);
text-align: center;
}
.qr-overdue-cell {
text-align: center;
}
.qr-overdue-flag {
display: inline-flex;
align-items: center;
font-size: 0.78rem;
font-weight: 800;
padding: 4px 9px;
border-radius: 4px;
background: var(--unfulfilled-bg);
color: var(--unfulfilled);
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1;
}
.qr-est-cell {
font-family: var(--font-mono);
font-size: 0.74rem;
}
.qr-est-cell a {
color: var(--accent-walnut);
text-decoration: none;
}
.qr-est-cell a:hover {
text-decoration: underline;
}
.qr-empty-group td {
padding: 8px 12px;
font-size: 0.76rem;
font-weight: 500;
color: var(--text-tertiary);
background: var(--bg-card);
border-bottom: 1px solid rgba(200, 189, 178, 0.35);
font-style: italic;
}
.cadwf-create-row {
padding: 12px 24px 0;
}
.cadwf-create-row.is-hidden {
display: none;
}
.cadwf-create-form {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 12px;
background: var(--bg-card);
border: 1.5px solid var(--border-light);
border-radius: 6px;
box-shadow: var(--shadow-sm);
}
.cadwf-create-field {
min-height: 34px;
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
padding: 6px 10px;
border: 1.5px solid var(--border-light);
border-radius: 5px;
background: var(--bg-card);
color: var(--text-primary);
outline: none;
}
.cadwf-create-field:focus {
border-color: var(--accent-walnut);
box-shadow: 0 0 0 2px rgba(90, 45, 28, 0.08);
}
.cadwf-create-note {
font-size: 0.74rem;
font-weight: 600;
color: var(--text-tertiary);
}
/* ===== NEW WORKFLOW MODAL ===== */
.cadwf-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.cadwf-modal.is-hidden {
display: none;
}
body.cadwf-modal-open {
overflow: hidden;
}
.cadwf-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(26, 18, 16, 0.55);
backdrop-filter: blur(2px);
animation: cadwf-fade-in 0.16s ease-out;
}
.cadwf-modal-dialog {
position: relative;
width: 100%;
max-width: 640px;
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border-medium);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(26, 18, 16, 0.35);
animation: cadwf-pop-in 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
overflow: hidden;
}
@keyframes cadwf-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes cadwf-pop-in {
from {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.cadwf-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border-light);
background: var(--bg-secondary);
}
.cadwf-modal-title {
margin: 0;
font-family: var(--font-display, var(--font-body));
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--text-primary);
}
.cadwf-modal-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--text-secondary);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cadwf-modal-close:hover {
background: var(--bg-card);
border-color: var(--border-light);
color: var(--text-primary);
}
.cadwf-modal-close svg {
width: 16px;
height: 16px;
}
.cadwf-modal-form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.cadwf-modal-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 20px;
}
.cadwf-modal-note {
margin: 0 0 16px 0;
color: var(--text-tertiary);
font-size: 0.86rem;
font-style: italic;
}
.cadwf-modal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
}
.cadwf-modal-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.cadwf-modal-field-full {
grid-column: 1/-1;
}
.cadwf-modal-field label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
}
.cadwf-modal-field .cadwf-create-field {
width: 100%;
min-height: 36px;
}
.cadwf-modal-footer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
padding: 14px 20px;
border-top: 1px solid var(--border-light);
background: var(--bg-secondary);
}
@media (max-width: 600px) {
.cadwf-modal-grid {
grid-template-columns: 1fr;
}
.cadwf-modal {
padding: 12px;
}
.cadwf-modal-dialog {
max-height: calc(100vh - 24px);
}
}
/* ===== STATUS PILL ===== */
.qr-status-pill {
display: inline-flex;
align-items: center;
font-family: var(--font-body);
font-size: 0.62rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
line-height: 1.3;
}
/* ===== SHOW PAGE ===== */
.qr-show-page {
padding-bottom: 40px;
background: var(--bg-primary);
min-height: 100vh;
}
.qr-show-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
background: rgba(224, 216, 206, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1.5px solid var(--border-medium);
padding: 14px 24px;
}
.qr-show-header h1 {
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 700;
color: var(--text-primary);
margin: 3px 0;
letter-spacing: -0.01em;
}
.qr-show-header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
}
.qr-back-link {
font-size: 0.74rem;
font-weight: 600;
color: var(--accent-walnut) !important;
text-decoration: none;
letter-spacing: 0.01em;
}
.qr-back-link:hover {
text-decoration: underline;
}
.qr-show-meta {
display: flex;
align-items: center;
gap: 8px;
}
.qr-show-id {
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 500;
color: var(--text-tertiary);
}
.qr-show-grid {
padding: 16px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.qr-show-section {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 16px 18px;
box-shadow: var(--shadow-sm);
}
.qr-section-title {
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-tertiary);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(200, 189, 178, 0.4);
}
.qr-detail-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px 20px;
}
.qr-detail-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.qr-detail-full {
grid-column: 1/-1;
}
.qr-detail-label {
font-size: 0.64rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
}
.qr-detail-value {
font-size: 0.86rem;
font-weight: 600;
color: var(--text-primary);
}
.qr-linked-estimate {
display: inline-flex;
align-items: center;
gap: 8px;
}
.qr-unlink-estimate {
display: inline-flex;
align-items: center;
color: var(--text-tertiary);
cursor: pointer;
transition: color 0.12s ease;
}
.qr-unlink-estimate svg {
width: 14px;
height: 14px;
}
.qr-unlink-estimate:hover {
color: var(--accent-walnut);
}
.qr-description-box {
margin-top: 14px;
padding: 10px 12px;
background: var(--bg-secondary);
border-radius: 5px;
border: 1px solid rgba(200, 189, 178, 0.3);
}
.qr-description-box h3 {
font-size: 0.64rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.qr-description-box p {
font-size: 0.84rem;
color: var(--text-secondary);
line-height: 1.55;
}
/* ===== TABLES (BOM, Docs, Notes) ===== */
.qr-bom-table {
width: 100%;
border-collapse: collapse;
}
.qr-bom-table thead th {
padding: 6px 8px;
font-size: 0.64rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-light);
text-align: left;
}
.qr-bom-table tbody td {
padding: 7px 8px;
font-size: 0.8rem;
border-bottom: 1px solid rgba(200, 189, 178, 0.25);
vertical-align: middle;
color: var(--text-secondary);
}
.qr-bom-table tbody tr:last-child td {
border-bottom: none;
}
.qr-num-cell {
text-align: right;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
}
.qr-bom-total-row td {
border-top: 1.5px solid var(--border-medium) !important;
border-bottom: none !important;
background: var(--bg-secondary);
font-weight: 700;
}
.qr-empty-text {
font-size: 0.8rem;
color: var(--text-tertiary);
font-style: italic;
padding: 4px 0;
}
/* ===== ACTION SECTION ===== */
.qr-actions-section {
background: var(--bg-secondary) !important;
border-color: var(--border-light) !important;
}
.qr-action-buttons {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
@media (max-width: 720px) {
.qr-show-header {
flex-direction: column;
align-items: stretch;
}
.qr-show-header-actions {
justify-content: flex-start;
}
}
.qr-inline-form {
display: inline-flex;
align-items: center;
gap: 6px;
}
.qr-link {
color: var(--accent-walnut);
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
}
.qr-link:hover {
text-decoration: underline;
}
/* ===== FORM PAGE ===== */
.qr-form-page {
padding-bottom: 40px;
background: var(--bg-primary);
min-height: 100vh;
}
.qr-form {
padding: 16px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.qr-form-group {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
}
.qr-form-label {
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
}
.qr-form-label-inline {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.76rem;
font-weight: 600;
color: var(--text-secondary);
}
.qr-input {
border: 1.5px solid var(--border-light);
border-radius: 5px;
padding: 7px 10px;
font-size: 0.84rem;
font-family: var(--font-body);
background: var(--bg-card);
color: var(--text-primary);
outline: none;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.qr-input:focus {
border-color: var(--accent-walnut);
box-shadow: 0 0 0 2px rgba(90, 45, 28, 0.08);
}
.qr-input-full {
width: 100%;
}
.qr-input-sm {
width: 100px;
}
.qr-select {
border: 1.5px solid var(--border-light);
border-radius: 5px;
padding: 7px 10px;
font-size: 0.84rem;
font-family: var(--font-body);
background: var(--bg-card);
color: var(--text-primary);
outline: none;
cursor: pointer;
transition: border-color 150ms ease;
}
.qr-select:focus {
border-color: var(--accent-walnut);
}
.qr-nested-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.qr-dropzone {
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
padding: 14px 16px;
margin-bottom: 10px;
border: 2px dashed var(--border-default, #c9c0b6);
border-radius: 6px;
background: var(--bg-card, #fafaf7);
color: var(--text-secondary, #6b6358);
font-size: 0.85rem;
font-weight: 500;
text-align: center;
cursor: pointer;
transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.qr-dropzone:hover, .qr-dropzone:focus {
border-color: var(--accent-walnut);
color: var(--accent-walnut);
outline: none;
}
.qr-dropzone-active {
border-color: var(--accent-walnut) !important;
background: rgba(90, 45, 28, 0.06) !important;
color: var(--accent-walnut) !important;
}
.qr-form-actions {
display: flex;
gap: 8px;
padding: 0 24px;
}
/* ===== FLASH MESSAGES ===== */
.qr-flash {
margin: 12px 24px 0;
padding: 8px 14px;
border-radius: 5px;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
}
.qr-flash-notice {
background: var(--fulfilled-bg);
color: var(--fulfilled);
border: 1px solid rgba(21, 94, 62, 0.15);
}
.qr-flash-alert {
background: var(--unfulfilled-bg);
color: var(--unfulfilled);
border: 1px solid rgba(185, 28, 28, 0.15);
}
.qr-spec-hint {
margin-top: 8px;
font-size: 13px;
color: var(--text-secondary, #6b6b6b);
}
.qr-spec-pick-intro {
margin: 0 0 16px;
color: var(--text-secondary, #555);
line-height: 1.5;
max-width: 760px;
}
.qr-spec-pick-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 12px;
margin-bottom: 12px;
background: var(--surface-muted, #f6f3ee);
border-radius: 6px;
}
.qr-spec-pick-toolbar-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-weight: 500;
}
.qr-spec-pick-counter {
font-size: 13px;
color: var(--text-secondary, #6b6b6b);
}
.qr-spec-pick-table tbody tr.qr-spec-pick-row-disabled {
background: rgba(0, 0, 0, 0.025);
color: var(--text-secondary, #888);
}
.qr-spec-pick-table tbody tr.qr-spec-pick-row-disabled .qr-spec-pick-filename {
text-decoration: line-through;
text-decoration-color: rgba(0, 0, 0, 0.2);
}
.qr-spec-pick-filename {
font-weight: 500;
cursor: pointer;
}
.qr-spec-pick-row-disabled .qr-spec-pick-filename {
cursor: default;
}
.qr-spec-pick-desc {
font-size: 12px;
color: var(--text-secondary, #888);
margin-top: 2px;
}
.qr-spec-pick-type {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
}
.qr-spec-pick-type-ok {
background: rgba(21, 94, 62, 0.1);
color: var(--fulfilled, #155e3e);
}
.qr-spec-pick-type-blocked {
background: rgba(0, 0, 0, 0.06);
color: var(--text-secondary, #777);
}
.qr-spec-pick-status-ok {
color: var(--fulfilled, #155e3e);
font-size: 13px;
}
.qr-spec-pick-status-blocked {
color: var(--text-secondary, #777);
font-size: 12px;
font-style: italic;
}
.qr-spec-pick-actions {
margin-top: 20px;
display: flex;
gap: 12px;
justify-content: flex-end;
}
.qr-spec-pick-actions .qr-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
@layer components {
.roles-admin {
max-width: 1240px;
margin: 0 auto;
padding: 28px 32px 64px;
font-family: var(--font-body);
color: var(--text-primary);
}
.roles-admin .is-hidden {
display: none !important;
}
.roles-btn {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 700;
border-radius: var(--radius-sm);
padding: 9px 16px;
cursor: pointer;
border: 1.5px solid transparent;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
white-space: nowrap;
}
.roles-btn-primary {
color: #fff;
background: var(--accent-walnut);
border-color: var(--accent-walnut);
}
.roles-btn-primary:hover {
background: var(--accent-walnut-light);
border-color: var(--accent-walnut-light);
color: #fff;
text-decoration: none;
}
.roles-btn-outline {
color: var(--accent-walnut);
background: var(--bg-card);
border-color: var(--border-light);
}
.roles-btn-outline:hover {
background: var(--bg-secondary);
text-decoration: none;
}
.roles-btn-ghost {
color: var(--text-secondary);
background: var(--bg-card);
border-color: var(--border-light);
}
.roles-btn-ghost:hover {
background: var(--bg-secondary);
text-decoration: none;
}
.roles-btn-sm {
font-size: 0.76rem;
padding: 6px 14px;
}
.roles-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding-bottom: 14px;
border-bottom: 2px solid var(--border-medium);
}
.roles-eyebrow {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.roles-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 2rem;
margin: 4px 0 0;
}
.roles-head-actions {
display: flex;
align-items: center;
gap: 10px;
}
.roles-search {
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
background: var(--bg-card);
border: 1.5px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 8px 12px;
width: 220px;
outline: none;
transition: border-color var(--transition-fast);
}
.roles-search:focus {
border-color: var(--accent-walnut);
}
.roles-subrow {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
padding: 14px 2px 12px;
}
.roles-lede {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
max-width: 560px;
text-wrap: pretty;
}
.roles-meta {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--text-tertiary);
white-space: nowrap;
}
.roles-table {
background: var(--bg-card);
border: 1.5px solid var(--border-light);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.roles-thead, .roles-row {
display: grid;
grid-template-columns: 250px 1fr 92px 132px;
align-items: center;
gap: 16px;
}
.roles-thead {
padding: 11px 18px;
background: #F6F2ED;
border-bottom: 1px solid var(--border-light);
}
.roles-th {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.roles-th--right {
text-align: right;
}
.roles-row {
padding: 13px 18px;
border-bottom: 1px solid rgba(232, 226, 219, 0.9);
transition: background var(--transition-fast);
}
.roles-row:last-child {
border-bottom: 0;
}
.roles-row:hover {
background: rgba(237, 232, 225, 0.5);
}
.roles-role {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.roles-role-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
line-height: 1.15;
}
.roles-role-users {
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--text-tertiary);
}
.roles-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
.roles-chip {
display: inline-flex;
align-items: center;
gap: 7px;
height: 22px;
padding: 0 9px;
border-radius: var(--radius-sm);
background: #F1ECE5;
border: 1px solid #E0D8CE;
font-size: 0.72rem;
font-weight: 700;
color: var(--text-secondary);
white-space: nowrap;
}
.roles-chip-count {
font-family: var(--font-mono);
font-style: normal;
font-size: 0.68rem;
color: var(--text-tertiary);
}
.roles-chip--all {
gap: 0;
padding: 0 10px;
border-radius: var(--radius-pill);
background: rgba(21, 94, 62, 0.1);
border: 0;
color: var(--status-open);
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.roles-total {
text-align: right;
font-family: var(--font-mono);
font-size: 0.92rem;
color: var(--text-primary);
}
.roles-row-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.roles-row-actions .roles-btn-danger {
color: var(--text-tertiary);
background: transparent;
border-color: transparent;
padding: 6px 10px;
}
.roles-row-actions .roles-btn-danger:hover {
color: var(--unfulfilled);
border-color: var(--border-light);
background: transparent;
}
.roles-empty-rows {
padding: 28px 18px;
text-align: center;
color: var(--text-tertiary);
font-size: 0.85rem;
font-weight: 600;
}
.roles-edit-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding-bottom: 14px;
border-bottom: 2px solid var(--border-medium);
}
.roles-crumbs {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.72rem;
font-weight: 700;
color: var(--text-tertiary);
}
.roles-crumbs .roles-crumb-current {
color: var(--text-secondary);
}
.roles-edit-actions {
display: flex;
align-items: center;
gap: 10px;
padding-top: 18px;
}
.roles-granted {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--text-tertiary);
margin-right: 6px;
white-space: nowrap;
}
.roles-layout {
display: grid;
grid-template-columns: 252px 1fr;
gap: 20px;
align-items: start;
padding-top: 20px;
}
.roles-side {
position: sticky;
top: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.roles-card {
background: var(--bg-card);
border: 1.5px solid var(--border-light);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
}
.roles-name-card {
padding: 14px 16px 16px;
}
.roles-field-label {
display: block;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 6px;
}
.roles-name-input {
width: 100%;
box-sizing: border-box;
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 600;
color: var(--text-primary);
background: var(--bg-card);
border: 1.5px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 8px 10px;
outline: none;
transition: border-color var(--transition-fast);
}
.roles-name-input:focus {
border-color: var(--accent-walnut);
}
.roles-grant-toggle {
display: flex;
align-items: center;
gap: 9px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(232, 226, 219, 0.9);
font-size: 0.8rem;
font-weight: 700;
color: var(--text-primary);
cursor: pointer;
}
.roles-grant-toggle input {
width: 15px;
height: 15px;
margin: 0;
cursor: pointer;
accent-color: var(--accent-walnut);
}
.roles-grant-help {
font-size: 0.72rem;
font-weight: 600;
color: var(--text-tertiary);
margin-top: 5px;
text-wrap: pretty;
}
.roles-areas {
overflow: hidden;
transition: opacity var(--transition-fast);
}
.roles-areas-title {
padding: 12px 16px 9px;
border-bottom: 1px solid rgba(232, 226, 219, 0.9);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.roles-area {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
background: var(--bg-card);
border: 0;
border-bottom: 1px solid rgba(232, 226, 219, 0.9);
border-left: 3px solid transparent;
padding: 9px 16px;
cursor: pointer;
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--text-primary);
transition: background var(--transition-fast);
}
.roles-area:last-child {
border-bottom: 0;
}
.roles-area:hover {
background: var(--surface-inset);
}
.roles-area.is-active {
background: #F1ECE5;
border-left-color: var(--accent-walnut);
}
.roles-area-count {
font-family: var(--font-mono);
font-style: normal;
font-size: 0.72rem;
color: var(--text-tertiary);
}
.roles-main {
display: flex;
flex-direction: column;
gap: 14px;
transition: opacity var(--transition-fast);
}
.roles-filterbar {
display: flex;
align-items: center;
gap: 10px;
background: var(--bg-card);
border: 1.5px solid var(--border-light);
border-radius: var(--radius-md);
padding: 10px 14px;
}
.roles-filter-input {
flex: 1;
min-width: 0;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
background: #FBF9F6;
border: 1.5px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 8px 12px;
outline: none;
transition: border-color var(--transition-fast);
}
.roles-filter-input:focus {
border-color: var(--accent-walnut);
}
.roles-result {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--text-tertiary);
padding-left: 4px;
white-space: nowrap;
}
.roles-group {
background: var(--bg-card);
border: 1.5px solid var(--border-light);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.roles-group-head {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 14px;
padding: 12px 18px 10px;
border-bottom: 1px solid rgba(232, 226, 219, 0.9);
background: #FBF9F6;
}
.roles-group-name {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--text-secondary);
}
.roles-group-count {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--text-tertiary);
}
.roles-group-toggle {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 700;
color: var(--accent-walnut);
background: transparent;
border: 0;
padding: 2px 0;
cursor: pointer;
}
.roles-group-toggle:hover {
text-decoration: underline;
}
.roles-group-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
gap: 0 18px;
padding: 8px 18px 14px;
}
.roles-auth {
display: grid;
grid-template-columns: 16px 1fr;
align-items: start;
gap: 10px;
padding: 6px;
margin: 0 -6px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
text-wrap: pretty;
transition: background var(--transition-fast);
}
.roles-auth:hover {
background: rgba(237, 232, 225, 0.6);
}
.roles-auth input {
width: 15px;
height: 15px;
margin: 2px 0 0;
cursor: pointer;
accent-color: var(--accent-walnut);
}
.roles-empty {
background: var(--bg-card);
border: 1.5px solid var(--border-light);
border-radius: var(--radius-md);
padding: 40px;
text-align: center;
}
.roles-empty-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.3rem;
}
.roles-empty-sub {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-tertiary);
margin-top: 4px;
}
.roles-layout.is-grant-all .roles-areas,
.roles-layout.is-grant-all .roles-main {
opacity: 0.45;
pointer-events: none;
}
@media (max-width: 860px) {
.roles-admin {
padding: 20px 16px 48px;
}
.roles-thead, .roles-row {
grid-template-columns: 1fr;
gap: 8px;
}
.roles-th:not(:first-child) {
display: none;
}
.roles-total {
text-align: left;
}
.roles-row-actions {
justify-content: flex-start;
}
.roles-layout {
grid-template-columns: 1fr;
}
.roles-side {
position: static;
}
}
}
@charset "UTF-8";
.fixed-container {
position: relative;
}
.fixed-container .schedule-container {
overflow: auto;
position: relative;
}
.fixed-container TABLE.schedule, .fixed-container TABLE.fixed-process-column {
border-collapse: collapse;
table-layout: fixed;
}
.fixed-container TABLE.schedule THEAD TH, .fixed-container TABLE.fixed-process-column THEAD TH {
background: #eee;
border: 1px solid #ccc;
text-align: left;
padding: 2px 4px;
}
.fixed-container TABLE.schedule THEAD TR.days TH, .fixed-container TABLE.fixed-process-column THEAD TR.days TH {
font-size: 10px;
text-align: center;
font-weight: normal;
color: #333;
padding: 2px 0;
}
.fixed-container TABLE.schedule TBODY TH, .fixed-container TABLE.fixed-process-column TBODY TH {
text-align: right;
font-size: 12px;
border: 1px solid #ccc;
background: white;
}
.fixed-container TABLE.schedule TBODY TH.order-header, .fixed-container TABLE.fixed-process-column TBODY TH.order-header {
background: beige !important;
}
.fixed-container TABLE.schedule TBODY TD, .fixed-container TABLE.fixed-process-column TBODY TD {
position: relative;
border: 1px solid #ccc;
padding: 0;
height: 62px;
background-image: -moz-linear-gradient(left, transparent 0px, transparent 20px, rgba(160, 160, 160, 0.2) 21px); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0px, transparent), color-stop(20px, transparent), color-stop(21px, rgba(160, 160, 160, 0.2)), color-stop(21px, transparent)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(left, transparent 0px, transparent 20px, rgba(160, 160, 160, 0.2) 21px); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(left, transparent 0px, transparent 20px, rgba(160, 160, 160, 0.2) 21px); /* Opera 11.10+ */
background-image: -ms-linear-gradient(left, transparent 0px, transparent 20px, rgba(160, 160, 160, 0.2) 21px); /* IE10+ */
background-image: linear-gradient(to right, transparent 0px, transparent 20px, rgba(160, 160, 160, 0.2) 21px); /* W3C */
background-size: 21px 100%;
}
.fixed-container TABLE.fixed-process-column {
position: absolute;
left: 0;
top: 0;
}
.fixed-container TABLE.fixed-process-column.pop {
-webkit-box-shadow: 4px 0px 4px -4px rgba(0, 0, 0, 0.85);
-moz-box-shadow: 4px 0px 4px -4px rgba(0, 0, 0, 0.85);
box-shadow: 4px 0px 4px -4px rgba(0, 0, 0, 0.85);
}
.fixed-container .skip, .fixed-container .process, .fixed-container .order {
float: left;
height: 60px;
}
.fixed-container .order-cell {
cursor: pointer;
background: beige;
height: 25px !important;
}
.fixed-container .process {
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.8;
/* default for process names without an explicit color mapping below
(CUT, SEW, DESIGN, ...) — otherwise the bar is transparent and its
white text renders as an invisible box */
}
.fixed-container .process .liner {
background: var(--accent-walnut-light);
}
.fixed-container .process.color-red .liner {
background: red;
}
.fixed-container .process.color-CAD .liner {
background: #803E75;
}
.fixed-container .process.color-FRAME .liner {
background: #FF6800;
}
.fixed-container .process.color-FINISHING .liner {
background: #A6BDD7;
}
.fixed-container .process.color-UPHOLSTERY .liner {
background: #C10020;
}
.fixed-container .process.color-PACKAGING .liner {
background: #CEA262;
}
.fixed-container .process.color-ORDER-MATERIALS .liner {
background: green;
}
.fixed-container .process.color-7 .liner {
background: #817066;
}
.fixed-container .process.hover {
border-left: 2px solid blue;
margin-left: -2px;
}
.fixed-container .process.selected {
background: blue;
}
.fixed-container .process .liner {
margin: 1px;
border: 1px solid rgba(0, 0, 0, 0.5);
padding: 4px;
height: 48px;
}
.fixed-container .process .liner .job {
display: block;
font-weight: bold;
}
.fixed-container .process .liner .hours {
display: block;
font-size: 11px;
}
.fixed-container .process .liner .process {
display: none;
}
.fixed-container .mask {
position: absolute;
z-index: 10;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.25);
}
.process-detail-popup {
position: absolute;
}
.process-detail-popup .content {
border: 3px solid black;
border-radius: 4px;
background: white;
padding: 8px;
box-shadow: 0px 1px 4px black;
}
.process-detail-popup .content .job {
display: block;
font-weight: bold;
}
.process-detail-popup .content .hours {
display: block;
font-size: 11px;
}
.process-detail-popup .content .process {
display: block;
}
.process-detail-popup .content .order {
display: block;
}
.process-detail-popup .arrow {
display: block;
position: absolute;
height: 6px;
width: 100%;
top: -6px;
/* the popup-arrow-up/down.png files referenced here no longer exist
anywhere (the refs 404ed silently), so the pointer nub is gone —
the popover renders fine without it */
background: transparent;
}
.process-detail-popup.down .arrow {
top: auto;
bottom: -6px;
}
TABLE.process-list TD.sort-handle, TABLE.job-list TD.sort-handle {
width: 20px;
cursor: ns-resize;
padding: 0;
border-right: 1px solid #ddd;
background-color: #f5f5f5 !important;
/* the old gripper.png no longer exists; use the drag chevrons from
the icon set so the handle has a visible affordance again */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6C62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3C/svg%3E") !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 12px 12px !important;
}
TABLE.job-list, TABLE.holiday-list {
margin-top: 0;
}
TABLE.job-list TH, TABLE.holiday-list TH {
font-size: 13px;
}
TABLE.job-list TD, TABLE.holiday-list TD {
background: white !important;
cursor: ns-resize;
font-size: 13px;
}
TABLE.job-list TR:last-child TD, TABLE.holiday-list TR:last-child TD {
border-bottom: none;
}
TABLE.job-list TR TD A.add-button, TABLE.holiday-list TR TD A.add-button {
background-position: top left !important;
}
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{float:right;margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}
/* ── sfr-ui theme ──────────────────────────────────────────────────────────
select2 ships styled for a generic Bootstrap-ish form; these rules bring it
in line with the legacy_ui field styling the rest of this app's filter
panels use.
Deliberately NOT wrapped in @layer. The legacy_ui/* stylesheets are
unlayered, and an unlayered rule beats any layered one regardless of
specificity -- a @layer components block here would silently lose. This file
arrives via require_tree, which runs after legacy_ui in the manifest, so
plain rules win on source order.
------------------------------------------------------------------------ */
.select2-container .select2-selection--single {
height: 26px;
border: 1px solid #b4b4b4;
border-radius: 2px;
background: #fff;
}
.select2-container .select2-selection--single .select2-selection__rendered {
line-height: 24px;
padding-left: 6px;
font-size: 12px;
color: #333;
}
.select2-container .select2-selection--single .select2-selection__arrow {
height: 24px;
}
.select2-container--open .select2-dropdown {
border-color: #b4b4b4;
font-size: 12px;
}
/* The filter panel sits inside the legacy field grid, whose columns are
narrow; without this the widget collapses to its content width. */
.search-form .select2-container {
width: 100% !important;
}
/* stuff that comes from the template */
#masquerade-banner {
padding: 12px 8px;
background: #811;
color: white;
text-align: center;
z-index: 10;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #600;
border-left: none;
border-right: none;
}
#masquerade-banner A {
color: #fdd !important;
}
@charset "UTF-8";
@layer components {
.rb-spec {
max-width: 1280px;
margin: 0 auto;
padding: 28px 32px 112px;
font-family: var(--font-body);
color: var(--text-primary);
}
.rb-spec-head {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 18px;
}
.rb-spec-eyebrow {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.rb-spec-title {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 700;
line-height: 1.1;
margin: 0;
color: var(--text-primary);
}
.rb-spec-source {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
max-width: 820px;
}
.rb-spec-source-label {
flex: 0 0 auto;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-tertiary);
}
.rb-spec-source-file {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-mono);
font-size: 0.76rem;
color: var(--text-secondary);
background: rgba(90, 45, 28, 0.07);
border-radius: 4px;
padding: 2px 7px;
}
.rb-spec-source-pdf {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
font-weight: 700;
color: var(--accent-walnut);
}
.rb-spec-source-pdf svg {
width: 13px;
height: 13px;
}
.rb-spec-card {
background: var(--bg-card);
border: 1.5px solid var(--border-light);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
}
.rb-spec-header-card {
margin-bottom: 4px;
}
.rb-spec-card-title {
padding: 13px 18px 10px;
border-bottom: 1px solid rgba(232, 226, 219, 0.9);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.rb-spec-header-grid {
padding: 16px 18px 18px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.rb-spec-section-title {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 9px;
}
.rb-spec-section-title-sp {
margin-top: 4px;
}
.rb-spec-microlabel {
display: block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 5px;
}
.rb-spec-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin: 6px 0 0;
padding: 0 2px;
}
.rb-spec-toolbar-summary {
display: flex;
align-items: baseline;
gap: 8px;
}
.rb-spec-toolbar-total {
font-family: var(--font-mono);
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
}
.rb-spec-toolbar-unit {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.rb-spec-toolbar-dot {
color: var(--border-medium);
}
.rb-spec-toolbar-matched {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
}
.rb-spec-toolbar-actions {
display: flex;
align-items: center;
gap: 9px;
}
.rb-spec-toolbar-sep {
color: var(--border-medium);
}
.rb-spec-textbtn {
border: 0;
background: none;
cursor: pointer;
padding: 2px 1px;
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--accent-walnut);
transition: opacity var(--transition-fast);
}
.rb-spec-textbtn:hover {
opacity: 0.6;
text-decoration: underline;
}
.rb-spec-colhead {
display: flex;
align-items: center;
gap: 12px;
padding: 0 40px 0 17px;
margin: 12px 0 8px;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.rb-spec-colhead-gutter {
flex: 0 0 18px;
}
.rb-spec-colhead-item {
flex: 1 1 auto;
min-width: 0;
}
.rb-spec-colhead-match {
flex: 0 0 96px;
}
.rb-spec-colhead-type {
flex: 0 0 96px;
}
.rb-spec-colhead-qty {
flex: 0 0 52px;
text-align: right;
}
.rb-spec-colhead-price {
flex: 0 0 96px;
text-align: right;
}
.rb-spec-colhead-x {
display: none;
}
.rb-spec-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.rb-spec-item {
position: relative;
overflow: hidden;
background: var(--bg-card);
border: 1.5px solid var(--border-light);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
transition: opacity var(--transition-fast);
}
.rb-spec-stripe {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--accent-brass-light);
}
.rb-spec-item.is-matched .rb-spec-stripe {
background: var(--status-open);
}
.rb-spec-item.is-excluded {
opacity: 0.55;
}
.rb-spec-item.is-excluded .rb-spec-stripe {
background: var(--border-medium);
}
.rb-spec-row {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 40px 11px 16px;
min-width: 0;
}
.rb-spec-caret {
flex: 0 0 18px !important;
width: 18px !important;
height: 24px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: none !important;
cursor: pointer;
color: var(--text-tertiary) !important;
border-radius: 4px !important;
transition: color var(--transition-fast);
}
.rb-spec-caret svg {
width: 14px !important;
height: 14px !important;
transition: transform var(--transition-fast);
}
.rb-spec-caret:hover {
color: var(--accent-walnut) !important;
}
.rb-spec-item:not(.is-collapsed) .rb-spec-caret svg {
transform: rotate(90deg);
}
.rb-spec-check {
flex: 0 0 18px;
display: inline-flex;
align-items: center;
}
.rb-spec-idcell {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
}
.rb-spec-idtext {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.rb-spec-name {
min-width: 0;
}
.rb-spec-name input {
width: 100%;
border-color: transparent !important;
background: transparent !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
line-height: 1.3;
padding: 3px 6px !important;
color: var(--text-primary);
}
.rb-spec-name input:hover {
border-color: var(--border-light) !important;
background: var(--bg-card) !important;
}
.rb-spec-name input:focus {
border-color: var(--accent-walnut) !important;
background: var(--bg-card) !important;
}
.rb-spec-idmeta {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding-left: 6px;
}
.rb-spec-code {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 700;
color: var(--accent-walnut);
background: rgba(90, 45, 28, 0.07);
border-radius: 4px;
padding: 1px 6px;
white-space: nowrap;
}
.rb-spec-meta {
font-size: 0.72rem;
font-weight: 600;
color: var(--text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rb-spec-cell-match {
flex: 0 0 96px;
}
.rb-spec-cell-type {
flex: 0 0 96px;
}
.rb-spec-cell-qty {
flex: 0 0 52px;
}
.rb-spec-cell-price {
flex: 0 0 96px;
}
.rb-spec-cell-type input,
.rb-spec-cell-qty input,
.rb-spec-cell-price input {
width: 100%;
height: 32px;
padding: 0 9px !important;
font-size: 0.78rem;
font-weight: 700;
}
.rb-spec-cell-qty input,
.rb-spec-cell-price input {
font-family: var(--font-mono);
text-align: right;
}
.rb-spec-cell-type input {
color: var(--text-secondary);
}
.rb-spec-detail {
border-top: 1px solid rgba(232, 226, 219, 0.9);
background: var(--bg-card-hover);
padding: 16px 18px 18px 46px;
}
.rb-spec-item.is-collapsed .rb-spec-detail {
display: none;
}
.rb-spec-detail-grid {
display: grid;
grid-template-columns: minmax(320px, 1.1fr) minmax(280px, 1fr);
gap: 24px;
}
.rb-spec-detail-col {
display: flex;
flex-direction: column;
gap: 12px;
}
.rb-spec-detail-wide {
margin-top: 16px;
}
@media (max-width: 860px) {
.rb-spec-detail-grid {
grid-template-columns: 1fr;
}
}
.rb-spec-grid-2 {
grid-template-columns: 1fr 1fr;
}
.rb-spec-dims-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.rb-spec-source-panel {
border: 1px solid rgba(232, 226, 219, 0.9);
background: var(--surface-inset);
border-radius: var(--radius-sm);
padding: 11px 12px;
}
.rb-spec-source-text {
display: block;
margin: 0;
max-height: 180px;
overflow: auto;
font-family: var(--font-mono);
font-size: 0.74rem;
line-height: 1.45;
color: var(--text-secondary);
white-space: pre-wrap;
word-break: break-word;
tab-size: 2;
}
.rb-spec-source-empty {
font-style: italic;
}
.rb-spec-fieldgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: 10px 14px;
}
.rb-spec .field-pair {
display: block;
width: 100%;
border: 0;
border-collapse: collapse;
margin: 0;
}
.rb-spec .field-pair tbody,
.rb-spec .field-pair tr {
display: block;
}
.rb-spec .field-pair th,
.rb-spec .field-pair td {
display: block;
padding: 0;
text-align: left !important;
}
.rb-spec .field-pair label {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 5px;
display: block;
text-align: left !important;
}
.rb-spec input[type=text],
.rb-spec input[type=number],
.rb-spec input[type=email],
.rb-spec select,
.rb-spec textarea {
width: 100%;
font-family: var(--font-body);
font-size: 0.82rem;
color: var(--text-primary);
background: var(--bg-card);
border: 1.5px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 7px 9px;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.rb-spec textarea {
min-height: 52px;
resize: vertical;
}
.rb-spec input:focus,
.rb-spec select:focus,
.rb-spec textarea:focus {
outline: none;
border-color: var(--accent-walnut);
box-shadow: 0 0 0 3px rgba(90, 45, 28, 0.12);
}
.rb-spec label.checkbox {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.rb-spec label.checkbox input {
width: 18px;
height: 18px;
accent-color: var(--accent-walnut);
cursor: pointer;
}
.rb-spec label.checkbox .label {
display: none;
}
.rb-spec-pill {
display: inline-block;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 3px 10px;
border-radius: 20px;
white-space: nowrap;
background: var(--status-closed-bg);
color: var(--status-closed);
}
.rb-spec-pill.is-confirmed {
background: var(--status-open-bg);
color: var(--status-open);
}
.rb-spec-pill.is-suggested,
.rb-spec-pill.is-unmatched {
background: var(--status-hold-bg);
color: var(--status-hold);
}
.rb-spec-nestgroup {
margin-top: 18px;
}
.rb-spec-nest {
display: flex;
flex-direction: column;
gap: 9px;
}
.rb-spec-nest-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
background: var(--bg-primary);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 11px 13px;
}
.rb-spec-nest-row > .rb-spec-pill {
margin-left: auto;
}
.rb-spec-nest-row .rb-spec-fieldgrid {
flex: 1 1 100%;
min-width: 0;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.rb-spec-nest-row .picker-wrapper {
min-width: 0;
max-width: 100%;
}
.rb-spec-thumb-sm {
flex: none;
width: 46px;
height: 46px;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--border-light);
background: var(--bg-secondary);
}
.rb-spec-thumb-sm.is-empty {
background: repeating-linear-gradient(45deg, var(--bg-secondary), var(--bg-secondary) 4px, transparent 4px, transparent 8px);
}
.rb-spec-thumb {
flex: none;
width: 40px;
height: 40px;
object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
background: var(--surface-inset);
}
.rb-spec-thumb-empty {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-tertiary);
background: repeating-linear-gradient(45deg, var(--surface-inset), var(--surface-inset) 4px, transparent 4px, transparent 8px);
}
.rb-spec-footer {
position: sticky;
bottom: 0;
z-index: 5;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
background: rgba(237, 232, 225, 0.92);
backdrop-filter: blur(12px);
border-top: 2px solid var(--border-medium);
padding: 14px 4px;
}
.rb-spec-footer-count {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
}
.rb-spec-footer-actions {
display: flex;
align-items: center;
gap: 10px;
}
.rb-spec-footer-actions form {
margin: 0;
}
.rb-spec-created-note {
align-self: center;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--status-open);
}
.rb-spec-dirty-note {
font-size: 0.74rem;
color: var(--status-hold);
}
.rb-spec-state {
max-width: 520px;
margin: 72px auto;
text-align: center;
background: var(--bg-card);
border: 1.5px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: 44px 34px;
}
.rb-spec-state.is-error {
border-color: var(--status-rush);
}
.rb-spec-state-title {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 700;
margin: 0 0 8px;
}
.rb-spec-state-sub {
color: var(--text-secondary);
font-size: 0.9rem;
margin: 0 0 20px;
}
.rb-spec-spinner {
width: 34px;
height: 34px;
margin: 0 auto 20px;
border-radius: 50%;
border: 3px solid var(--border-light);
border-top-color: var(--accent-walnut);
animation: rb-spec-spin 0.8s linear infinite;
}
@keyframes rb-spec-spin {
to {
transform: rotate(360deg);
}
}
.rb-spec-count {
font-family: var(--font-mono);
font-weight: 600;
color: var(--accent-walnut);
}
.rb-spec-sub {
margin: 7px 0 0;
font-size: 0.85rem;
color: var(--text-secondary);
}
.rb-spec-index {
max-width: 1100px;
margin: 0 auto;
padding: 24px 32px 80px;
font-family: var(--font-body);
color: var(--text-primary);
}
.rb-spec-index-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
margin-bottom: 22px;
}
.rb-spec-index-link {
font-weight: 600;
color: var(--accent-walnut);
text-decoration: none;
}
.rb-spec-index-link:hover {
text-decoration: underline;
}
.rb-spec-pill.is-ready,
.rb-spec-pill.is-completed {
background: var(--status-open-bg);
color: var(--status-open);
}
.rb-spec-pill.is-processing,
.rb-spec-pill.is-pending {
background: var(--status-hold-bg);
color: var(--status-hold);
}
.rb-spec-pill.is-failed {
background: var(--status-rush-bg);
color: var(--status-rush);
}
.rb-spec .has-many {
display: flex;
flex-direction: column;
gap: 8px;
overflow: visible !important;
}
.rb-spec-nest .has-many {
gap: 9px;
}
.rb-spec .has-many .rb-spec-item {
margin-bottom: 0;
}
.rb-spec .sub {
display: block;
width: 100%;
min-width: 0;
}
.rb-spec .deletable {
position: relative;
display: block;
width: 100%;
margin: 0;
border: 0;
border-collapse: collapse;
}
.rb-spec .deletable > tbody {
display: block;
}
.rb-spec .deletable > tbody > tr {
display: block;
}
.rb-spec .deletable > tbody > tr > td {
display: block;
padding: 0;
min-width: 0;
}
.rb-spec .deletable > tbody > tr > td.tool {
position: absolute;
top: 15px;
right: 12px;
width: auto;
padding: 0;
z-index: 2;
}
.rb-spec-nest .deletable > tbody > tr {
display: flex;
align-items: center;
gap: 10px;
}
.rb-spec-nest .deletable > tbody > tr > td {
flex: 1 1 auto;
min-width: 0;
}
.rb-spec-nest .deletable > tbody > tr > td.tool {
position: static;
flex: 0 0 auto;
width: auto;
transform: none;
top: auto;
right: auto;
}
.rb-spec .deletable .delete-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: 0;
background: none !important;
background-image: none !important;
color: var(--text-tertiary);
font-size: 0;
line-height: 0;
text-decoration: none;
cursor: pointer;
transition: color var(--transition-fast);
}
.rb-spec .deletable .delete-button::before {
content: "✕";
font-size: 0.95rem;
font-weight: 600;
line-height: 1;
}
.rb-spec .deletable .delete-button:hover {
color: var(--status-rush);
}
.rb-spec-nest .deletable .delete-button {
width: 20px;
height: 20px;
}
.rb-spec-nest .deletable .delete-button::before {
font-size: 0.85rem;
}
.rb-spec .has-many-destroy {
display: none;
}
.rb-spec-pages {
margin-top: 24px;
border-top: 1px solid var(--border-light);
padding-top: 16px;
}
.rb-spec-pages > summary {
cursor: pointer;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.rb-spec-pages-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
margin-top: 16px;
}
.rb-spec-page {
display: block;
text-decoration: none;
color: var(--text-tertiary);
}
.rb-spec-page img {
width: 100%;
border: 1.5px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-card);
transition: border-color var(--transition-fast);
}
.rb-spec-page:hover img {
border-color: var(--accent-walnut);
}
.rb-spec-page span {
display: block;
margin-top: 5px;
font-size: 0.68rem;
font-weight: 700;
text-align: center;
}
.rb-spec-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 24px;
}
@media (max-width: 960px) {
.rb-spec-layout {
grid-template-columns: 1fr;
}
}
.rb-spec-layout-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.rb-spec-tray-sticky {
position: sticky;
top: 16px;
align-self: start;
max-height: calc(100vh - 32px);
overflow-y: auto;
border: 1.5px solid var(--border-light);
border-radius: var(--radius-md);
padding: 12px;
background: var(--bg-card);
}
@media (max-width: 960px) {
.rb-spec-tray-sticky {
position: static;
max-height: none;
}
}
.rb-spec-tray-filters {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.rb-spec-tray-filter {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
}
.rb-spec-tray-filter label {
min-width: 50px;
color: var(--text-secondary);
}
.rb-spec-tray-filter select {
flex: 1;
padding: 4px 8px;
}
.rb-spec-tray-page-section {
margin-bottom: 12px;
}
.rb-spec-tray-page-section-head {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 6px;
}
.rb-spec-tray-img-wrapper {
display: inline-block;
margin: 2px;
text-align: center;
}
.rb-spec-tray-img {
width: 64px;
height: 64px;
object-fit: cover;
cursor: grab;
border: 1.5px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-card);
transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.rb-spec-tray-img:hover {
border-color: var(--accent-walnut);
transform: scale(1.06);
}
.rb-spec-tray-img:active {
cursor: grabbing;
}
.rb-spec-tray-img-chip {
display: block;
font-size: 0.58rem;
color: var(--text-tertiary);
max-width: 80px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rb-spec-thumb-slot {
flex: none;
border-radius: var(--radius-sm);
outline: 2px dashed transparent;
outline-offset: 2px;
transition: outline-color var(--transition-fast), box-shadow var(--transition-fast);
}
.rb-spec-thumb-slot.is-drop-over {
outline-color: var(--accent-walnut);
box-shadow: 0 0 0 3px rgba(90, 45, 28, 0.12);
}
.rb-spec-thumb-slot.is-saving {
opacity: 0.5;
}
.rb-spec-thumb-slot.is-saved {
outline-color: var(--status-open);
}
.rb-spec-thumb-slot.is-error {
outline-color: var(--status-rush);
}
}
/* Style guide pages (/style_guide, /style_guide/icons). All classes are
sg- prefixed so nothing leaks into real pages. */
.sg-page {
max-width: 980px;
padding: 8px 4px 48px;
}
.sg-page .sg-title {
font-family: var(--font-display);
font-size: 2rem;
border-bottom: none;
margin-bottom: 4px;
}
.sg-page .sg-intro {
color: var(--text-secondary);
max-width: 70ch;
}
.sg-page .sg-section {
margin-top: 36px;
}
.sg-page .sg-section > h2 {
font-family: var(--font-display);
font-size: 1.3rem;
border-bottom: 1.5px solid var(--border-light);
padding-bottom: 6px;
margin-bottom: 12px;
}
.sg-page .sg-note {
font-size: 0.82rem;
color: var(--text-tertiary);
max-width: 80ch;
}
.sg-page .sg-note code {
font-family: var(--font-mono);
font-size: 0.78rem;
background: #F5F3F0;
padding: 1px 5px;
border-radius: 4px;
}
.sg-page .sg-sample {
background: white;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 18px;
margin: 10px 0;
}
.sg-page .sg-sample.sg-sample-flush {
padding: 0;
overflow: hidden;
}
.sg-page .sg-code {
background: #2A2320;
color: #E8E0D8;
font-family: var(--font-mono);
font-size: 0.74rem;
line-height: 1.55;
border-radius: var(--radius-sm);
padding: 12px 14px;
overflow-x: auto;
white-space: pre;
}
.sg-page {
/* tokens */
}
.sg-page .sg-swatches {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
margin: 12px 0;
}
.sg-page .sg-swatch {
display: flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 6px 10px;
font-size: 0.75rem;
}
.sg-page .sg-swatch .sg-swatch-chip {
width: 22px;
height: 22px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.08);
flex: none;
}
.sg-page .sg-swatch .sg-swatch-name code {
font-family: var(--font-mono);
font-size: 0.7rem;
}
.sg-page .sg-swatch .sg-swatch-label {
color: var(--text-tertiary);
margin-left: auto;
text-align: right;
}
.sg-page .sg-type-samples {
background: white;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 14px 18px;
}
.sg-page .sg-type-samples p {
margin: 6px 0;
}
.sg-page {
/* icons page */
}
.sg-page .sg-icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap: 8px;
}
.sg-page .sg-icon-cell {
display: flex;
align-items: center;
gap: 10px;
background: white;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 8px 12px;
}
.sg-page .sg-icon-cell .icon.no-label {
/* give the bare glyph a visible box in the grid */
width: 16px;
height: 16px;
background-position: center;
background-size: 15px 15px;
padding: 0;
flex: none;
}
.sg-page .sg-icon-cell .sg-icon-name {
font-size: 0.8rem;
font-weight: 600;
flex: none;
}
.sg-page .sg-icon-cell .sg-icon-class {
margin-left: auto;
min-width: 0;
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--text-tertiary);
text-align: right;
overflow-wrap: anywhere;
}
.sg-page .sg-icon-cell.sg-icon-cell-dark {
background: var(--accent-walnut);
}
.sg-page .sg-icon-cell.sg-icon-cell-dark .sg-icon-name {
color: var(--text-inverse);
}
.sg-page .sg-icon-cell.sg-icon-cell-dark .sg-icon-class {
color: rgba(245, 240, 235, 0.75);
}
|
|---|