:root { --pos-shell-gap: 1.25rem; --pos-card-padding: 1.25rem; --pos-card-radius: 1rem; --pos-card-border: #dce5f1; --pos-card-shadow: 0 14px 36px rgba(6, 54, 81, 0.08); --pos-muted: #6b7a90; } .pos-shell { display: grid; gap: var(--pos-shell-gap); align-items: start; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); } .pos-main, .pos-rail { min-width: 0; } .pos-rail { display: flex; flex-direction: column; gap: var(--pos-shell-gap); } .pos-shell-actions { display: grid; grid-column: 1 / -1; gap: var(--pos-shell-gap); align-items: start; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); } .pos-shell-actions__rail { display: flex; flex-direction: column; gap: 0.75rem; } .pos-duplicate-warning { margin: 0; border: 1px solid #f2d38a; border-radius: 0.95rem; box-shadow: 0 10px 24px rgba(142, 108, 24, 0.08); } .pos-duplicate-warning__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .pos-duplicate-warning__header-copy { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; } .pos-duplicate-warning__icon { color: #8a6300; } .pos-duplicate-warning__title { margin: 0; color: #604700; font-size: 0.95rem; font-weight: 700; } .pos-duplicate-warning__message { margin: 0.75rem 0 0; color: #5e5230; line-height: 1.45; } .pos-duplicate-warning__details { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.85rem; } .pos-duplicate-warning__detail-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid rgba(142, 108, 24, 0.16); border-radius: 0.8rem; background: rgba(255, 255, 255, 0.8); } .pos-duplicate-warning__detail-copy { display: flex; flex-direction: column; gap: 0.35rem; } .pos-duplicate-warning__detail-title { margin: 0; color: #2b3442; font-weight: 700; } .pos-duplicate-warning__detail-content { margin: 0; color: #5c6a7c; line-height: 1.45; } .pos-duplicate-warning__detail-actions { margin: 0; } .pos-duplicate-warning__detail-actions .button { margin: 0; } @media screen and (min-width: 1024px) { .pos-rail--sticky { position: sticky; top: 1rem; } } @media screen and (max-width: 1023px) { .pos-shell { grid-template-columns: minmax(0, 1fr); } .pos-shell-actions { grid-template-columns: minmax(0, 1fr); } .pos-duplicate-warning__header { flex-direction: column; align-items: stretch; } } .box.has-sharp-edges.pos-card { padding: var(--pos-card-padding); border-radius: var(--pos-card-radius); border: 1px solid var(--pos-card-border); box-shadow: var(--pos-card-shadow); background: #ffffff; } .box.has-sharp-edges.pos-card.pos-card--flush { padding: 0; overflow: hidden; } .box.has-sharp-edges.pos-card.pos-card--compact { padding: 1rem; } .pos-card-tabs .tabs { margin: 0; padding: 0.85rem 1rem 0.35rem; border-bottom: 1px solid #e6edf7; } .pos-card-tabs .tabs ul { gap: 0.35rem; flex-wrap: wrap; border-bottom: none; } .pos-card-tabs .tabs li a { min-height: 2.4rem; padding: 0.45rem 0.9rem; border: none; border-radius: 999px; color: #56657a; font-weight: 600; } .pos-card-tabs .tabs li.is-active a { background: #eef4ff; color: #21446d; } .tabs.pos-sidebar-panel-tabs { margin: 0 0 0.35rem; } .tabs.pos-sidebar-panel-tabs ul { justify-content: flex-start; margin: 0; gap: 0.35rem; flex-wrap: wrap; border-bottom: none; } .tabs.pos-sidebar-panel-tabs li a { display: inline-flex; align-items: center; gap: 0.45rem; border: none; border-radius: 999px; min-height: 2.1rem; padding: 0.45rem 0.85rem; color: #5a6980; font-weight: 600; } .tabs.pos-sidebar-panel-tabs li.is-active a { background: #eef4ff; color: #21446d; } .buttons.pos-actions { margin: 0; gap: 0.75rem; } .buttons.pos-actions > * { margin: 0; min-width: 0; } .buttons.pos-actions .button { margin: 0; } .buttons.pos-actions.pos-actions--desktop { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .buttons.pos-actions.pos-actions--stacked, .buttons.pos-actions.pos-actions--rail { display: grid; grid-template-columns: minmax(0, 1fr); } .auto-excel-export-inline, [data-auto-excel-export-button="1"] { display: flex; align-items: center; } .auto-excel-export-inline .button, [data-auto-excel-export-button="1"] .button { margin: 0; } .pos-inline-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; } .pos-inline-tag { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0; border-radius: 0; background: transparent; color: #5c6d83; font-size: var(--pos-order-subheading-font-size, 0.75rem); font-weight: 500; line-height: var(--pos-order-subheading-line-height, 1.5); white-space: nowrap; } .pos-inline-tag__label { color: #7f8ea3; font-weight: 600; } .pos-inline-tag__value { color: #243347; font-weight: 600; } .pos-desktop-step { display: flex; flex-direction: column; gap: 1rem; } .pos-order-metadata-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pos-order-metadata-card { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; min-height: 100%; padding: 1rem; border: 1px solid #dce5f1; border-radius: 0.95rem; background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%); } .pos-order-metadata-card--full { grid-column: 1 / -1; } .pos-order-metadata-label { margin: 0; color: #607086; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .pos-order-field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .pos-order-field__control { width: 100%; min-height: 3.25rem; padding: 0.8rem 0.95rem; border: 1px solid #d7e2ef; border-radius: 0.85rem; background: #ffffff; color: #223347; font-size: 0.95rem; line-height: 1.4; text-align: left; transition: border-color 120ms ease, box-shadow 120ms ease; } .pos-order-field__control--interactive { cursor: text; display: flex; align-items: center; justify-content: flex-start; } .pos-order-field__control--interactive:hover, .pos-order-field__control--interactive:focus-visible { border-color: #93b3d8; box-shadow: 0 0 0 3px rgba(93, 142, 191, 0.12); outline: none; } .pos-order-field__control--empty { color: #8ea0b6; } .pos-order-field__control--editing { padding: 0; } .pos-order-field__preview { flex: 1 1 auto; min-width: 0; display: -webkit-box; overflow: hidden; white-space: pre-wrap; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .pos-order-field__empty-state { display: flex; align-items: center; width: 100%; min-width: 0; } .pos-order-field__empty-pill { display: inline-flex; align-items: center; max-width: 100%; padding: 0.32rem 0.7rem; border-radius: 999px; background: #f3f6fa; color: #4c5f76; font-size: 0.79rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pos-order-note-editor .pos-order-field__control { min-height: 7.25rem; } .pos-order-note-editor .pos-order-field__control--interactive { align-items: flex-start; } .pos-order-note-editor .pos-order-field__preview { -webkit-line-clamp: 5; } .pos-order-note-editor__empty { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.55rem; width: 100%; min-width: 0; min-height: 100%; } .pos-order-note-editor__empty-copy { color: #7a8ba1; font-size: 0.92rem; line-height: 1.35; } .pos-order-field__input { width: 100%; min-height: 3.25rem; resize: vertical; border: 0; box-shadow: none; background: transparent; color: inherit; padding: 0.8rem 0.95rem; } .pos-order-note-editor .pos-order-field__input { min-height: 7.25rem; } .pos-order-field__input:focus { outline: none; box-shadow: none; } .pos-registration-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pos-registration-grid--customer-wishes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pos-registration-slot { min-width: 0; } .pos-registration-control { width: 100%; min-width: 0; margin-bottom: 0; } .pos-registration-field { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; min-height: 4.25rem; padding: 0.75rem 0.9rem; border: 1px solid #d7e2ef; border-radius: 0.85rem; background: #ffffff; color: #223347; text-align: left; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .pos-registration-field--editing { justify-content: center; cursor: text; } .pos-registration-field:hover, .pos-registration-field:focus-visible { border-color: #93b3d8; box-shadow: 0 0 0 3px rgba(93, 142, 191, 0.12); outline: none; transform: translateY(-1px); } .pos-registration-field--empty { color: #8ea0b6; } .pos-registration-field__label { color: #607086; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .pos-registration-field__label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; min-width: 0; } .pos-registration-field__status-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 0.8rem; line-height: 1; } .pos-registration-field__status-icon--warning { color: #a46d00; } .pos-registration-field__status-icon--danger { color: #b53e3e; } .pos-registration-field__value { min-width: 0; font-weight: 600; line-height: 1.35; word-break: break-word; } .pos-registration-field--add { border-style: dashed; background: #fbfcfe; } .pos-registration-field--warning { border-style: solid; border-color: #ddc15b; background: #fff4c4; } .pos-registration-field--danger { border-style: solid; border-color: #e0a7a7; background: #fff1f1; } .pos-registration-field--add:hover, .pos-registration-field--add:focus-visible { border-color: #93b3d8; box-shadow: 0 0 0 3px rgba(93, 142, 191, 0.12); background: #fbfdff; outline: none; transform: none; } .pos-registration-field--warning:hover, .pos-registration-field--warning:focus-visible { border-color: #cfaf3f; background: #ffefb2; box-shadow: 0 0 0 3px rgba(207, 175, 63, 0.16); } .pos-registration-field--danger:hover, .pos-registration-field--danger:focus-visible { border-color: #d38c8c; background: #ffe7e7; box-shadow: 0 0 0 3px rgba(211, 140, 140, 0.16); } .pos-registration-field__value--muted { color: #63768f; } .pos-registration-field__input { width: 100%; min-width: 0; padding: 0; border: 0; box-shadow: none; background: transparent; color: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.35; text-transform: uppercase; } .pos-registration-field__input--customer-wishes { text-transform: none; } .pos-registration-field__input:focus { outline: none; box-shadow: none; } .pos-order-items--order-detail .pos-order-metadata-grid { gap: 0.9rem; grid-template-columns: minmax(20rem, 1.22fr) minmax(16rem, 1fr); grid-template-areas: "license-plates customer-wishes" "note note"; align-items: stretch; } .pos-order-items--order-detail .pos-order-metadata-card { gap: 0.7rem; padding: 0.95rem 1rem; border-color: #e2e8f0; border-radius: 1rem; background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04); } .pos-order-items--order-detail .pos-order-metadata-card--license-plates { grid-area: license-plates; } .pos-order-items--order-detail .pos-order-metadata-card--customer-wishes { grid-area: customer-wishes; } .pos-order-items--order-detail .pos-order-metadata-card--note { grid-area: note; } .pos-order-items--order-detail .pos-order-metadata-label { color: #738397; font-size: 0.68rem; letter-spacing: 0.08em; } .pos-order-items--order-detail .pos-order-field__control { min-height: 3rem; padding: 0.7rem 0.85rem; border-color: #dbe3eb; border-radius: 0.8rem; box-shadow: none; } .pos-order-items--order-detail .pos-order-field__empty-pill { background: #f4f6f9; color: #445466; } .pos-order-items--order-detail .pos-order-field__input { min-height: 3rem; padding: 0.7rem 0.85rem; } .pos-order-items--order-detail .pos-order-customer-wishes .pos-registration-field__value { font-size: 0.95rem; } .pos-order-items--order-detail .pos-order-note-editor .pos-order-field__control { min-height: 4.6rem; } .pos-order-items--order-detail .pos-order-note-editor .pos-order-field__preview { -webkit-line-clamp: 2; } .pos-order-items--order-detail .pos-order-note-editor .pos-order-field__input { min-height: 4.6rem; } .pos-order-items--order-detail .pos-order-note-editor__empty { justify-content: center; gap: 0.45rem; } .pos-order-items--order-detail .pos-order-note-editor__empty-copy { font-size: 0.88rem; } .pos-order-items--order-detail .pos-registration-grid { gap: 0.55rem; grid-auto-rows: 1fr; } .pos-order-items--order-detail .pos-registration-slot { display: flex; min-width: 0; } .pos-order-items--order-detail .pos-registration-control { display: flex; flex: 1 1 0; width: 100%; min-width: 0; } .pos-order-items--order-detail .pos-registration-field { flex: 1 1 0; height: 100%; justify-content: space-between; } .pos-order-items--order-detail .pos-registration-field { min-height: 3.35rem; padding: 0.62rem 0.78rem; border-color: #dbe3eb; border-radius: 0.8rem; background: #ffffff; box-shadow: none; } .pos-order-items--order-detail .pos-registration-field--editing { width: 100%; } .pos-order-items--order-detail .pos-registration-field:hover, .pos-order-items--order-detail .pos-registration-field:focus-visible { transform: none; background: #fcfdff; } .pos-order-items--order-detail .pos-registration-field--warning:hover, .pos-order-items--order-detail .pos-registration-field--warning:focus-visible { background: #ffefb2; } .pos-order-items--order-detail .pos-registration-field--danger:hover, .pos-order-items--order-detail .pos-registration-field--danger:focus-visible { background: #ffe7e7; } .pos-order-items--order-detail .pos-registration-field__label { color: #738397; font-size: 0.68rem; letter-spacing: 0.08em; } .pos-order-items--order-detail .pos-registration-field__value { font-size: 0.95rem; } .pos-order-items--order-detail .pos-registration-field--add { border-color: #d2dbe5; } .pos-order-items--order-detail .pos-registration-field--warning { border-color: #d8b748; background: #fff3bf; } .pos-order-items--order-detail .pos-registration-field--danger { border-color: #dc9f9f; background: #fff0f0; } .pos-step-one-insights { display: grid; align-items: stretch; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); } .pos-step-one-insight-card { display: flex; flex-direction: column; gap: 0.95rem; min-width: 0; min-height: 100%; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 1rem; background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04); } .pos-step-one-insight-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.85rem; } .pos-step-one-insight-card__heading { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; } .pos-step-one-insight-card__eyebrow { margin: 0; color: #738397; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .pos-step-one-insight-card__title { margin: 0; color: #20344f; font-size: 1.05rem; font-weight: 700; line-height: 1.2; } .pos-step-one-insight-card__subtitle { margin: 0; color: #66768b; font-size: 0.9rem; line-height: 1.35; } .pos-step-one-insight-card__pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; } .pos-step-one-insight-pill { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.35rem 0.7rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.76rem; font-weight: 700; line-height: 1.2; white-space: nowrap; } .pos-step-one-insight-pill--success { border-color: #cae7d2; background: #effbf2; color: #1d6b36; } .pos-step-one-insight-pill--warning { border-color: #ecd89e; background: #fff8df; color: #906100; } .pos-step-one-insight-pill--danger { border-color: #edc9c9; background: #fff1f1; color: #a23636; } .pos-step-one-insight-pill--booking { border-color: #c8d8f5; background: #eef4ff; color: #21446d; } .pos-step-one-insight-pill--muted { border-color: #d9e1eb; background: #f5f7fa; color: #526274; } .pos-step-one-insight-meta { display: grid; gap: 0.65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pos-step-one-insight-meta--compact { gap: 0.55rem; } .pos-step-one-insight-meta__item { min-width: 0; padding: 0.72rem 0.82rem; border: 1px solid #e7edf5; border-radius: 0.85rem; background: #ffffff; } .pos-step-one-insight-meta__label { margin: 0 0 0.3rem; color: #738397; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .pos-step-one-insight-meta__value { margin: 0; color: #243347; font-size: 0.92rem; font-weight: 600; line-height: 1.35; word-break: break-word; } .pos-step-one-insight-card__section { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.55rem; min-width: 0; } .pos-step-one-insight-card__section-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .pos-step-one-insight-card__section-title { margin: 0; color: #34455c; font-size: 0.82rem; font-weight: 700; } .pos-step-one-insight-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .pos-step-one-insight-list__item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.72rem 0.82rem; border: 1px solid #e7edf5; border-radius: 0.85rem; background: #ffffff; } .pos-step-one-insight-list__item--addon { background: #fbfcfe; } .pos-step-one-insight-list__label { min-width: 0; color: #243347; font-size: 0.92rem; font-weight: 600; line-height: 1.35; word-break: break-word; } .pos-step-one-insight-list__prefix { margin-right: 0.35rem; color: #738397; } .pos-step-one-insight-list__quantity { flex: 0 0 auto; color: #5b6c81; font-size: 0.82rem; font-weight: 700; } .pos-step-one-empty-state, .pos-step-one-loading-state { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 4rem; padding: 0.85rem; border: 1px dashed #d8e1eb; border-radius: 0.85rem; background: #fbfcfe; color: #63758a; font-size: 0.9rem; line-height: 1.4; text-align: center; } .pos-step-one-copy-action { align-self: flex-start; margin-top: auto; } @media screen and (max-width: 1080px) { .pos-order-items--order-detail .pos-order-metadata-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "license-plates" "customer-wishes" "note"; } .pos-order-items--order-detail .pos-order-note-editor .pos-order-field__control, .pos-order-items--order-detail .pos-order-note-editor .pos-order-field__input { min-height: 5rem; } } @media screen and (max-width: 768px) { .box.has-sharp-edges.pos-card { padding: 1rem; border-radius: 0.9rem; } .pos-card-tabs .tabs { padding: 0.75rem 0.75rem 0.35rem; } .pos-order-metadata-grid, .pos-registration-grid { grid-template-columns: minmax(0, 1fr); } .pos-step-one-insight-meta { grid-template-columns: minmax(0, 1fr); } }