:root {
    --ink: #172235;
    --paper: #f4f6f9;
    --panel: #eef1f6;
    --line: rgba(255, 255, 255, 0.72);
    --nav: #2f405c;
    --nav-deep: #213653;
    --nav-soft: #5f708b;
    --accent: #87a7cf;
    --theme-base: #2f405c;
    --theme-accent: #2f75b5;
    --theme-nav: var(--theme-base);
    --theme-nav-deep: var(--theme-base);
    --theme-nav-soft: var(--theme-accent);
    --theme-button: var(--theme-accent);
    --theme-button-hover: var(--theme-accent);
    --list-background-opacity: 0.88;
    --green: #52c850;
    --orange: #f15b2a;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--app-background, linear-gradient(135deg, #506582 0%, #223c61 42%, #132d50 100%));
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.app-shell {
    height: 100vh;
    overflow: hidden;
}

.app-shell > main {
    min-height: 0;
    overflow: hidden;
}

.app-shell .board {
    height: calc(100vh - 92px);
}

.auth-page {
    display: grid;
    place-items: center;
    padding: 24px;
}

.auth-shell {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
}

.auth-card {
    display: grid;
    gap: 14px;
    width: min(100%, 380px);
    padding: 24px;
    background: #f7f9fc;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.auth-card h1,
.auth-card p {
    margin: 0;
}

.auth-card label {
    display: grid;
    gap: 6px;
    color: #344258;
    font-weight: 700;
}

.auth-card input {
    width: 100%;
    padding: 10px 12px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid #cbd6e5;
    border-radius: 6px;
}

.auth-error {
    padding: 10px 12px;
    color: #8f1d1d;
    font-weight: 700;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 6px;
}

.auth-success {
    padding: 10px 12px;
    color: #166534;
    font-weight: 800;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 6px;
}

.approval-page {
    background: #edf2f7;
}

.approval-shell {
    width: min(1080px, calc(100vw - 28px));
    margin: 0 auto;
    padding: 28px 0;
}

.portal-masthead {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 14px;
    padding: 16px 18px;
    color: #eef5ff;
    background: #243a5a;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.16);
}

.portal-brand-block {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.portal-brand-link {
    color: inherit;
    text-decoration: none;
}

.portal-brand-link:hover strong,
.portal-brand-link:focus-visible strong {
    text-decoration: underline;
}

.portal-back-link {
    display: inline-flex;
    justify-content: flex-end;
    margin-top: 7px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.portal-back-link:hover,
.portal-back-link:focus-visible {
    text-decoration: underline;
}

.portal-logo {
    width: 118px;
    max-height: 62px;
    object-fit: contain;
    flex: 0 0 auto;
}

.portal-brand-block strong,
.portal-masthead-note strong {
    display: block;
    font-size: 18px;
    line-height: 1.15;
}

.portal-brand-block span,
.portal-masthead-note span {
    display: block;
    margin-top: 3px;
    color: #c7d5e8;
    font-size: 12px;
    font-weight: 800;
}

.portal-masthead-note {
    flex: 0 0 auto;
    text-align: right;
}

.approval-card {
    display: grid;
    gap: 18px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #d7e0ec;
    border-radius: 8px;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.14);
}

.approval-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #d7e0ec;
}

.approval-header h1,
.approval-header p,
.approval-warning-modal h2,
.approval-warning-modal p {
    margin: 0;
}

.approval-status {
    padding: 6px 10px;
    color: #264b7a;
    font-size: 12px;
    font-weight: 900;
    background: #e4edf9;
    border: 1px solid #c6d8ee;
    border-radius: 999px;
}

.approval-status.is-paid,
.payment-copy.is-paid {
    color: #176c20;
    background: #ddf4df;
    border-color: #77bf7c;
}

.approval-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
}

.approval-preview {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #d7e0ec;
    border-radius: 8px;
}

.approval-preview img {
    display: block;
    max-width: 100%;
    max-height: 560px;
    margin: 0 auto;
    object-fit: contain;
}

.approval-preview figcaption,
.approval-empty {
    color: #607086;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.approval-actions-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    padding: 16px;
    background: #f6f9fd;
    border: 1px solid #d7e0ec;
    border-radius: 8px;
}

.approval-actions-panel form {
    display: grid;
    gap: 10px;
}

.approval-actions-panel label {
    display: grid;
    gap: 6px;
    font-weight: 800;
}

.approval-actions-panel textarea {
    width: 100%;
    padding: 10px 12px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid #cbd6e5;
    border-radius: 6px;
}

.approval-response {
    padding: 16px;
    background: #f2f5f9;
    border: 1px solid #d7e0ec;
    border-radius: 8px;
}

.approval-response h2 {
    margin-top: 0;
}

.approval-warning-modal {
    width: min(520px, calc(100vw - 28px));
    padding: 24px;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.34);
}

.approval-warning-modal::backdrop {
    background: rgba(9, 18, 32, 0.58);
}

.approval-warning-modal form {
    display: grid;
    gap: 14px;
}

.approval-warning-actions {
    display: flex;
    justify-content: end;
    gap: 10px;
}

.save-toast {
    padding: 10px 12px;
    color: #214f25;
    font-weight: 900;
    background: #e2f4e1;
    border: 1px solid #9bd099;
    border-radius: 6px;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 90ms ease;
}

button:active,
.primary-action:active,
.secondary-action:active,
.link-button:active,
.create-button:active,
.settings-button:active,
.nav-pill:active,
.vendor-style-result:active {
    box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.24);
    transform: translateY(1px) scale(0.99);
}

button:disabled,
button[aria-disabled="true"],
.nav-pill.is-disabled,
.settings-button.is-disabled,
a[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.46;
    filter: grayscale(0.5);
}

a[aria-disabled="true"] {
    pointer-events: none;
}

.topbar {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: 184px minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 4px 12px;
    color: #ffffff;
    background: var(--theme-nav);
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.brand {
    display: grid;
    align-items: center;
    width: fit-content;
    min-width: 92px;
    min-height: 32px;
    color: var(--green);
    font-weight: 900;
    line-height: 0.82;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #143b16, -1px -1px 0 #d5ffd2;
}

.brand-logo {
    display: block;
    max-width: 148px;
    max-height: 34px;
    object-fit: contain;
}

.brand-main,
.brand-sub {
    font-size: 18px;
    letter-spacing: 0;
}

.brand-tag {
    margin-top: 4px;
    color: #ffffff;
    font-size: 8px;
    text-shadow: none;
}

.search {
    display: flex;
    align-items: center;
    gap: 6px;
    width: min(100%, 520px);
    justify-self: center;
    padding: 4px 4px 4px 10px;
    color: #dfe7f3;
    background: var(--theme-accent);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
}

.search input {
    width: 100%;
    color: #ffffff;
    background: transparent;
    border: 0;
    outline: 0;
}

.search input::placeholder {
    color: #ffffff;
}

.search button {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 30px;
    padding: 0;
    color: #ffffff;
    font-size: 21px;
    font-weight: 900;
    line-height: 1;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
}

.search button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.create-button,
.settings-button,
.nav-pill,
.add-column {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
}

.create-button {
    padding: 8px 14px;
    text-transform: none;
    background: var(--theme-button);
    border: 0;
    border-radius: 4px;
}

.utility-icons {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #edf3fb;
    font-size: 15px;
}

.notification-bell {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #edf3fb;
    font-size: 16px;
    background: var(--theme-accent);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    cursor: pointer;
}

.bell-icon {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 9px 9px 4px 4px;
}

.bell-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transform: translateX(-50%);
}

.bell-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 5px;
    height: 5px;
    background: currentColor;
    border-radius: 999px;
    transform: translateX(-50%);
}

.notification-bell:hover,
.notification-bell:focus-visible {
    background: rgba(255, 255, 255, 0.18);
}

.notification-count-badge {
    position: absolute;
    top: -7px;
    right: -8px;
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    background: #d92d20;
    border: 2px solid #26344b;
    border-radius: 999px;
}

.utility-icons form {
    margin: 0;
}

.utility-link {
    padding: 5px 8px;
    color: #edf3fb;
    font-size: 12px;
    font-weight: 700;
    background: var(--theme-accent);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
}

.avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    font-size: 10px;
    background: var(--orange);
    border-radius: 999px;
}

.main-nav {
    position: relative;
    z-index: 19;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 6px 14px;
    background: var(--theme-base);
    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.18);
}

.mobile-board-select {
    display: none;
    gap: 5px;
    color: #dbe6f4;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.mobile-board-select select {
    min-height: 36px;
    padding: 0 36px 0 12px;
    color: #ffffff;
    font-weight: 800;
    background: var(--theme-nav-soft);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 8px;
}

.nav-scroll {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    flex: 0 0 auto;
}

.nav-pill,
.settings-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 16px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 8px;
    -webkit-user-drag: none;
    user-select: none;
}

.nav-pill.is-active {
    background: var(--theme-button);
}

.nav-count-badge {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    padding: 0 6px;
    color: #172235;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    background: #e8eef7;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
}

.nav-pill.is-active .nav-count-badge {
    color: #ffffff;
    background: var(--theme-button);
    border-color: rgba(255, 255, 255, 0.55);
}

.settings-button {
    background: transparent;
}

.settings-button.is-active {
    background: var(--theme-button);
}

.nav-filter {
    flex: 0 1 auto;
    margin-left: auto;
    min-width: 260px;
}

.toast {
    position: fixed;
    top: 96px;
    right: 18px;
    z-index: 50;
    display: grid;
    gap: 3px;
    width: min(320px, calc(100vw - 36px));
    padding: 12px 14px;
    color: #16321d;
    background: #e3f8e6;
    border: 1px solid #9ad9a3;
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(10, 24, 42, 0.24);
    transition: opacity 220ms ease, transform 220ms ease;
}

.toast strong {
    font-size: 14px;
}

.toast span {
    color: #31533a;
    font-size: 13px;
}

.toast.is-error {
    color: #681824;
    background: #ffe8ec;
    border-color: #f0a6b2;
}

.toast.is-error span {
    color: #7a3440;
}

.toast.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
}

.board-summary {
    display: flex;
    gap: 10px;
    padding: 12px 14px 0;
}

.board-summary > div {
    min-width: 160px;
    padding: 9px 12px;
    color: #ffffff;
    background: rgba(18, 35, 61, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
}

.summary-label {
    display: block;
    margin-bottom: 4px;
    color: #cbd7e8;
    font-size: 11px;
    text-transform: uppercase;
}

.board-heading {
    padding: 18px 16px 0;
    color: #ffffff;
}

.board-heading h1 {
    margin: 0 0 4px;
    font-size: 22px;
}

.board-heading p {
    margin: 0;
    color: #d7e0ed;
}

.board {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    height: calc(100vh - 92px);
    padding: 14px 8px 28px;
    overflow-x: auto;
    cursor: grab;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
    user-select: none;
}

.board.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

body.has-open-modal .board {
    cursor: default;
}

.kanban-column {
    display: flex;
    flex-direction: column;
    flex: 0 0 272px;
    height: fit-content;
    max-height: calc(100vh - 134px);
    padding: 12px;
    background: rgba(238, 241, 246, var(--list-background-opacity));
    border: 1px solid rgba(255, 255, 255, calc(var(--list-background-opacity) * 0.42));
    backdrop-filter: blur(5px) saturate(1.08);
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    user-select: text;
}

.settings-board {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    cursor: grab;
}

.settings-board .kanban-column {
    flex: 0 0 272px;
    width: 272px;
    min-width: 272px;
}

.goods-board {
    display: grid;
    grid-template-columns: minmax(340px, 1.45fr) repeat(4, minmax(220px, 1fr));
    align-items: start;
    overflow-x: hidden;
    cursor: default;
}

.goods-board .kanban-column {
    width: 100%;
    min-width: 0;
    flex: none;
}

.column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.column-header h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 13px;
    line-height: 1.25;
    text-transform: uppercase;
}

.column-header h2 span {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    color: #ffffff;
    font-size: 11px;
    background: #61728d;
    border-radius: 999px;
}

.column-actions {
    display: flex;
    gap: 6px;
}

.column-actions button {
    width: 24px;
    height: 24px;
    color: #4c5665;
    background: transparent;
    border: 0;
}

.card-list {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
    max-height: calc(100vh - 214px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}

.workflow-card-list {
    min-height: 74px;
    padding-bottom: 10px;
}

.workflow-card-list .empty-column {
    pointer-events: none;
}

.customer-card {
    display: grid;
    gap: 6px;
    width: 100%;
    padding: 10px;
    text-align: left;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid #d8dee8;
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

.customer-card:hover {
    transform: translateY(-1px);
    border-color: #9eb3cf;
}

.customer-card.urgency-soon {
    border-color: #e1ad56;
}

.customer-card.urgency-today {
    border-color: #db8a21;
}

.customer-card.urgency-overdue {
    border-color: #d05a4d;
}

.due-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.due-pill.is-none {
    color: #65748a;
    background: #eef2f7;
}

.due-pill.is-normal {
    color: #42516a;
    background: #eef2f7;
}

.due-pill.is-soon {
    color: #8a4a00;
    background: #fff0d7;
}

.due-pill.is-today {
    color: #8a4a00;
    background: #ffe2b6;
}

.due-pill.is-overdue {
    color: #9d2f20;
    background: #fde3df;
}

.workflow-card {
    cursor: grab;
}

.workflow-card.is-archived-card {
    border-style: dashed;
    opacity: 0.76;
}

.card-cover {
    display: block;
    margin: -10px -10px 9px;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    background: #f8fafc;
    border-bottom: 1px solid #d7e0ec;
}

.card-cover img {
    display: block;
    width: 100%;
    height: 118px;
    object-fit: cover;
}

.workflow-card:active,
.workflow-card.is-card-dragging {
    cursor: grabbing;
}

.workflow-card.is-card-dragging {
    opacity: 0.55;
}

.workflow-card.is-sales-order-complete {
    border-color: #2c9a63;
    background: #e7f8ee;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    padding: 2px 9px;
    margin: 0 0 8px;
    color: #39475a;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    background: #e6ecf4;
    border: 1px solid #c7d2e1;
    border-radius: 999px;
}

.status-pill.neutral {
    color: #425166;
    background: #edf1f6;
}

.line-item-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.job-completion-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.job-completion-mark.is-complete {
    color: #ffffff;
    background: #1f8a55;
}

.job-completion-mark.is-pending {
    color: #64748b;
    background: #e2e8f0;
}

.workflow-card.is-completing-job {
    position: relative;
    z-index: 4;
    animation: completed-job-pop 1250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
    pointer-events: none;
}

.workflow-card.is-completing-job::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.38), rgba(34, 197, 94, 0));
    animation: completed-job-glow 900ms ease-out forwards;
    pointer-events: none;
}

.completion-fleck {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--width);
    height: var(--height);
    border-radius: 2px;
    background: hsl(var(--hue), 84%, 56%);
    animation: completion-fleck-flight 1040ms cubic-bezier(0.16, 1, 0.3, 1) var(--delay) forwards;
    pointer-events: none;
}

@keyframes completed-job-pop {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    12% { transform: translateY(-4px) scale(1.06); }
    34% { transform: translateY(-2px) scale(1.02); }
    100% { transform: translateY(-14px) scale(0.88); opacity: 0; }
}

@keyframes completed-job-glow {
    0% { opacity: 0; transform: scale(0.7); }
    18% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes completion-fleck-flight {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) rotate(var(--spin));
        opacity: 0;
    }
}

.workflow-card-list.is-drop-target {
    outline: 2px dashed rgba(47, 111, 174, 0.45);
    outline-offset: 3px;
    border-radius: 6px;
}

.settings-card .card-title {
    color: #14243a;
}

.card-title {
    font-weight: 800;
}

.card-subtitle,
.empty-column {
    color: #5d6978;
    font-size: 13px;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    color: #42516a;
    font-size: 12px;
}

.job-card-meta {
    display: block;
}

.job-state-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.job-state {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.job-state.is-ready {
    color: #14633b;
    background: #ddf7e8;
}

.job-state.is-waiting {
    color: #8a4a00;
    background: #fff0d7;
}

.job-state.is-override {
    color: #7d2f78;
    background: #f4def3;
}

.goods-state-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.goods-state {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.goods-state.is-ordered,
.goods-state.is-waiting {
    color: #24518b;
    background: #e2eefc;
}

.goods-state.is-partial {
    color: #8a4a00;
    background: #fff0d7;
}

.goods-state.is-backordered {
    color: #9d2f20;
    background: #fde3df;
}

.goods-state.is-complete {
    color: #14633b;
    background: #ddf7e8;
}

.add-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 2px;
    color: #344153;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.add-column {
    flex: 0 0 190px;
    align-self: flex-start;
    min-height: 46px;
    background: rgba(118, 135, 160, 0.86);
    border: 0;
    border-radius: 8px;
}

.modal {
    width: min(760px, calc(100vw - 28px));
    color: var(--ink);
    background: #ffffff;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
}

.modal::backdrop {
    background: rgba(9, 18, 32, 0.62);
}

.modal-close {
    display: none;
}

.modal-click-catcher {
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: default;
}

.modal-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 22px;
    padding: 26px;
}

.mockup-modal-grid {
    grid-template-columns: 1fr;
}

.mockup-modal-cover {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 170px;
    max-height: 245px;
    padding: 0;
    overflow: hidden;
    background: #f8fafc;
    border: 0;
    border-bottom: 1px solid #d7e0ec;
    border-radius: 8px 8px 0 0;
    cursor: zoom-in;
}

.mockup-modal-cover img {
    display: block;
    width: 100%;
    max-height: 245px;
    object-fit: contain;
}

.mockup-modal-cover:hover img {
    filter: brightness(0.97);
}

.settings-modal-grid {
    grid-template-columns: 1fr;
}

.goods-po-modal-grid {
    grid-template-columns: 1fr;
}

.job-modal-grid {
    grid-template-columns: 1fr;
}

.job-modal .mockup-job-context,
.job-modal .readonly-line-item,
.job-modal .linked-record,
.job-modal .stacked-form,
.job-modal .override-note {
    width: 100%;
}

.job-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.job-status-grid > div {
    min-height: auto;
}

.quote-modal .settings-modal-grid {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 240px;
}

.product-type-modal {
    width: min(1120px, calc(100vw - 28px));
}

.quote-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    padding: 10px;
    overflow: auto;
    background: transparent;
    box-shadow: none;
}

.quote-mode-actions {
    display: flex;
    gap: 8px;
    margin: 14px 0;
}

.quote-project-name-field {
    display: grid;
    gap: 6px;
    max-width: 560px;
    margin: 14px 0;
    color: #344155;
    font-size: 0.78rem;
    font-weight: 800;
}

.quote-project-name-field input {
    min-height: 42px;
    border: 1px solid #c8d6e8;
    border-radius: 6px;
    padding: 9px 11px;
    color: #162033;
    font-size: 1rem;
    font-weight: 800;
}

[data-quote-mode-card][data-mode="view"] [data-quote-edit-only],
[data-quote-mode-card][data-mode="view"] [data-exit-quote-edit],
[data-quote-mode-card][data-mode="edit"] [data-quote-view-only],
[data-quote-mode-card][data-mode="edit"] [data-enter-quote-edit] {
    display: none !important;
}

.quote-readonly-summary {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.mockup-job-context {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}

.readonly-line-list {
    display: grid;
    gap: 10px;
}

.readonly-line-item {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
    background: #fff;
}

.readonly-line-item header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.readonly-line-item dl {
    display: grid;
    gap: 7px;
    margin: 0;
}

.readonly-line-item dl div {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 8px;
}

.readonly-line-item dt {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.readonly-line-item dd {
    margin: 0;
    color: #172033;
}

.line-item-mockup-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 12px;
    align-items: center;
    padding: 10px;
    background: #eef5fd;
    border: 1px solid #cfe0f2;
    border-radius: 6px;
}

.line-item-mockup-preview.is-compact {
    margin: 0 12px 10px;
}

.line-item-mockup-preview span,
.line-item-mockup-preview small {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.line-item-mockup-preview strong {
    display: block;
    margin: 2px 0;
}

.line-item-mockup-thumb,
.line-item-mockup-empty {
    display: grid;
    place-items: center;
    width: 118px;
    height: 78px;
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    background: #ffffff;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
}

.line-item-mockup-thumb {
    padding: 0;
    cursor: zoom-in;
}

.line-item-mockup-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.line-item-mockup-thumb:hover {
    border-color: #2f75b8;
    box-shadow: 0 0 0 2px rgba(47, 117, 184, 0.14);
}

.readonly-style-list {
    display: grid;
    gap: 8px;
}

.readonly-style-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 9px;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
    background: #f8fafc;
}

.readonly-style-thumb-wrap,
.readonly-style-content {
    display: grid;
    min-width: 0;
}

.readonly-style-content {
    gap: 8px;
}

.readonly-style-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.readonly-style-meta-grid div {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
}

.readonly-style-meta-grid span {
    color: #60718b;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.readonly-style-meta-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #172033;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.18;
}

.readonly-style-meta-grid small {
    color: #53647d;
    font-size: 11px;
    line-height: 1.2;
}

.readonly-style-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 74px;
    overflow: hidden;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
}

.readonly-style-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.readonly-size-table {
    display: grid;
    align-content: start;
    min-width: 0;
}

.readonly-size-row {
    display: grid;
    grid-auto-columns: minmax(48px, 1fr);
    grid-auto-flow: column;
}

.readonly-size-row span,
.readonly-size-row strong {
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid #cfd8e3;
    border-left: 0;
    text-align: center;
}

.readonly-size-row > :first-child {
    border-left: 1px solid #cfd8e3;
}

.readonly-size-row.is-header span {
    background: #e7edf5;
    color: #172033;
    font-size: 11px;
    font-weight: 800;
}

.readonly-size-row strong {
    color: #172033;
    font-size: 13px;
}

.quote-modal .modal-grid {
    gap: 18px;
    width: min(1360px, calc(100vw - 64px));
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
}

.eyebrow {
    margin: 0 0 4px;
    color: #68778f;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.modal h2,
.stacked-form h2 {
    margin: 0 0 8px;
}

.contact-line {
    margin: 3px 0;
    color: #556174;
}

.contact-line a,
.settings-fields a,
.goods-po-meta-grid a {
    color: #185fa7;
    font-weight: 700;
    text-decoration: none;
}

.contact-line a:hover,
.settings-fields a:hover,
.goods-po-meta-grid a:hover,
.linked-record a:hover {
    text-decoration: underline;
}

.customer-contact-list {
    display: grid;
    gap: 8px;
    margin: 10px 0 14px;
}

.customer-contact-list article {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 10px;
    padding: 10px 12px;
    background: #f3f6fb;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
}

.customer-contact-list article > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.customer-contact-list strong,
.customer-contact-list span,
.customer-contact-list a {
    overflow-wrap: anywhere;
}

.customer-contact-list span {
    color: #56677f;
    font-size: 12px;
}

.customer-contact-list a {
    color: #185fa7;
    font-weight: 700;
    text-decoration: none;
}

.inline-add-panel {
    margin: 10px 0 16px;
}

.inline-add-panel summary {
    width: max-content;
    cursor: pointer;
    list-style: none;
}

.inline-add-panel summary::-webkit-details-marker {
    display: none;
}

.inline-add-panel[open] summary {
    margin-bottom: 10px;
}

.checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.checkbox-line input {
    width: auto;
}

.theme-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.color-setting {
    display: grid;
    gap: 7px;
}

.color-setting span {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 8px;
    align-items: center;
}

.color-setting input[type="color"] {
    width: 56px;
    height: 42px;
    padding: 4px;
}

.interface-background-tile {
    margin-top: 12px;
}

.theme-preview {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    margin: 12px 0;
    padding: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--preview-base), #ffffff 16%), var(--preview-base));
    border-radius: 8px;
}

.theme-preview div {
    display: flex;
    gap: 6px;
}

.theme-preview span {
    width: 38px;
    height: 20px;
    background: color-mix(in srgb, var(--preview-base), #ffffff 28%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 5px;
}

.theme-preview button {
    min-height: 34px;
    padding: 0 12px;
    color: #ffffff;
    font-weight: 900;
    background: var(--preview-accent);
    border: 0;
    border-radius: 6px;
}

.setting-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

.action-row button,
.primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
    background: var(--theme-button);
    border: 0;
    border-radius: 6px;
}

.primary-action.is-loading,
.is-submitting button[type="submit"] {
    gap: 8px;
    position: relative;
}

.customer-panel a.primary-action {
    width: 100%;
    color: #ffffff;
    text-decoration: none;
}

.customer-panel a.primary-action:visited {
    color: #ffffff;
}

.customer-panel a.primary-action:hover {
    background: var(--theme-button-hover);
    color: #ffffff;
    text-decoration: none;
}

.customer-panel a.secondary-action {
    width: 100%;
    color: #172033;
    text-decoration: none;
}

.customer-panel a.secondary-action:visited {
    color: #172033;
}

.customer-panel a.secondary-action:hover {
    color: #172033;
    text-decoration: none;
}

.primary-action.is-loading::after,
.is-submitting button[type="submit"]::after {
    animation: spin 700ms linear infinite;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 999px;
    content: "";
    height: 14px;
    width: 14px;
}

.secondary-action.is-loading::after,
.is-submitting .secondary-action[type="submit"]::after,
.is-submitting .link-button[type="submit"]::after {
    border-color: rgba(47, 105, 168, 0.32);
    border-top-color: #2f69a8;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.action-row button {
    color: #293549;
    background: #e5ebf3;
}

.secondary-action,
.link-button {
    border: 0;
    background: none;
    color: #2f69a8;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 11px;
    color: #172033;
    text-decoration: none;
    background: #dbe6f3;
    border-radius: 6px;
}

.secondary-action:hover {
    background: #c9d9eb;
}

.danger-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 11px;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    background: #a33d3d;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.danger-action:hover {
    background: #872f2f;
}

.link-button {
    padding: 0;
}

.link-button.danger {
    color: #a33d3d;
}

.notes {
    padding: 12px;
    background: #f2f5f9;
    border-radius: 6px;
}

.customer-record-tabs {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.customer-record-tabs details {
    border: 1px solid #d7e0ec;
    border-radius: 6px;
    background: #f8fafc;
}

.customer-record-tabs summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 10px;
    cursor: pointer;
    font-weight: 800;
}

.customer-record-tabs summary span {
    color: #60708a;
    font-size: 0.8rem;
}

.customer-record-list {
    display: grid;
    gap: 6px;
    padding: 0 10px 10px;
}

.customer-record-list a,
.customer-record-list p {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 8px;
    border-radius: 5px;
    background: #ffffff;
    color: var(--ink);
    text-decoration: none;
}

.customer-record-list a:hover {
    background: #e8eef7;
}

.customer-record-list span {
    color: #52627a;
    font-size: 0.82rem;
}

.customer-record-list .customer-mockup-record {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.customer-mockup-thumb {
    display: grid;
    place-items: center;
    width: 48px;
    height: 42px;
    overflow: hidden;
    color: #60718b !important;
    font-size: 10px !important;
    font-weight: 800;
    text-align: center;
    border: 1px solid #d7e0ec;
    border-radius: 5px;
    background: #f8fafc;
}

.customer-mockup-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.customer-panel .customer-record-tabs {
    margin-top: 0;
}

.customer-panel {
    display: grid;
    gap: 10px;
    position: sticky;
    top: 10px;
}

.mockup-summary-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: static;
}

.customer-panel > div:not(.customer-record-tabs),
.customer-panel-card {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    background: #f2f5f9;
    border: 1px solid #dce4ee;
    border-radius: 6px;
}

.customer-panel > .mockup-meta-wide {
    display: block !important;
}

.customer-panel > .payment-status-field.is-paid {
    background: #ddf4df;
    border-color: #77bf7c;
    box-shadow: inset 0 0 0 1px rgba(67, 145, 73, 0.22);
}

.customer-panel > .payment-status-field.is-partial {
    background: #fff5db;
    border-color: #e2b84d;
    box-shadow: inset 0 0 0 1px rgba(181, 131, 24, 0.18);
}

.customer-panel > .payment-status-field.is-paid span {
    color: #245a29;
    font-weight: 900;
}

.customer-panel > .payment-status-field.is-paid strong {
    color: #176c20;
    font-weight: 1000;
}

.customer-panel > .payment-status-field.is-partial span,
.customer-panel > .payment-status-field.is-partial strong {
    color: #7a5312;
    font-weight: 900;
}

.mockup-summary-row .mockup-portal-status.is-approved {
    align-items: center;
    background: #ddf4df;
    border-color: #77bf7c;
    box-shadow: inset 0 0 0 1px rgba(67, 145, 73, 0.22);
}

.mockup-summary-row .mockup-portal-status.is-approved span {
    color: #245a29;
    font-weight: 900;
}

.mockup-summary-row .mockup-portal-status.is-approved strong {
    color: #176c20;
    font-size: 20px;
    font-weight: 1000;
    letter-spacing: 0;
}

.customer-panel-link {
    color: var(--ink);
    display: grid;
    gap: 4px;
    text-decoration: none;
}

.customer-panel-link:hover {
    background: #e8eef7;
    border-color: #93abc9;
}

.customer-panel-link span {
    color: #334155;
}

.customer-panel-metric {
    grid-template-columns: 1fr auto;
}

.board-filter-bar {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 10px;
    margin: 10px 14px 0;
    padding: 10px;
    background: rgba(242, 245, 249, 0.92);
    border: 1px solid rgba(207, 216, 229, 0.85);
    border-radius: 6px;
}

.nav-filter .board-filter-bar {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.nav-filter .board-filter-bar label {
    color: #dce6f4;
}

.nav-filter .filter-context {
    color: #e8eef7;
}

.board-filter-bar label {
    display: grid;
    gap: 4px;
    min-width: 160px;
    color: #344153;
    font-size: 0.78rem;
    font-weight: 800;
}

.board-filter-bar input,
.board-filter-bar select {
    width: 100%;
    padding: 7px 9px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid #c7d2e1;
    border-radius: 5px;
}

.board-filter-bar .secondary-action {
    width: auto;
    min-height: 36px;
    text-decoration: none;
}

.filter-context {
    align-self: center;
    color: #344153;
    font-size: 0.86rem;
    font-weight: 800;
}

.goods-create-po-form {
    display: grid;
    gap: 10px;
}

.goods-create-po-form > label {
    display: grid;
    gap: 4px;
    color: #51627a;
    font-size: 12px;
    font-weight: 700;
}

.goods-create-po-form select {
    min-height: 36px;
}

.goods-requirement-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px 8px;
    align-items: start;
    padding: 8px;
}

.goods-requirement-card input {
    grid-row: 1 / span 2;
    align-self: start;
    margin: 3px 0 0;
}

.requirement-main {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.requirement-title {
    min-width: 0;
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.requirement-order {
    color: #5d6978;
    font-size: 12px;
}

.requirement-qty {
    color: #42516a;
    font-size: 12px;
    font-weight: 700;
}

.requirement-meta {
    display: grid;
    gap: 3px;
    justify-items: end;
    min-width: max-content;
}

.requirement-sizes {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 4px;
    color: #5d6978;
    font-size: 12px;
}

.requirement-size-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 2px 6px;
    border-radius: 4px;
}

.requirement-size-pair:nth-child(odd) {
    background: rgba(90, 110, 140, 0.08);
}

.requirement-size-pair span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.requirement-size-pair strong {
    color: #42516a;
    font-weight: 800;
}

.requirement-sizes span {
    white-space: nowrap;
}

.goods-vendor-group {
    display: grid;
    gap: 8px;
}

.goods-vendor-group + .goods-vendor-group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #d7e0ec;
}

.goods-vendor-group header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: start;
}

.goods-vendor-group header div {
    display: grid;
    gap: 2px;
}

.goods-vendor-group header span {
    color: #53647d;
    font-size: 12px;
}

.goods-requirement-card:has(input:checked) {
    border-color: #2f6ead;
    background: #e7f0fb;
}

@media (max-width: 1200px) {
    .goods-board {
        grid-template-columns: minmax(320px, 1.45fr) repeat(4, minmax(220px, 1fr));
        overflow-x: auto;
    }
}

.goods-po-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.goods-po-items {
    display: grid;
    gap: 8px;
    margin: 14px 0;
}

.goods-po-items article {
    display: grid;
    width: 100%;
    padding: 10px;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
}

.goods-po-line-item {
    gap: 8px;
}

.goods-po-line-main {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.goods-po-line-content {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.goods-po-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.goods-po-meta-grid div {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
}

.goods-po-meta-grid span {
    color: #60718b;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.goods-po-meta-grid strong,
.goods-po-meta-grid a {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #172033;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.18;
}

.goods-po-meta-grid small,
.goods-po-size-table em {
    color: #53647d;
    font-size: 11px;
    line-height: 1.2;
}

.goods-po-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 74px;
    overflow: hidden;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.goods-po-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.goods-po-size-table {
    display: grid;
    gap: 0;
    align-content: start;
    min-width: 0;
}

.goods-po-size-row {
    display: grid;
    grid-auto-columns: minmax(48px, 1fr);
    grid-auto-flow: column;
}

.goods-po-size-row span,
.goods-po-size-row strong {
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid #cfd8e3;
    border-left: 0;
    text-align: center;
}

.goods-po-size-row > :first-child {
    border-left: 1px solid #cfd8e3;
}

.goods-po-size-row.is-header span {
    background: #e7edf5;
    color: #172033;
    font-size: 11px;
    font-weight: 800;
}

.goods-po-size-row strong {
    color: #172033;
    font-size: 13px;
}

.goods-po-size-table em {
    margin-top: 6px;
    font-style: normal;
    font-size: 12px;
}

.goods-receive-row {
    display: grid;
    grid-template-columns: auto 1fr 100px;
    gap: 10px;
    align-items: center;
}

.goods-receive-item {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
}

.goods-receive-row small {
    display: block;
    color: #53647d;
}

.goods-receipt-history {
    display: grid;
    gap: 8px;
    margin: 16px 0;
}

.goods-receipt-history h3 {
    margin: 0;
}

.goods-receipt-history article {
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
}

.goods-receipt-history span,
.goods-receipt-history p {
    margin: 0;
    color: #53647d;
}

.linked-record,
.override-note {
    display: grid;
    gap: 4px;
    margin-top: 16px;
    padding: 10px;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
}

.linked-record span,
.override-note span {
    color: #53647d;
    font-size: 12px;
    font-weight: 700;
}

.linked-record a {
    color: #185fa7;
    font-weight: 700;
}

.button-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 720px) {
    .board-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .board-filter-bar label {
        min-width: 0;
    }
}

.customer-panel-link strong {
    font-size: 0.95rem;
}

.customer-panel-link small {
    color: #556174;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
}

.quote-sidebar-form {
    gap: 9px;
    padding: 12px;
    background: #f2f5f9;
    border: 1px solid #dce4ee;
    border-radius: 6px;
}

.quote-sidebar-form .primary-action {
    width: 100%;
}

.quote-delete-action {
    margin-top: 8px;
    width: 100%;
}

.date-picker-popover {
    position: fixed;
    z-index: 10000;
    display: grid;
    gap: 8px;
    padding: 10px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid #b9c7d8;
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.24);
}

.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.date-picker-header button,
.date-picker-day {
    border: 1px solid #d5deeb;
    background: #f7f9fc;
    border-radius: 5px;
}

.date-picker-header button {
    width: 32px;
    height: 30px;
    font-size: 1.15rem;
    font-weight: 800;
}

.date-picker-weekdays,
.date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.date-picker-weekdays span {
    color: #66748a;
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.date-picker-day {
    min-height: 30px;
    font-weight: 800;
}

.date-picker-day:hover,
.date-picker-day.is-selected {
    color: #ffffff;
    background: #2f75b5;
    border-color: #2f75b5;
}

.settings-fields {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.settings-fields > div {
    display: grid;
    gap: 4px;
    padding: 12px;
    background: #f2f5f9;
    border: 1px solid #dce4ee;
    border-radius: 6px;
}

.settings-fields span {
    color: #68778f;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.mockup-meta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mockup-meta-grid > div {
    min-height: auto;
    padding: 9px 11px;
}

.mockup-meta-grid strong {
    overflow-wrap: anywhere;
    font-size: 13px;
}

.mockup-meta-grid .mockup-meta-wide {
    grid-column: span 3;
}

.approval-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.approval-actions form {
    display: contents;
}

.approval-actions form.approval-email-form {
    display: grid;
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 4px;
}

.approval-email-form select {
    width: 100%;
    min-height: 34px;
    border: 1px solid #cbd7e6;
    border-radius: 6px;
    background: #ffffff;
    color: #162238;
    font-weight: 700;
    padding: 7px 9px;
}

.approval-link-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #34445d;
    font-size: 12px;
    font-weight: 800;
}

.approval-link-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
}

.approval-actions .primary-action,
.approval-actions .secondary-action {
    min-height: 32px;
    font-size: 13px;
    text-decoration: none;
}

.mockup-email-activity {
    display: grid;
    gap: 6px;
}

.mockup-email-activity article {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    align-items: baseline;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
    background: #ffffff;
    padding: 8px;
}

.mockup-email-activity article small {
    color: #51627a;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.mockup-email-activity article strong,
.mockup-email-activity article span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mockup-email-activity article span {
    color: #40506a;
    font-size: 12px;
    line-height: 1.2;
}

.settings-help-text {
    margin: 10px 0;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
    background: #f6f9fd;
    color: #34445d;
    padding: 9px 11px;
    font-size: 13px;
    line-height: 1.35;
}

.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.change-request-panel {
    border-color: #f1b7b7 !important;
    background: #fff4f4 !important;
}

.change-request-panel span {
    color: #a83535;
}

.change-request-panel strong {
    display: block;
    color: #7f1d1d;
    white-space: pre-wrap;
}

.change-request-panel small {
    display: block;
    margin-top: 6px;
    color: #8a4a4a;
    font-weight: 800;
}

.quote-approval-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.quote-approval-summary > div,
.quote-approval-items > article {
    border: 1px solid #d7e0ec;
    border-radius: 8px;
    background: #f4f7fb;
    padding: 12px;
}

.quote-approval-summary span,
.quote-approval-items span {
    display: block;
    color: #60718b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.quote-approval-summary small {
    display: block;
    margin-top: 4px;
    color: #37465c;
    font-weight: 700;
}

.quote-approval-items {
    display: grid;
    gap: 10px;
    margin-bottom: 0;
}

.quote-approval-items > article {
    display: grid;
    gap: 12px;
}

.quote-approval-line-summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.quote-approval-line-summary small {
    display: block;
    margin-top: 4px;
    color: #50617a;
    font-weight: 700;
}

.quote-approval-line-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quote-approval-line-details p {
    flex: 0 0 100%;
    margin: 0;
    color: #263348;
    font-size: 13px;
    font-weight: 700;
}

.approval-style-box {
    max-width: 100%;
    border: 1px solid #cfd9e6;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
}

.approval-style-title {
    padding: 8px 10px;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
    border-bottom: 1px solid #d9e2ee;
}

.approval-style-content {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px;
}

.approval-style-thumb {
    display: grid;
    place-items: center;
    width: 58px;
    height: 72px;
    flex: 0 0 58px;
    overflow: hidden;
    color: #60718b;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    border: 1px solid #d3ddea;
    border-radius: 5px;
    background: #ffffff;
}

.approval-style-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.approval-style-color {
    display: grid;
    gap: 4px;
    width: 112px;
    min-width: 0;
    color: #263348;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.approval-size-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.approval-size-matrix {
    width: auto;
    border-collapse: collapse;
    font-size: 11px;
}

.approval-size-matrix th,
.approval-size-matrix td {
    min-width: 46px;
    padding: 5px 6px;
    text-align: center;
    border: 1px solid #c7d2df;
}

.approval-size-matrix th {
    color: #111827;
    font-weight: 900;
    background: #dce4ee;
}

@media (max-width: 720px) {
    .approval-shell {
        width: min(100% - 16px, 1080px);
        padding: 8px 0 16px;
    }

    .portal-masthead,
    .approval-header,
    .approval-actions-panel {
        display: grid;
    }

    .portal-masthead {
        gap: 12px;
        padding: 14px;
    }

    .portal-brand-block {
        align-items: flex-start;
    }

    .portal-logo {
        width: 88px;
        max-height: 52px;
    }

    .portal-masthead-note,
    .approval-header-actions {
        text-align: left;
        justify-content: start;
    }

    .approval-card {
        padding: 14px;
    }

    .quote-approval-summary,
    .quote-approval-line-summary {
        grid-template-columns: 1fr;
    }

    .quote-approval-line-summary,
    .approval-style-content {
        display: grid;
    }

    .approval-actions-panel {
        grid-template-columns: 1fr;
    }

    .approval-style-color {
        width: auto;
    }

    .approval-style-thumb {
        width: 72px;
        height: 86px;
    }
}

.email-template-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: start;
}

.email-template-editor {
    display: grid;
    gap: 14px;
}

.shortcode-panel {
    display: grid;
    gap: 12px;
    padding: 12px;
    background: #f2f5f9;
    border: 1px solid #dce4ee;
    border-radius: 6px;
}

.shortcode-panel h3,
.shortcode-panel h4,
.shortcode-panel p {
    margin: 0;
}

.shortcode-panel h3 {
    font-size: 15px;
}

.shortcode-panel h4 {
    color: #53647d;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.shortcode-panel p {
    color: #64748b;
    font-size: 12px;
}

.shortcode-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.shortcode-token {
    padding: 5px 7px;
    color: #1d4f83;
    font-size: 12px;
    font-weight: 800;
    background: #e4edf9;
    border: 1px solid #b9cbe2;
    border-radius: 999px;
}

.shortcode-token:hover {
    background: #d5e4f5;
    border-color: #7fa4cc;
}

.image-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.image-preview-tile {
    position: relative;
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 132px;
    padding: 12px;
    background: #f2f5f9;
    border: 1px solid #dce4ee;
    border-radius: 6px;
}

.image-preview-tile.is-current {
    border-color: #6ba66e;
    box-shadow: inset 0 0 0 1px rgba(87, 142, 90, 0.22);
}

.revision-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-grid;
    min-width: 30px;
    min-height: 22px;
    place-items: center;
    padding: 2px 7px;
    color: #172033;
    background: #dbeafe;
    border: 1px solid #b7cce8;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-transform: lowercase;
}

.image-preview-tile.is-current .revision-badge {
    color: #214f25;
    background: #dff2df;
    border-color: #92c994;
}

.revision-actions {
    display: flex;
    align-items: center;
    min-height: 18px;
}

.current-revision-label {
    color: #2f6b35;
    font-size: 12px;
    font-weight: 900;
}

.image-preview-tile span {
    color: #68778f;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.image-preview-tile .revision-badge {
    color: #172033;
    font-size: 11px;
    font-weight: 900;
    text-transform: lowercase;
}

.image-preview-tile.is-current .revision-badge {
    color: #214f25;
}

.image-preview-tile .current-revision-label {
    color: #2f6b35;
    font-size: 12px;
    font-weight: 900;
    text-transform: none;
}

.image-preview-tile img,
.image-preview-thumb img {
    width: 100%;
    height: 86px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #dce4ee;
    border-radius: 4px;
}

.image-preview-thumb {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.image-preview-thumb:hover img,
button.readonly-style-thumb:hover {
    border-color: #2f75b8;
    box-shadow: 0 0 0 2px rgba(47, 117, 184, 0.14);
}

.image-preview-tile strong {
    display: grid;
    place-items: center;
    min-height: 86px;
    padding: 8px;
    color: #526176;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #c4cfdd;
    border-radius: 4px;
}

.image-preview-tile a {
    overflow-wrap: anywhere;
    color: #2f6fae;
    font-size: 12px;
    font-weight: 700;
}

.mockup-upload-form {
    display: grid;
    gap: 10px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #d7e0ec;
    border-radius: 6px;
    background: #f8fafc;
}

.mockup-upload-form > label:not(.clipboard-upload-zone) {
    display: grid;
    gap: 5px;
    color: #334155;
    font-weight: 700;
}

.clipboard-upload-zone {
    display: grid;
    gap: 8px;
    min-height: 118px;
    place-items: center;
    padding: 16px;
    color: #526176;
    text-align: center;
    border: 2px dashed #b9c8db;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
}

.clipboard-upload-zone.is-paste-ready,
.clipboard-upload-zone:focus-within {
    border-color: #2f6fae;
    box-shadow: 0 0 0 3px rgba(47, 111, 174, 0.12);
}

.clipboard-upload-zone span {
    color: #68778f;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.clipboard-upload-preview {
    display: grid;
    align-items: center;
    justify-items: center;
    width: min(100%, 260px);
    min-height: 92px;
    padding: 10px;
    color: #68778f;
    border: 1px dashed #c6d2e2;
    border-radius: 5px;
    background: #f8fafc;
    text-transform: none;
}

.clipboard-upload-preview img {
    display: block;
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
}

.clipboard-upload-zone strong {
    color: #172033;
}

.clipboard-upload-zone small {
    color: #64748b;
}

.clipboard-upload-zone input {
    width: min(320px, 100%);
}

.stacked-form,
.company-settings-form {
    display: grid;
    gap: 14px;
    padding: 26px;
}

.inline-edit-form {
    margin-top: 16px;
    padding: 16px;
    background: #f7f9fc;
    border: 1px solid #dce4ee;
    border-radius: 6px;
}

.company-settings-form {
    padding: 18px 0 0;
}

.stacked-form label,
.company-settings-form label {
    display: grid;
    gap: 6px;
    color: #344153;
    font-weight: 700;
}

.stacked-form input,
.stacked-form textarea,
.stacked-form select,
.company-settings-form input,
.company-settings-form textarea,
.company-settings-form select {
    width: 100%;
    padding: 8px 10px;
    color: var(--ink);
    background: #f7f9fc;
    border: 1px solid #cfd8e5;
    border-radius: 6px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-grid.thirds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid.quarters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.upload-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.upload-grid label,
.image-upload-tile {
    padding: 12px;
    background: #f2f5f9;
    border: 1px solid #dce4ee;
    border-radius: 6px;
}

.upload-grid input {
    padding: 8px;
    background: #ffffff;
}

.upload-grid span {
    overflow-wrap: anywhere;
    color: #68778f;
    font-size: 12px;
    font-weight: 400;
}

.merged-upload-grid {
    margin-top: 4px;
}

.image-upload-tile {
    align-content: start;
}

.image-upload-preview {
    display: block;
}

.image-upload-tile > span {
    color: #344153;
    font-size: 16px;
    font-weight: 800;
    text-transform: none;
}

.image-upload-tile img {
    width: 100%;
    height: 96px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #dce4ee;
    border-radius: 4px;
}

.image-upload-tile strong {
    display: grid;
    place-items: center;
    min-height: 96px;
    padding: 8px;
    color: #526176;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #c4cfdd;
    border-radius: 4px;
}

.image-upload-tile a {
    overflow-wrap: anywhere;
    color: #2f6fae;
    font-size: 12px;
    font-weight: 700;
}

.image-upload-file {
    overflow-wrap: anywhere;
    color: #68778f;
    font-size: 12px;
    font-weight: 700;
}

.remove-image-button {
    justify-self: start;
    padding: 0;
    color: #a22b35;
    font-size: 12px;
    font-weight: 800;
    text-decoration: underline;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.form-errors {
    padding: 10px 12px;
    color: #7a1522;
    background: #ffe8ec;
    border: 1px solid #f2aab6;
    border-radius: 6px;
}

.form-errors p {
    margin: 0;
}

.vendor-search-form {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid #dce4ee;
}

.vendor-search-form h3 {
    margin: 0;
}

.vendor-search-form .form-grid {
    align-items: end;
}

.vendor-search-result {
    display: grid;
    gap: 4px;
    padding: 12px;
    color: #183d25;
    background: #e9f8ed;
    border: 1px solid #acdcb8;
    border-radius: 6px;
}

.vendor-search-result span {
    color: #365a42;
    font-size: 13px;
}

.vendor-search-result.is-error {
    color: #681824;
    background: #ffe8ec;
    border-color: #f0a6b2;
}

.vendor-search-result.is-error span {
    color: #7a3440;
}

.definition-form h3 {
    margin: 0;
    font-size: 15px;
}

.product-type-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
    gap: 16px;
    align-items: start;
}

.product-type-main {
    display: grid;
    gap: 14px;
}

.product-type-sidebar {
    position: sticky;
    top: 0;
    display: grid;
    gap: 8px;
    max-height: min(680px, calc(100vh - 190px));
    padding: 9px;
    overflow-y: auto;
    background: #eef3f8;
    border: 1px solid #d6e0ec;
    border-radius: 6px;
}

.product-type-sidebar h3 {
    font-size: 13px;
}

.product-type-sidebar p {
    margin: 2px 0 0;
    color: #657488;
    font-size: 11px;
}

.custom-product-definition-form {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
    gap: 16px;
    align-items: start;
}

.custom-product-definition-form > .form-grid,
.custom-product-definition-form > label,
.custom-product-definition-form > .definition-section:not(.custom-product-sidebar) {
    grid-column: 1;
}

.custom-product-definition-form > .primary-action {
    grid-column: 1 / -1;
    justify-self: start;
}

.custom-product-sidebar {
    grid-column: 2;
    grid-row: 1 / span 6;
    max-height: min(680px, calc(100vh - 190px));
    padding: 9px;
    overflow-y: auto;
    background: #eef3f8;
    border-color: #d6e0ec;
}

.custom-product-sidebar h3 {
    font-size: 13px;
}

.custom-product-sidebar p {
    margin: 2px 0 0;
    font-size: 11px;
}

.custom-product-sidebar .section-heading-row {
    align-items: center;
    gap: 8px;
}

.custom-product-sidebar .builder-list {
    gap: 7px;
}

.custom-product-sidebar .builder-card {
    gap: 7px;
    padding: 8px;
}

.custom-product-sidebar .form-grid,
.custom-product-sidebar .form-grid.thirds {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
}

.custom-product-sidebar label {
    gap: 4px;
    font-size: 12px;
}

.custom-product-sidebar input,
.custom-product-sidebar select {
    padding: 7px 8px;
    font-size: 12px;
}

.definition-section {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: #f2f5f9;
    border: 1px solid #dce4ee;
    border-radius: 6px;
}

.definition-section p {
    margin: 0;
    color: #5d6978;
    font-size: 13px;
}

.section-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}

.section-heading-row.compact {
    align-items: center;
    gap: 8px;
}

.location-price-summary {
    color: #172033;
    font-size: 0.82rem;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

.section-heading-row h3 {
    margin-top: 0;
}

.builder-list {
    display: grid;
    gap: 10px;
}

.builder-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #dce4ee;
    border-radius: 6px;
}

.quote-modal .builder-list > .builder-card {
    background: #fbfdff;
    border: 2px solid #93abc9;
    box-shadow: 0 2px 0 rgba(23, 34, 53, 0.08);
    padding: 14px;
}

.quote-modal .builder-list > .builder-card > header {
    background: #e8eef7;
    border: 1px solid #c8d6e8;
    border-radius: 5px;
    margin: -6px -6px 2px;
    padding: 8px 10px;
}

.builder-card.compact {
    gap: 7px;
    padding: 8px;
}

.builder-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.builder-card header strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.builder-card header strong::before,
.section-heading-row h3::before {
    content: "▾";
    display: inline-block;
    color: #68778f;
    font-size: 11px;
    transition: transform 0.16s ease;
}

.section-heading-row h3 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[data-collapsible-card].is-collapsed > header strong::before,
[data-collapsible-section].is-collapsed > .section-heading-row h3::before {
    transform: rotate(-90deg);
}

[data-collapsible-card].is-collapsed > :not(header),
[data-collapsible-section].is-collapsed > :not(.section-heading-row) {
    display: none;
}

.rollup-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

.rollup-button {
    background: transparent;
    border: 0;
    color: #2f75b8;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 3px 0;
}

.rollup-button:hover {
    color: #1d4f82;
    text-decoration: underline;
}

.builder-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.builder-actions form {
    margin: 0;
}

.quote-field-card label {
    gap: 4px;
    font-size: 12px;
}

.quote-field-card input,
.quote-field-card select {
    padding: 7px 8px;
    font-size: 12px;
}

.compact-builder-list {
    gap: 7px;
}

.compact-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
}

.builder-card header span {
    color: #68778f;
    font-size: 12px;
}

.checkbox-line {
    display: flex !important;
    align-items: center;
    grid-template-columns: none !important;
    gap: 9px;
    padding: 10px 12px;
    background: #f2f5f9;
    border: 1px solid #dce4ee;
    border-radius: 6px;
}

.checkbox-line input,
.table-check input {
    width: auto;
}

.compact-check {
    min-height: 0;
    padding: 7px 9px;
    font-size: 12px;
}

.field-options-builder {
    display: grid;
    gap: 6px;
    padding: 7px;
    background: #f7f9fc;
    border: 1px solid #dce4ee;
    border-radius: 6px;
}

.field-options-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: #657488;
    font-size: 11px;
    font-weight: 800;
}

.choice-list {
    display: grid;
    gap: 7px;
}

.choice-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px;
    gap: 5px;
    align-items: center;
    padding-top: 7px;
    border-top: 1px solid #dce4ee;
}

.choice-row input,
.choice-row select {
    min-width: 0;
}

.choice-row input:first-child {
    grid-column: 1 / -1;
}

.choice-row input:nth-of-type(3) {
    grid-column: 1 / 2;
}

.choice-row .link-button {
    justify-self: end;
    font-size: 11px;
}

.definition-table {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 130px 82px minmax(160px, 1.2fr);
    gap: 8px;
    align-items: center;
}

.definition-table > span {
    color: #68778f;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.definition-table input,
.definition-table select {
    min-width: 0;
}

.table-check {
    display: grid !important;
    place-items: center;
    min-height: 40px;
}

.location-table {
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) 100px 100px;
}

.add-on-table {
    grid-template-columns: minmax(160px, 1fr) 140px 120px;
}

.mini-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}

.mini-matrix span {
    color: #68778f;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .topbar {
        grid-template-columns: 130px 1fr auto;
    }

    .utility-icons {
        display: none;
    }

    .search {
        justify-self: stretch;
    }

    .main-nav {
        align-items: center;
        flex-direction: row;
    }

    .mobile-board-select {
        display: grid;
        width: auto;
    }

    .nav-filter {
        flex: 1 1 100%;
        order: 2;
    }

    .nav-scroll,
    .settings-button {
        display: none;
    }

    .board-summary {
        overflow-x: auto;
    }

    .modal-grid,
    .mockup-summary-row,
    .mockup-meta-grid,
    .mockup-meta-grid .mockup-meta-wide,
    .job-status-grid,
    .email-template-layout,
    .quote-modal .settings-modal-grid,
    .product-type-layout,
    .custom-product-definition-form,
    .image-preview-grid,
    .form-grid,
    .form-grid.thirds,
    .form-grid.quarters,
    .upload-grid,
    .definition-table,
    .location-table,
    .add-on-table,
    .choice-row,
    .mini-matrix,
    .approval-actions-panel {
        grid-template-columns: 1fr;
    }

    .product-type-sidebar {
        position: static;
        max-height: none;
    }

    .custom-product-definition-form > .form-grid,
    .custom-product-definition-form > label,
    .custom-product-definition-form > .definition-section,
    .custom-product-sidebar {
        grid-column: 1;
        grid-row: auto;
        max-height: none;
    }
}

.portal-login-shell {
    width: min(720px, calc(100vw - 28px));
}

.portal-login-card {
    gap: 16px;
}

.customer-portal-card {
    gap: 18px;
}

.portal-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-action-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
}

.portal-payment-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    color: #41536b;
    font-size: 12px;
    font-weight: 900;
    background: #eef3f9;
    border: 1px solid #d4deeb;
    border-radius: 999px;
}

.portal-payment-badge.is-paid {
    color: #176c20;
    background: #ddf4df;
    border-color: #77bf7c;
}

.portal-payment-badge.is-partial {
    color: #7a5312;
    background: #fff5db;
    border-color: #e2b84d;
}

.portal-mockup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.portal-profile-panel {
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #d7e0ec;
    border-radius: 8px;
}

.portal-profile-panel .section-heading-row {
    cursor: default;
}

.portal-profile-panel .section-heading-row h2,
.portal-profile-panel .section-heading-row p {
    margin: 0;
}

.portal-profile-panel .stacked-form {
    padding: 0;
}

.portal-messages,
.customer-message-panel {
    border-top: 1px solid #d7e0ec;
    padding-top: 14px;
}

.customer-message-panel {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.compact-message-form {
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #d7e0ec;
    border-radius: 8px;
}

.message-thread {
    display: grid;
    gap: 10px;
}

.message-bubble {
    max-width: 780px;
    padding: 12px;
    border: 1px solid #d7e0ec;
    border-radius: 8px;
    background: #ffffff;
}

.message-bubble.from-customer {
    border-color: #94a3b8;
    background: #f8fafc;
}

.message-bubble.from-staff {
    margin-left: auto;
    border-color: #b9d4f0;
    background: #eef6ff;
}

.internal-message-thread .message-bubble.from-staff {
    margin-left: 0;
}

.message-bubble header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.message-bubble header span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.message-bubble p {
    margin: 0;
    color: #172033;
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .portal-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .portal-summary-grid {
        grid-template-columns: 1fr;
    }

    .portal-action-stack {
        justify-content: flex-start;
    }

    .message-bubble.from-staff {
        margin-left: 0;
    }
}

.quote-item-summary {
    align-items: end;
    display: grid;
    gap: 8px;
    grid-template-columns: 1.05fr 1.5fr 0.55fr 0.72fr 0.72fr;
}

.quote-item-summary.one-off-summary {
    grid-template-columns: minmax(0, 1fr) minmax(84px, 0.1fr) minmax(110px, 0.1fr) minmax(110px, 0.1fr);
}

.one-off-summary label:nth-of-type(n + 2),
.one-off-summary .display-metric {
    justify-self: end;
    width: 100%;
}

.one-off-summary .display-metric strong {
    font-weight: 800;
}

.one-off-summary .display-metric {
    color: #334155;
    font-size: inherit;
    text-align: right;
}

.one-off-summary .display-metric strong {
    justify-content: flex-end;
    text-align: right;
}

.one-off-notes-row {
    margin-top: 10px;
}

.one-off-notes-row textarea {
    width: 100%;
}

.display-metric {
    display: grid;
    gap: 4px;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
}

.display-metric strong {
    align-items: center;
    min-height: 33px;
    color: #172033;
    display: flex;
    font-size: 0.9rem;
    font-weight: 900;
}

.quote-item-note-row {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 10px;
}

.quote-item-mini-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.quote-item-mini-totals span {
    background: #eef2f7;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 6px 8px;
}

.quote-item-section {
    margin-top: 14px;
}

.inline-add-form {
    display: flex;
    align-items: center;
}

.button-select {
    appearance: none;
    background: #f1f5f9;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    color: #334155;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    min-width: 190px;
    padding: 9px 12px;
}

.inline-add-form {
    position: relative;
}

.button-select:hover {
    background: #e2e8f0;
}

.button-select:active {
    background: #dbe4ee;
    transform: translateY(1px);
}

.custom-product-add-ons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.custom-product-add-ons .checkbox-line {
    margin: 0;
}

.custom-product-add-ons small {
    color: var(--muted);
}

.square-area-section {
    margin-top: 14px;
}

.checkbox-card {
    background: #f8fafc;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    padding: 10px;
}

.checkbox-card small {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
}

.quote-item-section-header,
.quote-style-card-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.quote-style-card {
    background: #fff;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    padding: 10px;
}

.quote-style-layout {
    display: grid;
    gap: 12px;
    grid-template-columns: 128px minmax(0, 1fr);
    margin-top: 10px;
}

.quote-style-identity {
    align-self: start;
    color: #475569;
    display: grid;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 800;
}

.quote-style-thumb {
    align-items: center;
    aspect-ratio: 1;
    background: #f8fafc;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    color: #64748b;
    display: flex;
    font-size: 0.68rem;
    font-weight: 900;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    width: 128px;
}

button.quote-style-thumb {
    cursor: zoom-in;
    padding: 0;
}

button.quote-style-thumb:hover {
    border-color: #2f75b8;
    box-shadow: 0 0 0 2px rgba(47, 117, 184, 0.14);
}

.quote-style-thumb img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.image-preview-modal {
    position: relative;
    background: #f8fafc;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
    height: auto;
    max-height: 90vh;
    max-width: 90vw;
    overflow: hidden;
    padding: 0;
    width: max-content;
}

.image-preview-modal::backdrop {
    background: rgba(9, 18, 32, 0.72);
}

.image-preview-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #0f172a;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
    cursor: pointer;
}

.image-preview-close:hover,
.image-preview-close:focus-visible {
    color: #ffffff;
    background: #2f75b8;
    border-color: #2f75b8;
}

.image-preview-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    height: auto;
    margin: 0;
    padding: 18px;
    width: max-content;
    max-width: 90vw;
}

.image-preview-frame img {
    background: #ffffff;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    display: block;
    height: auto;
    max-height: calc(90vh - 76px);
    max-width: calc(90vw - 36px);
    object-fit: contain;
    width: auto;
}

.image-preview-frame figcaption {
    color: #334155;
    font-size: 0.88rem;
    font-weight: 800;
    max-width: calc(90vw - 36px);
    text-align: center;
    width: 100%;
}

.image-preview-modal > img[data-image-preview-img] {
    display: block;
    height: auto;
    max-height: calc(90vh - 76px);
    max-width: calc(90vw - 36px);
    object-fit: contain;
    padding: 18px 18px 0;
    width: auto;
}

.image-preview-modal > p[data-image-preview-title] {
    margin: 0;
    max-width: calc(90vw - 36px);
    padding: 10px 18px 18px;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 800;
    text-align: center;
}

.email-preview-modal {
    width: min(760px, calc(100vw - 28px));
}

.email-preview-shell {
    display: grid;
    gap: 12px;
    padding: 24px;
}

.email-preview-shell h2 {
    margin: 0;
}

.email-preview-recipient {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    background: #f2f5f9;
    border: 1px solid #dce4ee;
    border-radius: 6px;
}

.email-preview-recipient span,
.email-preview-shell label {
    color: #334155;
    font-size: 0.88rem;
    font-weight: 800;
}

.email-preview-shell input,
.email-preview-shell textarea {
    margin-top: 5px;
    width: 100%;
}

.email-preview-shell textarea {
    min-height: min(44vh, 360px);
    resize: vertical;
    white-space: pre-wrap;
}

.email-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.app-search-modal {
    width: min(820px, calc(100vw - 28px));
}

.app-search-shell {
    display: grid;
    gap: 14px;
    max-height: min(78vh, 720px);
    overflow: auto;
    padding: 24px;
}

.app-search-shell > header {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.app-search-shell h2 {
    margin: 0;
}

.app-search-query {
    color: #53647d;
    font-size: 0.86rem;
    font-weight: 800;
}

.app-search-results {
    display: grid;
    gap: 14px;
}

.app-search-group {
    display: grid;
    gap: 8px;
}

.app-search-group h3 {
    align-items: center;
    display: flex;
    font-size: 0.96rem;
    gap: 8px;
    margin: 0;
}

.app-search-group h3 span {
    align-items: center;
    background: #dbe6f3;
    border-radius: 999px;
    color: #32425a;
    display: inline-flex;
    font-size: 0.76rem;
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding: 0 7px;
}

.app-search-result-list {
    display: grid;
    gap: 6px;
}

.app-search-result {
    align-items: center;
    color: var(--ink);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 12px;
    text-decoration: none;
    background: #f5f8fc;
    border: 1px solid #dce4ee;
    border-radius: 7px;
}

.app-search-result:hover {
    background: #eaf1fa;
    border-color: #9fb5d0;
}

.app-search-result strong,
.app-search-result small {
    display: block;
}

.app-search-result small {
    color: #53647d;
    font-size: 0.8rem;
    font-weight: 800;
    margin-top: 2px;
}

.app-search-result em {
    color: #53647d;
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.notification-modal {
    width: min(720px, calc(100vw - 28px));
}

.notification-shell {
    display: grid;
    gap: 14px;
    max-height: min(78vh, 720px);
    overflow: auto;
    padding: 24px;
}

.notification-shell > header {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.notification-shell h2 {
    margin: 0;
}

.notification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.notification-list {
    display: grid;
    gap: 8px;
}

.notification-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 8px;
    align-items: start;
}

.notification-item {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    color: var(--ink);
    text-decoration: none;
    background: #f5f8fc;
    border: 1px solid #dce4ee;
    border-left: 4px solid #90a3bd;
    border-radius: 7px;
}

.notification-item.is-unread {
    background: #fff7ed;
    border-color: #f7c78e;
    border-left-color: #d92d20;
}

.notification-item:hover {
    background: #eaf1fa;
    border-color: #9fb5d0;
}

.notification-item strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.notification-item small,
.notification-item p {
    margin: 0;
}

.notification-item small {
    color: #63728a;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.notification-item p {
    color: #41516a;
    font-size: 0.86rem;
    font-weight: 700;
}

.notification-dismiss {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #63728a;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    background: #eef3f9;
    border: 1px solid #d4dfec;
    border-radius: 999px;
    cursor: pointer;
}

.notification-dismiss:hover,
.notification-dismiss:focus-visible {
    color: #a11224;
    background: #fff1f2;
    border-color: #f4a7b9;
}

.quote-style-identity label {
    color: #64748b;
    display: grid;
    gap: 2px;
    font-size: 0.64rem;
    text-transform: uppercase;
}

.quote-style-identity input,
.quote-style-identity select {
    background: transparent;
    border: 0;
    color: #172033;
    font-size: 0.76rem;
    font-weight: 900;
    min-height: 0;
    padding: 0;
}

.quote-style-identity small {
    color: #64748b;
    font-size: 0.68rem;
    line-height: 1.25;
}

.style-color-field {
    color: #64748b;
    display: grid;
    gap: 3px;
    font-size: 0.64rem;
    text-transform: uppercase;
}

.style-color-dropdown {
    position: relative;
}

.style-color-dropdown summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 6px;
    list-style: none;
}

.style-color-dropdown summary::-webkit-details-marker {
    display: none;
}

.style-color-dropdown summary::after {
    color: #64748b;
    content: "▾";
    margin-left: auto;
}

.style-color-dropdown strong {
    color: #172033;
    font-size: 0.76rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.style-color-menu {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    display: grid;
    gap: 2px;
    left: 0;
    max-height: 210px;
    min-width: 185px;
    overflow: auto;
    padding: 5px;
    position: absolute;
    top: calc(100% + 4px);
    z-index: 20;
}

.style-color-menu button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: #172033;
    cursor: pointer;
    display: flex;
    gap: 7px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 6px;
    text-align: left;
}

.style-color-menu button:hover {
    background: #eef5ff;
}

.color-chip {
    border: 1px solid #94a3b8;
    border-radius: 3px;
    display: inline-block;
    flex: 0 0 auto;
    height: 13px;
    width: 13px;
}

.vendor-add-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.vendor-picker-modal {
    max-width: min(760px, calc(100vw - 32px));
    width: 760px;
}

.vendor-picker {
    display: grid;
    gap: 14px;
}

.vendor-picker-search {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.vendor-picker-message {
    background: #eef5ff;
    border: 1px solid #c8dcf5;
    border-radius: 6px;
    color: #24445f;
    font-weight: 800;
    padding: 10px;
}

.vendor-picker-message.is-error {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #9f1239;
}

.form-loading-message {
    align-items: center;
    background: #eef5ff;
    border: 1px solid #b9d1ee;
    border-radius: 6px;
    color: #24445f;
    display: flex;
    font-size: 0.82rem;
    font-weight: 900;
    gap: 8px;
    padding: 9px 10px;
}

.form-loading-message::before {
    animation: spin 700ms linear infinite;
    border: 2px solid rgba(47, 105, 168, 0.28);
    border-top-color: #2f69a8;
    border-radius: 999px;
    content: "";
    height: 14px;
    width: 14px;
}

.vendor-style-results,
.vendor-color-results {
    display: grid;
    gap: 12px;
}

.vendor-result-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.vendor-result-heading div {
    display: grid;
    gap: 2px;
}

.vendor-result-heading strong {
    color: #172033;
    font-size: 1rem;
}

.vendor-result-heading span,
.vendor-result-heading small {
    color: #64748b;
    font-weight: 800;
}

.vendor-style-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-height: 360px;
    overflow: auto;
}

.vendor-style-result {
    background: #f8fafc;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    cursor: pointer;
    display: grid;
    gap: 4px;
    padding: 10px;
    text-align: left;
    width: 100%;
}

.vendor-style-result:hover {
    background: #eef5ff;
    border-color: #95b7dd;
}

.vendor-style-result strong {
    color: #172033;
    font-size: 0.95rem;
}

.vendor-style-result span {
    color: #334155;
    font-size: 0.82rem;
    font-weight: 900;
}

.vendor-style-result small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.3;
}

.vendor-color-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-height: 420px;
    overflow: auto;
}

.vendor-color-option {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: auto 58px minmax(0, 1fr);
    padding: 8px;
}

.vendor-color-option:has(input:checked) {
    background: #dbeafe;
    border-color: #2f75b8;
}

.vendor-color-thumbnail {
    align-items: center;
    aspect-ratio: 1;
    background: #ffffff;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    color: #64748b;
    display: flex;
    font-size: 0.68rem;
    font-weight: 900;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    width: 58px;
}

.vendor-color-thumbnail img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.vendor-color-copy {
    display: grid;
    gap: 3px;
}

.vendor-color-copy strong {
    color: #172033;
}

.vendor-color-copy small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
}

.shopvox-size-matrix {
    display: grid;
    gap: 5px;
    grid-template-columns: 88px repeat(var(--size-count), minmax(66px, 1fr));
    margin-top: 10px;
    overflow-x: auto;
}

.matrix-label {
    align-self: center;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 900;
    text-align: right;
    text-transform: uppercase;
}

.matrix-size-heading {
    align-content: start;
    display: grid;
    gap: 2px;
    min-height: 66px;
}

.matrix-size-family {
    color: #64748b;
    display: block;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.matrix-size-name {
    color: #172033;
    display: block;
    font-weight: 900;
    padding-inline: 4px;
    text-align: center;
}

.matrix-size-heading small {
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

.matrix-size-heading .matrix-cost-text {
    color: #475569;
    font-weight: 900;
}

.matrix-size-heading .matrix-total-price {
    color: #2f75b8;
    display: block;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1.1;
}

.location-button-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.location-toggle {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    display: grid;
    gap: 4px;
    padding: 8px;
}

.location-summary-tools {
    align-items: end;
    display: flex;
    gap: 12px;
}

.location-summary-tools label {
    min-width: 130px;
}

.location-summary-tools input {
    max-width: 130px;
}

.location-toggle > input[type="checkbox"] {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.embroidery-location-toggle input[type="number"] {
    margin-top: 2px;
    width: 100%;
}

.location-toggle:has(input[type="checkbox"]:checked) {
    background: #dbeafe;
    border-color: #2f75b8;
}

.location-toggle span {
    color: #172033;
    font-weight: 900;
}

.location-toggle small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.location-toggle input[type="number"] {
    margin-top: 2px;
    padding: 7px 8px;
}

@media (max-width: 760px) {
    .quote-item-summary,
    .quote-item-note-row,
    .quote-style-layout,
    .vendor-picker-search,
    .shopvox-size-matrix {
        grid-template-columns: 1fr;
    }
}