/* App shell: the only scroll container is .content (MainLayout), which sits in a 100vh flex column. The page itself must never scroll — FluentDesignTheme and the toast/tooltip providers render as extra elements after the layout in , and their line boxes push the document past 100vh, which shows up as a second scrollbar next to .content's. */ html, body { height: 100%; overflow: hidden; } /* Breadcrumb spacing on "bare" pages (crumb sits directly in .content, no flex-gap wrapper). Gap-host pages nest the crumb inside .set-page/.sd-page/.bua and get spacing from that container's `gap`, so they are intentionally not matched here. */ .content > .pg-crumbs { margin-bottom: var(--space-md); } /* ========================================================================== Site Detail (and shared detail-tab) styles. Global (NOT scoped) on purpose: SiteDetail + SiteAssetsTab + SiteEmployeesTab all consume the same table / pill / card classes, and Blazor scoped CSS does not cross component boundaries. Prefix: .sd- ========================================================================== */ /* White container card that wraps the whole detail page (gray canvas shows as margin). */ .sd-shell { background: var(--color-primary-surface); border: 1px solid var(--color-text-base-border); border-radius: var(--radius-card); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); padding: 24px 28px; } .sd-page { display: flex; flex-direction: column; gap: 20px; } /* ---- Breadcrumb ---- */ .sd-crumbs { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-caption); color: var(--color-text-base-placeholder-text); } .sd-crumbs a { color: var(--color-text-base-description-icon-form); text-decoration: none; } .sd-crumbs a:hover { color: var(--color-text-base-link); text-decoration: underline; } .sd-crumbs .sd-crumb-sep { color: var(--color-text-base-button-cancel); } .sd-crumbs .sd-crumb-current { color: var(--color-neutral-description-icon-form-divider); font-weight: var(--font-weight-semibold); } /* ---- Title row ---- */ .sd-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .sd-title { margin: var(--space-0); font-size: var(--font-size-heading); font-weight: var(--font-weight-bold); color: var(--color-neutral-title-content); } .sd-head__meta { display: inline-flex; align-items: center; gap: 12px; } .sd-last-activity { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--color-primary-surface); border: 1px solid var(--color-text-base-border); font-size: var(--font-size-caption); color: var(--color-neutral-description-icon-form-divider); font-weight: var(--font-weight-semibold); } .sd-last-activity .sd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-base-placeholder-text); } /* ---- Info strip (code / province / people) ---- */ .sd-info-strip { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 36px; } .sd-field__label { font-size: var(--font-size-label); color: var(--color-text-base-placeholder-text); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-xs); } .sd-field__value { font-size: var(--font-size-body); color: var(--color-neutral-title-content); font-weight: var(--font-weight-semibold); } .sd-field__label--required::after { content: ' *'; color: var(--color-status-error); } /* ---- SiteForm: two , so the rule above no longer reaches them — its selector matched a class the migration removed. Their flex item is _FieldFrame's wrapper (PecSearchableSelect renders INSIDE it), so target every direct child except the "-" separator rather than a component-specific class. Without this each picker falls back to `flex: 0 1 auto` and shrinks to its content (~42px, measured, vs the 190px its grid neighbours get). */ .sd-hours > *:not(.sd-hours__sep) { min-width: 0; flex: 1 1 0; } .sd-hours__sep { color: var(--color-text-base-placeholder-text); flex: 0 0 auto; } .sd-people-pill { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-sm); padding: 10px 16px; border-radius: var(--radius-input); background: var(--color-text-base-background-soft); border: 1px solid var(--color-blue-200); color: var(--color-primary-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-tag); } /* ---- Overview: site photo + stat cards + responsible card ---- */ .sd-overview { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-md); } @media (max-width: 900px) { .sd-overview { grid-template-columns: 1fr; } } /* Site photo — sits beside the project-info fields. */ .sd-photo-panel { display: flex; flex-direction: column; gap: var(--space-sm); } .sd-photo-panel .sd-btn { justify-content: center; cursor: pointer; } .sd-photo-box { /* Fixed 16:9 frame: the box never reflows to the image, so a portrait upload and a landscape one occupy the same slot (the image itself is cover-cropped). */ width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-button); border: 1px solid var(--color-text-base-border); /* Light fill so a transparent PNG stays visible instead of blending into a dark box. */ background: var(--color-primary-surface); overflow: hidden; display: flex; align-items: center; justify-content: center; } .sd-photo-img { width: 100%; height: 100%; object-fit: cover; } /* Project-info card: photo column beside the field grid (roughly the 46/54 split of the design). min-width:0 on the grid so long values wrap instead of pushing the photo out. */ .sd-project { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: var(--space-lg); align-items: start; } @media (max-width: 900px) { .sd-project { grid-template-columns: 1fr; } } /* The map row and the operations note sit full-width UNDER that split. */ .sd-maprow { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: 18px; } .sd-maprow__label { font-size: var(--font-size-label); color: var(--color-text-base-placeholder-text); } .sd-maprow__control { display: flex; gap: var(--space-sm); align-items: center; } .sd-maprow__input { flex: 1; min-width: 0; } /* 42px, not the sd-btn default 40px, so the button lines up with the input it sits next to. */ .sd-maprow__copy { height: 42px; flex: 0 0 auto; white-space: nowrap; } .sd-map-link { display: inline-flex; align-items: center; gap: var(--space-xs); } /* SiteForm has no photo panel, so its card body is a single column. */ .sd-form-col { display: flex; flex-direction: column; gap: var(--space-md); } .sd-overview__right { display: flex; flex-direction: column; gap: var(--space-md); } .sd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 560px) { .sd-stats { grid-template-columns: repeat(2, 1fr); } } .sd-stat-card { background: var(--color-blue-100); border: 1px solid transparent; border-radius: var(--radius-button); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); padding: 14px; display: flex; flex-direction: column; gap: 6px; position: relative; } .sd-stat-card__num { font-size: var(--font-size-summary); font-weight: var(--font-weight-extrabold); color: var(--color-neutral-title-content); line-height: 1; } .sd-stat-card__label { font-size: var(--font-size-label); color: var(--color-text-base-placeholder-text); font-weight: var(--font-weight-semibold); } .sd-stat-card__icon { position: absolute; top: 12px; right: 12px; color: var(--color-text-base-placeholder-text); } .sd-contact-card { background: var(--color-component-card-bg); border: 1px solid var(--color-text-base-border); border-radius: var(--radius-button); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); padding: 14px 16px; } .sd-contact-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .sd-contact-card__title { font-size: var(--font-size-label); font-weight: var(--font-weight-bold); color: var(--color-neutral-title-content); } .sd-contact-card__line { font-size: var(--font-size-body); color: var(--color-text-base-description-icon-form); margin-top: 2px; } .sd-person { border: 1px solid var(--color-text-base-border); border-radius: var(--radius-input); padding: 10px 12px; } .sd-person + .sd-person { margin-top: var(--space-sm); } .sd-person--primary { background: var(--color-text-base-background-soft); border-color: var(--color-navy-blue-100); } .sd-person__name { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-neutral-title-content); } .sd-person__line { font-size: var(--font-size-body); color: var(--color-text-base-description-icon-form); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sd-person__contact { margin-left: var(--space-sm); color: var(--color-primary-primary); font-weight: var(--font-weight-semibold); } /* ---- Card (white panel) ---- */ .sd-card { background: var(--color-component-card-bg); border: 1px solid var(--color-text-base-border); border-radius: var(--radius-button); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } .sd-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; } .sd-card__title { margin: var(--space-0); font-size: var(--font-size-header-card); font-weight: var(--font-weight-bold); color: var(--color-neutral-title-content); } .sd-card__body { padding: 0 20px 20px; } /* Bare cards (no __head/__body) that need their own inner padding + vertical rhythm — sections 1 & 3 on the detail page. Flex column with gap restores the spacing the old .sd-page wrapper gave. */ .sd-card--pad { padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; } /* ---- Project info grid ---- */ .sd-infogrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 24px; } .sd-infogrid--form { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 2fr) minmax(0, 1fr); } /* Detail page: three columns beside the photo (the form variant keeps its own four). */ .sd-infogrid--detail { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sd-field--span2 { grid-column: span 2; } .sd-field--span3 { grid-column: span 3; } @media (max-width: 900px) { .sd-infogrid--detail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sd-field--span2, .sd-field--span3 { grid-column: span 2; } } @media (max-width: 900px) { .sd-infogrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .sd-infogrid--form { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sd-remark { margin-top: 18px; padding: 14px 16px; background: var(--color-text-base-background); border: 1px solid var(--color-status-pending-vbright); border-radius: var(--radius-input); } .sd-remark__label { font-size: var(--font-size-label); color: var(--color-text-base-placeholder-text); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-xs); } /* Free text typed by site staff: keep their line breaks, and break mid-word when a single token (a pasted URL, a run of Thai without spaces) is wider than the box — otherwise it runs off the card. */ .sd-remark__text { font-size: var(--font-size-body); color: var(--color-neutral-description-icon-form-divider); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } /* ---- Buttons ---- */ .sd-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; font-size: var(--font-size-button); font-weight: var(--font-weight-semibold); border-radius: var(--radius-lg); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; } .sd-btn--ghost { background: var(--color-text-base-background-soft); color: var(--color-primary-primary); border-color: var(--color-navy-blue-100); } .sd-btn--ghost:hover:not(:disabled) { background: var(--color-primary-primary-very-bright); } /* Filled pale-blue action, borderless — the card-header "add" affordance in the site design. */ .sd-btn--soft { background: var(--color-navy-blue-100); color: var(--color-primary-primary); } .sd-btn--soft:hover:not(:disabled) { background: var(--color-navy-blue-200); } .sd-btn--navy { background: var(--color-navy-blue-900); color: var(--color-text-base-white-text); } .sd-btn--navy:hover:not(:disabled) { background: var(--color-neutral-title-content); } .sd-btn--link { height: auto; padding: 6px 12px; background: var(--color-semantic-extra-highlight-bg); color: var(--color-semantic-extra-highlight-text); border-color: var(--color-orange-200); } .sd-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* ---- Tabs ---- */ .sd-tabs { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--color-text-base-border); } .sd-tab { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 13px 24px; font-size: var(--font-size-base); color: var(--color-text-base-placeholder-text); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; margin-bottom: -1px; } .sd-tab:hover { color: var(--color-neutral-description-icon-form-divider); } /* Selected tab (Figma): soft-blue fill + navy bold text + 3px red underline. */ .sd-tab--active { background: var(--color-text-base-background-soft); color: var(--color-primary-navigation-bg); font-weight: var(--font-weight-bold); border-bottom-color: var(--color-red-700); } /* Mobile-only: a tab row with several icon+label tabs (InstanceCreate.razor: up to 5) doesn't fit a 375px viewport. Scroll it horizontally instead of clipping — additive, mobile-scoped only, so desktop's tab strip (SiteDetail.razor / MaterialLotDetail.razor / InstanceCreate.razor) is byte-identical above this breakpoint. */ @media (max-width: 768px) { .sd-tabs { overflow-x: auto; flex-wrap: nowrap; } .sd-tab { flex: 0 0 auto; white-space: nowrap; } } /* ---- Toolbar above tab content ---- */ .sd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sd-toolbar__title { margin: var(--space-0); font-size: var(--font-size-summary); font-weight: var(--font-weight-bold); color: var(--color-neutral-title-content); } .sd-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .sd-filter { display: flex; flex-direction: column; gap: var(--space-xs); } .sd-filter--grow { flex: 1 1 320px; min-width: 220px; } .sd-filter--status { flex: 0 0 220px; } .sd-filter__label { font-size: var(--font-size-label); color: var(--color-text-base-placeholder-text); font-weight: var(--font-weight-semibold); } .sd-input { height: 42px; padding: 0 14px; font-size: var(--font-size-input); color: var(--color-neutral-title-content); background: var(--color-primary-surface); border: 1px solid var(--color-text-base-button-cancel); border-radius: var(--radius-lg); outline: none; box-sizing: border-box; width: 100%; } /* Multi-line inputs: .sd-input's single-line 42px height + zero vertical padding would crush a textarea to one line with its text pinned against the top edge. Height follows `rows` instead. */ textarea.sd-input { height: auto; padding: 10px 14px; line-height: 1.5; resize: vertical; } .sd-input::placeholder { color: var(--color-text-base-placeholder-text); } /* readonly inputs read as non-editable (subtle grey), mirroring the vendor .vd-input[readonly] pattern */ .sd-input[readonly], .sd-input:disabled { background: var(--color-text-base-disabled-bg); color: var(--color-text-base-description-icon-form); cursor: default; } .sd-input--preview { color: var(--color-text-base-placeholder-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; } .sd-input:focus { border-color: var(--color-primary-primary); box-shadow: var(--shadow-active-state); } .sd-input--invalid, .sd-input--invalid:focus { border-color: var(--color-status-error); box-shadow: none; } .cust-field__error { margin-top: var(--space-xs); font-size: var(--font-size-label); color: var(--color-status-error); } /* Required marker — the asterisk is decoration, so it comes from CSS (red) and not from the label text. */ .cust-field__label--required::after { content: ' *'; color: var(--color-status-error); } .sd-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: var(--space-xl); } /* DateInput renders a Fluent text field. Keep the Fluent shadow-root box as the single visible input; otherwise .sd-input styles the host as a second box around it. */ fluent-text-field.sd-input { display: block; width: 100%; height: 42px; min-height: 0; box-sizing: border-box; padding: 0; background: transparent; border: none; --accent-fill-rest: transparent; --accent-fill-hover: transparent; --accent-fill-active: transparent; --accent-fill-focus: transparent; color: var(--color-text-base-description-icon-form); } fluent-text-field.sd-input::part(root) { width: 100%; height: 42px; box-sizing: border-box; background: var(--color-primary-surface); border: 1px solid var(--color-text-base-button-cancel); border-radius: var(--radius-lg); font-size: var(--font-size-input); color: var(--color-neutral-title-content); } fluent-text-field.sd-input:focus-within::part(root) { border-color: var(--color-primary-primary); } fluent-text-field.sd-input::part(control) { flex: 1 1 auto; width: 100%; min-width: 0; font-size: inherit; color: inherit; /* Match .sd-input's 14px gutter — Fluent's default control padding is narrower, which left the date text out of line with every sibling input in the same grid. */ padding: 0 14px; } /* ---- Detail table (navy header, red left accent) ---- */ .sd-table-card { background: var(--color-component-card-bg); border: 1px solid var(--color-text-base-border); border-radius: var(--radius-button); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); overflow: hidden; } .sd-table-card__head { padding: 18px 20px 12px; } .sd-table-card__head--split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .sd-table-card__title { margin: var(--space-0); font-size: var(--font-size-header-card); font-weight: var(--font-weight-bold); color: var(--color-neutral-title-content); } .sd-table-card__count { margin-top: 2px; font-size: var(--font-size-caption); color: var(--color-text-base-placeholder-text); } /* The card itself has no padding (the table runs edge to edge), so a filter row inside it carries its own gutters. */ .sd-table-card__filters { padding: 0 20px 16px; } /* Nested in a padded card (the site-detail tab panels), the table is no longer its own card: drop the chrome and the gutters so it sits flush inside the surrounding card's padding. */ .sd-card .sd-table-card { border: none; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; } .sd-card .sd-table-card__head { padding: 0 0 12px; } .sd-card .sd-table-card__filters { padding: 0 0 16px; } /* Without the card clipping it, the table rounds its own corners (the dark header reads as a bar). */ .sd-card .sd-table__scroll { border: 1px solid var(--color-text-base-border); border-radius: var(--radius-button); } /* The empty panel carries side margins for the edge-to-edge card; flush inside one, they read as a double gutter. */ .sd-card .sd-doc-empty { margin-left: var(--space-0); margin-right: var(--space-0); } .sd-table__scroll { overflow-x: auto; } .sd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--font-size-table-line); } .sd-table__empty { text-align: center; padding: 28px 16px; color: var(--color-text-base-placeholder-text); } .sd-doc-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; margin: 16px 20px; border: 1px dashed var(--color-text-base-border); border-radius: var(--radius-button); background: var(--color-neutral-background); } .sd-doc-empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-text-base-disabled-bg); display: flex; align-items: center; justify-content: center; } .sd-doc-empty__text { font-size: var(--font-size-body); color: var(--color-text-base-description-icon-form); }.sd-table thead th { background: var(--color-navy-blue-900); color: var(--color-text-base-white-text); font-weight: var(--font-weight-semibold); text-align: left; padding: 13px 16px; white-space: nowrap; } .sd-table thead th:first-child { border-left: 3px solid var(--color-status-error); } .sd-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--color-text-base-disabled-bg); color: var(--color-neutral-description-icon-form-divider); vertical-align: middle; } .sd-table tbody tr:last-child td { border-bottom: none; } .sd-table tbody tr:nth-child(even) { background: var(--color-neutral-background); } /* zebra striping */ .sd-table tbody tr:hover { background: var(--color-text-base-disabled-bg); } /* hover wins (declared after zebra) */ /* Asset-note search: one full-width field with a leading magnifier, above the note table. */ .sd-asset-search { position: relative; padding: 0 20px 14px; } .sd-asset-search__icon { position: absolute; left: 32px; top: 12px; color: var(--color-text-base-placeholder-text); pointer-events: none; } .sd-asset-search__input { width: 100%; padding-left: 36px; } /* Site photo gallery: a tinted panel inset inside the asset-notes card, below the note table. Square thumbnails followed by a dashed upload tile of the same size. */ .sd-gallery-block { margin: 8px 20px 20px; padding: 16px; background: var(--color-navy-blue-50); border-radius: var(--radius-button); } .sd-gallery-block__head { padding-bottom: 12px; } .sd-gallery-block__title { margin: var(--space-0); font-size: var(--font-size-header-card); font-weight: var(--font-weight-bold); color: var(--color-neutral-title-content); } .sd-gallery-block__count { margin-left: var(--space-sm); font-size: var(--font-size-caption); font-weight: var(--font-weight-regular); color: var(--color-text-base-placeholder-text); } .sd-gallery-block__hint { margin-top: 2px; font-size: var(--font-size-caption); color: var(--color-text-base-placeholder-text); } .sd-gallery { padding: 0; position: relative; } /* One scrolling row, not a wrapping grid: the card keeps a fixed height however many photos exist. */ .sd-gallery__grid { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; padding-bottom: 4px; } .sd-gallery__thumb, .sd-gallery__drop { flex: 0 0 auto; } .sd-gallery__arrow { position: absolute; top: 46px; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-text-base-border); border-radius: 50%; background: var(--color-primary-surface); color: var(--color-primary-primary); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .12); } .sd-gallery__arrow:disabled { opacity: .35; cursor: default; } .sd-gallery__arrow--prev { left: -12px; } .sd-gallery__arrow--next { right: -12px; } .sd-gallery__thumb { position: relative; width: 104px; height: 104px; border: 1px solid var(--color-text-base-border); border-radius: var(--radius-button); overflow: hidden; background: var(--color-primary-surface); } .sd-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; } .sd-gallery__remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(15, 23, 42, 0.6); color: var(--color-text-base-white-text); cursor: pointer; } .sd-gallery__remove:disabled { opacity: 0.5; cursor: default; } /* The native control is replaced by the label tile, but must stay focusable for keyboard users — so it is transparent and stretched over the tile rather than parked off-layout. */ .sd-gallery__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .sd-gallery__drop { position: relative; width: 104px; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--color-navy-blue-200); border-radius: var(--radius-button); background: var(--color-primary-surface); font-size: var(--font-size-caption); color: var(--color-primary-primary); cursor: pointer; text-align: center; } .sd-col-action { width: 96px; text-align: right; white-space: nowrap; } .sd-col-check { width: 44px; text-align: center; } .sd-col-check input { width: 16px; height: 16px; accent-color: var(--color-primary-primary); cursor: default; } .sd-asset-name { font-weight: var(--font-weight-semibold); color: var(--color-neutral-title-content); } .sd-asset-sub { margin-top: 2px; font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); color: var(--color-status-error); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; } .ab-branch-badge { font-size: 0.75rem; color: var(--color-status-error); margin-top: 2px; } /* Chip picker — a short, flat set of options laid out as tap targets instead of a / inside "root" — stretch it to fill whatever horizontal space "root" isn't using for its start/end icon slots (flex child, so 100% here means "take remaining space", not "match root's own 100%" — confirmed live: control's rendered width is narrower than root's by exactly root's padding + the end-slot calendar-icon width, as expected). */ width: 100%; flex: 1 1 auto; min-width: 0; font-size: inherit; color: inherit; } /* Styled file picker (native input hidden; label acts as the button) */ .cust-file { display: flex; align-items: center; gap: .75rem; } .cust-file .sd-btn { cursor: pointer; flex: 0 0 auto; } .cust-file__name { font-size: var(--font-size-caption); color: var(--color-text-base-description-icon-form); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Vendor detail — stacked form matching Figma (ID, Name, [Contact|Phone|Email], Address) */ .vd-form { display: flex; flex-direction: column; gap: var(--space-md); padding: 0.25rem; box-sizing: border-box; width: 100%; min-width: 0; } .vd-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; width: 100%; min-width: 0; box-sizing: border-box; } /* Grid items must be allowed to shrink below their content's intrinsic width, or a wide child (e.g. a PecSelect whose sizes to its longest option) blows the 1fr track out past the row edge. */ .vd-row3 > * { min-width: 0; } /* ProductCategoryModal — the 3 classification selects stack one-per-line (the 3-up row3 was too tight for the label + placeholder in this narrow dialog). */ .pcm-selects { display: flex; flex-direction: column; gap: var(--space-md); } .pcm-selects > * { min-width: 0; } /* Footer buttons centered with a small gap (← Close / Confirm →). */ .pcm-footer { display: flex; justify-content: center; align-items: center; gap: var(--space-md); width: 100%; } @media (max-width: 768px) { .vd-row3 { grid-template-columns: 1fr; } } .vd-field { display: flex; flex-direction: column;} /* AssetDetail.razor / MaterialLotDetail.razor's status-toggle field — was an inline `style="width: 50%;"` on both call sites (grepped, exactly 2). Ported to a class purely so a mobile media query can override it (inline styles beat any stylesheet rule targeting the same class regardless of specificity — same reason InstanceCreate.razor's `.vd-fields-grid` inline styles had to move out). Value is byte-identical to what was inline; desktop unaffected. */ .vd-field--half { width: 50%; } @media (max-width: 560px) { .vd-field--half { width: 100%; } } .vd-input { width: 100%; background: var(--color-primary-surface); border: 1px solid var(--color-text-base-border); border-radius: var(--radius-lg); padding: .5rem .75rem; min-height: 40px; font-size: var(--font-size-body); color: var(--color-navy-blue-900); box-sizing: border-box; } .vd-input:focus { outline: none; border-color: var(--color-primary-primary); box-shadow: var(--shadow-active-state); } .vd-input[readonly] { background: var(--color-neutral-background); color: var(--color-neutral-description-icon-form-divider); } .vd-input--preview { color: var(--color-text-base-placeholder-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; } /* Auto-growing remark box: height tracks content (field-sizing where supported), no manual resize. */ .vd-textarea { resize: none; field-sizing: content; min-height: 64px; line-height: 1.4; font-family: inherit; } .vd-charcount { margin-top: var(--space-xs); text-align: right; font-size: var(--font-size-label); color: var(--color-text-base-placeholder-text); } .vd-error { background: var(--color-component-feedback-card-bg); border: 1px solid var(--color-red-200); color: var(--color-red-700); border-radius: var(--radius-lg); padding: .625rem .875rem; font-size: var(--font-size-body); } .vd-input--invalid, .vd-input--invalid:focus { border-color: var(--color-red-700); box-shadow: none; } .vd-field-error { margin-top: var(--space-xs); font-size: var(--font-size-label); color: var(--color-red-700); } /* SkuDetail.razor (create + detail state) — page-scoped layout primitives matching design/product/sku_detail.css's photo-left/fields-right split (Frame 1410069376) and its 3 asymmetric field-row shapes (Frame 1410069245/1410069244/1410069246), which the shared .vd-row3 (always-3-equal-columns) grid cannot express. Deliberately NOT folded into .vd-row3 itself — that class is used by other pages with its original fixed-3-col shape; these are new, additive classes, see research/2026-07-22-sku-detail-layout-css-diff.md §1/§2. */ .sku-layout { display: flex; flex-direction: row; gap: var(--space-md); align-items: flex-start; } .sku-layout__upload { flex: 0 0 auto; } .sku-layout__fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-md); } @media (max-width: 768px) { .sku-layout { flex-direction: column; } } .sku-row-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: start; } .sku-row-category { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .sku-row-full { display: grid; grid-template-columns: 1fr; } @media (max-width: 768px) { .sku-row-code { grid-template-columns: 1fr; } } /* InstanceCreate.razor top card (design/product/instance create.png, design/product/instance create.css) — form (left) + printable QR sticker card (right, edit mode only). All colors below are exact matches to the Figma export's hex values via existing tokens (no new tokens needed): #060D1D header -> --color-text-base-title-content, #F8FAFC QR tile -> --color-neutral-background, #13284F Print button -> pec-btn--primary's own navy (unchanged, no override needed). */ .ic-layout { display: flex; flex-direction: row; gap: var(--space-lg); align-items: flex-start; width: 100%; } /* InstanceCreate's top card head sits tighter than the Figma design wants — add breathing room above the title. Scoped to .ic-layout so shared .ed-card heads on other pages are unaffected. */ .ic-layout .ed-card__head { padding-top: var(--space-md); padding-bottom: var(--space-md); } .ic-layout__form { flex: 1 1 auto; min-width: 0; padding: var(--space-md);} /* Edit-mode card-head action cluster (rental-offerings link + status badge + history icon button) — was an inline `style="display:flex; align-items:center; gap: var(--space-sm);"` on the wrapper div; ported to a class with the exact same 3 declarations (no value changed) purely so a mobile-only media query can add wrapping below, which an inline style can't be overridden by. */ .ic-head-actions { display: flex; align-items: center; gap: var(--space-sm); } /* Mobile-only: this cluster can hold 3 controls (button + badge + icon button) that don't fit next to the card title in a 375px row. Let it wrap instead of overflowing. Desktop (unscoped rule above) is untouched. */ @media (max-width: 560px) { .ic-head-actions { flex-wrap: wrap; row-gap: var(--space-sm); } } @media (max-width: 900px) { .ic-layout { flex-direction: column; } } /* QR sticker card is a fixed-percentage FLEX-BASIS column while .ic-layout is a row; once the row flips to a column at <=900px above, flex-basis governs height instead of width and the card gets squashed. Let it take the container's full width in the stacked layout instead. */ @media (max-width: 900px) { .ic-qr-card { flex-basis: auto; width: 100%; } } /* InstanceCreate.razor's 4 metadata-tab bodies (VehicleInfo/ToolMachineInfo/Driver/Inspection) — was previously an inline `style="display:grid; grid-template-columns: repeat(3, 1fr); ..."` on each tab's wrapper div; moved into this class so a media query can actually override it (inline styles beat stylesheet rules regardless of specificity, so a @media rule targeting the class had no effect while the grid columns lived inline). Values below are the exact ones that were inline. */ .vd-fields-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); padding: 1.25rem 1.25rem; } @media (max-width: 900px) { .vd-fields-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .vd-fields-grid { grid-template-columns: 1fr; } } .ic-qr-card { flex: 0 0 20%; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); padding: var(--space-md); } /* .ic-qr-card__box, __header, __canvas, __code, __meta, __bu retired — the sticker chrome itself (box/header/canvas/code/category strip/BU footer) now comes from the shared QrSticker component (Components/Shared/Ui/QrSticker.razor + its own scoped .razor.css), the same component QrAssetBindModal/QrBatchCreate use. Only .ic-qr-card (this card's own column layout), .ic-qr-card__empty (the dashed unbound placeholder, rendered into QrSticker's Empty fragment) and .ic-qr-card__register-btn (a PecButton variant override) still belong to this page. Unbound state (no sticker bound yet — sticker-only issuance, 2026-07-31). The card renders WITHOUT the __header and __bu bars here: those black strips are the printed sticker's chrome, and there is no sticker to print yet. The unbound card is therefore deliberately shorter than the bound one — binding grows it, which is the correct signal that something now exists. 200px is the bound QR stack measured against the tokens above (canvas 128 + margin-top --space-md 16, then __code ≈28 + --space-sm 8, then __meta ≈17 + --space-xs 4), minus the frame's own top and bottom margin so the dashed box occupies the same slot the QR will. */ .ic-qr-card__empty { min-height: calc(200px - 2 * var(--space-md)); align-self: stretch; display: flex; align-items: center; justify-content: center; /* Dashed placeholder frame rather than bare text: the empty state occupies the slot the QR will fill, so it should read as "a sticker goes here", not as a caption. */ margin: var(--space-md); padding: var(--space-md); box-sizing: border-box; border: 1px dashed var(--color-text-base-border); border-radius: var(--radius-md); text-align: center; font-size: var(--font-size-tiny); font-weight: var(--font-weight-semibold); color: var(--color-text-base-placeholder-text); } /* Gap: Figma's register-QR fill (#FEF3C7 / navy text) matches neither pec-btn--primary-light (pale BLUE) nor pec-btn--warning (solid amber) exactly — reusing the existing --color-semantic-extra-warning-bg/-text pair here (same tokens ProductCategory's group tag already uses for this precise pale-amber look) via a scoped override, same dual ::part(control) + a.pec-btn selector shape every other PecButton variant override in this file uses. */ .ic-qr-card__register-btn::part(control), a.ic-qr-card__register-btn { background: var(--color-semantic-extra-warning-bg); color: var(--color-semantic-extra-warning-text); } /* ── print — single element ───────────────────────────────────────────────────────────────── Paired with js/print-element.js: window.printElement(selector) stamps .is-printing-element on and .is-print-target on the element, prints, then removes both on afterprint. Nothing here applies to an ordinary Ctrl+P or to the pages that deliberately print whole (DeliveryPrep, DeliveryReceipt) — the body class only exists during a printElement() call. visibility (not display) is what hides the rest: display:none on ancestors would take the target down with them, whereas visibility is re-assertable on a descendant subtree. The target is then position:fixed so no ancestor's overflow/clip can crop it, and print-color-adjust:exact keeps the sticker's black header/footer bars from being dropped as "background graphics". */ @media print { body.is-printing-element * { visibility: hidden !important; } body.is-printing-element .is-print-target, body.is-printing-element .is-print-target * { visibility: visible !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.is-printing-element .is-print-target { position: fixed; top: 0; left: 0; margin: 0; box-shadow: none; } /* The target is the SHEET — one page of label stock. It covers the page box exactly and the labels on it are placed absolutely, so a sheet carrying two labels needs no flow layout at print time (its on-screen flex row would have to be re-derived in page coordinates anyway). */ body.is-printing-element .ic-qr-card__sheet.is-print-target { width: 100%; height: 100%; display: block; gap: 0; } body.is-printing-element .ic-qr-card__sheet.is-print-target .qr-sticker { position: absolute; top: 50%; left: 50%; /* The quarter turn. The tag is authored portrait (40x60 / 25x50) and the stock is landscape, so it is rotated rather than re-flowed - preview and print stay the identical artwork, one just lies on its side on the roll. Rotation happens about the label's own centre (the default transform-origin) AFTER the translate has moved that centre onto the target point; written the other way round the translate would run along the rotated axes and throw the tag off the page. */ transform: translate(-50%, -50%) rotate(90deg); border: none; border-radius: 0; /* Fill the page across the label's SHORT axis, and ONLY that one. Prints leave a ~3mm white band at one edge: the label is authored 25mm/40mm across, but the page the driver hands over is a little deeper than that (the die-cut gap appears to sit inside the form), so a fixed mm can never quite reach the edge. 100vh is 100% of the page box height, and the tag is rotated a quarter turn, so its WIDTH is what lands on that height. The long axis stays in authored mm deliberately — that is the axis the 2-across seam runs along, and an earlier pass that stretched BOTH (100vw + 100vh) made one label's artwork straddle both die-cuts. Short axis only. */ width: 100vh; } /* Label stock, one named @page per preset - @page takes no selector, so a body-level `page:` property is the only way to pick a size per print, and printElement()'s second argument adds the matching body class. A plain Ctrl+P and the whole-page prints (DeliveryPrep, DeliveryReceipt) carry no such class and keep the browser's own defaults. Sizes are the stock as the driver holds it - landscape - because the artwork above is the thing being rotated. Letting the printer's default stock stand instead (no `size`) was tried on 2026-08-03 and reverted: it removed the need for driver setup but fed a full 101.6mm page per label, leaving ~3cm of blank liner every print. The 2-across page is the whole 100mm ROW of two labels, not one 50mm label - that is the operator's Godex form, the only one the printer accepts for this roll. Asking for 50x25 made Chrome fall back to its default paper; omitting `size` handed orientation to the print dialog's layout radio. An explicit size matching a real driver form is what makes the orientation deterministic and the radio irrelevant. */ @page sticker-60x40 { size: 60mm 40mm; margin: 0; } @page sticker-50x25 { size: 100mm 25mm; margin: 0; } body.is-printing-element.print-60x40 { page: sticker-60x40; } body.is-printing-element.print-50x25 { page: sticker-50x25; } /* Single-across roll: one label, page centre. */ body.is-printing-element.print-60x40 .ic-qr-card__sheet.is-print-target .qr-sticker { left: 50%; } /* 2026-08-05: the print-50x25 :first-child/:last-child split that used to sit here (25%/75% along the row, one per die-cut label) is REMOVED, not just unused — it targeted `.qr-sticker`, which InstanceCreate.razor's sheet only ever renders in the CSS-drawn (unbound) state, and the browser fallback print (BrowserPrintAsync, this block's only caller — see js/print-element.js) is reachable only once a token is bound, i.e. only once the sheet has already switched to ``. So this rule never matched anything, in EITHER preset, from the moment image mode landed (Task 6) — confirmed, not assumed, before deleting it. Its old comment explained the SEAM logic for splitting one page into two die-cut labels, which no longer applies now that the preview/print sheet only ever contains ONE sticker element (2026-08-05 duplicate- preview fix) — leaving a rule that split children of an element with only one child would have invited the next reader to "fix" it by adding a second element back, the exact bug just removed. The EZPL direct-print path (LabelJobBuilder/LabelSheetComposer) is unaffected — it always tiled the rendered bitmap itself and never depended on this CSS. */ } /* ── label layout — screen preview AND print, ONE rule set ─────────────────────────────────── The preview on the instance page is the label at 1:1: same mm, so what the operator sees on screen is what comes out of the label printer. CSS mm is an absolute unit on screen too (96px/25.4mm), so a single declaration serves both. These rules key off .ic-qr-card, NOT .is-print-target — the print target is a descendant of that card, so it inherits the preview's own geometry by construction and the two can never drift. Only what is genuinely print-only (@page, the visibility mask, the die-cut edge) lives in @media print above. Why an mm re-layout instead of transform:scale on the 240px screen sticker (~63.5×90mm, fits neither preset): a uniform scale shrinks the asset code to unreadable along with the box. QrAssetBindModal/QrBatchCreate are untouched — they keep the original 240px screen sticker. */ /* ── preset A: 60×40 mm stock, tag PRINTED SIDEWAYS ────────────────────────────────────────── The tag design is portrait (bar / QR / code / bar stacked vertically) and the stock is landscape. Squeezing the stack into a 60-wide × 40-tall box was WRONG (2026-08-03, rejected on sight): it flattens the design — the bars go thin, the QR shrinks to 17mm — instead of using the label. What the label actually wants is the paper TURNED: the tag keeps its own portrait proportions at 40mm wide × 60mm tall, and the PRINT step rotates it 90° onto the 60×40 page (see body.is-printing-element.print-60x40 in @media print). 40×60 rotated is exactly 60×40, so nothing is scaled or cropped, and the QR gets 30mm instead of 17 — roughly 3× the scan area. The preview therefore stays PORTRAIT and upright: it shows the tag as it reads in the hand, which is the orientation the operator sticks it on in. */ .ic-qr-card .qr-sticker { width: 40mm; height: 60mm; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; } .ic-qr-card .qr-sticker .qr-sticker-head, .ic-qr-card .qr-sticker .qr-sticker-foot { flex: 0 0 auto; padding: 1.5mm; font-size: 3mm; line-height: 1.2; } .ic-qr-card .qr-sticker .qr-sticker-body { flex: 1 1 auto; min-height: 0; justify-content: center; padding: 2mm; gap: 1.5mm; } /* 30mm off a ~160px canvas prints at ~135dpi — coarse for text, irrelevant for a QR: what matters is module size, and 30mm makes every module ~1mm, far above any phone camera's floor. */ .ic-qr-card .qr-sticker .qr-sticker-canvas { width: 30mm; height: 30mm; } .ic-qr-card .qr-sticker .qr-sticker-code { font-size: 3mm; line-height: 1.2; padding: .8mm 2mm; border-width: .4mm; border-radius: 1.5mm; } .ic-qr-card .qr-sticker .qr-sticker-sku { font-size: 2.2mm; line-height: 1.2; } /* Unbound: the dashed placeholder was sized (min-height ~168px) to occupy the OLD 240px card's QR stack. Inside a fixed-height label box that overflows, so it fills the box instead — the empty state now previews the label's footprint, which is the point of showing it at all. */ .ic-qr-card .qr-sticker .ic-qr-card__empty { min-height: 0; flex: 1 1 auto; align-self: stretch; margin: 1.5mm; padding: 1mm; font-size: 2.4mm; line-height: 1.3; } /* ── preset B: 50×25 mm stock — THE SAME TAG, smaller ──────────────────────────────────────── One design across both presets (user decision, 2026-08-03): an earlier pass gave this size its own landscape composition (QR left, text stacked right) and that was rejected — two labels off the same system must not read as two different products. So this preset only re-sizes: same portrait tag, 25mm wide × 50mm tall, same 90°-at-print rotation onto the 50×25 stock. Only the type and the QR scale down; nothing moves, nothing is dropped. */ .ic-qr-card.is-50x25 .qr-sticker { width: 25mm; height: 50mm; } .ic-qr-card.is-50x25 .qr-sticker .qr-sticker-head, .ic-qr-card.is-50x25 .qr-sticker .qr-sticker-foot { padding: 1mm; font-size: 2.4mm; } .ic-qr-card.is-50x25 .qr-sticker .qr-sticker-body { padding: 1.5mm; gap: 1mm; } .ic-qr-card.is-50x25 .qr-sticker .qr-sticker-canvas { width: 21mm; height: 21mm; } .ic-qr-card.is-50x25 .qr-sticker .qr-sticker-code { font-size: 2.4mm; padding: .5mm 1.2mm; border-width: .3mm; border-radius: 1mm; } .ic-qr-card.is-50x25 .qr-sticker .qr-sticker-sku { font-size: 1.9mm; } /* The sheet is one page of stock. On screen it lays its labels out left-to-right; at print time this flow layout is replaced outright by absolute placement in page coordinates (see the print block above). */ .ic-qr-card__sheet { display: flex; justify-content: center; align-self: center; } @media screen { /* 2026-08-05: the `.ic-qr-card__sheet .qr-sticker + .qr-sticker { display: none }` rule that used to sit here is REMOVED — it dates from a JS-drawn-