. Match any direct child so the
card layout applies everywhere; an inline tile would otherwise run its label
and value together on one line. */
.sk-stat-grid > * { min-height: 7rem; padding: var(--sk-space-4); border: 1px solid var(--sk-color-border-soft); border-radius: var(--sk-radius-md); display: grid; align-content: center; gap: var(--sk-space-1); }
.sk-stat-grid > * > small, .sk-stat-grid > * > span { color: var(--sk-color-ink-soft); font-size: var(--sk-font-size-sm); }
.sk-stat-grid strong { color: var(--sk-color-ink); font-size: var(--sk-font-size-xl); line-height: 1.15; font-variant-numeric: tabular-nums; }
.sk-timeline { display: grid; }
.sk-timeline article { min-height: 4.5rem; display: grid; grid-template-columns: 1rem 1fr; gap: var(--sk-space-3); }
.sk-timeline article > span { width: .7rem; height: .7rem; margin-top: .35rem; border-radius: 50%; background: var(--sk-color-primary); box-shadow: 0 0 0 4px var(--sk-color-primary-soft); }
.sk-timeline article > div { padding-bottom: var(--sk-space-4); border-bottom: 1px solid var(--sk-color-border-soft); }
.sk-timeline p, .sk-muted-copy { margin: 0; color: var(--sk-color-ink-soft); }
.sk-json-summary { margin: 0; padding: var(--sk-space-4); border-radius: var(--sk-radius-md); background: var(--sk-color-canvas); overflow: auto; white-space: pre-wrap; }
.sk-segment-card, .sk-feature-card { padding: var(--sk-card-inset); display: grid; gap: var(--sk-space-5); }
.sk-segment-card > div { display: flex; align-items: center; gap: var(--sk-space-3); }
.sk-segment-card > div > span { display: grid; }
.sk-segment-card small { color: var(--sk-color-ink-soft); }
.sk-segment-card > b { font-size: var(--sk-font-size-2xl); }
.sk-feature-card > svg { color: var(--sk-color-primary); }
.sk-rule-builder { padding: var(--sk-space-4); border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-md); display: grid; gap: var(--sk-space-4); }
.sk-rule-builder header { display: flex; align-items: center; gap: var(--sk-space-3); }
.sk-rule-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: var(--sk-space-2); }
.sk-rule-row select, .sk-rule-row input { min-width: 0; height: var(--sk-control-height); border: 1px solid var(--sk-color-border-interactive); border-radius: var(--sk-radius-sm); padding: 0 var(--sk-space-3); background: var(--sk-color-surface); }
/* Terminalen tegner tomme tilstander som et kort med stiplet ramme
(.sk-terminal-empty-card). Operatørrommet tegnet dem som fri tekst midt i et
ellers rammet grensesnitt, så «ingenting her» og «noe mangler i lastingen»
så like ut. Samme ramme, radius og luft her gir én tom tilstand i hele
produktet. */
.sk-empty-state { min-height: 12rem; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--sk-color-border-soft); border-radius: var(--sk-radius-lg); padding: var(--sk-space-6) var(--sk-space-5); text-align: center; color: var(--sk-color-ink); }
.sk-empty-state svg { margin-bottom: var(--sk-space-4); }
.sk-empty-state strong { font-size: var(--sk-font-size-xl); }
.sk-empty-state p { max-width: 28rem; margin: var(--sk-space-2) 0 var(--sk-space-4); color: var(--sk-color-ink-soft); }
.sk-empty-state--compact { min-height: 8rem; }
.sk-error-state { max-width: 40rem; margin: 4rem auto; padding: var(--sk-space-8); border: 1px solid var(--sk-color-danger); border-radius: var(--sk-radius-lg); background: var(--sk-color-danger-soft); }
.sk-error-state strong { font-size: var(--sk-font-size-xl); }
.sk-error-state p { color: var(--sk-color-danger); }
.sk-skeleton-card { min-height: 24rem; padding: var(--sk-space-8); }
.sk-skeleton { display: block; border-radius: .4rem; background: linear-gradient(90deg, var(--sk-color-border-soft) 25%, var(--sk-color-canvas) 50%, var(--sk-color-border-soft) 75%); background-size: 200% 100%; animation: sk-shimmer 1.35s linear infinite; }
.sk-skeleton--title { width: 42%; height: 1.7rem; }
.sk-skeleton--value { width: 28%; height: 2.8rem; margin: 2rem 0 3rem; }
.sk-skeleton--body { height: 1rem; margin-top: 1rem; }
.sk-form-error { padding: .75rem 1rem; border-radius: var(--sk-radius-sm); background: var(--sk-color-danger-soft); color: var(--sk-color-danger); }
/* Søsken til `.sk-form-error`, i gult i stedet for rødt: noe er ufullstendig,
men det stopper deg ikke. Brukes til rader som var ufullstendige før du åpnet
skjemaet — de skal merkes, ikke låse lagringen. */
.sk-form-hint { padding: .75rem 1rem; border-radius: var(--sk-radius-sm); background: var(--sk-color-warning-soft); color: var(--sk-color-warning); }
.sk-form-hint > button { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: var(--sk-font-weight-strong); text-decoration: underline; cursor: pointer; }
/* A stale-reload failure keeps the previous list on screen — this banner sits
above it instead of replacing the page with a full-screen error, so a
flaky retry never reads as data loss. */
.sk-inline-error-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-4); margin-bottom: var(--sk-space-4); padding: .75rem 1rem; border-radius: var(--sk-radius-sm); background: var(--sk-color-danger-soft); color: var(--sk-color-danger); }
.sk-refresh-hint { margin: 0 0 var(--sk-space-4); color: var(--sk-color-ink-soft); font-size: var(--sk-font-size-sm); }
/* En advarsel er ikke et avslag. Den skal ses, men ikke se ut som at skjemaet
er avvist — det er fortsatt lov å lagre. */
.sk-form-warning { margin: 0; padding: .75rem 1rem; border-radius: var(--sk-radius-sm); background: var(--sk-color-warning-soft); color: var(--sk-color-ink); line-height: 1.5; }
.sk-form-stack { display: grid; gap: var(--sk-space-5); }
.sk-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--sk-space-4); }
.sk-form-row > .sk-button { align-self: end; justify-self: start; }
.sk-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sk-space-3); }
.sk-back-row { justify-self: start; min-height: 2.5rem; padding: 0; border: 0; background: transparent; color: var(--sk-color-ink-soft); display: inline-flex; align-items: center; gap: var(--sk-space-2); cursor: pointer; }
.sk-back-row:hover { color: var(--sk-color-ink); }
.sk-picker { display: grid; gap: var(--sk-space-4); min-height: 0; }
.sk-picker-create { min-height: 4.5rem; padding: var(--sk-space-3); border: 0; border-radius: var(--sk-radius-md); background: var(--sk-color-primary-soft); color: var(--sk-color-primary); display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: var(--sk-space-3); text-align: left; cursor: pointer; }
.sk-picker-create strong, .sk-picker-create small { display: block; }
.sk-picker-create small { color: var(--sk-color-ink-soft); }
.sk-picker-list { max-height: min(54vh, 36rem); overflow-y: auto; border-block: 1px solid var(--sk-color-border-soft); }
.sk-picker-list > button { width: 100%; min-height: 4.8rem; padding: var(--sk-space-3) var(--sk-space-2); border: 0; border-bottom: 1px solid var(--sk-color-border-soft); background: var(--sk-color-surface); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sk-space-3); text-align: left; cursor: pointer; }
.sk-picker-list > button:hover, .sk-picker-list > button.is-selected { background: var(--sk-color-surface-selected); }
.sk-picker-list strong, .sk-picker-list small { display: block; }
.sk-picker-list small { color: var(--sk-color-ink-soft); }
.sk-service-color { width: .75rem; height: 2.5rem; border-radius: var(--sk-radius-pill); background: var(--sk-service-category-color, var(--sk-color-service-accent)); }
.sk-picker-footer { position: sticky; bottom: 0; min-height: 4.5rem; padding-top: var(--sk-space-3); background: var(--sk-color-surface); display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-4); }
.sk-list-skeleton { height: 16rem; border-radius: var(--sk-radius-md); background: linear-gradient(90deg, var(--sk-color-border-soft) 25%, var(--sk-color-canvas) 50%, var(--sk-color-border-soft) 75%); background-size: 200% 100%; animation: sk-shimmer 1.35s linear infinite; }
.sk-readiness-banner { padding: var(--sk-space-4); border-radius: var(--sk-radius-md); background: var(--sk-color-info-soft); color: var(--sk-color-info); }
.sk-readiness-banner strong, .sk-readiness-banner p { display: block; }
.sk-readiness-banner p { margin: var(--sk-space-1) 0 0; }
.sk-readiness-banner ul { margin: var(--sk-space-2) 0 0; padding-left: var(--sk-space-5); }
.sk-readiness-banner li + li { margin-top: var(--sk-space-1); }
.sk-readiness-banner.is-warning { background: var(--sk-color-warning-soft); color: var(--sk-color-warning); }
.sk-settings-sections { display: grid; gap: var(--sk-space-8); }
.sk-settings-sections section { display: grid; gap: var(--sk-space-4); }
.sk-settings-sections h3 { margin: 0; font-size: var(--sk-type-card-title); }
.sk-stat-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sk-loyalty-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-space-4); }
.sk-loyalty-empty { min-height: 22rem; display: grid; place-items: center; align-content: center; gap: var(--sk-space-4); padding: var(--sk-space-8); text-align: center; }
.sk-loyalty-empty h3, .sk-loyalty-empty p { margin: 0; }
.sk-loyalty-empty p, .sk-loyalty-empty small { color: var(--sk-color-ink-soft); }
.sk-loyalty-empty__icon { width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; background: var(--sk-color-primary-soft); color: var(--sk-color-primary); }
.sk-loyalty-empty__icon svg { width: 1.6rem; height: 1.6rem; }
.sk-switch-row, .sk-checkbox-row { min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-4); border-bottom: 1px solid var(--sk-color-border-soft); }
.sk-switch-row > span { display: grid; flex: 1 1 auto; min-width: 0; }
/* LUFT: bryteren/haken skal aldri presse forklaringen sammen til ett ord per linje, og selve
kontrollen skal ikke krympe. */
:is(.sk-switch-row, .sk-checkbox-row) > input { flex: none; }
.sk-switch-row small { color: var(--sk-color-ink-soft); }
.sk-switch-row input { width: 2.75rem; height: 1.5rem; accent-color: var(--sk-color-primary); }
.sk-checkbox-row { justify-content: flex-start; }
.sk-checkbox-row input { width: 1.25rem; height: 1.25rem; accent-color: var(--sk-color-primary); }
.sk-check-list { display: grid; gap: var(--sk-space-1); }
.sk-check-list:is(fieldset) { margin: 0; padding: var(--sk-space-2); border: 1px solid var(--sk-color-border-soft); border-radius: var(--sk-radius-sm); }
.sk-check-list > legend { padding: 0 var(--sk-space-1); color: var(--sk-color-ink-soft); font-size: var(--sk-font-size-sm); font-weight: var(--sk-font-weight-strong); }
.sk-check-list > label { min-height: 2.5rem; padding: 0 var(--sk-space-2); display: flex; align-items: center; gap: var(--sk-space-2); border-radius: var(--sk-radius-sm); }
.sk-check-list > label:hover { background: var(--sk-color-surface-hover); }
.sk-check-list > button { min-height: 3.75rem; padding: 0 var(--sk-space-3); border: 0; border-radius: var(--sk-radius-sm); background: transparent; display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; }
.sk-check-list > button:hover, .sk-check-list > button.is-selected { background: var(--sk-color-surface-selected); }
/* En rad i «Velg team»: valgknappen selv, med opp/ned-pilene ved siden av.
Knappen er ikke lenger et direkte barn av lista, så den arver ikke regelen
over — radutseendet gjentas her framfor å la navnet renne sammen. */
.sk-check-list > .sk-team-order-row { display: flex; align-items: center; gap: var(--sk-space-1); }
.sk-check-list > .sk-team-order-row > button:first-child { flex: 1; min-width: 0; min-height: 3.75rem; padding: 0 var(--sk-space-3); border: 0; border-radius: var(--sk-radius-sm); background: transparent; display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-2); text-align: left; cursor: pointer; }
.sk-check-list > .sk-team-order-row > button:first-child:hover, .sk-check-list > .sk-team-order-row > button:first-child.is-selected { background: var(--sk-color-surface-selected); }
.sk-team-order-controls { flex: none; display: flex; align-items: center; gap: var(--sk-space-1); }
.sk-team-order-controls .sk-icon-button svg { width: 1.1rem; height: 1.1rem; }
.sk-check-list strong, .sk-check-list small { display: block; }
.sk-check-list small { color: var(--sk-color-ink-soft); }
.sk-inset-form { padding: var(--sk-space-4); border-radius: var(--sk-radius-md); background: var(--sk-color-canvas); display: grid; gap: var(--sk-space-4); }
.sk-emoji-picker { display: flex; flex-wrap: wrap; gap: var(--sk-space-2); }
.sk-emoji-picker button, .sk-weekday-picker button { width: 2.9rem; height: 2.9rem; border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-sm); background: var(--sk-color-surface); cursor: pointer; }
.sk-emoji-picker button { font-size: var(--sk-font-size-xl); }
.sk-emoji-picker button.is-selected, .sk-weekday-picker button.is-selected { border-color: var(--sk-color-primary); background: var(--sk-color-primary-soft); }
.sk-weekday-picker { display: flex; gap: var(--sk-space-2); }
.sk-auth-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--sk-space-6); background: var(--sk-color-canvas); }
.sk-auth-card { width: min(100%, 29rem); padding: 2.75rem; border: 1px solid var(--sk-color-border); border-radius: var(--sk-card-radius); background: var(--sk-color-surface); box-shadow: var(--sk-shadow-popover); }
.sk-auth-card--wide { width: min(100%, 38rem); }
.sk-auth-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 3rem; font-size: var(--sk-font-size-xl); font-weight: var(--sk-font-weight-strong); }
.sk-auth-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .8rem; background: var(--sk-color-primary-soft); color: var(--sk-color-primary); }
.sk-auth-card h1 { margin: var(--sk-space-5) 0 var(--sk-space-2); font-size: var(--sk-type-page-title); }
.sk-auth-card > p { color: var(--sk-color-ink-soft); }
.sk-auth-card form { display: grid; gap: var(--sk-space-5); margin-top: var(--sk-space-8); }
.sk-auth-loading { display: inline-flex; align-items: center; gap: var(--sk-space-3); font-weight: var(--sk-font-weight-strong); }
.sk-tenant-list { display: grid; gap: var(--sk-space-2); margin: var(--sk-space-8) 0 var(--sk-space-5); }
.sk-tenant-list > button { min-height: 4.8rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sk-space-4); padding: var(--sk-space-3); border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-md); background: var(--sk-color-surface); text-align: left; cursor: pointer; }
.sk-tenant-list > button:hover { background: var(--sk-color-surface-hover); }
.sk-tenant-list strong, .sk-tenant-list small { display: block; }
.sk-tenant-list small { color: var(--sk-color-ink-soft); }
.sk-auth-card .sk-button--primary { width: 100%; justify-content: center; }
.sk-auth-card .sk-back-row { margin-top: var(--sk-space-6); }
.sk-auth-links { margin-top: var(--sk-space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-3); }
.sk-auth-links button, .sk-auth-resend { min-height: 2.5rem; padding: 0; border: 0; background: transparent; color: var(--sk-color-primary); font: inherit; font-weight: var(--sk-font-weight-strong); cursor: pointer; }
.sk-auth-resend { margin-top: var(--sk-space-4); display: inline-flex; align-items: center; gap: var(--sk-space-2); }
.sk-auth-resend:disabled { color: var(--sk-color-ink-faint); cursor: default; }
.sk-auth-code-expiry { display: flex; align-items: flex-start; gap: var(--sk-space-2); color: var(--sk-color-ink-soft); font-size: var(--sk-font-size-sm); }
.sk-auth-code-expiry svg { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .15rem; color: var(--sk-color-primary); }
.sk-auth-code-expiry p { margin: 0; }
.sk-auth-code-expiry.is-expired, .sk-auth-code-expiry.is-expired svg { color: var(--sk-color-danger); }
.sk-auth-code-notice { margin: 0; padding: .75rem 1rem; border-radius: var(--sk-radius-sm); }
.sk-auth-code-notice.is-error { background: var(--sk-color-danger-soft); color: var(--sk-color-danger); }
.sk-auth-code-notice.is-success { background: var(--sk-color-success-soft); color: var(--sk-color-success); }
.sk-audit-meta { display: flex; flex-wrap: wrap; gap: var(--sk-space-4); margin: 0; padding: var(--sk-space-3) 0; color: var(--sk-color-ink-soft); font-size: var(--sk-font-size-sm); }
.sk-audit-meta > div { display: flex; gap: var(--sk-space-2); }
.sk-audit-meta dt { font-weight: var(--sk-font-weight-strong); color: var(--sk-color-ink); }
.sk-audit-meta dd { margin: 0; }
.sk-readiness-gate { display: flex; align-items: flex-start; gap: var(--sk-space-3); padding: var(--sk-space-4); border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-lg); background: var(--sk-color-surface); }
.sk-readiness-gate > span { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: 50%; background: var(--sk-color-warning-soft); color: var(--sk-color-warning); }
.sk-readiness-gate > div { display: grid; gap: var(--sk-space-2); }
.sk-readiness-gate p { margin: 0; color: var(--sk-color-ink-soft); }
.sk-readiness-gate.is-blocked > span { background: var(--sk-color-danger-soft); color: var(--sk-color-danger); }
.sk-code-input { min-height: 4.2rem !important; text-align: center; font-size: var(--sk-font-size-2xl); font-weight: var(--sk-font-weight-strong); letter-spacing: .65rem; font-variant-numeric: tabular-nums; }
.sk-auth-readiness, .sk-auth-security-copy { margin-top: var(--sk-space-6); padding: var(--sk-space-4); border-radius: var(--sk-radius-md); background: var(--sk-color-canvas); display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--sk-space-3); color: var(--sk-color-ink-soft); }
.sk-auth-readiness > svg { color: var(--sk-color-success); }
.sk-auth-security-copy > svg { color: var(--sk-color-primary); }
.sk-auth-readiness p, .sk-auth-security-copy p { margin: 0; }
.sk-auth-readiness strong { display: block; color: var(--sk-color-ink); }
.sk-auth-trust { margin-top: var(--sk-space-7); padding-top: var(--sk-space-4); border-top: 1px solid var(--sk-color-border-soft); color: var(--sk-color-ink-soft); display: flex; align-items: center; gap: var(--sk-space-2); font-size: var(--sk-font-size-sm); }
.sk-auth-trust svg { color: var(--sk-color-success); }
.sk-auth-options { margin-top: var(--sk-space-6); border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-lg); overflow: hidden; }
.sk-auth-options > button { width: 100%; min-height: 5.2rem; padding: var(--sk-space-3) var(--sk-space-4); border: 0; border-bottom: 1px solid var(--sk-color-border-soft); background: var(--sk-color-surface); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sk-space-3); text-align: left; cursor: pointer; }
.sk-auth-options > button:last-child { border-bottom: 0; }
.sk-auth-options > button:hover { background: var(--sk-color-surface-hover); }
.sk-auth-options > button.is-selected { background: var(--sk-color-primary-soft); color: var(--sk-color-primary); }
.sk-auth-options > button > svg:first-child { color: var(--sk-color-primary); }
.sk-auth-options span { display: grid; }
.sk-auth-options small { color: var(--sk-color-ink-soft); }
.sk-auth-recovery-result { margin: var(--sk-space-4) 0 0; padding: var(--sk-space-3) var(--sk-space-4); border-radius: var(--sk-radius-md); background: var(--sk-color-canvas); color: var(--sk-color-ink-soft); }
.sk-entity-picker:disabled, .sk-choice-grid button:disabled, .sk-settings-rows button:disabled { border-color: var(--sk-color-disabled-border); background: var(--sk-color-disabled-bg); color: var(--sk-color-disabled-text); }
.sk-toast-region { position: fixed; z-index: var(--sk-z-toast); left: var(--sk-space-5); bottom: var(--sk-space-5); width: min(25rem, calc(100vw - 2 * var(--sk-space-5))); display: flex; flex-direction: column; align-items: stretch; gap: var(--sk-space-3); pointer-events: none; }
.sk-toast { position: relative; min-height: 5rem; padding: var(--sk-space-4); border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-lg); background: var(--sk-color-surface); box-shadow: var(--sk-shadow-popover); display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--sk-space-3); overflow: hidden; pointer-events: auto; animation: sk-toast-in var(--sk-motion-slow) var(--sk-ease-emphasized); }
.sk-toast > svg { color: var(--sk-color-info); }
.sk-toast.is-success > svg { color: var(--sk-color-success); }
.sk-toast.is-warning > svg { color: var(--sk-color-warning); }
.sk-toast.is-danger > svg { color: var(--sk-color-danger); }
.sk-toast > div { min-width: 0; overflow-wrap: anywhere; display: grid; gap: var(--sk-space-1); }
.sk-toast p { margin: 0; color: var(--sk-color-ink-soft); }
.sk-toast > button { width: max(44px, var(--sk-control-height)); height: max(44px, var(--sk-control-height)); min-width: max(44px, var(--sk-control-height)); min-height: max(44px, var(--sk-control-height)); border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; }
.sk-toast > button:hover { background: var(--sk-color-surface-hover); }
.sk-toast > div > button { width: fit-content; min-height: 2rem; padding: 0; border: 0; background: transparent; color: var(--sk-color-primary); font: inherit; font-weight: var(--sk-font-weight-strong); cursor: pointer; }
.sk-toast > i { position: absolute; inset: auto 0 0; height: .2rem; background: currentColor; opacity: .24; animation: sk-toast-life 4.5s linear forwards; transform-origin: left; }
.sk-toast.is-persistent { border-width: 2px; }
@media (max-width: 44rem) {
.sk-data-table-wrap { overflow: visible; border: 0; background: transparent; }
.sk-data-table { min-width: 0; display: block; }
.sk-client-directory { max-height: none; }
.sk-client-directory .sk-data-table { min-width: 0; }
.sk-client-directory .sk-data-table tbody td { width: auto; }
.sk-data-table thead { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; display: block; }
.sk-data-table thead tr { display: block; width: 1px; height: 1px; overflow: hidden; }
.sk-data-table thead th { position: static; display: block; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; }
.sk-data-table tbody { display: grid; gap: var(--sk-space-3); }
.sk-data-table tbody tr { padding: var(--sk-space-3); border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-lg); background: var(--sk-color-surface); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sk-space-2); }
.sk-data-table tbody td { min-width: 0; min-height: 2.75rem; padding: var(--sk-space-2); border: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(7rem, 40%)), 1fr)); align-items: center; gap: var(--sk-space-3); text-align: left !important; overflow-wrap: anywhere; }
.sk-data-table tbody td > * { min-width: 0; overflow-wrap: anywhere; }
.sk-data-table tbody td[data-label]::before { content: attr(data-label); color: var(--sk-color-ink-soft); font-size: var(--sk-type-table); font-weight: var(--sk-font-weight-strong); }
.sk-data-table .sk-data-table__check,
.sk-data-table .sk-data-table__open { width: auto; display: flex; justify-content: flex-end; }
.sk-data-table__open button { width: 2.75rem; height: 2.75rem; }
.sk-data-table tbody td:has(> .sk-table-empty) { display: block; }
.sk-data-table .sk-table-empty { min-height: 12rem; }
}
.sk-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-space-2); margin-bottom: var(--sk-space-4); }
.sk-filter-chips > button:not(.sk-button) { min-height: 2.25rem; padding: .35rem .7rem; border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-pill); background: var(--sk-color-surface); color: var(--sk-color-ink); cursor: pointer; }
.sk-filter-chips > button:not(.sk-button):hover { border-color: var(--sk-color-primary); background: var(--sk-color-primary-soft); }
.sk-location-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.sk-location-badges > span { display: inline-flex; align-items: center; min-height: 1.4rem; padding: .1rem .5rem; border-radius: var(--sk-radius-pill); background: var(--sk-color-surface-hover); color: var(--sk-color-ink-soft); font-size: var(--sk-font-size-xs); font-weight: var(--sk-font-weight-strong); }
.sk-inline-select { min-width: 12rem; margin: 0; }
.sk-inline-select > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Kanalmatrise i Kundemeldinger: hendelse i rad, kanal i kolonne. */
.sk-channel-matrix { width: 100%; border-collapse: collapse; }
.sk-channel-matrix th, .sk-channel-matrix td { padding: var(--sk-space-3) var(--sk-space-2); border-bottom: 1px solid var(--sk-color-border-soft); text-align: left; vertical-align: middle; }
.sk-channel-matrix thead th { color: var(--sk-color-ink-soft); font-size: var(--sk-type-table); font-weight: var(--sk-font-weight-strong); }
.sk-channel-matrix thead th:not(:first-child), .sk-channel-matrix tbody td { width: 5.5rem; text-align: center; }
.sk-channel-matrix tbody th { font-weight: var(--sk-font-weight-strong); }
.sk-channel-matrix__event { display: grid; gap: .15rem; }
.sk-channel-matrix__event small { color: var(--sk-color-ink-soft); }
.sk-channel-matrix input { width: 1.25rem; height: 1.25rem; accent-color: var(--sk-color-primary); cursor: pointer; }
.sk-status-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sk-space-3); min-width: 0; }
.sk-status-group-grid > section { min-width: 0; padding: var(--sk-space-3); border: 1px solid var(--sk-color-border-soft); border-radius: var(--sk-radius-md); background: var(--sk-color-surface-subtle); }
.sk-status-group-grid h3 { margin: 0 0 var(--sk-space-2); color: var(--sk-color-ink-soft); font-size: var(--sk-type-card-title); text-transform: uppercase; letter-spacing: .04em; }
.sk-status-group-grid dl { display: grid; gap: var(--sk-space-2); margin: 0; }
.sk-status-group-grid dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sk-space-2); min-width: 0; }
.sk-status-group-grid dt,
.sk-status-group-grid dd { min-width: 0; margin: 0; overflow-wrap: break-word; font-size: var(--sk-font-size-xs); }
.sk-status-group-grid dd { color: var(--sk-color-ink-soft); font-weight: var(--sk-font-weight-strong); text-align: right; white-space: nowrap; }
.sk-status-group-grid dd.is-ready,
.sk-status-group-grid dd.is-live { color: var(--sk-color-success); }
.sk-status-group-grid dd.is-pending,
.sk-status-group-grid dd.is-test { color: var(--sk-color-warning); }
.sk-status-group-grid dd.is-offline,
.sk-status-group-grid dd.is-degraded,
.sk-status-group-grid dd.is-rejected,
.sk-status-group-grid dd.is-blocked,
.sk-status-group-grid dd.is-unavailable { color: var(--sk-color-danger); }
/* Feltene serveren avviste, med veien tilbake til steget de står på. Ligger
under feilmeldingen fordi den sier AT noe er galt; denne sier hva og hvor. */
.sk-field-errors { margin-top: var(--sk-space-3); border: 1px solid var(--sk-color-danger); border-radius: var(--sk-radius-sm); padding: .75rem 1rem; background: var(--sk-color-danger-soft); }
.sk-field-errors > strong { display: block; margin-bottom: var(--sk-space-2); color: var(--sk-color-danger); }
.sk-field-errors ul { display: grid; gap: var(--sk-space-2); margin: 0; padding: 0; list-style: none; }
.sk-field-errors li { display: flex; flex-wrap: wrap; gap: var(--sk-space-2); align-items: baseline; }
.sk-field-errors button { border: 0; padding: 0; background: none; color: var(--sk-color-danger); font: inherit; font-weight: var(--sk-font-weight-strong); text-decoration: underline; cursor: pointer; }
.sk-field-errors span { color: var(--sk-color-ink-soft); font-size: var(--sk-font-size-sm); }
/* One app update notice, shared by the partner workspace and terminals. */
.sk-update-banner {
position: fixed;
right: var(--sk-space-4);
bottom: var(--sk-space-4);
z-index: 9000;
display: flex;
gap: var(--sk-space-4);
align-items: center;
max-width: min(26rem, calc(100vw - 2rem));
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-3) var(--sk-space-4);
background: var(--sk-color-surface);
box-shadow: 0 12px 32px rgb(35 33 44 / 22%);
}
.sk-update-banner > span {
display: grid;
gap: 0.1rem;
min-width: 0;
}
.sk-update-banner small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-update-banner > .sk-button { flex: none; }
.sk-update-banner.sk-update-banner--inline { position: static; width: 100%; max-width: none; flex-basis: 100%; grid-column: 1 / -1; box-shadow: none; }
:is(.sk-drawer__footer, .sk-modal__footer):has(> .sk-update-banner--inline) { flex-wrap: wrap; }
/* Fast plass før policy/fase er hentet, også når begge brikkene er borte.
Høyere spesifisitet enn deployment-phase.css sin display:contents.
Ansattskallet beholder sin eksisterende kompakte faseplass; driftsmeldingen flyter der. */
body [data-deployment-phase-slot] {
display: inline-flex;
align-items: center;
flex: none;
min-width: calc(var(--sk-space-4) * 6);
min-height: var(--sk-touch-min);
}
body [data-deployment-phase-slot]:not(.employee-phase-slot) {
display: inline-grid;
grid-template-columns: calc(var(--sk-space-4) * 8) calc(var(--sk-space-4) * 10);
gap: var(--sk-space-4);
width: calc(var(--sk-space-4) * 19);
min-width: calc(var(--sk-space-4) * 19);
height: max(var(--sk-control-height), var(--sk-touch-min));
}
[data-deployment-phase-slot] > .sk-deployment-phase--inline { grid-column: 1; grid-row: 1; }
[data-deployment-phase-slot] > .sk-service-chip--inline { grid-column: 2; grid-row: 1; white-space: nowrap; }
/* Driftsmelding og lokalt reservebanner (pwa/ServiceNotice.tsx, N-22). Flytter aldri fast plasserte elementer:
stripen står bare der det ikke finnes fast topplinje, og reserverer høyde for innhold i flyt via
--sk-service-notice-height; ellers en chip (i topplinjens plass eller flytende under den) som åpner et ark. */
.sk-service-notice { position: fixed; z-index: var(--sk-z-toast); inset: 0 0 auto; display: flex; gap: var(--sk-space-3); align-items: center; min-height: 44px; padding: var(--sk-space-1) var(--sk-space-4); padding-top: max(var(--sk-space-1), env(safe-area-inset-top)); border-bottom: 1px solid var(--sk-color-border); background: var(--sk-color-surface); font-size: var(--sk-font-size-sm); }
.sk-service-notice strong { flex: none; }
.sk-service-notice__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sk-color-ink-soft); }
.sk-service-notice > .sk-button { flex: none; }
.sk-service-notice--warning { background: var(--sk-color-warning-soft); border-bottom-color: var(--sk-color-warning); }
.sk-service-notice--info { background: var(--sk-color-info-soft); border-bottom-color: var(--sk-color-info); }
.sk-service-notice--success { background: var(--sk-color-success-soft); border-bottom-color: var(--sk-color-success); }
:root[data-service-notice="strip"] body { padding-top: var(--sk-service-notice-height, 0px); transition: padding-top var(--sk-motion-base) var(--sk-ease-standard); }
/* Klistrede elementer med top: 0 legger seg under stripen, ikke bak den (målt: kundeportalens sidemeny). */
:root[data-service-notice="strip"] .sk-customer-portal-sidebar { top: var(--sk-service-notice-height, 0px); height: calc(100vh - var(--sk-service-notice-height, 0px)); }
.sk-service-chip { position: fixed; z-index: var(--sk-z-toast); top: calc(var(--sk-topbar-height, 0px) + var(--sk-space-2) + env(safe-area-inset-top)); left: 50%; translate: -50% 0; display: inline-flex; gap: var(--sk-space-2); align-items: center; min-height: 44px; padding: 0 var(--sk-space-4); border: 1px solid var(--sk-color-border); border-radius: 999px; background: var(--sk-color-surface); box-shadow: var(--sk-shadow-popover); color: var(--sk-color-ink); font: inherit; font-size: var(--sk-font-size-sm); cursor: pointer; }
.sk-service-chip--inline { position: static; translate: none; box-shadow: none; }
.sk-service-chip__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--sk-color-warning); }
.sk-service-chip--info .sk-service-chip__dot { background: var(--sk-color-info); }
.sk-service-chip--success .sk-service-chip__dot { background: var(--sk-color-success); }
@media (prefers-reduced-motion: reduce) { :root[data-service-notice="strip"] body { transition: none; } }
/* Feature cards share row sizing and keep actions aligned across content lengths. */
.sk-loyalty-layout { grid-auto-rows: 1fr; gap: var(--sk-space-6); }
.sk-loyalty-layout > .sk-feature-card { margin: 0; grid-template-rows: auto 1fr auto auto; min-width: 0; }
.sk-loyalty-layout > .sk-feature-card > .sk-button { justify-self: start; }
.sk-segment-member-list { max-height: 24rem; overflow: auto; margin-block: var(--sk-space-4); }
@media (max-width: 720px) { .sk-segment-member-list .sk-list-row { flex-wrap: wrap; } }
/* DEV-FAST: rolleveksler i dev (auth/DevLoginSwitcher.tsx). Gjenbruker .sk-button og .sk-auth-options; fjernes før ordinær release. */
.sk-dev-role-switcher { position: fixed; z-index: var(--sk-z-copilot); left: var(--sk-space-3); bottom: calc(var(--sk-space-3) + env(safe-area-inset-bottom)); display: grid; justify-items: start; gap: var(--sk-space-2); max-width: min(22rem, calc(100vw - 2 * var(--sk-space-3))); }
.sk-dev-role-switcher > .sk-auth-options { margin-top: 0; width: 100%; max-height: min(32rem, calc(100dvh - 6rem)); overflow-y: auto; box-shadow: var(--sk-shadow-popover); background: var(--sk-color-surface); }
.sk-dev-role-switcher > .sk-auth-options > button { min-height: 3.5rem; }
/* DEV-FAST: kompakt status øverst i visningsporten, over topplinjen. */
.sk-readiness-banner.sk-dev-readiness {
position: fixed;
z-index: calc(var(--sk-z-topbar) + 1);
top: calc(env(safe-area-inset-top, 0px) + var(--sk-space-1));
left: 50%;
translate: -50% 0;
box-sizing: border-box;
max-width: min(22rem, calc(100vw - 2 * var(--sk-space-3)));
margin: 0;
padding: var(--sk-space-1) var(--sk-space-2);
font-size: var(--sk-font-size-xs);
white-space: nowrap;
pointer-events: none;
}
.sk-dev-readiness > strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Hele forklaringen beholdes i statusmeldingen for skjermlesere. */
.sk-dev-readiness > span {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.sk-dev-role-switcher__error { margin: 0; padding: var(--sk-space-3) var(--sk-space-4); color: var(--sk-color-danger); font-size: var(--sk-font-size-sm); }
/* Category color is decorative; status background, text and geometry stay unchanged. */
.sk-calendar-event.has-category-color { border-left-color: var(--sk-service-category-color, var(--sk-color-service-accent)); }
/* Personal privacy actions can have long Norwegian labels on narrow screens. */
:is(.sk-personal-coach,.sk-employee-protection,.sk-minutes-corrections), :is(.sk-personal-coach,.sk-employee-protection,.sk-minutes-corrections) > * { min-inline-size: 0; }
:is(.sk-personal-coach,.sk-employee-protection,.sk-minutes-corrections) .sk-button { max-inline-size: 100%; min-block-size: 2.75rem; white-space: normal; padding-block: var(--sk-space-2); }
.sk-personal-coach .sk-checkbox-row > input { flex-shrink: 0; }
.sk-personal-coach .sk-json-summary { max-inline-size: 100%; overflow-wrap: anywhere; }
.sk-personal-coach summary { min-block-size: 2.75rem; cursor: pointer; }
/* Keep the complaint header close control usable when its heading wraps. */
.sk-restored-detail > header > div { min-width: 0; overflow-wrap: anywhere; }
.sk-restored-detail > header > .sk-icon-button {
flex-shrink: 0;
min-width: max(44px, var(--sk-control-height));
min-height: max(44px, var(--sk-control-height));
}
/* Kalenderlenker bruker de vanlige trykkflatene, med plass til lange titler. */
.sk-activity-calendar .sk-button { max-inline-size: 100%; white-space: normal; text-align: start; }
:is(.sk-personal-coach,.sk-employee-protection,.sk-minutes-corrections) summary { min-block-size: 2.75rem; cursor: pointer; }
/* Privacy forms keep the shared 44px touch floor inside the dense staff shell. */
.sk-employee-protection, .sk-minutes-corrections { --sk-control-height: 2.75rem; }
/* Regnskapsførers forslag skal fungere ved 360px og stor tekst. */
.sk-accountant-proposals,
.sk-accountant-proposals .sk-field,
.sk-accountant-proposals .sk-field-control { min-width: 0; }
.sk-accountant-proposals { overflow-wrap: anywhere; }
.sk-accountant-proposals select,
.sk-accountant-proposals input:not([type="checkbox"]) { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.sk-accountant-proposals .sk-field-actions { flex-wrap: wrap; }
.sk-accountant-proposals .sk-form-stack { grid-template-columns: minmax(0, 1fr); }
.sk-accountant-proposals .sk-button { max-width: 100%; white-space: normal; }
/* Felles oppgaveforslag tåler små skjermer og stor tekst. */
.sk-salon-advice, .sk-salon-advice .sk-form-stack, .sk-salon-advice .sk-field { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.sk-salon-advice { overflow-wrap: anywhere; }
.sk-salon-advice fieldset { min-width: 0; margin-inline: 0; }
.sk-salon-advice .sk-button { max-width: 100%; white-space: normal; }
.sk-salon-advice input:not([type="checkbox"]):not([type="radio"]), .sk-salon-advice select, .sk-salon-advice textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }
/* Nora journeys: preserve disabled/focus/forced-colors states and wrap long Norwegian controls. */
.sk-nora-journey { min-width: 0; overflow-wrap: anywhere; }
.sk-nora-journey fieldset { min-inline-size: 0; }
.sk-nora-journey :is(select,input,textarea) { min-width: 0; max-width: 100%; }
.sk-nora-journey .sk-button { white-space: normal; max-width: 100%; transition-property: transform; }
.sk-nora-journey .sk-button--secondary:not(:disabled) { color: var(--sk-color-ink); background: var(--sk-color-surface); border-color: var(--sk-color-border); }
.sk-nora-journey .sk-button--secondary:hover:not(:disabled) { background: var(--sk-color-surface-hover); }
.sk-nora-journey [tabindex="-1"]:focus { outline: 2px solid var(--sk-color-primary); outline-offset: 3px; }
@media (forced-colors: active) { .sk-nora-journey .sk-button--secondary:not(:disabled) { color: ButtonText; background: ButtonFace; border-color: ButtonText; } }
/* Explicit owners for existing document, action and supplier layouts. */
.sk-actions { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; }
.sk-list { display:grid; gap:1rem; padding-inline-start:1.25rem; }
.sk-dpa-banner { padding:1rem; border:1px solid var(--sk-color-border-interactive); border-radius:.6rem; display:grid; gap:.5rem; }
.sk-dpa-document { white-space:pre-wrap; overflow-wrap:anywhere; padding:1rem; border:1px solid var(--sk-color-border-interactive); border-radius:.6rem; max-height:60vh; overflow:auto; }
.sk-training-embed { width:100%; min-width:0; aspect-ratio:16 / 9; border:0; }
/* Error references and public codes must wrap inside 360 px layouts. */
[role="alert"], .sk-form-error, .sk-terminal-error, .sk-terminal-notice, .sk-customer-portal-alert {
min-width: 0;
overflow-wrap: anywhere;
}
/* Plain training/survey lists share spacing without browser marker indentation. */
.sk-plain-list { list-style: none; margin: 0; padding: 0; min-inline-size: 0; }
.sk-plain-list > li + li { margin-block-start: var(--sk-space-4); }
/* Consent-gated training media stays within its owning card at every width. */
.sk-training-embed { min-inline-size: 0; max-inline-size: 100%; margin-block: var(--sk-space-3); }
.sk-metric-value {
display: block;
margin-bottom: var(--sk-space-6);
font-size: var(--sk-font-size-display);
line-height: 1;
}
.sk-metric-details {
display: grid;
margin-bottom: var(--sk-space-5);
color: var(--sk-color-ink-soft);
}
.sk-metric-details b {
color: var(--sk-color-ink);
}
.sk-chart {
min-height: 17rem;
margin-top: auto;
display: flex;
flex-direction: column;
}
.sk-chart__selection {
min-height: 2.5rem;
margin-bottom: var(--sk-space-2);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sk-space-3);
}
.sk-chart__selection span {
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
.sk-chart svg {
width: 100%;
min-height: 15rem;
flex: 1;
overflow: visible;
touch-action: none;
outline: none;
}
.sk-chart svg:focus-visible {
border-radius: var(--sk-radius-sm);
outline: 2px solid var(--sk-color-focus-ring);
outline-offset: 2px;
}
.sk-chart__grid line {
stroke: var(--sk-color-border-soft);
stroke-width: 1;
}
.sk-chart__axis-line {
stroke: var(--sk-color-border);
stroke-width: 1;
}
.sk-chart__axis text {
fill: var(--sk-color-ink-soft);
font-family: inherit;
font-size: var(--sk-font-size-xs);
}
.sk-chart polyline {
stroke: var(--sk-color-primary);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.sk-chart circle {
fill: var(--sk-color-primary);
stroke: var(--sk-color-surface);
stroke-width: 2;
vector-effect: non-scaling-stroke;
transition: r var(--sk-motion-fast) var(--sk-ease-standard);
}
.sk-chart circle.is-active {
fill: var(--sk-color-surface);
stroke: var(--sk-color-primary);
stroke-width: 3;
}
.sk-chart__crosshair {
stroke: var(--sk-color-primary);
stroke-width: 1;
stroke-dasharray: 4 4;
opacity: 0.55;
vector-effect: non-scaling-stroke;
pointer-events: none;
}
.sk-chart__legend {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-5);
margin-top: var(--sk-space-3);
}
.sk-chart__legend span {
display: inline-flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-chart__legend i {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: var(--sk-color-success);
}
.sk-chart__legend i.is-purple {
background: var(--sk-color-primary);
}
.sk-chart__legend small {
color: var(--sk-color-ink-soft);
}
.sk-upcoming-list,
.sk-activity-list {
margin: 0 -1.4rem -1.4rem;
}
.sk-appointment-row,
.sk-activity-row {
width: 100%;
min-height: 6.5rem;
border: 0;
border-top: 1px solid var(--sk-color-border-soft);
padding: var(--sk-space-4) 1.4rem;
background: var(--sk-color-surface);
display: grid;
grid-template-columns: 4rem 1fr;
align-items: center;
gap: var(--sk-space-4);
text-align: left;
cursor: pointer;
}
.sk-appointment-row:hover,
.sk-activity-row:hover {
background: var(--sk-color-surface-hover);
}
.sk-appointment-row > time {
display: grid;
justify-items: center;
line-height: 1.1;
}
.sk-appointment-row > time b {
font-size: var(--sk-font-size-xl);
}
.sk-appointment-row > time span {
color: var(--sk-color-ink-soft);
text-transform: lowercase;
}
.sk-appointment-row__content {
display: grid;
}
.sk-appointment-row__content > span {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-appointment-row__content em {
padding: 0.15rem 0.55rem;
border-radius: var(--sk-radius-pill);
background: var(--sk-color-info-soft);
color: var(--sk-color-info);
font-size: var(--sk-font-size-xs);
font-style: normal;
}
.sk-appointment-row__content small,
.sk-activity-row small {
color: var(--sk-color-ink-soft);
}
.sk-activity-row__date {
color: var(--sk-color-ink-soft);
}
.sk-activity-row > span:last-child {
display: grid;
}
.sk-table-card {
min-height: 31rem;
overflow: auto;
}
.sk-table-card .sk-card-header {
min-height: 5rem;
align-items: center;
padding-bottom: var(--sk-space-4);
}
.sk-table-card .sk-card-header h2 {
margin: 0;
}
.sk-table-card table {
width: 100%;
border-collapse: collapse;
}
.sk-table-card th,
.sk-table-card td {
height: 4rem;
padding: 0 1.8rem;
border-top: 1px solid var(--sk-color-border-soft);
text-align: left;
}
.sk-table-card th:last-child,
.sk-table-card td:last-child {
text-align: right;
}
.sk-table-card th {
color: var(--sk-color-ink-soft);
font-size: var(--sk-type-table);
}
.sk-dashboard-table-empty {
min-height: 8rem;
display: grid;
place-items: center;
text-align: center;
color: var(--sk-color-ink-soft);
}
.sk-dashboard-table-empty span {
display: grid;
gap: 0.35rem;
}
.sk-dashboard-table-empty strong {
color: var(--sk-color-ink);
}
/* Calendar is a reusable workspace pattern. Day, multi-day and week views
share the same toolbar, resource header, time gutter, columns and events. */
.sk-calendar-page {
min-height: calc(100vh - var(--sk-topbar-height));
background: var(--sk-color-surface);
}
.sk-calendar-toolbar {
position: sticky;
z-index: 12;
top: 0;
min-height: 4.5rem;
padding: 0 var(--sk-space-4);
border-bottom: 1px solid var(--sk-color-border);
background: var(--sk-color-surface);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-4);
}
/* A reusable calendar has no implicit topbar. Only the owning app shell
reserves the fixed-header offset; embedded/error views stay in normal flow. */
.sk-app-shell .sk-calendar-toolbar {
top: var(--sk-topbar-height);
}
.sk-calendar-toolbar__group {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-calendar-block-notice {
margin: var(--sk-space-3) var(--sk-space-4);
}
.sk-inline-error-banner.sk-calendar-block-notice {
flex-wrap: wrap;
}
.sk-calendar-block-notice > span {
flex: 1 1 16rem;
}
.sk-calendar-block-notice > button {
flex: 0 0 auto;
}
.sk-calendar-shift-error {
margin: var(--sk-space-3) var(--sk-space-4) 0;
}
.sk-calendar-team-button {
min-height: var(--sk-control-height);
padding: 0 var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-pill);
background: var(--sk-color-surface);
display: inline-flex;
align-items: center;
gap: var(--sk-space-2);
cursor: pointer;
font: inherit;
}
.sk-calendar-team-button__label {
display: grid;
line-height: 1.15;
text-align: left;
}
.sk-calendar-team-button__label small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-segmented {
display: flex;
align-items: center;
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-pill);
overflow: hidden;
background: var(--sk-color-surface);
}
.sk-segmented .sk-icon-button {
border-radius: 0;
width: 2.7rem;
}
.sk-calendar-date-button {
min-width: 11rem;
height: var(--sk-control-height);
padding: 0 var(--sk-space-3);
border: 0;
border-inline: 1px solid var(--sk-color-border);
background: var(--sk-color-surface);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sk-space-2);
cursor: pointer;
}
.sk-calendar-date-button {
position: relative;
overflow: hidden;
}
.sk-calendar-date-button input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.sk-toolbar-select {
min-height: var(--sk-control-height);
padding: 0 var(--sk-space-4);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-pill);
background: var(--sk-color-surface);
display: inline-flex;
align-items: center;
gap: var(--sk-space-2);
cursor: pointer;
}
.sk-add-menu {
position: relative;
}
.sk-popover {
position: absolute;
z-index: 40;
top: calc(100% + var(--sk-space-2));
right: 0;
min-width: 20rem;
padding: var(--sk-space-2);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
animation: sk-popover-in var(--sk-motion-base) var(--sk-ease-emphasized);
}
.sk-add-popover button {
width: 100%;
min-height: 4rem;
padding: var(--sk-space-3);
border: 0;
border-radius: var(--sk-radius-sm);
background: transparent;
display: grid;
grid-template-columns: 2rem 1fr;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-add-popover button:hover {
background: var(--sk-color-surface-hover);
}
.sk-add-popover strong,
.sk-add-popover small {
display: block;
}
.sk-add-popover small {
color: var(--sk-color-ink-soft);
}
.sk-view-popover {
min-width: 10rem;
}
.sk-view-popover button {
width: 100%;
min-height: 2.8rem;
padding: 0 var(--sk-space-3);
border: 0;
border-radius: var(--sk-radius-sm);
background: transparent;
text-align: left;
cursor: pointer;
}
.sk-view-popover button:hover,
.sk-view-popover button.is-selected {
background: var(--sk-color-surface-selected);
}
.sk-view-popover button {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-drawer--calendar-filters {
width: min(40rem, 100vw);
}
.sk-drawer--calendar-filters .sk-drawer__body {
padding: 0;
gap: 0;
}
.sk-drawer--calendar-filters .sk-drawer__footer > .sk-button {
min-width: 10rem;
}
.sk-drawer--calendar-filters .sk-drawer__footer > .sk-button--primary {
background: var(--sk-color-primary);
border-color: var(--sk-color-primary);
}
.sk-saved-filter-button {
min-height: var(--sk-control-height);
padding: 0 var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-pill);
background: var(--sk-color-surface);
display: inline-flex;
align-items: center;
gap: var(--sk-space-2);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-saved-filter-list {
margin: var(--sk-space-3) var(--sk-space-5) 0;
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: grid;
gap: var(--sk-space-1);
}
.sk-saved-filter-list > button {
min-height: 3.5rem;
padding: var(--sk-space-2) var(--sk-space-3);
border: 0;
border-radius: var(--sk-radius-sm);
background: transparent;
display: grid;
text-align: left;
cursor: pointer;
}
.sk-saved-filter-list > button:hover {
background: var(--sk-color-surface-hover);
}
.sk-saved-filter-list > span {
padding: var(--sk-space-2);
display: grid;
color: var(--sk-color-ink-soft);
}
.sk-calendar-filter-list {
display: grid;
}
.sk-calendar-filter-section {
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-calendar-filter-row {
position: relative;
min-height: 4.5rem;
display: flex;
align-items: stretch;
}
.sk-calendar-filter-row > button:first-child {
width: 100%;
padding: 0 var(--sk-space-5);
border: 0;
background: transparent;
display: grid;
grid-template-columns: 1.6rem minmax(0, 1fr) 1.4rem;
align-items: center;
gap: var(--sk-space-3);
color: var(--sk-color-ink);
text-align: left;
cursor: pointer;
}
.sk-calendar-filter-row > button:first-child:hover {
background: var(--sk-color-surface-hover);
}
.sk-calendar-filter-row > button:first-child > span {
display: grid;
}
.sk-calendar-filter-row > button:first-child small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-calendar-filter-edit {
position: absolute;
z-index: 1;
right: 3.3rem;
top: 50%;
transform: translateY(-50%);
padding: 0.25rem;
border: 0;
background: transparent;
color: var(--sk-color-primary);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-calendar-filter-content {
padding: 0 var(--sk-space-5) var(--sk-space-5) 4.2rem;
display: grid;
gap: var(--sk-space-3);
animation: sk-popover-in var(--sk-motion-fast) var(--sk-ease-emphasized);
}
.sk-filter-option-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-2);
}
.sk-filter-options {
position: relative;
margin-right: auto;
}
.sk-filter-options .sk-popover {
top: auto;
right: auto;
bottom: calc(100% + var(--sk-space-2));
left: 0;
min-width: 14rem;
}
.sk-filter-options .sk-popover button {
width: 100%;
min-height: 2.8rem;
padding: 0 var(--sk-space-3);
border: 0;
border-radius: var(--sk-radius-sm);
background: transparent;
text-align: left;
cursor: pointer;
}
.sk-filter-options .sk-popover button:hover {
background: var(--sk-color-surface-hover);
}
.sk-calendar-workspace {
height: calc(100vh - var(--sk-topbar-height) - 4.5rem);
overflow: auto;
background: var(--sk-color-surface);
}
.sk-calendar-resource-header {
position: sticky;
z-index: 10;
top: 0;
min-width: 52rem;
height: 5.5rem;
display: grid;
grid-template-columns: 4.5rem repeat(var(--sk-calendar-columns), minmax(12rem, 1fr));
background: var(--sk-color-surface);
border-bottom: 1px solid var(--sk-color-border);
}
.sk-calendar-time-gutter {
border-right: 1px solid var(--sk-color-border-soft);
}
.sk-resource-heading {
position: relative;
border-right: 1px solid var(--sk-color-border-soft);
display: flex;
align-items: center;
justify-content: center;
gap: var(--sk-space-2);
}
.sk-resource-heading.is-today {
background: var(--sk-color-primary-soft);
}
.sk-resource-heading__trigger {
width: 100%;
height: 100%;
padding: 0 var(--sk-space-3);
border: 0;
background: transparent;
color: inherit;
display: flex;
align-items: center;
justify-content: center;
gap: var(--sk-space-2);
font: inherit;
cursor: pointer;
}
.sk-resource-heading__trigger:hover,
.sk-resource-heading__trigger[aria-expanded="true"] {
background: var(--sk-color-surface-hover);
}
.sk-resource-heading__trigger:focus-visible {
outline: 2px solid var(--sk-color-primary);
outline-offset: -3px;
}
.sk-resource-menu {
top: calc(100% - 0.2rem);
right: auto;
left: 50%;
min-width: 18rem;
transform: translateX(-50%);
text-align: left;
}
.sk-resource-menu > button {
width: 100%;
min-height: 2.85rem;
padding: 0 var(--sk-space-3);
border: 0;
border-radius: var(--sk-radius-sm);
background: transparent;
display: grid;
grid-template-columns: 1.5rem minmax(0, 1fr) 1.25rem;
align-items: center;
gap: var(--sk-space-2);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.sk-resource-menu > button:hover,
.sk-resource-menu > button.is-selected {
background: var(--sk-color-surface-selected);
}
.sk-resource-menu__label {
margin: var(--sk-space-2) calc(-1 * var(--sk-space-2)) var(--sk-space-1);
padding: var(--sk-space-3) var(--sk-space-5) var(--sk-space-2);
border-top: 1px solid var(--sk-color-border-soft);
color: var(--sk-color-ink-soft);
display: block;
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-resource-avatar {
width: 3.25rem;
height: 3.25rem;
border: 2px solid color-mix(in srgb, var(--sk-color-primary) 30%, var(--sk-color-surface));
border-radius: 50%;
display: grid;
place-items: center;
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
.sk-calendar-shift-row {
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
display: grid;
grid-template-columns: 1fr 1fr auto;
align-items: end;
gap: var(--sk-space-3);
}
.sk-calendar-grid {
position: relative;
min-width: 52rem;
height: var(--sk-calendar-height);
padding-left: 4.5rem;
background:
repeating-linear-gradient(to bottom, transparent 0, transparent 17px, var(--sk-color-border-soft) 18px),
repeating-linear-gradient(to bottom, transparent 0, transparent 71px, var(--sk-color-border) 72px);
}
.sk-calendar-times {
position: absolute;
inset: 0 auto 0 0;
width: 4.5rem;
border-right: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
}
.sk-calendar-times time {
position: absolute;
right: 0.65rem;
transform: translateY(-0.7em);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-calendar-columns {
height: 100%;
display: grid;
grid-template-columns: repeat(var(--sk-calendar-columns), minmax(12rem, 1fr));
}
.sk-calendar-column {
position: relative;
min-width: 0;
border-right: 1px solid var(--sk-color-border-soft);
}
.sk-calendar-column.is-drag-target {
background: color-mix(in srgb, var(--sk-color-primary) 7%, transparent);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sk-color-primary) 45%, transparent);
}
.sk-calendar-drop-preview {
position: absolute;
z-index: 5;
right: 3px;
left: 3px;
min-height: 1.75rem;
padding: var(--sk-space-2) var(--sk-space-3);
border: 2px dashed var(--sk-color-primary);
border-radius: var(--sk-radius-sm);
overflow: hidden;
background: color-mix(in srgb, var(--sk-color-primary-soft) 92%, white);
color: var(--sk-color-ink);
box-shadow: 0 8px 22px rgb(35 33 44 / 18%);
display: grid;
align-content: start;
gap: .15rem;
pointer-events: none;
}
.sk-calendar-drop-preview strong {
font-size: var(--sk-font-size-sm);
}
.sk-calendar-drop-preview span,
.sk-calendar-drop-preview small {
font-size: var(--sk-font-size-xs);
}
.sk-calendar-drop-preview small {
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
.sk-calendar-column::after {
content: "";
position: absolute;
inset: calc(12 * 72px) 0 0;
pointer-events: none;
background: repeating-linear-gradient(
135deg,
rgb(22 22 22 / 2%) 0,
rgb(22 22 22 / 2%) 2px,
transparent 2px,
transparent 6px
);
}
/* Samme statusfarger som timeboka i kassen (terminal/04-calendar.css), via
--sk-appointment-*-tokenene. Klassen er `is-
` fra CalendarTimeline. */
.sk-calendar-event {
--sk-appointment-accent: var(--sk-appointment-booked);
position: absolute;
z-index: 2;
left: 2px;
right: 2px;
min-height: 1.75rem;
padding: 0.3rem 0.45rem;
border: 0;
border-left: 3px solid var(--sk-appointment-accent);
border-radius: 0.2rem;
overflow: hidden;
background: color-mix(in srgb, var(--sk-appointment-accent) 16%, var(--sk-color-surface));
color: var(--sk-color-ink);
display: grid;
align-content: start;
text-align: left;
cursor: pointer;
}
.sk-overlap-confirmation {
display: flex;
align-items: flex-start;
gap: var(--sk-space-2);
margin-top: var(--sk-space-3);
font-weight: var(--sk-font-weight-strong);
line-height: 1.4;
}
.sk-overlap-confirmation input {
flex: 0 0 auto;
margin-top: 0.2rem;
}
.sk-calendar-event:hover {
filter: brightness(0.97);
box-shadow: 0 2px 8px rgb(17 17 17 / 12%);
}
.sk-calendar-event span {
font-size: var(--sk-font-size-xs);
line-height: 1.2;
}
.sk-calendar-event strong {
font-size: var(--sk-font-size-xs);
line-height: 1.25;
}
.sk-calendar-event__open {
width: 100%;
min-height: 100%;
padding: 0;
border: 0;
background: transparent;
color: inherit;
display: grid;
align-content: start;
text-align: left;
cursor: pointer;
}
.sk-calendar-event.is-arrived,
.sk-calendar-event.is-started {
--sk-appointment-accent: var(--sk-appointment-arrived);
}
.sk-calendar-event.is-completed {
--sk-appointment-accent: var(--sk-appointment-completed);
}
.sk-calendar-event.is-no_show {
--sk-appointment-accent: var(--sk-appointment-no-show);
}
.sk-calendar-event.is-pending {
--sk-appointment-accent: var(--sk-appointment-pending);
}
.sk-calendar-event.is-cancelled {
--sk-appointment-accent: var(--sk-appointment-cancelled);
background: var(--sk-color-disabled-bg);
color: var(--sk-color-ink-soft);
text-decoration: line-through;
}
.sk-calendar-event[draggable="true"] {
cursor: grab;
}
.sk-calendar-event[draggable="true"]:active {
cursor: grabbing;
opacity: 0.76;
}
.sk-calendar-event.is-dragging {
opacity: 0.32;
}
.sk-calendar-resize {
position: absolute;
z-index: 3;
right: 0.25rem;
bottom: 1px;
left: 0.25rem;
height: 0.42rem;
padding: 0;
border: 0;
border-radius: var(--sk-radius-pill);
background: rgb(21 36 42 / 24%);
cursor: ns-resize;
opacity: 0;
transition: opacity var(--sk-motion-fast) var(--sk-ease-standard);
}
.sk-calendar-event:hover .sk-calendar-resize,
.sk-calendar-event:focus-within .sk-calendar-resize {
opacity: 1;
}
.sk-calendar-blocked-time {
position: absolute;
z-index: 1;
left: 2px;
right: 2px;
min-height: 1.75rem;
padding: 0.3rem 0.45rem;
border: 1px dashed #9a9aa1;
border-left: 3px solid #6f7077;
border-radius: 0.2rem;
overflow: hidden;
background: repeating-linear-gradient(135deg, #f0f0f2 0, #f0f0f2 6px, #e5e5e8 6px, #e5e5e8 12px);
color: #3b3b40;
display: grid;
align-content: start;
text-align: left;
cursor: pointer;
}
.sk-calendar-blocked-time.allows-online {
border-left-color: #779b83;
background: repeating-linear-gradient(135deg, #edf5ef 0, #edf5ef 6px, #e2eee5 6px, #e2eee5 12px);
}
.sk-calendar-blocked-time span,
.sk-calendar-blocked-time small {
font-size: var(--sk-font-size-xs);
line-height: 1.2;
}
.sk-calendar-blocked-time strong {
font-size: var(--sk-font-size-xs);
line-height: 1.25;
}
.sk-move-summary {
display: grid;
gap: var(--sk-space-4);
}
.sk-move-summary > strong {
font-size: var(--sk-font-size-lg);
}
.sk-move-summary > div:not(.sk-readiness-banner) {
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: grid;
grid-template-columns: 4rem 1fr;
align-items: center;
}
.sk-move-summary > div > span {
color: var(--sk-color-ink-soft);
font-weight: var(--sk-font-weight-strong);
}
.sk-move-summary p {
margin: 0;
}
.sk-current-time {
position: absolute;
z-index: 5;
left: 0;
right: 0;
height: 2px;
background: var(--sk-color-danger);
pointer-events: none;
}
.sk-current-time span {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4.5rem;
padding-right: 0.35rem;
background: var(--sk-color-danger);
color: var(--sk-color-focus-ring-inverse);
text-align: right;
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-entity-picker {
min-height: 4.5rem;
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: 2.5rem 1fr auto;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-entity-picker:hover {
background: var(--sk-color-surface-hover);
}
.sk-entity-picker strong,
.sk-entity-picker small {
display: block;
}
.sk-entity-picker small {
color: var(--sk-color-ink-soft);
}
.sk-appointment-hero {
min-height: 5rem;
display: flex;
align-items: center;
gap: var(--sk-space-4);
}
.sk-appointment-hero > div {
display: grid;
}
.sk-appointment-hero small {
color: var(--sk-color-ink-soft);
}
.sk-sticky-actions {
display: flex;
justify-content: flex-end;
gap: var(--sk-space-3);
}
.sk-month-view {
height: calc(100vh - var(--sk-topbar-height) - 4.5rem);
overflow: auto;
min-width: 0;
max-width: 100%;
background: var(--sk-color-surface);
}
.sk-month-weekdays {
min-width: 52rem;
position: sticky;
z-index: 5;
top: 0;
height: 2.75rem;
display: grid;
grid-template-columns: repeat(7, minmax(7rem, 1fr));
background: var(--sk-color-surface);
border-bottom: 1px solid var(--sk-color-border);
}
.sk-month-weekdays span {
display: grid;
place-items: center;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-month-grid {
min-width: 52rem;
min-height: calc(100% - 2.75rem);
display: grid;
grid-template-columns: repeat(7, minmax(7rem, 1fr));
grid-template-rows: repeat(6, minmax(8rem, 1fr));
}
.sk-month-day {
min-width: 0;
padding: var(--sk-space-2);
border-right: 1px solid var(--sk-color-border-soft);
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-month-day.is-outside {
background: var(--sk-color-canvas);
color: var(--sk-color-ink-faint);
}
.sk-month-day__number {
width: 2rem;
height: 2rem;
margin-bottom: var(--sk-space-1);
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.sk-month-day.is-today .sk-month-day__number {
background: var(--sk-color-primary);
color: white;
font-weight: var(--sk-font-weight-strong);
}
.sk-month-day > div {
display: grid;
gap: 2px;
}
.sk-month-day > div > button {
width: 100%;
min-height: 1.65rem;
padding: 0 0.35rem;
border: 0;
border-left: 3px solid var(--sk-appointment-booked);
border-radius: 0.2rem;
background: color-mix(in srgb, var(--sk-appointment-booked) 14%, var(--sk-color-surface));
display: flex;
align-items: center;
gap: 0.35rem;
overflow: hidden;
text-align: left;
cursor: pointer;
}
.sk-month-day > div > button time {
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-month-day > div > button span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--sk-font-size-xs);
}
.sk-month-more {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-processing-window form { display: grid; gap: .65rem; min-width: 0; }
.sk-processing-window form :is(input,select,textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; font: inherit; color: var(--sk-color-ink); background: var(--sk-color-surface); border: 1px solid var(--sk-color-border-interactive); border-radius: .5rem; padding: .7rem; }
.sk-processing-window form :is(input,select,textarea):focus-visible { outline: 2px solid var(--sk-color-primary); outline-offset: 2px; }
/* G-02: merker på timeflisen. Egne knapper utenfor åpne-knappen; minst 24px treffflate, forklaring som fast bunnark (virker fra 360px). */
.sk-calendar-marks { position: absolute; top: 2px; right: 2px; display: inline-flex; gap: 2px; z-index: 2; }
.sk-calendar-mark { min-width: 24px; min-height: 24px; padding: 0 4px; border: 1px solid currentColor; border-radius: 12px; font: inherit; font-size: var(--sk-type-calendar-marker); font-weight: var(--sk-font-weight-strong); line-height: 1; background: var(--sk-surface, #fff); color: var(--sk-text, #1a1a1a); cursor: pointer; }
.sk-calendar-mark.is-minor { background: #fff4d6; color: #5b3a00; }
.sk-calendar-mark:focus-visible { outline: 2px solid var(--sk-focus, #82667f); outline-offset: 1px; }
.sk-calendar-mark__note { position: fixed; left: 8px; right: 8px; bottom: 8px; max-width: 420px; margin-inline: auto; z-index: 80; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--sk-border, #bbb); background: var(--sk-surface, #fff); color: var(--sk-text, #1a1a1a); box-shadow: 0 4px 16px rgba(0,0,0,.2); font-size: var(--sk-type-calendar-marker-note); line-height: 1.4; }
.sk-calendar-mark__close { margin-left: 8px; min-height: 32px; min-width: 44px; }
.sk-filter-options .sk-popover button:hover {
background: var(--sk-color-surface-hover);
}
.sk-calendar-workspace {
height: calc(100vh - var(--sk-topbar-height) - 4.5rem);
overflow: auto;
background: var(--sk-color-surface);
}
.sk-calendar-resource-header {
position: sticky;
z-index: 10;
top: 0;
min-width: 52rem;
height: 5.5rem;
display: grid;
grid-template-columns: 4.5rem repeat(var(--sk-calendar-columns), minmax(12rem, 1fr));
background: var(--sk-color-surface);
border-bottom: 1px solid var(--sk-color-border);
}
.sk-calendar-time-gutter {
border-right: 1px solid var(--sk-color-border-soft);
}
.sk-resource-heading {
position: relative;
border-right: 1px solid var(--sk-color-border-soft);
display: flex;
align-items: center;
justify-content: center;
gap: var(--sk-space-2);
}
.sk-resource-heading.is-today {
background: var(--sk-color-primary-soft);
}
.sk-resource-heading__trigger {
width: 100%;
height: 100%;
padding: 0 var(--sk-space-3);
border: 0;
background: transparent;
color: inherit;
display: flex;
align-items: center;
justify-content: center;
gap: var(--sk-space-2);
font: inherit;
cursor: pointer;
}
.sk-resource-heading__trigger:hover,
.sk-resource-heading__trigger[aria-expanded="true"] {
background: var(--sk-color-surface-hover);
}
.sk-resource-heading__trigger:focus-visible {
outline: 2px solid var(--sk-color-primary);
outline-offset: -3px;
}
.sk-resource-menu {
top: calc(100% - 0.2rem);
right: auto;
left: 50%;
min-width: 18rem;
transform: translateX(-50%);
text-align: left;
}
.sk-resource-menu > button {
width: 100%;
min-height: 2.85rem;
padding: 0 var(--sk-space-3);
border: 0;
border-radius: var(--sk-radius-sm);
background: transparent;
display: grid;
grid-template-columns: 1.5rem minmax(0, 1fr) 1.25rem;
align-items: center;
gap: var(--sk-space-2);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.sk-resource-menu > button:hover,
.sk-resource-menu > button.is-selected {
background: var(--sk-color-surface-selected);
}
.sk-resource-menu__label {
margin: var(--sk-space-2) calc(-1 * var(--sk-space-2)) var(--sk-space-1);
padding: var(--sk-space-3) var(--sk-space-5) var(--sk-space-2);
border-top: 1px solid var(--sk-color-border-soft);
color: var(--sk-color-ink-soft);
display: block;
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-resource-avatar {
width: 3.25rem;
height: 3.25rem;
border: 2px solid color-mix(in srgb, var(--sk-color-primary) 30%, var(--sk-color-surface));
border-radius: 50%;
display: grid;
place-items: center;
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
.sk-calendar-shift-row {
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
display: grid;
grid-template-columns: 1fr 1fr auto;
align-items: end;
gap: var(--sk-space-3);
}
.sk-calendar-grid {
position: relative;
min-width: 52rem;
height: var(--sk-calendar-height);
padding-left: 4.5rem;
background:
repeating-linear-gradient(to bottom, transparent 0, transparent 17px, var(--sk-color-border-soft) 18px),
repeating-linear-gradient(to bottom, transparent 0, transparent 71px, var(--sk-color-border) 72px);
}
.sk-calendar-times {
position: absolute;
inset: 0 auto 0 0;
width: 4.5rem;
border-right: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
}
.sk-calendar-times time {
position: absolute;
right: 0.65rem;
transform: translateY(-0.7em);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-calendar-columns {
height: 100%;
display: grid;
grid-template-columns: repeat(var(--sk-calendar-columns), minmax(12rem, 1fr));
}
.sk-calendar-column {
position: relative;
min-width: 0;
border-right: 1px solid var(--sk-color-border-soft);
}
.sk-calendar-column.is-drag-target {
background: color-mix(in srgb, var(--sk-color-primary) 7%, transparent);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sk-color-primary) 45%, transparent);
}
.sk-calendar-drop-preview {
position: absolute;
z-index: 5;
right: 3px;
left: 3px;
min-height: 1.75rem;
padding: var(--sk-space-2) var(--sk-space-3);
border: 2px dashed var(--sk-color-primary);
border-radius: var(--sk-radius-sm);
overflow: hidden;
background: color-mix(in srgb, var(--sk-color-primary-soft) 92%, white);
color: var(--sk-color-ink);
box-shadow: 0 8px 22px rgb(35 33 44 / 18%);
display: grid;
align-content: start;
gap: .15rem;
pointer-events: none;
}
.sk-calendar-drop-preview strong {
font-size: var(--sk-font-size-sm);
}
.sk-calendar-drop-preview span,
.sk-calendar-drop-preview small {
font-size: var(--sk-font-size-xs);
}
.sk-calendar-drop-preview small {
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
.sk-calendar-column::after {
content: "";
position: absolute;
inset: calc(12 * 72px) 0 0;
pointer-events: none;
background: repeating-linear-gradient(
135deg,
rgb(22 22 22 / 2%) 0,
rgb(22 22 22 / 2%) 2px,
transparent 2px,
transparent 6px
);
}
/* Samme statusfarger som timeboka i kassen (terminal/04-calendar.css), via
--sk-appointment-*-tokenene. Klassen er `is-` fra CalendarTimeline. */
.sk-calendar-event {
--sk-appointment-accent: var(--sk-appointment-booked);
position: absolute;
z-index: 2;
left: 2px;
right: 2px;
min-height: 1.75rem;
padding: 0.3rem 0.45rem;
border: 0;
border-left: 3px solid var(--sk-appointment-accent);
border-radius: 0.2rem;
overflow: hidden;
background: color-mix(in srgb, var(--sk-appointment-accent) 16%, var(--sk-color-surface));
color: var(--sk-color-ink);
display: grid;
align-content: start;
text-align: left;
cursor: pointer;
}
.sk-overlap-confirmation {
display: flex;
align-items: flex-start;
gap: var(--sk-space-2);
margin-top: var(--sk-space-3);
font-weight: var(--sk-font-weight-strong);
line-height: 1.4;
}
.sk-overlap-confirmation input {
flex: 0 0 auto;
margin-top: 0.2rem;
}
.sk-calendar-event:hover {
filter: brightness(0.97);
box-shadow: 0 2px 8px rgb(17 17 17 / 12%);
}
.sk-calendar-event span {
font-size: var(--sk-font-size-xs);
line-height: 1.2;
}
.sk-calendar-event strong {
font-size: var(--sk-font-size-xs);
line-height: 1.25;
}
.sk-calendar-event__open {
width: 100%;
min-height: 100%;
padding: 0;
border: 0;
background: transparent;
color: inherit;
display: grid;
align-content: start;
text-align: left;
cursor: pointer;
}
.sk-calendar-event.is-arrived,
.sk-calendar-event.is-started {
--sk-appointment-accent: var(--sk-appointment-arrived);
}
.sk-calendar-event.is-completed {
--sk-appointment-accent: var(--sk-appointment-completed);
}
.sk-calendar-event.is-no_show {
--sk-appointment-accent: var(--sk-appointment-no-show);
}
.sk-calendar-event.is-pending {
--sk-appointment-accent: var(--sk-appointment-pending);
}
.sk-calendar-event.is-cancelled {
--sk-appointment-accent: var(--sk-appointment-cancelled);
background: var(--sk-color-disabled-bg);
color: var(--sk-color-ink-soft);
text-decoration: line-through;
}
.sk-calendar-event[draggable="true"] {
cursor: grab;
}
.sk-calendar-event[draggable="true"]:active {
cursor: grabbing;
opacity: 0.76;
}
.sk-calendar-event.is-dragging {
opacity: 0.32;
}
.sk-calendar-resize {
position: absolute;
z-index: 3;
right: 0.25rem;
bottom: 1px;
left: 0.25rem;
height: 0.42rem;
padding: 0;
border: 0;
border-radius: var(--sk-radius-pill);
background: rgb(21 36 42 / 24%);
cursor: ns-resize;
opacity: 0;
transition: opacity var(--sk-motion-fast) var(--sk-ease-standard);
}
.sk-calendar-event:hover .sk-calendar-resize,
.sk-calendar-event:focus-within .sk-calendar-resize {
opacity: 1;
}
.sk-calendar-blocked-time {
position: absolute;
z-index: 1;
left: 2px;
right: 2px;
min-height: 1.75rem;
padding: 0.3rem 0.45rem;
border: 1px dashed #9a9aa1;
border-left: 3px solid #6f7077;
border-radius: 0.2rem;
overflow: hidden;
background: repeating-linear-gradient(135deg, #f0f0f2 0, #f0f0f2 6px, #e5e5e8 6px, #e5e5e8 12px);
color: #3b3b40;
display: grid;
align-content: start;
text-align: left;
cursor: pointer;
}
.sk-calendar-blocked-time.allows-online {
border-left-color: #779b83;
background: repeating-linear-gradient(135deg, #edf5ef 0, #edf5ef 6px, #e2eee5 6px, #e2eee5 12px);
}
.sk-calendar-blocked-time span,
.sk-calendar-blocked-time small {
font-size: var(--sk-font-size-xs);
line-height: 1.2;
}
.sk-calendar-blocked-time strong {
font-size: var(--sk-font-size-xs);
line-height: 1.25;
}
.sk-move-summary {
display: grid;
gap: var(--sk-space-4);
}
.sk-move-summary > strong {
font-size: var(--sk-font-size-lg);
}
.sk-move-summary > div:not(.sk-readiness-banner) {
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: grid;
grid-template-columns: 4rem 1fr;
align-items: center;
}
.sk-move-summary > div > span {
color: var(--sk-color-ink-soft);
font-weight: var(--sk-font-weight-strong);
}
.sk-move-summary p {
margin: 0;
}
.sk-current-time {
position: absolute;
z-index: 5;
left: 0;
right: 0;
height: 2px;
background: var(--sk-color-danger);
pointer-events: none;
}
.sk-current-time span {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4.5rem;
padding-right: 0.35rem;
background: var(--sk-color-danger);
color: var(--sk-color-focus-ring-inverse);
text-align: right;
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-entity-picker {
min-height: 4.5rem;
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: 2.5rem 1fr auto;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-entity-picker:hover {
background: var(--sk-color-surface-hover);
}
.sk-entity-picker strong,
.sk-entity-picker small {
display: block;
}
.sk-entity-picker small {
color: var(--sk-color-ink-soft);
}
.sk-appointment-hero {
min-height: 5rem;
display: flex;
align-items: center;
gap: var(--sk-space-4);
}
.sk-appointment-hero > div {
display: grid;
}
.sk-appointment-hero small {
color: var(--sk-color-ink-soft);
}
.sk-sticky-actions {
display: flex;
justify-content: flex-end;
gap: var(--sk-space-3);
}
.sk-month-view {
height: calc(100vh - var(--sk-topbar-height) - 4.5rem);
overflow: auto;
min-width: 0;
max-width: 100%;
background: var(--sk-color-surface);
}
.sk-month-weekdays {
min-width: 52rem;
position: sticky;
z-index: 5;
top: 0;
height: 2.75rem;
display: grid;
grid-template-columns: repeat(7, minmax(7rem, 1fr));
background: var(--sk-color-surface);
border-bottom: 1px solid var(--sk-color-border);
}
.sk-month-weekdays span {
display: grid;
place-items: center;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-month-grid {
min-width: 52rem;
min-height: calc(100% - 2.75rem);
display: grid;
grid-template-columns: repeat(7, minmax(7rem, 1fr));
grid-template-rows: repeat(6, minmax(8rem, 1fr));
}
.sk-month-day {
min-width: 0;
padding: var(--sk-space-2);
border-right: 1px solid var(--sk-color-border-soft);
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-month-day.is-outside {
background: var(--sk-color-canvas);
color: var(--sk-color-ink-faint);
}
.sk-month-day__number {
width: 2rem;
height: 2rem;
margin-bottom: var(--sk-space-1);
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.sk-month-day.is-today .sk-month-day__number {
background: var(--sk-color-primary);
color: white;
font-weight: var(--sk-font-weight-strong);
}
.sk-month-day > div {
display: grid;
gap: 2px;
}
.sk-month-day > div > button {
width: 100%;
min-height: 1.65rem;
padding: 0 0.35rem;
border: 0;
border-left: 3px solid var(--sk-appointment-booked);
border-radius: 0.2rem;
background: color-mix(in srgb, var(--sk-appointment-booked) 14%, var(--sk-color-surface));
display: flex;
align-items: center;
gap: 0.35rem;
overflow: hidden;
text-align: left;
cursor: pointer;
}
.sk-month-day > div > button time {
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-month-day > div > button span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--sk-font-size-xs);
}
.sk-month-more {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-processing-window form { display: grid; gap: .65rem; min-width: 0; }
.sk-processing-window form :is(input,select,textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; font: inherit; color: var(--sk-color-ink); background: var(--sk-color-surface); border: 1px solid var(--sk-color-border-interactive); border-radius: .5rem; padding: .7rem; }
.sk-processing-window form :is(input,select,textarea):focus-visible { outline: 2px solid var(--sk-color-primary); outline-offset: 2px; }
/* G-02: merker på timeflisen. Egne knapper utenfor åpne-knappen; minst 24px treffflate, forklaring som fast bunnark (virker fra 360px). */
.sk-calendar-marks { position: absolute; top: 2px; right: 2px; display: inline-flex; gap: 2px; z-index: 2; }
.sk-calendar-mark { min-width: 24px; min-height: 24px; padding: 0 4px; border: 1px solid currentColor; border-radius: 12px; font: inherit; font-size: var(--sk-type-deployment-phase-compact); font-weight: var(--sk-font-weight-strong); line-height: 1; background: var(--sk-surface, #fff); color: var(--sk-text, #1a1a1a); cursor: pointer; }
.sk-calendar-mark.is-minor { background: #fff4d6; color: #5b3a00; }
.sk-calendar-mark:focus-visible { outline: 2px solid var(--sk-focus, #82667f); outline-offset: 1px; }
.sk-calendar-mark__note { position: fixed; left: 8px; right: 8px; bottom: 8px; max-width: 420px; margin-inline: auto; z-index: 80; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--sk-border, #bbb); background: var(--sk-surface, #fff); color: var(--sk-text, #1a1a1a); box-shadow: 0 4px 16px rgba(0,0,0,.2); font-size: var(--sk-type-employee-profile-label); line-height: 1.4; }
.sk-calendar-mark__close { margin-left: 8px; min-height: 32px; min-width: 44px; }
/* Samme statusfarger som timeboka i kassen (terminal/04-calendar.css), via
--sk-appointment-*-tokenene. Klassen er `is-` fra CalendarTimeline. */
.sk-calendar-event {
--sk-appointment-accent: var(--sk-appointment-booked);
position: absolute;
z-index: 2;
left: 2px;
right: 2px;
min-height: 1.75rem;
padding: 0.3rem 0.45rem;
border: 0;
border-left: 3px solid var(--sk-appointment-accent);
border-radius: 0.2rem;
overflow: hidden;
background: color-mix(in srgb, var(--sk-appointment-accent) 16%, var(--sk-color-surface));
color: var(--sk-color-ink);
display: grid;
align-content: start;
text-align: left;
cursor: pointer;
}
.sk-overlap-confirmation {
display: flex;
align-items: flex-start;
gap: var(--sk-space-2);
margin-top: var(--sk-space-3);
font-weight: var(--sk-font-weight-strong);
line-height: 1.4;
}
.sk-overlap-confirmation input {
flex: 0 0 auto;
margin-top: 0.2rem;
}
.sk-calendar-event:hover {
filter: brightness(0.97);
box-shadow: 0 2px 8px rgb(17 17 17 / 12%);
}
.sk-calendar-event span {
font-size: var(--sk-font-size-xs);
line-height: 1.2;
}
.sk-calendar-event strong {
font-size: var(--sk-font-size-xs);
line-height: 1.25;
}
.sk-calendar-event__open {
width: 100%;
min-height: 100%;
padding: 0;
border: 0;
background: transparent;
color: inherit;
display: grid;
align-content: start;
text-align: left;
cursor: pointer;
}
.sk-calendar-event.is-arrived,
.sk-calendar-event.is-started {
--sk-appointment-accent: var(--sk-appointment-arrived);
}
.sk-calendar-event.is-completed {
--sk-appointment-accent: var(--sk-appointment-completed);
}
.sk-calendar-event.is-no_show {
--sk-appointment-accent: var(--sk-appointment-no-show);
}
.sk-calendar-event.is-pending {
--sk-appointment-accent: var(--sk-appointment-pending);
}
.sk-calendar-event.is-cancelled {
--sk-appointment-accent: var(--sk-appointment-cancelled);
background: var(--sk-color-disabled-bg);
color: var(--sk-color-ink-soft);
text-decoration: line-through;
}
.sk-calendar-event[draggable="true"] {
cursor: grab;
}
.sk-calendar-event[draggable="true"]:active {
cursor: grabbing;
opacity: 0.76;
}
.sk-calendar-event.is-dragging {
opacity: 0.32;
}
.sk-calendar-resize {
position: absolute;
z-index: 3;
right: 0.25rem;
bottom: 1px;
left: 0.25rem;
height: 0.42rem;
padding: 0;
border: 0;
border-radius: var(--sk-radius-pill);
background: rgb(21 36 42 / 24%);
cursor: ns-resize;
opacity: 0;
transition: opacity var(--sk-motion-fast) var(--sk-ease-standard);
}
.sk-calendar-event:hover .sk-calendar-resize,
.sk-calendar-event:focus-within .sk-calendar-resize {
opacity: 1;
}
.sk-calendar-blocked-time {
position: absolute;
z-index: 1;
left: 2px;
right: 2px;
min-height: 1.75rem;
padding: 0.3rem 0.45rem;
border: 1px dashed #9a9aa1;
border-left: 3px solid #6f7077;
border-radius: 0.2rem;
overflow: hidden;
background: repeating-linear-gradient(135deg, #f0f0f2 0, #f0f0f2 6px, #e5e5e8 6px, #e5e5e8 12px);
color: #3b3b40;
display: grid;
align-content: start;
text-align: left;
cursor: pointer;
}
.sk-calendar-blocked-time.allows-online {
border-left-color: #779b83;
background: repeating-linear-gradient(135deg, #edf5ef 0, #edf5ef 6px, #e2eee5 6px, #e2eee5 12px);
}
.sk-calendar-blocked-time span,
.sk-calendar-blocked-time small {
font-size: var(--sk-font-size-xs);
line-height: 1.2;
}
.sk-calendar-blocked-time strong {
font-size: var(--sk-font-size-xs);
line-height: 1.25;
}
.sk-move-summary {
display: grid;
gap: var(--sk-space-4);
}
.sk-move-summary > strong {
font-size: var(--sk-font-size-lg);
}
.sk-move-summary > div:not(.sk-readiness-banner) {
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: grid;
grid-template-columns: 4rem 1fr;
align-items: center;
}
.sk-move-summary > div > span {
color: var(--sk-color-ink-soft);
font-weight: var(--sk-font-weight-strong);
}
.sk-move-summary p {
margin: 0;
}
.sk-current-time {
position: absolute;
z-index: 5;
left: 0;
right: 0;
height: 2px;
background: var(--sk-color-danger);
pointer-events: none;
}
.sk-current-time span {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4.5rem;
padding-right: 0.35rem;
background: var(--sk-color-danger);
color: var(--sk-color-focus-ring-inverse);
text-align: right;
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-entity-picker {
min-height: 4.5rem;
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: 2.5rem 1fr auto;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-entity-picker:hover {
background: var(--sk-color-surface-hover);
}
.sk-entity-picker strong,
.sk-entity-picker small {
display: block;
}
.sk-entity-picker small {
color: var(--sk-color-ink-soft);
}
.sk-appointment-hero {
min-height: 5rem;
display: flex;
align-items: center;
gap: var(--sk-space-4);
}
.sk-appointment-hero > div {
display: grid;
}
.sk-appointment-hero small {
color: var(--sk-color-ink-soft);
}
.sk-sticky-actions {
display: flex;
justify-content: flex-end;
gap: var(--sk-space-3);
}
.sk-month-view {
height: calc(100vh - var(--sk-topbar-height) - 4.5rem);
overflow: auto;
min-width: 0;
max-width: 100%;
background: var(--sk-color-surface);
}
.sk-month-weekdays {
min-width: 52rem;
position: sticky;
z-index: 5;
top: 0;
height: 2.75rem;
display: grid;
grid-template-columns: repeat(7, minmax(7rem, 1fr));
background: var(--sk-color-surface);
border-bottom: 1px solid var(--sk-color-border);
}
.sk-month-weekdays span {
display: grid;
place-items: center;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-month-grid {
min-width: 52rem;
min-height: calc(100% - 2.75rem);
display: grid;
grid-template-columns: repeat(7, minmax(7rem, 1fr));
grid-template-rows: repeat(6, minmax(8rem, 1fr));
}
.sk-month-day {
min-width: 0;
padding: var(--sk-space-2);
border-right: 1px solid var(--sk-color-border-soft);
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-month-day.is-outside {
background: var(--sk-color-canvas);
color: var(--sk-color-ink-faint);
}
.sk-month-day__number {
width: 2rem;
height: 2rem;
margin-bottom: var(--sk-space-1);
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.sk-month-day.is-today .sk-month-day__number {
background: var(--sk-color-primary);
color: white;
font-weight: var(--sk-font-weight-strong);
}
.sk-month-day > div {
display: grid;
gap: 2px;
}
.sk-month-day > div > button {
width: 100%;
min-height: 1.65rem;
padding: 0 0.35rem;
border: 0;
border-left: 3px solid var(--sk-appointment-booked);
border-radius: 0.2rem;
background: color-mix(in srgb, var(--sk-appointment-booked) 14%, var(--sk-color-surface));
display: flex;
align-items: center;
gap: 0.35rem;
overflow: hidden;
text-align: left;
cursor: pointer;
}
.sk-month-day > div > button time {
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-month-day > div > button span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--sk-font-size-xs);
}
.sk-month-more {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-processing-window form { display: grid; gap: .65rem; min-width: 0; }
.sk-processing-window form :is(input,select,textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; font: inherit; color: var(--sk-color-ink); background: var(--sk-color-surface); border: 1px solid var(--sk-color-border-interactive); border-radius: .5rem; padding: .7rem; }
.sk-processing-window form :is(input,select,textarea):focus-visible { outline: 2px solid var(--sk-color-primary); outline-offset: 2px; }
/* G-02: merker på timeflisen. Egne knapper utenfor åpne-knappen; minst 24px treffflate, forklaring som fast bunnark (virker fra 360px). */
.sk-calendar-marks { position: absolute; top: 2px; right: 2px; display: inline-flex; gap: 2px; z-index: 2; }
.sk-calendar-mark { min-width: 24px; min-height: 24px; padding: 0 4px; border: 1px solid currentColor; border-radius: 12px; font: inherit; font-size: var(--sk-font-size-xs); font-weight: var(--sk-font-weight-strong); line-height: 1; background: var(--sk-surface, #fff); color: var(--sk-text, #1a1a1a); cursor: pointer; }
.sk-calendar-mark.is-minor { background: #fff4d6; color: #5b3a00; }
.sk-calendar-mark:focus-visible { outline: 2px solid var(--sk-focus, #82667f); outline-offset: 1px; }
.sk-calendar-mark__note { position: fixed; left: 8px; right: 8px; bottom: 8px; max-width: 420px; margin-inline: auto; z-index: 80; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--sk-border, #bbb); background: var(--sk-surface, #fff); color: var(--sk-text, #1a1a1a); box-shadow: 0 4px 16px rgba(0,0,0,.2); font-size: var(--sk-font-size-sm); line-height: 1.4; }
.sk-calendar-mark__close { margin-left: 8px; min-height: 32px; min-width: 44px; }
/*
* Markering av et tidsrom for en ny time (CalendarSlotMarkers.tsx) og den
* nøkterne sluttids-linjen i «Rediger avtalen» (AppointmentEndSummary.tsx).
*
* Kolonnen får ingen `touch-action: none`: kalenderen skal fortsatt rulle med
* én finger på iPad. Markeringen starter etter et kort hold, og rullingen
* stoppes da av en ikke-passiv touchmove-lytter (useCalendarSlotSelection.ts).
* Mens en gest pågår i en kolonne (klassen settes ved trykk og fjernes ved
* slipp/avbryt) skal langt trykk ikke markere tekst eller åpne Safaris
* lupe/meny. Ellers kan navn og telefon på timekortene markeres og kopieres.
*/
.sk-calendar-column.is-slot-gesture {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.sk-calendar-slot-selection {
position: absolute;
z-index: 4;
right: 3px;
left: 3px;
min-height: 1.75rem;
padding: var(--sk-space-1) var(--sk-space-2);
border: 2px solid var(--sk-color-primary);
border-radius: var(--sk-radius-sm);
overflow: hidden;
background: color-mix(in srgb, var(--sk-color-primary) 14%, var(--sk-color-surface));
color: var(--sk-color-ink);
display: grid;
align-content: start;
gap: 0.1rem;
pointer-events: none;
}
.sk-calendar-slot-selection strong {
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-calendar-slot-selection span,
.sk-calendar-slot-selection small {
font-size: var(--sk-font-size-xs);
}
.sk-calendar-slot-selection small {
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
/* Mens skjemaet er åpent: et holdt-av, ennå ikke lagret tidsrom. Stiplet kant
og skravering skiller det fra en lagret time. */
.sk-calendar-slot-selection.is-pending {
z-index: 3;
border-style: dashed;
background:
repeating-linear-gradient(
135deg,
color-mix(in srgb, var(--sk-color-primary) 10%, transparent) 0,
color-mix(in srgb, var(--sk-color-primary) 10%, transparent) 6px,
transparent 6px,
transparent 12px
),
color-mix(in srgb, var(--sk-color-primary) 8%, var(--sk-color-surface));
}
@media (prefers-reduced-motion: no-preference) {
.sk-calendar-slot-selection.is-pending {
transition: height 160ms ease-out;
}
}
.sk-appointment-end {
display: grid;
gap: var(--sk-space-2);
}
.sk-appointment-end__summary {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--sk-space-1) var(--sk-space-2);
}
.sk-appointment-end__summary p {
margin: 0;
color: var(--sk-color-ink);
font-size: var(--sk-font-size-sm);
}
.sk-appointment-end__summary small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-appointment-end__toggle {
min-height: var(--sk-touch-min);
padding: 0 var(--sk-space-2);
border: 0;
background: transparent;
color: var(--sk-color-primary);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
text-decoration: underline;
text-underline-offset: 0.15em;
cursor: pointer;
}
.sk-appointment-end__toggle:focus-visible {
border-radius: var(--sk-radius-sm);
outline: 2px solid var(--sk-color-focus-ring);
outline-offset: 2px;
}
/* Overlapp: to avtaler hos samme frisør ligger side om side, med en diskret markering. */
.sk-calendar-event.is-overlapping {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sk-appointment-accent) 55%, transparent);
background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--sk-appointment-accent) 9%, transparent) 7px 8px);
}
.sk-calendar-event[data-lanes] { padding-inline: 0.3rem; }
.sk-calendar-event[data-lanes="3"] small,
.sk-calendar-event[data-lanes="4"] small { display: none; }
.sk-overlap-warning {
display: grid;
gap: var(--sk-space-2);
margin-bottom: var(--sk-space-3);
padding: var(--sk-space-3) var(--sk-space-4);
border-radius: var(--sk-radius-sm);
border-left: 4px solid var(--sk-color-warning);
background: var(--sk-color-warning-soft);
color: var(--sk-color-ink);
line-height: 1.45;
}
.sk-overlap-warning p { margin: 0; font-size: var(--sk-font-size-sm); }
.sk-overlap-warning__list { margin: 0; padding-left: 1.1rem; font-size: var(--sk-font-size-md); }
.sk-overlap-warning__actions { display: flex; flex-wrap: wrap; gap: var(--sk-space-2); }
.sk-overlap-warning__actions .sk-button { min-height: 2.75rem; }
/* Sales workspace: Min Rutine owns order context; Oppgjør owns payment truth. */
.sk-toolbar-date,
.sk-sales-datebar input {
min-height: var(--sk-control-height);
padding: 0 var(--sk-space-3);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-pill);
background: var(--sk-color-surface);
font: inherit;
}
.sk-sales-datebar {
min-height: 4.6rem;
margin-bottom: var(--sk-space-5);
padding: var(--sk-space-2);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-canvas);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sk-space-2);
}
.sk-sales-summary-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: var(--sk-space-5);
align-items: start;
}
.sk-summary-table-card {
overflow: auto;
}
.sk-summary-table-card h2 {
margin: 0;
padding: var(--sk-space-5);
font-size: var(--sk-type-card-title);
}
.sk-summary-table-card table {
width: 100%;
border-collapse: collapse;
}
.sk-summary-table-card th,
.sk-summary-table-card td {
height: 3.7rem;
padding: 0 var(--sk-space-4);
border-top: 1px solid var(--sk-color-border-soft);
text-align: left;
}
.sk-summary-table-card th:not(:first-child),
.sk-summary-table-card td:not(:first-child) {
text-align: right;
}
.sk-summary-table-card th {
color: var(--sk-color-ink-soft);
font-size: var(--sk-type-table);
}
.sk-summary-table-card tr.is-total {
font-weight: var(--sk-font-weight-strong);
}
.sk-summary-table-card .sk-summary-table-empty td {
height: auto;
padding: var(--sk-space-4);
color: var(--sk-color-ink-soft);
text-align: left;
}
.sk-summary-table-card .sk-readiness-banner {
margin: var(--sk-space-4);
}
.sk-pill-tabs {
max-width: 100%;
min-width: 0;
display: flex;
gap: var(--sk-space-2);
margin-bottom: var(--sk-space-5);
overflow-x: auto;
overscroll-behavior-inline: contain;
}
.sk-pill-tabs button {
flex: 0 0 auto;
min-height: 2.6rem;
padding: 0 var(--sk-space-4);
border: 0;
border-radius: var(--sk-radius-pill);
background: transparent;
cursor: pointer;
white-space: nowrap;
}
.sk-pill-tabs button.is-active {
background: var(--sk-color-ink);
color: white;
font-weight: var(--sk-font-weight-strong);
}
.sk-drawer--sale {
width: min(70rem, calc(100vw - 3rem));
}
.sk-drawer--sale .sk-drawer__body {
padding: 0;
overflow: hidden;
/* `.sk-drawer__body` er et rutenett med `grid-auto-rows: max-content` og
`align-content: start`. Arbeidsflaten ble dermed nøyaktig like høy som sitt
eget innhold, og `height: 100%` målte seg mot seg selv. Ingen av panelene
fikk en reell høyde å rulle innenfor, og `overflow: hidden` her klippet
resten bort — det var derfor en full handlekurv ikke lot seg scrolle.
Kolonneflex gir arbeidsflaten den høyden skuffen faktisk har. */
display: flex;
flex-direction: column;
}
.sk-drawer--sale .sk-drawer__footer {
padding-block: var(--sk-space-3);
}
.sk-sale-controls {
flex: 1 1 auto;
display: flex;
min-width: 0;
min-height: 0;
border: 0;
padding: 0;
margin: 0;
}
.sk-sale-workspace {
min-height: 0;
/* Fyller resten av skuffekroppen i stedet for å vokse med innholdet. Raden
låses til den samme høyden, ellers vokser den med det høyeste panelet og
`overflow-y: auto` på katalogen og kurven får aldri noe å rulle mot. */
flex: 1 1 auto;
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(19rem, 0.85fr);
grid-template-rows: minmax(0, 1fr);
}
.sk-sale-draft-status {
margin: 0;
padding: var(--sk-space-2) var(--sk-space-4);
border-bottom: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface-subtle);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-sale-draft-status.is-saved { color: var(--sk-color-success); }
.sk-sale-draft-status.is-error {
background: var(--sk-color-danger-soft);
color: var(--sk-color-danger);
}
.sk-sale-workspace > main {
min-width: 0;
padding: var(--sk-space-6);
overflow-y: auto;
}
.sk-sale-workspace > aside {
min-width: 0;
padding: var(--sk-space-6);
border-left: 1px solid var(--sk-color-border);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--sk-space-5);
}
.sk-sale-catalog {
display: grid;
gap: var(--sk-space-6);
}
.sk-sale-category-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sk-space-3);
}
.sk-sale-category-grid button,
.sk-quick-sale-grid button {
min-height: 4.5rem;
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: grid;
justify-items: start;
gap: var(--sk-space-2);
text-align: left;
cursor: pointer;
transition:
border-color var(--sk-motion-fast),
background var(--sk-motion-fast),
transform var(--sk-motion-fast);
}
.sk-sale-category-grid button:hover,
.sk-quick-sale-grid button:hover {
background: var(--sk-color-surface-selected);
}
.sk-sale-category-grid button.is-selected {
border-color: var(--sk-color-primary);
background: var(--sk-color-surface-selected);
}
.sk-sale-category-grid button:active,
.sk-quick-sale-grid button:active {
transform: scale(0.985);
}
.sk-sale-category-grid svg {
color: var(--sk-color-ink-soft);
}
.sk-section-heading {
display: flex;
align-items: center;
justify-content: space-between;
}
.sk-section-heading h3 {
margin: 0;
}
.sk-section-heading button {
border: 0;
background: transparent;
color: var(--sk-color-primary);
cursor: pointer;
}
.sk-quick-sale-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-3);
}
.sk-quick-sale-grid button {
min-height: 4.8rem;
border-left: 5px solid var(--sk-color-service-accent);
}
.sk-quick-sale-grid small,
.sk-sale-customer small,
.sk-cart-lines article small {
color: var(--sk-color-ink-soft);
}
.sk-sale-customer {
width: 100%;
min-height: 6rem;
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-4);
text-align: left;
cursor: pointer;
}
.sk-sale-customer:hover {
background: var(--sk-color-surface-hover);
}
.sk-sale-customer > span:first-child {
display: grid;
}
.sk-sale-customer-context {
display: grid;
gap: var(--sk-space-1);
}
.sk-sale-customer-context.has-customer .sk-sale-customer {
border-color: var(--sk-color-primary);
box-shadow: 0 0 0 1px var(--sk-color-primary);
background: var(--sk-color-primary-soft);
}
.sk-sale-customer-clear {
justify-self: end;
border: 0;
padding: var(--sk-space-1) var(--sk-space-2);
background: transparent;
color: var(--sk-color-danger);
font: inherit;
font-size: var(--sk-font-size-sm);
cursor: pointer;
}
.sk-sale-customer-clear:hover {
text-decoration: underline;
}
.sk-cart-panel {
min-height: 26rem;
flex: 1;
display: flex;
flex-direction: column;
}
.sk-cart-panel .sk-empty-state {
min-height: 18rem;
}
.sk-cart-panel dl {
margin: auto 0 0;
padding-top: var(--sk-space-5);
border-top: 1px solid var(--sk-color-border);
display: grid;
gap: var(--sk-space-2);
}
.sk-cart-panel dl div {
display: flex;
justify-content: space-between;
gap: var(--sk-space-4);
}
.sk-cart-panel dt,
.sk-cart-panel dd {
margin: 0;
}
.sk-cart-panel dl div:last-child {
font-size: var(--sk-font-size-lg);
font-weight: var(--sk-font-weight-strong);
}
.sk-cart-lines {
display: grid;
/* Panelet har `flex-basis: 0` og `min-height: 26rem`, altså en fast høyde.
Linjelisten er det eneste som vokser når kurven fylles, så den må eie
rullingen selv — da blir totalsummen under stående. `min-height: 0` er
det som lar den krympe under sitt eget innhold i det hele tatt.
Vannrett rulling er bevisst stengt: lange varenavn skal brytes, ikke
skyve panelet sidelengs. */
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.sk-cart-lines article {
padding: var(--sk-space-4) 0;
border-bottom: 1px solid var(--sk-color-border-soft);
display: grid;
/* `minmax(0, …)` og ordbrytingen under holder et langt varenavn innenfor
panelet nå som linjelisten ikke lenger ruller sidelengs. */
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--sk-space-2);
}
.sk-cart-lines article > span {
min-width: 0;
display: grid;
overflow-wrap: break-word;
}
.sk-cart-lines article button {
justify-self: start;
padding: 0;
border: 0;
background: transparent;
color: var(--sk-color-danger);
cursor: pointer;
}
.sk-quantity-stepper {
width: max-content;
margin-top: var(--sk-space-2);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-pill);
display: grid !important;
grid-template-columns: 2rem 2rem 2rem;
align-items: center;
text-align: center;
overflow: hidden;
}
.sk-cart-lines article .sk-quantity-stepper button {
width: 2rem;
height: 2rem;
justify-self: stretch;
color: var(--sk-color-ink);
font-size: var(--sk-font-size-lg);
}
.sk-cart-lines article .sk-quantity-stepper button:hover {
background: var(--sk-color-surface-hover);
}
.sk-cart-line-actions {
display: flex;
gap: var(--sk-space-3);
grid-column: 1 / -1;
}
.sk-cart-line-actions button:first-child {
color: var(--sk-color-primary);
}
.sk-cart-line-editor {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sk-space-3);
padding: var(--sk-space-3);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface-hover);
}
/* «Gyldighet» har en lang hjelpetekst under nedtrekkslisten. `.sk-field` er et
rutenett som strekker radene sine når feltet får ekstra høyde av naboen, så
inndatafeltet for «Mobil» ble høyere enn feltene i raden over — det var det
kunden så som feil størrelse. Feltene toppstilles i stedet, og beholder
samme bredde som resten av skjemaene. */
.sk-giftcard-form .sk-form-row {
align-items: start;
}
.sk-cart-options {
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: grid;
gap: var(--sk-space-3);
}
.sk-sale-footer {
width: 100%;
min-width: 0;
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-4);
}
.sk-sale-footer > span {
min-width: 0;
max-width: 100%;
display: grid;
}
.sk-sale-footer > .sk-sale-footer__actions { display: flex; flex-wrap: wrap; grid-auto-flow: column; gap: var(--sk-space-2); }
.sk-sale-footer .sk-button { min-width: 44px; min-height: max(44px, var(--sk-control-height)); max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.sk-sale-footer small {
color: var(--sk-color-ink-soft);
}
.sk-sale-footer strong {
font-size: var(--sk-font-size-lg);
}
.sk-sale-picker {
position: absolute;
z-index: 5;
inset: 0;
padding: var(--sk-space-6);
overflow-y: auto;
background: var(--sk-color-surface);
animation: sk-drawer-in var(--sk-motion-slow) var(--sk-ease-emphasized);
}
.sk-sale-picker header {
display: flex;
align-items: center;
gap: var(--sk-space-4);
margin-bottom: var(--sk-space-5);
}
.sk-sale-picker header h3 {
margin: 0;
}
.sk-sale-picker > div {
margin-top: var(--sk-space-4);
display: grid;
}
.sk-sale-picker > div > button {
min-height: 4.7rem;
padding: var(--sk-space-3);
border: 0;
border-bottom: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-sale-picker > div > button:hover,
.sk-sale-picker > div > button.is-selected {
background: var(--sk-color-surface-selected);
}
.sk-sale-picker > div > button > span:last-child {
display: grid;
}
.sk-sale-picker small {
color: var(--sk-color-ink-soft);
}
.sk-payment-step {
max-width: 38rem;
margin: 0 auto;
padding: var(--sk-space-8) 0;
display: grid;
gap: var(--sk-space-5);
}
.sk-sale-payment-content {
max-width: 38rem;
margin: 0 auto;
display: grid;
gap: var(--sk-space-5);
}
.sk-sale-payment-content > .sk-payment-step {
min-width: 0;
margin: 0;
padding: 0;
}
.sk-payment-step > svg {
width: 3rem;
height: 3rem;
color: var(--sk-color-primary);
}
.sk-payment-step h3,
.sk-payment-step p {
margin: 0;
}
.sk-tip-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-3);
}
.sk-tip-grid button {
min-height: 4.5rem;
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
cursor: pointer;
}
.sk-tip-grid button.is-selected {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
.sk-payment-methods {
display: grid;
gap: var(--sk-space-3);
}
.sk-payment-methods button {
min-height: 5rem;
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--sk-space-4);
text-align: left;
cursor: pointer;
}
.sk-payment-methods button:hover {
background: var(--sk-color-surface-hover);
}
.sk-payment-methods button span {
display: grid;
}
.sk-payment-methods small {
color: var(--sk-color-ink-soft);
}
.sk-allocation-list {
display: grid;
gap: var(--sk-space-2);
}
.sk-allocation-list > div,
.sk-payment-balance {
min-height: 3.5rem;
padding: 0 var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: flex;
align-items: center;
justify-content: space-between;
}
.sk-allocation-list > div {
gap: var(--sk-space-3);
}
.sk-allocation-list > div > span {
margin-right: auto;
}
.sk-allocation-list > div > button {
border: 0;
background: transparent;
color: var(--sk-color-danger);
cursor: pointer;
}
.sk-cash-presets {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-2);
}
.sk-cash-presets button {
min-height: 2.75rem;
padding: 0 var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-pill);
background: var(--sk-color-surface);
cursor: pointer;
}
.sk-cash-presets button:hover,
.sk-cash-presets button.is-selected {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
}
.sk-campaign-preview {
min-height: 12rem;
padding: var(--sk-space-5);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-canvas);
display: grid;
align-content: start;
gap: var(--sk-space-2);
}
.sk-campaign-preview.is-email {
border-top: 0.35rem solid var(--sk-color-primary);
background: var(--sk-color-surface);
}
.sk-campaign-preview.is-sms {
max-width: 24rem;
border-radius: 1.5rem 1.5rem 0.3rem 1.5rem;
background: var(--sk-color-primary-soft);
}
.sk-campaign-preview p {
white-space: pre-wrap;
}
.sk-report-source {
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sk-space-3);
}
.sk-report-source > span {
display: grid;
}
.sk-report-source small {
color: var(--sk-color-ink-soft);
}
.sk-report-table {
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
overflow-x: auto;
overflow-y: hidden;
/* Skuffekroppen (`.sk-drawer__body`) er et rutenett, og et rutenett-barn har
som standard `min-width: auto`. Den brede tabellen (nowrap-kolonner) presset
derfor sporet ut i full innholdsbredde, sprengte skuffen og tvang HELE siden
til å rulle sidelengs. `min-width: 0` lar barnet krympe, slik at den egne
`overflow-x: auto` her fanger den horisontale rullingen inne i tabellkortet
i stedet — ingen kolonner går tapt, men siden ruller aldri. */
min-width: 0;
max-width: 100%;
}
.sk-report-table table {
width: 100%;
border-collapse: collapse;
white-space: nowrap;
}
.sk-report-table th,
.sk-report-table td {
padding: var(--sk-space-3) var(--sk-space-4);
border-bottom: 1px solid var(--sk-color-border-soft);
text-align: left;
}
/* Tall skal justeres til høyre og la lange produktnavn brytes, slik at tabellen
holder seg smal og lettleselig uten å tvinge unødig bredde. */
.sk-report-table td.is-numeric,
.sk-report-table th.is-numeric {
text-align: right;
font-variant-numeric: tabular-nums;
}
.sk-report-table td.is-wrap {
white-space: normal;
min-width: 12rem;
}
.sk-report-table th {
background: var(--sk-color-canvas);
color: var(--sk-color-ink-soft);
font-size: var(--sk-type-table);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sk-report-table tbody tr:last-child td {
border-bottom: 0;
}
.sk-sale-detail {
display: grid;
gap: var(--sk-space-6);
}
.sk-sale-detail section {
display: grid;
gap: var(--sk-space-3);
}
/* Den fiskale kvitteringen (uten importmerkelapp) starter rett på tittelen
inne i .sk-inset-form, uten noe headerfelt slik den rekonstruerte kopien
under har. Da blir toppen trang: én rem padding og null margin er alt som
skiller "Kvittering og dokumenter" fra kortkanten. Litt ekstra luft over
tittelen, ikke en ny header-struktur. */
.sk-receipt-heading {
padding-top: var(--sk-space-3);
}
.sk-receipt-print {
display: grid;
gap: var(--sk-space-5);
padding: var(--sk-space-5);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
}
.sk-receipt-print__header {
display: grid;
gap: var(--sk-space-1);
padding-bottom: var(--sk-space-4);
border-bottom: 1px solid var(--sk-color-border);
}
.sk-receipt-print__header > strong {
color: var(--sk-color-danger);
font-size: var(--sk-font-size-sm);
letter-spacing: 0.04em;
}
.sk-receipt-print__header h3,
.sk-receipt-print__header p,
.sk-receipt-print__payments h4 {
margin: 0;
}
.sk-receipt-print__payments {
display: grid;
gap: var(--sk-space-2);
}
.sk-receipt-print__payments > div {
display: flex;
justify-content: space-between;
gap: var(--sk-space-4);
}
.sk-receipt-print__notice {
margin: 0;
padding-top: var(--sk-space-4);
border-top: 1px solid var(--sk-color-border);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
@media print {
body * {
visibility: hidden !important;
}
.sk-receipt-print,
.sk-receipt-print * {
visibility: visible !important;
}
.sk-receipt-print {
position: fixed;
inset: 0;
z-index: 9999;
overflow: visible;
border: 0;
border-radius: 0;
box-shadow: none;
color: #111;
background: #fff;
}
.sk-no-print {
display: none !important;
}
}
.sk-list-row {
min-height: 4.5rem;
padding: var(--sk-space-3) 0;
border-bottom: 1px solid var(--sk-color-border-soft);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-4);
}
.sk-list-row > span {
display: grid;
}
.sk-list-row small {
color: var(--sk-color-ink-soft);
}
.sk-service-history-row__main {
min-width: 0;
flex: 1 1 auto;
padding: var(--sk-space-2) 0;
border: 0;
background: transparent;
color: inherit;
display: grid;
justify-items: start;
gap: var(--sk-space-1);
font: inherit;
text-align: left;
cursor: pointer;
}
.sk-service-history-row__main:hover strong,
.sk-service-history-row__main:focus-visible strong {
color: var(--sk-color-primary);
}
.sk-service-history-row__main:focus-visible {
border-radius: var(--sk-radius-sm);
outline: 3px solid var(--sk-color-focus-ring);
outline-offset: 3px;
}
.sk-service-history-row__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sk-space-1) var(--sk-space-3);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
line-height: var(--sk-line-copy);
}
.sk-service-history-row__meta > span + span::before {
margin-right: var(--sk-space-3);
color: var(--sk-color-ink-faint);
content: "·";
}
@media (max-width: 40rem) {
.sk-service-history-row {
align-items: stretch;
flex-direction: column;
}
.sk-service-history-row > .sk-button {
align-self: flex-start;
}
}
@media (max-width: 960px) {
/* Under 960px stables katalogen over kurven (07-responsive.css), og da er
det arbeidsflaten selv som ruller. Radene må tilbake til sin naturlige
høyde, ellers presses begge kolonnene inn i én låst rad. Selektoren er
bevisst to klasser dyp: denne filen lastes før 07-responsive.css. */
.sk-drawer--sale .sk-sale-workspace {
grid-template-rows: auto;
}
}
/* Professional recipes use existing form tokens and wrap long product names. */
.sk-customer-formula-fields,
.sk-customer-formula-fields fieldset,
.sk-customer-formula-summary {
min-width: 0;
}
.sk-customer-formula-fields fieldset {
display: grid;
gap: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-4);
}
.sk-customer-formula-summary {
overflow-wrap: anywhere;
}
/* Supplier URLs and routines remain readable within the existing drawer. */
.sk-supplier-drawer .sk-field,
.sk-customer-formula-fields .sk-field {
display: grid;
grid-template-columns: minmax(0, 1fr);
min-width: 0;
}
.sk-supplier-drawer .sk-field > label,
.sk-customer-formula-fields .sk-field > label {
width: auto;
}
.sk-supplier-drawer .sk-field :is(input, textarea),
.sk-customer-formula-fields .sk-field :is(input, textarea) {
width: 100%;
min-width: 0;
}
.sk-supplier-drawer :is(p, h2, h3) { overflow-wrap: anywhere; }
/* Keep finance provenance and follow-up filters readable on narrow screens. */
.sk-system-costs .sk-field,
.sk-reactivation-opportunities .sk-field {
display: grid;
grid-template-columns: minmax(0, 1fr);
min-width: 0;
}
.sk-system-costs .sk-field > label,
.sk-reactivation-opportunities .sk-field > label { width: auto; }
.sk-system-costs .sk-field :is(input, textarea, select),
.sk-reactivation-opportunities .sk-field :is(input, textarea, select) { width: 100%; min-width: 0; }
.sk-system-costs :is(p, summary),
.sk-reactivation-opportunities :is(p, li) { overflow-wrap: anywhere; }
.sk-staffing-tools { border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-md); padding: var(--sk-space-4); }
.sk-staffing-tools > summary { cursor: pointer; font-weight: var(--sk-font-weight-strong); overflow-wrap: anywhere; }
.sk-staffing-tools[open] > summary { margin-bottom: var(--sk-space-4); }
.sk-staffing-tools .sk-page--stacked { display: grid; gap: var(--sk-space-4); }
.sk-employee-reviews .sk-data-table-wrap { min-width: 0; }
@media (max-width: 44rem) {
.sk-employee-reviews .sk-data-table { min-width: 0; }
.sk-employee-reviews .sk-data-table .sk-button { max-width: 100%; white-space: normal; }
.sk-employee-reviews .sk-inline-actions { flex-wrap: wrap; }
}
.sk-reactivation-contact { border: 1px solid var(--sk-color-border-soft); border-radius: var(--sk-radius-lg); padding: 12px; margin-block: 12px; min-width: 0; overflow-wrap: anywhere; }
.sk-reactivation-contact summary { cursor: pointer; min-height: 44px; display: list-item; }
.sk-reactivation-contact .sk-field { min-width: 0; }
.sk-reactivation-contact select { max-width: 100%; }
/* Only the employee booking form: keep recovery actions visible after a long error. */
.sk-modal:has(.employee-booking-form) { display: flex; flex-direction: column; overflow: hidden; }
.sk-modal:has(.employee-booking-form) > .sk-modal__header,
.sk-modal:has(.employee-booking-form) > .sk-modal__footer { flex: 0 0 auto; }
.sk-modal:has(.employee-booking-form) > .sk-modal__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* The portal is outside the app shell; keep its dark recovery buttons readable. */
:root[data-staff-interface][data-ui-theme="dark"] :is(.sk-modal:has(.employee-booking-form) > .sk-modal__footer, .sk-appointment-detail) .sk-button:not(.sk-button--primary):not(:disabled) { background: var(--sk-color-surface); color: var(--sk-color-ink); border-color: var(--sk-color-border); }
/* Existing checkout layout, scoped to the employee checkout on touch screens.
No root screen override: other employee pages keep their own layout. */
.sk-drawer.sk-drawer--employee-sale {
width: min(100vw, 90rem);
max-width: 100vw;
}
.sk-drawer--employee-sale :is(button, input, select, textarea, a[href]) {
min-height: 44px;
min-width: 44px;
}
:root[data-staff-interface] .sk-drawer--employee-sale .sk-drawer__body :is(button, input, select, textarea) {
min-height: 44px;
}
.sk-drawer--employee-sale .sk-sale-member-question {
margin-bottom: var(--sk-space-4);
}
.sk-sale-member-question form {
display: grid;
gap: var(--sk-space-3);
}
.sk-sale-member-question .sk-sale-footer__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-3);
margin-top: var(--sk-space-3);
}
.sk-drawer--employee-sale .sk-sale-workspace > aside {
overflow-y: auto;
}
@media (max-width: 960px) {
.sk-drawer--employee-sale .sk-sale-workspace > aside {
overflow: visible;
}
}
@media (max-height: 800px) and (min-width: 961px) {
.sk-drawer--employee-sale .sk-sale-workspace > main,
.sk-drawer--employee-sale .sk-sale-workspace > aside {
padding: var(--sk-space-4);
}
}
.sk-drawer--employee-sale .sk-drawer__header {
flex-wrap: wrap;
gap: var(--sk-space-3);
padding-block: var(--sk-space-3);
}
.sk-drawer--employee-sale .sk-drawer__header-actions,
.sk-drawer--employee-sale .sk-sale-footer__actions {
display: flex;
align-items: center;
min-width: 0;
max-width: 100%;
flex-wrap: wrap;
gap: var(--sk-space-3);
}
:root[data-staff-interface] .sk-app-shell .sk-employee-checkout :is(.sk-modal, .sk-drawer) :is(button, input, select, textarea, a[href]) {
min-height: 44px;
min-width: 44px;
}
/* Keep the 44 px hit area during opening too; reuse the shared opacity motion
instead of the general modal scale animation. */
.sk-employee-checkout .sk-modal {
animation-name: sk-fade-in;
}
/* Online booking, marketplace profile, external links and publication wizard. */
.sk-online-page {
width: 100%;
max-width: none;
min-height: calc(100vh - var(--sk-topbar-height));
padding: 0;
}
.sk-online-hero {
position: relative;
min-height: calc(100vh - var(--sk-topbar-height));
padding: clamp(4rem, 10vh, 8rem) clamp(2rem, 9vw, 10rem);
overflow: hidden;
display: grid;
grid-template-columns: minmax(22rem, 0.9fr) minmax(26rem, 1.1fr);
align-items: center;
gap: var(--sk-space-10);
}
.sk-online-hero::after {
content: "";
position: absolute;
z-index: -1;
inset: -20% -12% auto auto;
width: 48rem;
height: 48rem;
border-radius: 50%;
background: radial-gradient(
circle at 65% 35%,
var(--sk-color-signal) 0,
var(--sk-color-signal-soft) 35%,
transparent 70%
);
animation: sk-ambient-drift 9s ease-in-out infinite alternate;
}
.sk-online-hero > div:first-child {
max-width: 42rem;
justify-self: end;
}
.sk-online-hero h1 {
margin: var(--sk-space-4) 0;
font-size: var(--sk-type-page-title);
line-height: 1.02;
letter-spacing: -0.045em;
}
.sk-online-hero p {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-lg);
}
.sk-online-hero ul {
margin: var(--sk-space-6) 0;
padding: 0;
display: grid;
gap: var(--sk-space-3);
list-style: none;
}
.sk-online-hero li {
display: flex;
align-items: center;
gap: var(--sk-space-3);
}
.sk-online-hero li svg {
width: 1.2rem;
color: var(--sk-color-success);
}
.sk-online-hero > div:first-child > div {
display: flex;
gap: var(--sk-space-3);
}
.sk-marketplace-preview {
min-height: 35rem;
display: grid;
place-items: center;
perspective: 75rem;
}
.sk-marketplace-phone {
width: min(20rem, 75%);
min-height: 34rem;
padding: var(--sk-space-3);
border: 0.55rem solid var(--sk-color-ink);
border-radius: 2.6rem;
background: var(--sk-color-surface);
box-shadow: 0 40px 80px rgb(61 85 80 / 23%);
transform: rotateY(-9deg) rotateX(3deg);
animation: sk-phone-float 5s ease-in-out infinite;
}
.sk-marketplace-map {
display: block;
height: 16rem;
border-radius: 1.8rem 1.8rem 0.8rem 0.8rem;
background:
linear-gradient(135deg, #e8f3ea, #d8e7f5),
repeating-linear-gradient(45deg, transparent 0 18px, rgb(255 255 255 / 70%) 18px 21px);
}
.sk-marketplace-phone article {
min-height: 5rem;
padding: var(--sk-space-3);
border-bottom: 1px solid var(--sk-color-border-soft);
display: flex;
align-items: center;
gap: var(--sk-space-3);
}
.sk-marketplace-phone article div {
display: grid;
}
.sk-marketplace-phone small {
color: var(--sk-color-ink-soft);
}
.sk-location-strip {
padding: 0 clamp(2rem, 9vw, 10rem) var(--sk-space-10);
}
.sk-location-strip > div {
margin-top: var(--sk-space-3);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: var(--sk-space-3);
}
.sk-location-strip button {
min-height: 5rem;
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-location-strip button span {
display: grid;
}
.sk-location-strip small {
color: var(--sk-color-ink-soft);
}
.sk-link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--sk-space-4);
}
.sk-link-card {
min-height: 0;
padding: var(--sk-card-inset);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.sk-link-card > svg {
width: 1.5rem;
height: 1.5rem;
color: var(--sk-color-primary);
}
.sk-link-card h2 {
margin: var(--sk-space-3) 0 var(--sk-space-2);
font-size: var(--sk-type-card-title);
}
.sk-link-card p {
margin: 0 0 var(--sk-space-4);
color: var(--sk-color-ink-soft);
}
.sk-link-card .sk-button {
width: 100%;
margin-top: auto;
}
.sk-channel-setup {
max-width: 48rem;
margin: 2rem auto;
padding: var(--sk-space-10);
display: grid;
justify-items: start;
gap: var(--sk-space-5);
}
.sk-channel-icons {
display: flex;
gap: var(--sk-space-3);
color: var(--sk-color-primary);
}
.sk-channel-icons svg {
width: 3rem;
height: 3rem;
}
.sk-channel-setup h2,
.sk-channel-setup p {
margin: 0;
}
.sk-channel-setup p {
color: var(--sk-color-ink-soft);
}
.sk-channel-setup ul {
padding: 0;
display: grid;
gap: var(--sk-space-3);
list-style: none;
}
.sk-channel-setup li {
display: flex;
gap: var(--sk-space-3);
}
.sk-channel-setup li svg {
color: var(--sk-color-success);
}
.sk-store-hero {
min-height: 34rem;
padding: var(--sk-space-10);
border-radius: var(--sk-radius-lg);
background: linear-gradient(135deg, var(--sk-color-primary-soft), var(--sk-color-surface-warm));
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--sk-space-8);
}
.sk-store-hero > div:first-child {
max-width: 34rem;
}
.sk-store-hero > div:first-child > svg {
width: 4rem;
height: 4rem;
color: var(--sk-color-primary);
}
.sk-store-hero h2 {
font-size: var(--sk-type-section-title);
}
.sk-store-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-3);
}
.sk-store-grid span {
min-height: 5rem;
padding: var(--sk-space-4);
border-radius: var(--sk-radius-md);
background: rgb(255 255 255 / 78%);
display: flex;
align-items: center;
gap: var(--sk-space-3);
font-weight: var(--sk-font-weight-strong);
}
.sk-store-grid svg {
color: var(--sk-color-success);
}
.sk-wizard {
position: fixed;
z-index: calc(var(--sk-z-overlay) + 4);
inset: 0;
background: var(--sk-color-surface);
overflow-y: auto;
animation: sk-rise-in var(--sk-motion-slow) var(--sk-ease-emphasized);
}
.sk-wizard > header {
position: sticky;
z-index: 4;
top: 0;
width: min(68rem, calc(100% - 3rem));
min-height: 6rem;
margin: 0 auto;
background: var(--sk-color-surface);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
.sk-wizard > header > div:last-child {
display: flex;
gap: var(--sk-space-3);
}
.sk-wizard-progress {
position: absolute;
inset: 0.6rem 0 auto;
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: var(--sk-space-1);
}
.sk-wizard-progress span {
height: 0.22rem;
border-radius: var(--sk-radius-pill);
background: var(--sk-color-border-soft);
}
.sk-wizard-progress span.is-complete {
background: var(--sk-color-primary);
}
.sk-wizard > main {
width: min(62rem, calc(100% - 3rem));
min-height: calc(100vh - 6rem);
margin: 0 auto;
padding: clamp(3rem, 10vh, 8rem) 0;
display: grid;
align-items: center;
}
.sk-wizard-intro {
display: grid;
grid-template-columns: 12rem 1fr;
align-items: center;
gap: var(--sk-space-10);
}
.sk-wizard-intro h1,
.sk-wizard-form h1 {
margin: var(--sk-space-3) 0;
font-size: var(--sk-type-page-title);
}
.sk-wizard-intro p,
.sk-wizard-form > p {
max-width: 43rem;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-lg);
}
.sk-wizard-illustration {
width: 10rem;
height: 10rem;
border-radius: 2.4rem;
background: linear-gradient(
145deg,
var(--sk-color-signal),
var(--sk-color-primary) 60%,
var(--sk-color-primary-soft)
);
color: white;
display: grid;
place-items: center;
box-shadow: 0 25px 45px color-mix(in srgb, var(--sk-color-primary) 25%, transparent);
}
.sk-wizard-illustration svg {
width: 4.5rem;
height: 4.5rem;
}
.sk-wizard-form {
width: min(100%, 42rem);
margin: 0 auto;
display: grid;
gap: var(--sk-space-5);
}
.sk-wizard-form--wide {
width: min(100%, 58rem);
}
.sk-hours-row {
min-height: 4rem;
display: grid;
grid-template-columns: 1fr 8rem auto 8rem;
align-items: center;
gap: var(--sk-space-3);
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-hours-row label {
display: flex;
align-items: center;
gap: var(--sk-space-3);
font-weight: var(--sk-font-weight-strong);
}
.sk-hours-row input {
min-height: var(--sk-control-height);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-sm);
padding: 0 var(--sk-space-2);
}
.sk-image-dropzone {
min-height: 17rem;
border: 2px dashed var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-canvas);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sk-space-3);
transition:
border-color var(--sk-motion-base),
background var(--sk-motion-base),
transform var(--sk-motion-base);
}
.sk-image-dropzone.is-dragging {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
transform: scale(1.01);
}
.sk-image-dropzone > svg {
width: 2rem;
height: 2rem;
}
.sk-image-preview-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-3);
}
.sk-image-preview-grid article {
min-height: 5rem;
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: grid;
grid-template-columns: 8rem minmax(0, 1fr) auto;
align-items: start;
gap: var(--sk-space-3);
cursor: grab;
transition:
opacity var(--sk-motion-fast) var(--sk-ease-standard),
transform var(--sk-motion-fast) var(--sk-ease-standard);
}
.sk-image-preview-grid article.is-dragging {
opacity: 0.45;
transform: scale(0.98);
}
.sk-image-preview-grid article span {
min-width: 0;
display: grid;
}
.sk-image-preview-grid article strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-image-preview-grid article button {
border: 0;
background: transparent;
cursor: pointer;
}
.sk-media-preview {
position: relative;
width: 8rem;
aspect-ratio: 1.5;
border-radius: var(--sk-radius-sm);
overflow: hidden;
background: var(--sk-color-canvas);
}
.sk-media-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sk-media-preview > span {
position: absolute;
inset: auto 0.35rem 0.35rem;
width: fit-content;
padding: 0.2rem 0.4rem;
border-radius: var(--sk-radius-sm);
background: rgb(17 17 17 / 75%);
color: white;
font-size: var(--sk-font-size-xs);
}
.sk-image-preview-grid article .sk-field {
margin-top: var(--sk-space-2);
}
.sk-profile-image-status {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-3);
}
.sk-profile-review {
display: grid;
}
.sk-profile-review > div {
min-height: 4rem;
border-bottom: 1px solid var(--sk-color-border-soft);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-3);
}
.sk-profile-review > div > svg {
color: var(--sk-color-success);
}
.sk-generated-link {
padding: var(--sk-space-5);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-canvas);
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: var(--sk-space-3);
}
.sk-generated-link > svg {
width: 4rem;
height: 4rem;
}
.sk-generated-link > div {
min-width: 0;
display: grid;
}
.sk-generated-link code {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-link-preview {
min-height: 8rem;
padding: var(--sk-space-5);
border: 1px dashed var(--sk-color-border);
border-radius: var(--sk-radius-lg);
display: flex;
align-items: center;
gap: var(--sk-space-4);
}
.sk-link-preview span {
display: grid;
}
.sk-connection-icon {
width: 5rem;
height: 5rem;
border-radius: 50%;
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
display: grid;
place-items: center;
}
.sk-connection-icon svg {
width: 2.5rem;
height: 2.5rem;
}
.sk-setup-step {
min-height: 3.5rem;
display: flex;
align-items: center;
gap: var(--sk-space-3);
}
.sk-setup-step > span {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--sk-color-canvas);
display: grid;
place-items: center;
font-weight: var(--sk-font-weight-strong);
}
/* Marketing and communications use the same cards, drawers and readiness gates. */
.sk-marketing-home,
.sk-automation-sections {
display: grid;
gap: var(--sk-space-8);
}
.sk-marketing-home {
grid-template-columns: minmax(0, 1fr);
}
.sk-marketing-home > * {
min-width: 0;
}
.sk-campaign-balance {
min-height: 12rem;
padding: var(--sk-space-6);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--sk-space-2) var(--sk-space-6);
}
.sk-campaign-balance > span {
display: flex;
align-items: center;
gap: var(--sk-space-3);
}
.sk-campaign-balance > b {
grid-row: span 2;
font-size: var(--sk-font-size-display);
}
.sk-campaign-balance p {
margin: 0;
color: var(--sk-color-ink-soft);
}
.sk-campaign-balance .sk-button {
justify-self: start;
}
@media (max-width: 44rem) {
.sk-campaign-balance {
grid-template-columns: minmax(0, 1fr);
overflow-wrap: anywhere;
}
.sk-campaign-balance > b {
grid-row: auto;
}
}
.sk-campaign-grid,
.sk-automation-grid,
.sk-review-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--sk-space-4);
}
.sk-campaign-card,
.sk-automation-card,
.sk-review-card {
min-height: 18rem;
padding: var(--sk-card-inset);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sk-space-3);
}
.sk-campaign-card > svg,
.sk-automation-card > svg {
color: var(--sk-color-primary);
}
.sk-campaign-card h2,
.sk-automation-card h3,
.sk-campaign-card p,
.sk-automation-card p {
margin: 0;
}
.sk-campaign-card p,
.sk-automation-card p {
color: var(--sk-color-ink-soft);
}
.sk-campaign-card .sk-button,
.sk-automation-card .sk-button {
margin-top: auto;
}
.sk-automation-sections section {
display: grid;
gap: var(--sk-space-4);
}
.sk-automation-sections h2 {
margin: 0;
}
.sk-promo-hero {
position: relative;
min-height: 38rem;
margin: calc(-1 * var(--sk-space-5)) calc(-1 * var(--sk-space-6)) 0;
padding: clamp(3rem, 8vw, 8rem);
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--sk-space-8);
}
.sk-promo-hero::after {
content: "";
position: absolute;
z-index: -1;
right: -12rem;
top: -18rem;
width: 52rem;
height: 52rem;
border-radius: 50%;
background: radial-gradient(circle, var(--sk-color-signal), var(--sk-color-signal-soft) 38%, transparent 70%);
animation: sk-ambient-drift 10s ease-in-out infinite alternate;
}
.sk-promo-hero.is-reviews::after {
background: radial-gradient(circle, var(--sk-color-primary-soft), var(--sk-color-surface-warm) 40%, transparent 70%);
}
.sk-promo-hero > div:first-child {
max-width: 43rem;
justify-self: end;
}
.sk-promo-hero h2 {
margin: var(--sk-space-4) 0;
font-size: var(--sk-type-section-title);
line-height: 1.05;
}
.sk-promo-hero p {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-lg);
}
.sk-promo-hero ul {
padding: 0;
display: grid;
gap: var(--sk-space-3);
list-style: none;
}
.sk-promo-hero li {
display: flex;
gap: var(--sk-space-3);
}
.sk-promo-art {
min-height: 27rem;
display: grid;
place-items: center;
}
.sk-promo-art > svg {
width: 7rem;
height: 7rem;
color: var(--sk-color-primary);
animation: sk-phone-float 5s ease-in-out infinite;
}
.sk-promo-art article {
min-width: 20rem;
padding: var(--sk-space-6);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sk-space-2);
transform: rotate(-3deg);
}
.sk-promo-art article strong,
.sk-promo-art article small {
width: 100%;
}
.sk-promo-art article small {
color: var(--sk-color-ink-soft);
}
.sk-promo-art article > svg {
color: #f1a900;
fill: #f1a900;
}
.sk-pricing-overview {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sk-space-4);
margin-bottom: var(--sk-space-5);
}
.sk-pricing-overview .sk-card {
min-height: 8rem;
padding: var(--sk-card-inset);
display: flex;
align-items: center;
gap: var(--sk-space-4);
}
.sk-pricing-overview svg {
color: var(--sk-color-primary);
}
.sk-pricing-overview span {
display: grid;
}
.sk-pricing-overview b {
font-size: var(--sk-font-size-2xl);
}
.sk-review-card > div {
display: flex;
}
.sk-review-card svg,
.sk-review-stars svg {
color: var(--sk-color-border);
}
.sk-review-card svg.is-filled,
.sk-review-stars svg.is-filled {
color: #f1a900;
fill: #f1a900;
}
.sk-review-card p {
flex: 1;
}
.sk-review-card small {
color: var(--sk-color-ink-soft);
}
.sk-choice-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--sk-space-3);
}
.sk-choice-grid > button {
min-height: 8rem;
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: grid;
justify-items: start;
gap: var(--sk-space-2);
text-align: left;
cursor: pointer;
}
.sk-choice-grid > button:hover {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
}
/* Valget var usynlig: `is-selected` ble satt i JSX, men ingenting tegnet det,
så rutenettet så likt ut uansett hva brukeren hadde trykket på. */
.sk-choice-grid > button.is-selected {
border-color: var(--sk-color-primary);
border-width: 2px;
background: var(--sk-color-primary-soft);
}
/* «Flere valg» i ansattskjemaet: standardfeltene skal ikke stå i veien for en
rask vikarregistrering, men de må være ett klikk unna og se klikkbare ut. */
.sk-inset-form > summary {
cursor: pointer;
font-weight: var(--sk-font-weight-strong);
}
.sk-choice-grid small {
color: var(--sk-color-ink-soft);
}
.sk-wizard-dots {
/* Klassen deles av importveiviserne (3 faste steg) og kampanjeveiviseren
(5 steg fra en «steps»-liste). Et fast repeat(4, …) ga enten en tom
fjerde kolonne eller et femte steg som falt ned i en ny rad.
auto-flow lager i stedet én kolonne per faktisk steg. */
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: var(--sk-space-2);
}
.sk-wizard-dots > span {
color: var(--sk-color-ink-faint);
display: grid;
justify-items: center;
gap: var(--sk-space-1);
}
.sk-wizard-dots i {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--sk-color-canvas);
display: grid;
place-items: center;
font-style: normal;
}
.sk-wizard-dots span.is-active {
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
.sk-wizard-dots span.is-active i {
background: var(--sk-color-primary);
color: white;
}
/* Kampanjedetaljen skal vise meldingen kunden faktisk vil motta, og samtidig
gjøre utkastet redigerbart uten å forlate flyten. */
.sk-campaign-content-card {
display: grid;
gap: var(--sk-space-5);
}
.sk-campaign-content-card__heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sk-space-4);
}
.sk-campaign-content-card__heading h3,
.sk-campaign-content-card__heading p {
margin: 0;
}
.sk-campaign-content-card__heading p {
margin-top: var(--sk-space-1);
color: var(--sk-color-ink-soft);
}
.sk-campaign-message-preview {
overflow: hidden;
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
}
.sk-campaign-message-preview__meta {
display: grid;
gap: var(--sk-space-2);
padding: var(--sk-space-4);
border-bottom: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-canvas);
}
.sk-campaign-message-preview__meta > span {
display: grid;
grid-template-columns: 4rem minmax(0, 1fr);
gap: var(--sk-space-3);
}
.sk-campaign-message-preview__meta small {
color: var(--sk-color-ink-soft);
}
.sk-campaign-message-preview__body {
min-height: 16rem;
padding: clamp(2rem, 7vw, 4.5rem);
text-align: center;
}
.sk-campaign-message-preview__brand {
display: inline-block;
margin-bottom: var(--sk-space-5);
color: var(--sk-color-primary);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sk-campaign-message-preview__body p {
max-width: 52ch;
margin: 0 auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: 1.65;
}
.sk-campaign-message-preview.is-sms {
width: min(26rem, 100%);
margin-inline: auto;
padding: var(--sk-space-4);
border-radius: 1.25rem 1.25rem 0.35rem 1.25rem;
background: var(--sk-color-primary-soft);
}
.sk-campaign-message-preview.is-sms small {
color: var(--sk-color-ink-soft);
}
.sk-campaign-message-preview.is-sms p {
margin: var(--sk-space-2) 0 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: 1.5;
}
.sk-campaign-editor textarea {
resize: vertical;
}
/* Fieldset brukes bare for å låse en avgjort fraværsforespørsel. Nettleserens
standardramme skal ikke lage en ekstra boks rundt skjemaet. */
.sk-plain-fieldset {
display: contents;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
@media (max-width: 40rem) {
.sk-campaign-content-card__heading {
align-items: stretch;
flex-direction: column;
}
.sk-campaign-content-card__heading .sk-button {
width: 100%;
}
.sk-campaign-message-preview__meta > span {
grid-template-columns: 1fr;
gap: 0;
}
}
/* Team, reports, add-ons, setup and help share operational navigation patterns. */
.sk-team-grid,
.sk-addon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
align-items: stretch;
gap: var(--sk-space-4);
}
.sk-team-grid > .sk-team-card + .sk-team-card {
margin-top: 0;
}
.sk-team-card,
.sk-addon-card {
min-height: 0;
padding: var(--sk-directory-card-padding);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sk-directory-card-gap);
}
.sk-team-card {
height: 100%;
min-height: 0;
padding: var(--sk-directory-card-padding);
gap: var(--sk-directory-card-gap);
}
.sk-team-card__identity {
width: 100%;
display: flex;
align-items: center;
gap: var(--sk-space-3);
}
.sk-team-card__identity > div {
min-width: 0;
display: grid;
justify-items: start;
gap: var(--sk-space-2);
}
.sk-team-card h2,
.sk-addon-card h2,
.sk-addon-card p {
margin: 0;
}
.sk-team-card dl {
margin: 0;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sk-space-2);
}
.sk-team-card dl > div {
padding: var(--sk-space-2);
border-radius: var(--sk-radius-sm);
background: var(--sk-color-canvas);
display: grid;
}
.sk-team-card dt {
color: var(--sk-color-ink-soft);
}
.sk-team-card dd {
margin: 0;
font-weight: var(--sk-font-weight-strong);
}
.sk-team-card .sk-button,
.sk-addon-card .sk-button {
margin-top: auto;
}
.sk-team-card .sk-button {
width: 100%;
}
.sk-schedule-board {
overflow-x: auto;
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
}
.sk-schedule-board > header {
min-height: 4.5rem;
padding: 0 var(--sk-space-4);
border-bottom: 1px solid var(--sk-color-border);
display: flex;
align-items: center;
justify-content: center;
gap: var(--sk-space-3);
}
.sk-schedule-grid {
min-width: 62rem;
display: grid;
grid-template-columns: 13rem repeat(7, minmax(7rem, 1fr));
}
.sk-schedule-grid > .sk-schedule-team-heading,
.sk-schedule-grid > .sk-schedule-day {
min-height: 3.5rem;
padding: var(--sk-space-3);
border-right: 1px solid var(--sk-color-border-soft);
border-bottom: 1px solid var(--sk-color-border-soft);
display: grid;
place-items: center;
}
.sk-schedule-day {
display: grid;
align-content: center;
gap: 0.1rem;
color: var(--sk-color-ink-soft);
text-align: center;
}
.sk-schedule-day > span {
font-size: var(--sk-font-size-xs);
text-transform: capitalize;
}
.sk-schedule-day > strong {
color: var(--sk-color-ink);
}
.sk-schedule-person {
min-height: 6rem;
padding: var(--sk-space-3);
display: flex;
align-items: center;
gap: var(--sk-space-3);
}
.sk-schedule-grid > button {
min-height: 6rem;
border: 0;
border-left: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
cursor: pointer;
}
.sk-schedule-grid > button:hover {
background: var(--sk-color-surface-selected);
}
.sk-schedule-grid-row {
display: contents;
}
.sk-schedule-grid-row > button {
min-height: 6rem;
border: 0;
border-left: 1px solid var(--sk-color-border-soft);
border-bottom: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
display: grid;
place-items: center;
padding: var(--sk-space-2);
cursor: pointer;
}
/* En dag kan romme flere vakter for samme ansatt; cella stabler dem. */
.sk-schedule-grid-row > .sk-schedule-cell {
min-height: 6rem;
border-left: 1px solid var(--sk-color-border-soft);
border-bottom: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
display: grid;
align-content: center;
gap: var(--sk-space-1);
padding: var(--sk-space-2);
}
.sk-schedule-cell > button {
width: 100%;
border: 0;
border-radius: var(--sk-radius-sm);
background: transparent;
display: grid;
place-items: center;
padding: var(--sk-space-1);
cursor: pointer;
}
.sk-schedule-cell > button:hover {
background: var(--sk-color-surface-selected);
}
.sk-schedule-shift {
display: grid;
justify-items: center;
gap: var(--sk-space-1);
line-height: 1.2;
}
.sk-schedule-shift small {
color: var(--sk-color-ink-soft);
}
.sk-schedule-grid-row > button:hover {
background: var(--sk-color-surface-selected);
}
.sk-schedule-grid-row > button.sk-schedule-cell--disabled {
cursor: not-allowed;
color: var(--sk-color-ink-soft);
background: var(--sk-color-surface-muted, var(--sk-color-surface));
}
.sk-schedule-grid-row > button.sk-schedule-cell--disabled:hover {
background: var(--sk-color-surface-muted, var(--sk-color-surface));
}
.sk-board-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sk-space-4);
}
.sk-board-columns > .sk-card {
min-height: 28rem;
padding: var(--sk-card-inset);
}
.sk-timeoff-column .sk-settings-collection {
display: grid;
gap: var(--sk-space-3);
}
.sk-timeoff-column .sk-list-row {
align-items: start;
}
.sk-list-row__actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--sk-space-3);
}
.sk-member-bank-account {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-3);
}
.sk-member-bank-form {
display: grid;
gap: var(--sk-space-4);
}
.sk-member-bank-form h3,
.sk-member-bank-form p {
margin: 0;
}
.sk-member-bank-form p {
margin-top: var(--sk-space-1);
color: var(--sk-color-ink-soft);
}
.sk-member-readiness {
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
overflow: hidden;
background: var(--sk-color-surface);
}
.sk-member-readiness > div {
padding: var(--sk-space-4);
background: var(--sk-color-warning-soft);
}
.sk-member-readiness p {
margin: var(--sk-space-1) 0 0;
color: var(--sk-color-ink-soft);
}
.sk-member-readiness ul {
margin: 0;
padding: 0;
list-style: none;
}
.sk-member-readiness li + li {
border-top: 1px solid var(--sk-color-border-soft);
}
.sk-member-readiness a {
min-height: 3.5rem;
padding: var(--sk-space-3) var(--sk-space-4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-3);
color: var(--sk-color-ink);
text-decoration: none;
}
.sk-member-readiness a:hover {
background: var(--sk-color-surface-hover);
}
.sk-member-readiness a svg {
flex: 0 0 auto;
color: var(--sk-color-ink-soft);
}
.sk-payroll-flow-bar {
grid-template-columns: minmax(11rem, 14rem) minmax(12rem, 1fr) auto auto;
align-items: end;
}
.sk-payroll-flow-bar .sk-form-stack { gap: var(--sk-space-1); align-self: center; }
.sk-payroll-flow-bar .sk-form-stack small { color: var(--sk-color-ink-soft); }
.sk-payroll-flow-bar > .sk-button { min-height: 2.75rem; }
@media (max-width: 1100px) {
.sk-payroll-flow-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-payroll-flow-bar > .sk-button { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
.sk-payroll-flow-bar { grid-template-columns: minmax(0, 1fr); }
}
.sk-payroll-person,
.sk-payroll-person > strong,
.sk-payroll-person > small {
display: block;
}
.sk-table-subline {
display: block;
margin-top: var(--sk-space-1);
color: var(--sk-color-ink-soft);
}
.sk-payroll-person > small {
margin-top: var(--sk-space-1);
color: var(--sk-color-ink-soft);
}
.sk-payroll-issue-list {
margin: var(--sk-space-3) 0 0;
padding: 0;
display: grid;
list-style: none;
}
.sk-payroll-issue-list > li {
min-height: 3.5rem;
padding: var(--sk-space-2) 0;
border-top: 1px solid currentColor;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-4);
}
.sk-payroll-issue-list > li > span:first-child {
display: grid;
}
.sk-commission-scope {
margin: 0;
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-2) var(--sk-space-4);
}
.sk-commission-scope legend {
padding: 0 var(--sk-space-2);
font-weight: var(--sk-font-weight-strong);
}
.sk-board-columns article {
min-height: 6rem;
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-3);
}
.sk-board-columns article div {
display: grid;
}
.sk-board-columns article small {
color: var(--sk-color-ink-soft);
}
.sk-settings-rows {
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
overflow: hidden;
}
.sk-settings-rows button {
width: 100%;
min-height: 3.75rem;
padding: 0 var(--sk-space-4);
border: 0;
border-bottom: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.sk-settings-rows button:last-child {
border-bottom: 0;
}
.sk-settings-rows button:hover {
background: var(--sk-color-surface-hover);
}
.sk-report-groups {
column-count: 2;
column-gap: var(--sk-space-6);
}
.sk-report-groups section {
display: inline-grid;
gap: var(--sk-space-3);
break-inside: avoid;
width: 100%;
margin-bottom: var(--sk-space-6);
}
.sk-report-groups section > div {
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
overflow: hidden;
}
.sk-report-launcher {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-report-launcher:last-child {
border-bottom: 0;
}
.sk-report-launcher > button:first-child {
width: 100%;
min-height: 5rem;
padding: var(--sk-space-3) var(--sk-space-4);
border: 0;
background: var(--sk-color-surface);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-report-launcher > button:last-child {
width: 3rem;
border: 0;
border-left: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
color: var(--sk-color-ink-soft);
cursor: pointer;
font-size: var(--sk-font-size-lg);
}
.sk-report-launcher > button:last-child.is-selected {
color: var(--sk-color-accent);
background: var(--sk-color-accent-soft);
}
.sk-report-launcher > button:hover {
background: var(--sk-color-surface-hover);
}
.sk-report-launcher button span {
display: grid;
}
.sk-report-launcher button small {
color: var(--sk-color-ink-soft);
}
.sk-report-controls {
display: grid;
grid-template-columns: auto minmax(16rem, 1fr);
align-items: center;
gap: var(--sk-space-4);
}
.sk-drawer--report {
width: min(64rem, 100vw);
}
.sk-report-toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-3);
}
.sk-report-toolbar input,
.sk-report-toolbar select {
min-height: var(--sk-control-height);
padding: 0 var(--sk-space-3);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-pill);
background: var(--sk-color-surface);
}
.sk-report-dimensions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sk-space-3);
}
.sk-report-dimensions .sk-field {
font-size: var(--sk-font-size-sm);
}
.sk-report-chart {
min-height: 22rem;
display: grid;
place-items: center;
align-content: center;
gap: var(--sk-space-3);
color: var(--sk-color-ink-soft);
}
.sk-report-chart > svg {
width: 4rem;
height: 4rem;
color: var(--sk-color-primary);
}
.sk-addon-card > span {
width: 4rem;
height: 4rem;
border-radius: var(--sk-radius-md);
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
display: grid;
place-items: center;
}
.sk-addon-card > span svg {
width: 2rem;
height: 2rem;
}
.sk-addon-card p {
color: var(--sk-color-ink-soft);
}
.sk-addon-detail {
display: grid;
justify-items: start;
gap: var(--sk-space-5);
}
.sk-help-page {
max-width: 78rem;
}
.sk-help-hero {
min-height: 22rem;
margin: 0 0 var(--sk-space-8);
padding: var(--sk-space-10);
border-radius: 0 0 2rem 2rem;
background: linear-gradient(135deg, var(--sk-color-primary-soft), var(--sk-color-surface-warm));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sk-space-5);
text-align: center;
}
.sk-help-hero > svg {
width: 3.5rem;
height: 3.5rem;
color: var(--sk-color-primary);
}
.sk-help-hero h1 {
margin: 0;
font-size: var(--sk-type-page-title);
}
.sk-help-hero .sk-search-box {
width: min(38rem, 100%);
min-width: 0;
background: var(--sk-color-surface);
}
.sk-help-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-4);
}
.sk-help-grid > button {
min-width: 0;
min-height: 7rem;
padding: var(--sk-space-5);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--sk-space-4);
text-align: left;
cursor: pointer;
}
.sk-help-grid > button:hover {
background: var(--sk-color-surface-hover);
}
.sk-help-grid > button.is-selected {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
}
.sk-help-grid > button > svg:first-child {
color: var(--sk-color-primary);
}
.sk-help-grid > button span {
display: grid;
}
.sk-help-grid small {
color: var(--sk-color-ink-soft);
}
.sk-help-library {
margin-top: var(--sk-space-7);
display: grid;
gap: var(--sk-space-4);
}
.sk-help-articles {
overflow: hidden;
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
}
.sk-help-articles > button {
width: 100%;
min-height: 5.25rem;
padding: var(--sk-space-4);
border: 0;
border-bottom: 1px solid var(--sk-color-border-soft);
background: transparent;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--sk-space-4);
text-align: left;
cursor: pointer;
}
.sk-help-articles > button:last-child {
border-bottom: 0;
}
.sk-help-articles > button:hover {
background: var(--sk-color-surface-hover);
}
.sk-help-articles > button > span {
display: grid;
gap: 0.2rem;
}
.sk-help-articles small {
color: var(--sk-color-ink-soft);
}
.sk-support-case-open {
width: 100%;
border: 0;
border-radius: var(--sk-radius-md);
padding: var(--sk-space-2);
background: transparent;
color: inherit;
display: grid;
gap: var(--sk-space-2);
text-align: left;
cursor: pointer;
}
.sk-support-case-open:hover { background: var(--sk-color-surface-hover); }
.sk-support-case-open:focus-visible { outline: 3px solid var(--sk-color-primary); outline-offset: 2px; }
.sk-support-case-open__label { display: inline-flex; align-items: center; gap: var(--sk-space-1); color: var(--sk-color-primary); font-weight: var(--sk-font-weight-strong); }
.sk-support-case-open__label svg { width: 1rem; height: 1rem; }
.sk-support-case-detail { display: grid; gap: var(--sk-space-6); }
.sk-support-case-detail > section { display: grid; gap: var(--sk-space-2); }
.sk-support-case-detail h3, .sk-support-case-detail p { margin: 0; }
.sk-support-case-badges { display: flex; flex-wrap: wrap; gap: var(--sk-space-2); }
.sk-support-case-copy { padding: var(--sk-space-4); border-radius: var(--sk-radius-md); background: var(--sk-color-surface-raised); white-space: pre-wrap; overflow-wrap: anywhere; }
.sk-support-case-events { margin: 0; padding: 0; list-style: none; display: grid; }
.sk-support-case-events li { min-height: 4.5rem; display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--sk-space-3); }
.sk-support-case-events li > span { width: .7rem; height: .7rem; margin-top: .35rem; border-radius: 50%; background: var(--sk-color-primary); box-shadow: 0 0 0 4px var(--sk-color-primary-soft); }
.sk-support-case-events li > div { padding-bottom: var(--sk-space-4); border-bottom: 1px solid var(--sk-color-border-soft); display: grid; gap: var(--sk-space-1); }
.sk-support-case-events small, .sk-support-case-events p { color: var(--sk-color-ink-soft); }
.sk-support-case-actions { padding-top: var(--sk-space-4); border-top: 1px solid var(--sk-color-border); }
.sk-help-article {
display: grid;
gap: var(--sk-space-6);
}
.sk-help-article > nav {
padding: var(--sk-space-4);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface-raised);
display: grid;
gap: var(--sk-space-2);
}
.sk-help-article > nav a {
color: var(--sk-color-primary);
}
.sk-help-article > section {
scroll-margin-top: var(--sk-space-6);
}
.sk-help-article > section h2 {
margin-bottom: var(--sk-space-2);
}
.sk-help-article > aside {
padding-top: var(--sk-space-4);
border-top: 1px solid var(--sk-color-border);
display: grid;
gap: var(--sk-space-2);
}
.sk-help-article > aside a {
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: flex;
justify-content: space-between;
align-items: center;
color: inherit;
text-decoration: none;
}
.sk-support-card {
margin-top: var(--sk-space-8);
padding: var(--sk-card-inset);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-5);
}
.sk-support-card h2,
.sk-support-card p {
margin: 0;
}
.sk-support-card p {
color: var(--sk-color-ink-soft);
}
.sk-team-card h2, .sk-addon-card h2 { font-size: var(--sk-font-size-lg); }
.sk-campaign-attempt-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.sk-composer-block-tools { display: grid; gap: var(--sk-space-3); padding-block: var(--sk-space-4); min-width: 0; }
.sk-composer-block-tools .sk-inline-actions { flex-wrap: wrap; }
.sk-hidden-composer-blocks { display: grid; gap: var(--sk-space-2); min-width: 0; }
.sk-hidden-composer-blocks > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-space-3); }
.sk-hidden-composer-blocks span { min-width: 0; overflow-wrap: anywhere; }
/* Global drawers remain mounted over the active route and preserve origin. */
.sk-global-search,
.sk-insights-panel,
.sk-notifications,
.sk-wallet,
.sk-account-panel {
min-height: 0;
display: grid;
align-content: start;
gap: var(--sk-space-5);
}
.sk-search-filters {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-2);
}
.sk-search-filters button {
min-height: 2.4rem;
padding: 0 var(--sk-space-3);
border: 0;
border-radius: var(--sk-radius-pill);
background: var(--sk-color-canvas);
cursor: pointer;
}
.sk-search-filters button.is-active {
background: var(--sk-color-ink);
color: white;
}
.sk-global-results,
.sk-notification-list {
display: grid;
border-block: 1px solid var(--sk-color-border-soft);
}
.sk-global-results > button,
.sk-notification-list > button {
width: 100%;
min-height: 4.8rem;
padding: var(--sk-space-3) 0;
border: 0;
border-bottom: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-global-results > button:hover,
.sk-notification-list > button:hover {
background: var(--sk-color-surface-hover);
}
.sk-global-results > button.is-active {
background: var(--sk-color-primary-soft);
box-shadow: inset 0.2rem 0 0 var(--sk-color-primary);
}
.sk-global-results > button > span:nth-child(2),
.sk-notification-list > button > span:nth-child(2) {
display: grid;
}
.sk-global-results small,
.sk-notification-list small,
.sk-notification-list time {
color: var(--sk-color-ink-soft);
}
.sk-result-icon {
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
display: grid;
place-items: center;
}
.sk-result-icon.is-customer {
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
}
.sk-result-icon.is-appointment {
background: #e2f6fc;
color: #28738f;
}
.sk-result-icon.is-sale {
background: var(--sk-color-success-soft);
color: var(--sk-color-success);
}
.sk-insight-hero {
padding: var(--sk-space-5);
border-radius: var(--sk-radius-lg);
background: linear-gradient(135deg, var(--sk-color-primary-soft), var(--sk-color-signal-soft));
display: flex;
align-items: center;
gap: var(--sk-space-4);
}
.sk-insight-hero > svg {
width: 2.5rem;
height: 2.5rem;
color: var(--sk-color-primary);
}
.sk-insight-hero div {
display: grid;
}
.sk-insight-hero p {
margin: var(--sk-space-1) 0 0;
color: var(--sk-color-ink-soft);
}
.sk-insight-row {
width: 100%;
min-height: 5.5rem;
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-insight-row:hover {
background: var(--sk-color-surface-hover);
}
.sk-insight-row > span {
display: grid;
}
.sk-insight-row > span:last-child {
display: flex;
align-items: center;
gap: var(--sk-space-2);
color: var(--sk-color-primary);
}
.sk-insight-row small {
color: var(--sk-color-ink-soft);
}
.sk-notification-list > button.is-read {
opacity: 0.62;
}
.sk-notification-list > button > span:first-child {
width: 2.8rem;
height: 2.8rem;
border-radius: 50%;
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
display: grid;
place-items: center;
}
.sk-connect-onboarding {
min-height: 34rem;
display: grid;
justify-items: center;
align-content: center;
gap: var(--sk-space-4);
text-align: center;
}
.sk-connect-onboarding > p {
max-width: 34rem;
color: var(--sk-color-ink-soft);
}
.sk-connect-onboarding > span:not(.sk-connect-art) {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-connect-onboarding > span > svg {
color: var(--sk-color-success);
}
.sk-connect-art {
width: 7rem;
height: 7rem;
border-radius: 2rem;
background: linear-gradient(
145deg,
var(--sk-color-signal),
var(--sk-color-primary) 60%,
var(--sk-color-primary-soft)
);
color: white;
display: grid;
place-items: center;
box-shadow: 0 20px 40px color-mix(in srgb, var(--sk-color-primary) 20%, transparent);
}
.sk-connect-art svg {
width: 3.4rem;
height: 3.4rem;
}
.sk-connect-workspace {
height: min(68vh, 46rem);
margin: calc(-1 * var(--sk-space-6));
display: grid;
grid-template-columns: 19rem 1fr;
}
.sk-connect-workspace > aside {
padding: var(--sk-space-4);
border-right: 1px solid var(--sk-color-border);
overflow-y: auto;
}
.sk-connect-sidebar-header {
margin-bottom: var(--sk-space-3);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-2);
}
.sk-connect-sidebar-header .sk-pill-tabs {
min-width: 0;
margin: 0;
}
.sk-connect-filters {
margin: var(--sk-space-3) 0;
display: flex;
gap: var(--sk-space-1);
}
.sk-connect-filters button {
padding: 0.4rem 0.65rem;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--sk-color-ink-soft);
cursor: pointer;
}
.sk-connect-filters button.is-active {
background: var(--sk-color-surface-selected);
color: var(--sk-color-ink);
}
.sk-connect-workspace > aside > button {
width: 100%;
min-height: 4.8rem;
padding: var(--sk-space-3);
border: 0;
border-radius: var(--sk-radius-md);
background: transparent;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-connect-workspace > aside > button.is-active {
background: var(--sk-color-surface-selected);
}
.sk-connect-workspace > aside > button > span:nth-child(2) {
min-width: 0;
display: grid;
}
.sk-connect-workspace > aside small {
overflow: hidden;
color: var(--sk-color-ink-soft);
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-connect-workspace > aside i {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: var(--sk-color-primary);
color: white;
display: grid;
place-items: center;
font-size: var(--sk-font-size-xs);
font-style: normal;
}
.sk-connect-workspace > main {
min-width: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
.sk-connect-workspace > main > header {
min-height: 5rem;
padding: 0 var(--sk-space-4);
border-bottom: 1px solid var(--sk-color-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.sk-connect-workspace > main > header > div {
display: grid;
}
.sk-connect-workspace > main > header small {
color: var(--sk-color-ink-soft);
}
.sk-message-thread {
padding: var(--sk-space-5);
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sk-space-3);
background: var(--sk-color-canvas);
}
.sk-message-thread time {
align-self: center;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-message-thread article {
max-width: 75%;
padding: var(--sk-space-3) var(--sk-space-4);
border-radius: 1rem 1rem 1rem 0.25rem;
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-card);
display: grid;
gap: var(--sk-space-1);
}
.sk-message-thread article small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-message-thread article.is-outgoing {
align-self: flex-end;
border-radius: 1rem 1rem 0.25rem 1rem;
background: var(--sk-color-primary);
color: white;
}
.sk-message-thread article.is-outgoing small {
color: rgb(255 255 255 / 70%);
}
.sk-connect-workspace > main > footer {
padding: var(--sk-space-3);
border-top: 1px solid var(--sk-color-border);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--sk-space-3);
}
.sk-connect-workspace textarea {
min-height: 3rem;
max-height: 8rem;
resize: vertical;
}
.sk-connect-composer {
position: relative;
grid-template-columns: auto minmax(0, 1fr) auto !important;
align-items: end;
}
.sk-composer-tools {
position: relative;
display: flex;
align-items: center;
gap: var(--sk-space-1);
}
.sk-composer-tools label input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.sk-emoji-picker {
position: absolute;
z-index: 40;
bottom: calc(100% + var(--sk-space-2));
left: 0;
padding: var(--sk-space-2);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
display: flex;
}
.sk-emoji-picker button {
width: 2.5rem;
height: 2.5rem;
border: 0;
border-radius: var(--sk-radius-sm);
background: transparent;
font-size: var(--sk-font-size-xl);
cursor: pointer;
}
.sk-emoji-picker button:hover {
background: var(--sk-color-surface-hover);
}
.sk-composer-attachment {
grid-column: 1 / -1;
padding: var(--sk-space-2) var(--sk-space-3);
border-radius: var(--sk-radius-sm);
background: var(--sk-color-canvas);
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-composer-attachment svg {
width: 1rem;
}
.sk-composer-attachment button {
margin-left: auto;
border: 0;
background: transparent;
cursor: pointer;
}
.sk-connect-new {
position: absolute;
z-index: 45;
inset: 0 0 0 19rem;
padding: var(--sk-space-5);
background: var(--sk-color-surface);
overflow-y: auto;
}
.sk-connect-new > header {
margin-bottom: var(--sk-space-5);
display: flex;
align-items: center;
justify-content: space-between;
}
.sk-connect-team {
min-height: 34rem;
display: grid;
justify-items: center;
align-content: center;
gap: var(--sk-space-4);
text-align: center;
}
.sk-connect-team > p {
max-width: 36rem;
color: var(--sk-color-ink-soft);
}
.sk-connect-team .sk-settings-sections {
width: min(100%, 38rem);
text-align: left;
}
.sk-wallet-balance {
min-height: 11rem;
padding: var(--sk-space-6);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-ink);
color: white;
display: grid;
align-content: center;
}
.sk-wallet-balance strong {
font-size: var(--sk-font-size-display);
}
.sk-wallet-balance small {
color: rgb(255 255 255 / 68%);
}
.sk-wallet-rows,
.sk-account-rows {
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
overflow: hidden;
}
.sk-wallet-rows > button,
.sk-account-rows > button {
width: 100%;
min-height: 5rem;
padding: var(--sk-space-3) var(--sk-space-4);
border: 0;
border-bottom: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-wallet-rows > button:last-child,
.sk-account-rows > button:last-child {
border-bottom: 0;
}
.sk-wallet-rows > button:hover,
.sk-account-rows > button:hover {
background: var(--sk-color-surface-hover);
}
.sk-wallet-rows > button > span:first-child {
width: 2.7rem;
height: 2.7rem;
border-radius: 50%;
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
display: grid;
place-items: center;
}
.sk-wallet-rows > button > span:nth-child(2),
.sk-account-rows > button > span {
display: grid;
}
.sk-wallet-rows small,
.sk-account-rows small {
color: var(--sk-color-ink-soft);
}
.sk-account-hero {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-4);
}
.sk-account-hero > div {
min-width: 0;
display: grid;
}
.sk-account-hero > div strong,
.sk-account-hero > div small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-account-hero small {
color: var(--sk-color-ink-soft);
}
.sk-account-rows > button > svg {
color: var(--sk-color-primary);
}
.sk-account-scopes {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-2);
}
.sk-account-scopes strong {
width: 100%;
}
.sk-account-scopes code {
padding: 0.35rem 0.6rem;
border-radius: var(--sk-radius-pill);
background: var(--sk-color-canvas);
font-size: var(--sk-font-size-xs);
}
.sk-wallet-detail,
.sk-account-detail {
display: grid;
align-content: start;
gap: var(--sk-space-5);
}
.sk-wallet-detail > span {
width: 4rem;
height: 4rem;
border-radius: var(--sk-radius-lg);
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
display: grid;
place-items: center;
}
.sk-wallet-detail h2,
.sk-wallet-detail p,
.sk-account-detail h2 {
margin: 0;
}
.sk-wallet-detail p {
color: var(--sk-color-ink-soft);
}
.sk-flip-x {
transform: rotate(180deg);
}
/* Inventory workflows share one durable count/order/detail language. */
.sk-tabs--scroll {
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
}
.sk-choice-emoji {
font-size: var(--sk-font-size-2xl);
line-height: 1;
}
.sk-stocktake-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.75fr);
gap: var(--sk-space-3);
}
.sk-quick-scan {
min-height: 3rem;
padding: 0 var(--sk-space-2) 0 var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--sk-space-2);
}
.sk-quick-scan:focus-within {
border-color: var(--sk-color-primary);
box-shadow: 0 0 0 3px var(--sk-color-primary-soft);
}
.sk-quick-scan > svg {
color: var(--sk-color-ink-soft);
}
.sk-quick-scan input {
min-width: 0;
border: 0;
outline: 0;
background: transparent;
}
.sk-count-list {
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
overflow: hidden;
}
.sk-count-list > label {
min-height: 4.75rem;
padding: var(--sk-space-3) var(--sk-space-4);
border-bottom: 1px solid var(--sk-color-border-soft);
display: grid;
grid-template-columns: auto minmax(0, 1fr) 6rem;
align-items: center;
gap: var(--sk-space-3);
}
.sk-count-list > label:last-child {
border-bottom: 0;
}
.sk-count-list > label > span:nth-child(2) {
min-width: 0;
display: grid;
}
.sk-count-list > label small {
overflow: hidden;
color: var(--sk-color-ink-soft);
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-count-list input,
.sk-list-row > input[type="number"] {
width: 100%;
min-height: 2.75rem;
padding: 0 var(--sk-space-3);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-sm);
text-align: right;
}
.sk-inventory-review {
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
overflow: hidden;
}
.sk-inventory-review .sk-list-row {
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-inventory-review .sk-list-row:last-child {
border-bottom: 0;
}
.sk-shift-break {
display: grid;
grid-template-columns: minmax(7rem, 1fr) minmax(7rem, 1fr) auto auto;
align-items: end;
gap: var(--sk-space-3);
}
.sk-timesheet-entry {
display: grid;
grid-template-columns: minmax(8rem, 1.25fr) repeat(3, minmax(6rem, 1fr)) auto;
align-items: end;
gap: var(--sk-space-3);
}
.sk-section-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sk-space-4);
}
.sk-section-heading h3,
.sk-section-heading p {
margin: 0;
}
.sk-section-heading p {
color: var(--sk-color-ink-soft);
}
.sk-settings-collection {
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
overflow: hidden;
}
.sk-settings-collection > button,
.sk-form-template-row {
width: 100%;
min-height: 4.75rem;
padding: var(--sk-space-3) var(--sk-space-4);
border: 0;
border-bottom: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
}
.sk-settings-collection > button {
cursor: pointer;
}
.sk-settings-collection > button:hover {
background: var(--sk-color-surface-hover);
}
.sk-settings-collection > :last-child {
border-bottom: 0;
}
.sk-settings-collection > button > span,
.sk-form-template-row > span {
min-width: 0;
display: grid;
}
.sk-settings-collection small,
.sk-form-template-row small {
color: var(--sk-color-ink-soft);
}
.sk-hours-editor {
display: grid;
grid-template-columns: 1fr 1fr auto;
align-items: end;
gap: var(--sk-space-3);
}
.sk-permission-matrix {
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
overflow-x: auto;
}
.sk-permission-matrix > div {
min-width: 34rem;
min-height: 3.75rem;
padding: var(--sk-space-2) var(--sk-space-4);
border-bottom: 1px solid var(--sk-color-border-soft);
display: grid;
grid-template-columns: minmax(10rem, 1fr) repeat(4, 4.5rem);
align-items: center;
text-align: center;
}
.sk-permission-matrix > div:first-child {
background: var(--sk-color-canvas);
font-size: var(--sk-font-size-sm);
}
.sk-permission-matrix > div:last-child {
border-bottom: 0;
}
.sk-permission-matrix > div > strong:first-child {
text-align: left;
}
.sk-permission-matrix input {
justify-self: center;
}
.sk-form-template {
display: grid;
gap: var(--sk-space-4);
}
.sk-form-template-row label {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-audit-timeline article {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--sk-space-3);
}
.sk-audit-timeline article > span {
width: 0.75rem;
height: 0.75rem;
margin-top: 0.4rem;
border-radius: 50%;
background: var(--sk-color-border);
}
.sk-audit-timeline article > div {
display: grid;
}
.sk-audit-timeline small {
color: var(--sk-color-ink-soft);
}
.sk-status-actions {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-2);
}
.sk-date-popover {
width: min(42rem, calc(100vw - 2 * var(--sk-space-4)));
padding: var(--sk-space-4);
}
.sk-date-popover > header,
.sk-date-popover > footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-3);
}
.sk-date-popover > div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-5);
}
.sk-date-popover > footer {
margin-top: var(--sk-space-3);
justify-content: flex-end;
}
.sk-mini-month h3 {
margin: var(--sk-space-3) 0;
text-align: center;
text-transform: capitalize;
}
.sk-mini-month__weekdays,
.sk-mini-month__days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
}
.sk-mini-month__weekdays span {
padding: 0.35rem;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
text-align: center;
}
.sk-mini-month__days > button,
.sk-mini-month__days > span {
min-width: 2rem;
aspect-ratio: 1;
border: 0;
border-radius: 50%;
background: transparent;
display: grid;
place-items: center;
}
.sk-mini-month__days > button {
cursor: pointer;
}
.sk-mini-month__days > button:hover {
background: var(--sk-color-surface-hover);
}
.sk-mini-month__days > button.is-today {
box-shadow: inset 0 0 0 1px var(--sk-color-primary);
}
.sk-mini-month__days > button.is-selected {
background: var(--sk-color-primary);
color: white;
}
.sk-scope-choice {
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: grid;
gap: var(--sk-space-3);
}
.sk-scope-choice legend {
padding: 0 var(--sk-space-2);
font-weight: var(--sk-font-weight-strong);
}
.sk-scope-choice label {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-readiness-banner.is-danger {
border-color: var(--sk-color-danger);
background: var(--sk-color-danger-soft);
}
.sk-dashboard-toolbar {
margin-bottom: var(--sk-space-5);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sk-space-3);
}
.sk-dashboard-quick-start { margin-bottom: var(--sk-space-5); padding: var(--sk-space-5); border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-lg); background: var(--sk-color-surface); display: grid; gap: var(--sk-space-4); }
.sk-dashboard-quick-start > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sk-space-4); }
.sk-dashboard-quick-start h2, .sk-dashboard-quick-start p { margin: 0; }
.sk-dashboard-quick-start p { margin-top: .2rem; color: var(--sk-color-ink-soft); }
.sk-dashboard-quick-start > header > span { padding: .35rem var(--sk-space-3); border-radius: var(--sk-radius-pill); background: var(--sk-color-primary-soft); color: var(--sk-color-primary); font-size: var(--sk-font-size-sm); font-weight: var(--sk-font-weight-strong); }
.sk-dashboard-quick-start > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sk-space-3); }
.sk-dashboard-quick-start button { min-height: 5.5rem; padding: var(--sk-space-3); border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-md); background: var(--sk-color-surface); color: var(--sk-color-ink); display: grid; justify-items: center; align-content: center; gap: var(--sk-space-2); font: inherit; font-weight: var(--sk-font-weight-strong); cursor: pointer; }
.sk-dashboard-quick-start button:hover { border-color: var(--sk-color-primary); background: var(--sk-color-primary-soft); }
.sk-dashboard-quick-start button svg { color: var(--sk-color-primary); }
.sk-dashboard-toolbar .sk-pill-tabs {
flex-wrap: wrap;
min-width: 0;
margin-right: auto;
}
.sk-dashboard-toolbar .sk-field {
width: 13rem;
}
.sk-dashboard-tour {
margin-bottom: var(--sk-space-5);
padding: var(--sk-space-4) var(--sk-space-5);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: linear-gradient(120deg, var(--sk-color-primary-soft), var(--sk-color-surface));
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--sk-space-4);
}
.sk-dashboard-tour > svg {
color: var(--sk-color-primary);
}
.sk-dashboard-tour p {
margin: 0.2rem 0 0;
color: var(--sk-color-ink-soft);
}
.sk-location-status {
min-height: var(--sk-control-height);
padding: 0.35rem var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-pill);
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-location-status > svg {
width: 1rem;
height: 1rem;
}
.sk-location-status > span {
display: grid;
line-height: 1.1;
}
.sk-location-status small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-location-status.is-open {
border-color: var(--sk-color-success);
color: var(--sk-color-success);
background: var(--sk-color-success-soft);
}
.sk-location-status.is-closed {
color: var(--sk-color-ink-soft);
}
.sk-dashboard-readiness {
grid-column: 1 / -1;
padding-bottom: 1.4rem;
height: auto;
min-height: 0;
}
.sk-dashboard-operations {
grid-column: 1 / -1;
min-height: auto;
}
.sk-dashboard-operations .sk-dashboard-card__body {
height: auto;
}
.sk-dashboard-operations .sk-dashboard-shortcuts {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.sk-dashboard-readiness > .sk-readiness-progress,
.sk-dashboard-readiness > .sk-readiness-banner,
.sk-dashboard-readiness > .sk-readiness-task-list,
.sk-dashboard-readiness > .sk-button {
margin-inline: 1.4rem;
}
.sk-dashboard-readiness > .sk-readiness-progress,
.sk-dashboard-readiness > .sk-readiness-banner,
.sk-dashboard-readiness > .sk-readiness-task-list {
margin-bottom: var(--sk-space-5);
}
.sk-readiness-progress {
height: 0.5rem;
border-radius: 999px;
background: var(--sk-color-canvas);
overflow: hidden;
}
.sk-readiness-progress i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--sk-color-primary);
transition: width var(--sk-motion-slow) var(--sk-ease-emphasized);
}
.sk-readiness-task-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-4);
}
.sk-readiness-task-list > button {
min-height: 5rem;
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-readiness-task-list > button:hover {
background: var(--sk-color-surface-hover);
}
.sk-readiness-task-list > button > span {
display: grid;
gap: var(--sk-space-1);
}
.sk-readiness-task-list small {
color: var(--sk-color-ink-soft);
}
/* Full-screen partner onboarding maps five UX stages to the canonical backend readiness steps. */
.sk-onboarding {
position: fixed;
z-index: calc(var(--sk-z-overlay) + 2);
inset: 0;
background: var(--sk-color-surface);
display: grid;
grid-template: var(--sk-topbar-height) minmax(0, 1fr) 5rem / 19rem minmax(0, 1fr);
animation: sk-fade-in var(--sk-motion-base) var(--sk-ease-standard);
}
.sk-onboarding > header {
grid-column: 1 / -1;
padding: 0 var(--sk-space-5);
border-bottom: 1px solid var(--sk-color-border);
display: grid;
grid-template-columns: 1fr minmax(15rem, 25rem) 1fr;
align-items: center;
gap: var(--sk-space-6);
}
.sk-onboarding > header .sk-wordmark {
min-height: max(2.75rem, var(--sk-control-height));
}
.sk-onboarding > header .sk-icon-button {
justify-self: end;
}
.sk-onboarding-progress {
display: grid;
grid-template-columns: auto minmax(8rem, 1fr);
align-items: center;
gap: var(--sk-space-4);
}
.sk-onboarding-progress > span {
display: grid;
text-align: right;
}
.sk-onboarding-progress small {
color: var(--sk-color-ink-soft);
}
.sk-onboarding-progress > div {
height: 0.45rem;
border-radius: var(--sk-radius-pill);
background: var(--sk-color-canvas);
overflow: hidden;
}
.sk-onboarding-progress i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--sk-color-primary);
transition: width var(--sk-motion-slow) var(--sk-ease-emphasized);
}
.sk-onboarding > aside {
grid-row: 2;
padding: var(--sk-space-7) var(--sk-space-4);
border-right: 1px solid var(--sk-color-border);
overflow-y: auto;
background: var(--sk-color-canvas);
display: flex;
flex-direction: column;
}
.sk-onboarding > aside > p {
margin: 0 var(--sk-space-3) var(--sk-space-5);
color: var(--sk-color-ink-soft);
font-weight: var(--sk-font-weight-strong);
}
.sk-onboarding > aside nav {
display: grid;
gap: var(--sk-space-1);
}
.sk-onboarding > aside nav button {
width: 100%;
min-height: 4.6rem;
padding: var(--sk-space-2) var(--sk-space-3);
border: 0;
border-radius: var(--sk-radius-md);
background: transparent;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-onboarding > aside nav button:hover,
.sk-onboarding > aside nav button.is-active {
background: var(--sk-color-surface-selected);
}
.sk-onboarding > aside nav button > span:first-child {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--sk-color-canvas);
display: grid;
place-items: center;
}
.sk-onboarding > aside nav button.is-active > span:first-child {
background: var(--sk-color-primary);
color: white;
}
.sk-onboarding > aside nav button > span:nth-child(2) {
display: grid;
}
.sk-onboarding > aside nav button small {
color: var(--sk-color-ink-soft);
}
.sk-onboarding > aside nav i {
font-style: normal;
font-weight: var(--sk-font-weight-strong);
}
.sk-onboarding-help {
margin-top: auto;
padding: var(--sk-space-4);
border-radius: var(--sk-radius-md);
background: var(--sk-color-primary-soft);
display: grid;
gap: var(--sk-space-2);
}
.sk-onboarding-help > svg {
color: var(--sk-color-primary);
}
.sk-onboarding-help p {
margin: 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-onboarding > main {
grid-row: 2;
overflow-y: auto;
}
.sk-onboarding-loading {
min-height: 100%;
display: grid;
place-content: center;
justify-items: center;
gap: var(--sk-space-3);
}
.sk-onboarding-content {
width: min(100%, 59rem);
margin: 0 auto;
padding: clamp(2rem, 5vw, 5rem);
display: grid;
gap: var(--sk-space-8);
}
.sk-onboarding-heading {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: var(--sk-space-5);
}
.sk-onboarding-heading > span {
width: 4rem;
height: 4rem;
border-radius: 1.1rem;
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
display: grid;
place-items: center;
}
.sk-onboarding-heading > span svg {
width: 2rem;
height: 2rem;
}
.sk-onboarding-heading small {
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
.sk-onboarding-heading h1 {
margin: var(--sk-space-1) 0 var(--sk-space-2);
font-size: var(--sk-type-page-title);
}
.sk-onboarding-heading p {
max-width: 42rem;
margin: 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-lg);
}
.sk-onboarding-form {
display: grid;
gap: var(--sk-space-5);
}
.sk-onboarding-choices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-3);
}
.sk-onboarding-choices button {
min-height: 4.5rem;
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.sk-onboarding-choices button.is-selected {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
.sk-map-placeholder {
min-height: 10rem;
padding: var(--sk-space-6);
border: 1px dashed var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: radial-gradient(circle at 30% 30%, #eef6f1, #f5f5f7);
display: flex;
align-items: center;
justify-content: center;
gap: var(--sk-space-4);
}
.sk-map-placeholder > svg {
color: var(--sk-color-primary);
}
.sk-map-placeholder > span {
display: grid;
}
.sk-map-placeholder small {
color: var(--sk-color-ink-soft);
}
.sk-location-map {
width: 100%;
min-height: 18rem;
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface-subtle);
}
.sk-policy-result {
display: flex;
align-items: flex-start;
gap: var(--sk-space-3);
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface-hover);
}
.sk-policy-result > svg {
flex: 0 0 auto;
color: var(--sk-color-primary);
}
.sk-policy-result > span {
display: grid;
gap: var(--sk-space-1);
}
.sk-policy-result small {
color: var(--sk-color-ink-soft);
}
.sk-field > span:has(svg) {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-catalogue-variant {
display: grid;
grid-template-columns: minmax(10rem, 1.4fr) repeat(2, minmax(7rem, 0.8fr)) auto;
gap: var(--sk-space-3);
align-items: end;
padding: var(--sk-space-3) 0;
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-assignment-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-3);
}
.sk-assignment-grid button {
display: flex;
align-items: center;
gap: var(--sk-space-3);
min-height: 4.5rem;
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
text-align: left;
cursor: pointer;
}
.sk-assignment-grid button:hover {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
}
.sk-assignment-grid button > span {
display: grid;
gap: var(--sk-space-1);
}
.sk-assignment-grid small {
color: var(--sk-color-ink-soft);
}
.sk-import-dropzone:has(input[type="file"]) input {
max-width: 100%;
}
.sk-customer-address {
display: grid;
grid-template-columns: 0.75fr 1.5fr 0.65fr 1fr 1fr auto auto;
gap: var(--sk-space-3);
align-items: end;
padding: var(--sk-space-4) 0;
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-customer-contact {
display: grid;
grid-template-columns: 1fr 0.8fr 1.2fr 1fr auto;
gap: var(--sk-space-3);
align-items: end;
padding: var(--sk-space-4) 0;
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-phone-field {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: var(--sk-space-2);
}
.sk-onboarding-modules {
display: grid;
gap: var(--sk-space-3);
}
.sk-onboarding-modules article {
min-height: 7rem;
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-4);
}
.sk-onboarding-modules article > span {
width: 3rem;
height: 3rem;
border-radius: var(--sk-radius-md);
background: var(--sk-color-canvas);
color: var(--sk-color-primary);
display: grid;
place-items: center;
}
.sk-onboarding-modules p {
margin: var(--sk-space-1) 0 0;
color: var(--sk-color-ink-soft);
}
.sk-onboarding-needs {
display: grid;
gap: var(--sk-space-6);
}
.sk-onboarding-need-list {
margin-top: var(--sk-space-5);
display: grid;
border-top: 1px solid var(--sk-color-border);
}
.sk-onboarding-need-list button {
min-height: 4.75rem;
padding: var(--sk-space-3) 0;
border: 0;
border-bottom: 1px solid var(--sk-color-border);
background: var(--sk-color-surface);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-3);
text-align: left;
cursor: pointer;
}
.sk-onboarding-need-list button:hover {
background: var(--sk-color-surface-hover);
}
.sk-onboarding-need-list button.is-selected > svg,
.sk-onboarding-need-list button.is-selected > span:first-child {
color: var(--sk-color-primary);
}
.sk-onboarding-need-list button > span:first-child {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.65rem;
background: var(--sk-color-canvas);
display: grid;
place-items: center;
}
.sk-onboarding-need-list button > span:nth-child(2) {
display: grid;
gap: var(--sk-space-1);
}
.sk-onboarding-need-list button small,
.sk-onboarding-start p,
.sk-onboarding-start button small {
color: var(--sk-color-ink-soft);
}
.sk-onboarding-start {
padding-top: var(--sk-space-2);
display: grid;
gap: var(--sk-space-4);
}
.sk-onboarding-start h2,
.sk-onboarding-start p {
margin: 0;
}
.sk-onboarding-start > div:last-child {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-3);
}
.sk-onboarding-start button {
min-height: 6rem;
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
display: grid;
gap: var(--sk-space-2);
text-align: left;
cursor: pointer;
}
.sk-onboarding-start button:hover,
.sk-onboarding-start button.is-selected {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
}
.sk-import-note {
margin-top: var(--sk-space-5);
padding: var(--sk-space-5);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-canvas);
display: grid;
grid-template-columns: auto 1fr;
gap: var(--sk-space-4);
}
.sk-import-note > svg {
color: var(--sk-color-primary);
}
.sk-import-note p {
margin: var(--sk-space-1) 0 0;
color: var(--sk-color-ink-soft);
}
.sk-launch-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sk-space-3);
}
.sk-launch-summary > div {
min-height: 7rem;
padding: var(--sk-space-4);
border-radius: var(--sk-radius-md);
background: var(--sk-color-canvas);
display: grid;
align-content: center;
}
.sk-launch-summary span {
color: var(--sk-color-ink-soft);
}
.sk-launch-summary strong {
font-size: var(--sk-font-size-xl);
text-transform: capitalize;
}
.sk-readiness-checklist {
display: grid;
gap: var(--sk-space-3);
}
.sk-readiness-checklist article {
min-height: 4.5rem;
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sk-space-3);
}
.sk-readiness-checklist article.is-complete > span {
background: var(--sk-color-success);
color: white;
}
.sk-readiness-checklist article.is-blocked > span {
background: var(--sk-color-danger-soft);
color: var(--sk-color-danger);
}
.sk-readiness-checklist article > span {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--sk-color-canvas);
display: grid;
place-items: center;
}
.sk-readiness-checklist article > div {
display: grid;
}
.sk-readiness-checklist article small {
color: var(--sk-color-ink-soft);
}
.sk-readiness-checklist select {
min-height: 2.6rem;
padding: 0 var(--sk-space-3);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-pill);
background: var(--sk-color-surface);
}
.sk-onboarding > footer {
grid-column: 1 / -1;
padding: 0 var(--sk-space-5);
border-top: 1px solid var(--sk-color-border);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--sk-space-5);
background: var(--sk-color-surface);
}
.sk-onboarding > footer > span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-onboarding > footer > .sk-button:last-child {
justify-self: end;
}
.sk-form-delivery-list {
grid-column: 1 / -1;
display: grid;
gap: var(--sk-space-2);
}
.sk-form-submission {
grid-column: 1 / -1;
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
}
.sk-form-submission summary {
cursor: pointer;
font-weight: var(--sk-font-weight-strong);
}
.sk-form-submission[open] summary {
margin-bottom: var(--sk-space-4);
}
.sk-public-form-shell {
min-height: 100vh;
padding: clamp(1rem, 4vw, 4rem);
background:
radial-gradient(circle at 10% 0%, var(--sk-color-primary-soft), transparent 36rem), var(--sk-color-canvas);
display: grid;
place-items: start center;
}
.sk-public-form-card {
width: min(42rem, 100%);
margin-top: clamp(1rem, 6vh, 5rem);
padding: clamp(1.25rem, 4vw, 2.5rem);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-card-radius);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
}
.sk-public-form-card > header {
display: flex;
align-items: center;
gap: var(--sk-space-4);
padding-bottom: var(--sk-space-5);
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-public-form-card > header > span {
width: 3rem;
height: 3rem;
border-radius: var(--sk-radius-md);
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
display: grid;
place-items: center;
}
.sk-public-form-card h1,
.sk-public-form-card h2,
.sk-public-form-card p {
margin: 0;
}
.sk-public-form-card header small,
.sk-public-form-card form > p,
.sk-public-form-field > small,
.sk-public-form-security small,
.sk-public-form-success small {
color: var(--sk-color-ink-soft);
}
.sk-public-form-card form {
display: grid;
gap: var(--sk-space-5);
padding-top: var(--sk-space-5);
}
.sk-public-form-field {
display: grid;
gap: var(--sk-space-2);
font-weight: var(--sk-font-weight-strong);
}
.sk-public-form-field b {
color: var(--sk-color-danger);
}
.sk-public-form-field input,
.sk-public-form-field textarea,
.sk-public-form-field select {
width: 100%;
min-height: 3rem;
padding: 0.75rem;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
font-weight: var(--sk-font-weight-body);
}
.sk-public-form-field textarea {
resize: vertical;
}
.sk-public-form-field input:focus,
.sk-public-form-field textarea:focus,
.sk-public-form-field select:focus {
outline: 3px solid var(--sk-color-primary-soft);
border-color: var(--sk-color-primary);
}
.sk-public-form-check {
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
display: flex;
align-items: flex-start;
gap: var(--sk-space-3);
font-weight: var(--sk-font-weight-strong);
}
.sk-public-form-check input {
width: 1.25rem;
height: 1.25rem;
flex: 0 0 auto;
}
.sk-public-form-submit {
min-height: 3.25rem;
border: 0;
border-radius: var(--sk-radius-md);
background: var(--sk-color-primary);
color: white;
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-public-form-submit:disabled {
border: 1px solid var(--sk-color-disabled-border);
background: var(--sk-color-disabled-bg);
color: var(--sk-color-disabled-text);
cursor: wait;
}
.sk-public-form-security {
padding: var(--sk-space-4);
border-radius: var(--sk-radius-md);
background: var(--sk-color-primary-soft);
display: flex;
gap: var(--sk-space-3);
color: var(--sk-color-primary);
}
.sk-public-form-security span {
display: grid;
gap: var(--sk-space-1);
}
.sk-public-form-success,
.sk-public-form-error {
margin-top: var(--sk-space-6);
padding: var(--sk-space-6);
border-radius: var(--sk-radius-lg);
text-align: center;
display: grid;
justify-items: center;
gap: var(--sk-space-3);
}
.sk-public-form-success {
background: var(--sk-color-success-soft);
color: var(--sk-color-success);
}
.sk-public-form-success svg {
width: 3rem;
height: 3rem;
}
.sk-public-form-error {
background: var(--sk-color-danger-soft);
color: var(--sk-color-danger);
}
.sk-public-form-loading {
padding: var(--sk-space-7) 0;
display: grid;
gap: var(--sk-space-3);
}
.sk-public-form-loading i {
height: 3.25rem;
border-radius: var(--sk-radius-md);
background: linear-gradient(
90deg,
var(--sk-color-border-soft) 25%,
var(--sk-color-canvas) 50%,
var(--sk-color-border-soft) 75%
);
background-size: 200% 100%;
animation: sk-shimmer 1.35s linear infinite;
}
/* Leverandørkickback. Nøkkeltallene står øverst fordi spørsmålet siden svarer
på er «hvor mye har vi til gode?» — tabellen er begrunnelsen, ikke svaret. */
.sk-kickback-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1rem;
}
.sk-kickback-summary > .sk-card > b {
display: block;
margin: 0.35rem 0 0.2rem;
font-size: var(--sk-font-size-2xl);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.sk-kickback-warnings {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0.75rem 0 0;
padding: 0;
list-style: none;
}
.sk-kickback-warnings li {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.9rem;
padding: 0.55rem 0;
border-top: 1px solid var(--sk-color-border);
}
.sk-kickback-warnings li strong {
margin-left: auto;
font-variant-numeric: tabular-nums;
}
/* Kickback-skjemaene. Trinnene er en liste med to tall per rad, ikke et
skjemafelt — de leses ovenfra og ned som en trapp. */
.sk-form-grid .sk-field--wide {
grid-column: 1 / -1;
}
.sk-kickback-tiers {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 0;
padding: 0.9rem 1rem;
border: 1px solid var(--sk-color-border);
border-radius: 0.75rem;
}
.sk-kickback-tiers legend {
padding: 0 0.4rem;
font-weight: var(--sk-font-weight-strong);
}
.sk-kickback-tier-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
align-items: end;
gap: 0.6rem;
}
.sk-kickback-tier-row input {
font-variant-numeric: tabular-nums;
}
.sk-tenant-data-export {
margin-block: var(--sk-space-6);
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
width: 100%;
max-width: 48rem;
box-sizing: border-box;
min-width: 0;
overflow-wrap: anywhere;
}
.sk-tenant-data-export dd { margin-inline-start: 0; font-family:var(--sk-font-code-plain); }
.sk-tenant-data-export button { white-space: normal; max-width: 100%; }
.sk-tenant-data-export summary { cursor: pointer; min-height: 44px; display: list-item; padding-block: .5rem; }
.sk-tenant-data-export :focus-visible { outline: 3px solid var(--sk-color-focus-ring); outline-offset: 3px; }
.sk-tenant-full-export, .sk-tenant-full-export * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.sk-tenant-full-export { width: 100%; }
.sk-tenant-full-export .sk-button { white-space: normal; min-height: 44px; }
.sk-tenant-full-export input[type="file"] { width: 100%; min-height: 44px; }
/* Opt-in touch controls for the new fee and accountant flows. Preserve the
existing staff palette and density elsewhere; these actions need 44px. */
.sk-touch-controls :is(.sk-button, .sk-icon-button, .sk-checkbox-row, input:not([type="checkbox"]):not([type="radio"]), select, textarea, summary),
:root[data-staff-interface] .sk-app-shell .sk-page .sk-touch-controls :is(.sk-button, .sk-icon-button, .sk-checkbox-row, input:not([type="checkbox"]):not([type="radio"]), select, textarea, summary) {
min-height: 2.75rem;
}
/* Checkbox rows already own their label target; icon actions need a square target. */
.sk-touch-controls .sk-icon-button { min-width: 2.75rem; }
/* Shared surfaces and list rhythm for the retained Port features. */
.sk-calm-note {padding:var(--sk-space-3);background:var(--sk-color-surface-warm);color:var(--sk-color-ink);border-radius:var(--sk-radius-md);}
.sk-plain-list {list-style:none;padding:0;margin:0;display:grid;gap:var(--sk-space-4);}
.sk-report-metrics {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:var(--sk-space-4);}
.sk-surface {min-width:0;padding:var(--sk-space-4);background:var(--sk-color-surface);color:var(--sk-color-ink);border:1px solid var(--sk-color-border);border-radius:var(--sk-radius-md);}
.sk-terminal-price-level-notice {display:grid;gap:var(--sk-space-3);overflow-wrap:anywhere;}
.sk-terminal-button {min-height:44px;padding:var(--sk-space-2) var(--sk-space-4);font:inherit;color:var(--sk-color-ink);background:var(--sk-color-surface);border:1px solid var(--sk-color-border-interactive);border-radius:var(--sk-radius-md);cursor:pointer;}
.sk-terminal-button:focus-visible {outline:2px solid var(--sk-color-primary);outline-offset:2px;}
@media (max-width: 78rem) {
.sk-setup-button { min-width: 0; }
.sk-tenant-context { display: none; }
.sk-workspace-context { padding-left: var(--sk-space-3); }
.sk-tenant-switcher__label small { display: none; }
.sk-tenant-switcher__label strong { max-width: 8rem; }
}
@media (max-width: 62rem) {
:root { --sk-rail-width: 6.35rem; }
.sk-wordmark__name { display: none; }
.sk-profile-name { display: none; }
.sk-topbar-actions .sk-topbar-secondary-action { display: none; }
.sk-primary-rail button { width: calc(100% - .65rem); }
/* Below this width the sidebar does not fit, but hiding it stranded every
module's sub-pages: from /sales/daily-sales there was no route to Avtaler,
Betalinger, Gavekort and the rest. It becomes a horizontally scrollable
strip under the top bar instead, so all sub-pages stay reachable. */
.sk-secondary-nav, .sk-secondary-nav.is-collapsed {
top: var(--sk-topbar-height); left: var(--sk-rail-width); right: 0; bottom: auto;
width: auto; height: 3.5rem;
border-right: 0; border-bottom: 1px solid var(--sk-color-border);
overflow-x: auto; overflow-y: hidden;
display: flex; align-items: center;
}
.sk-secondary-nav__title {
display: none;
}
.sk-secondary-nav__title > span { display: none; }
.sk-secondary-nav nav, .sk-secondary-nav.is-collapsed nav { display: flex; flex: 0 0 auto; align-items: center; height: 100%; gap: var(--sk-space-1); padding: var(--sk-space-1) var(--sk-space-3); }
.sk-secondary-nav__group { display: flex; flex: 0 0 auto; align-items: center; gap: var(--sk-space-1); }
.sk-secondary-nav__group + .sk-secondary-nav__group { margin-top: 0; }
.sk-secondary-nav__group-title { display: none; }
.sk-secondary-nav button { white-space: nowrap; }
.sk-main.has-secondary-nav,
.sk-main.has-secondary-nav.has-collapsed-secondary {
padding-left: var(--sk-rail-width);
padding-top: calc(var(--sk-topbar-height) + 3.5rem);
}
.sk-main.has-secondary-nav { padding-left: var(--sk-rail-width); }
.sk-card-grid, .sk-dashboard-grid { grid-template-columns: 1fr; }
.sk-status-group-grid { grid-template-columns: 1fr; }
.sk-dashboard-card { min-height: 28rem; }
.sk-table-card { min-height: 0; }
.sk-dashboard-readiness { min-height: 0; height: auto; }
.sk-dashboard-operations { min-height: auto; }
.sk-dashboard-operations .sk-dashboard-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-dashboard-operations .sk-dashboard-shortcuts > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sk-setup-button { display: none; }
}
/* The calendar toolbar is wider than an iPad in landscape. Nothing in its
ancestor chain scrolls, so it widened the document and dragged the fixed
top bar with it. This rule existed at 62rem; 64rem covers 1024px too. */
@media (max-width: 64rem) {
.sk-calendar-toolbar { overflow-x: auto; justify-content: flex-start; }
.sk-calendar-toolbar__group:last-child { margin-left: auto; }
}
@media (max-width: 44rem) {
/* Long action labels remain readable with enlarged text on narrow screens. */
.sk-button { max-inline-size: 100%; white-space: normal; text-wrap: balance; padding-block: var(--sk-space-2); }
.sk-button > svg { flex-shrink: 0; }
:root { --sk-topbar-height: 4.25rem; --sk-rail-width: 0rem; }
/* Keep feedback away from the bottom selection actions on phones. A
bounded scroll region also keeps several persistent errors reachable. */
body:has(.sk-selection-bar) .sk-toast-region {
top: calc(var(--sk-topbar-height) + var(--sk-space-3));
bottom: auto;
max-height: calc(100dvh - var(--sk-topbar-height) - 6.5rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.sk-global-topbar { gap: var(--sk-space-2); padding: 0 var(--sk-space-3); }
.sk-topbar-context { gap: var(--sk-space-2); }
.sk-wordmark__name, .sk-location-context span { display: none; }
.sk-brand-logo { width: 2.15rem; height: 2.15rem; }
.sk-workspace-context, .sk-topbar-context > .sk-tenant-switcher { padding-left: var(--sk-space-2); }
.sk-tenant-switcher__trigger { min-height: 2.75rem; padding-inline: .3rem; }
.sk-tenant-switcher__label { display: none; }
.sk-tenant-switcher__menu { position: fixed; top: calc(var(--sk-topbar-height) - 1px); right: var(--sk-space-3); left: var(--sk-space-3); width: auto; max-height: calc(100vh - var(--sk-topbar-height) - 1rem); }
.sk-location-switcher > svg { display: none; }
.sk-location-switcher select { min-width: 5.5rem; max-width: 6.25rem; padding-left: var(--sk-space-2); }
.sk-profile-button { width: 2.65rem; height: 2.65rem; }
.sk-topbar-actions { gap: 0; }
.sk-topbar-actions .sk-topbar-secondary-action, .sk-topbar-report-action { display: none; }
.sk-primary-rail { inset: auto 0 0; width: 100%; height: calc(5.25rem + env(safe-area-inset-bottom)); flex-direction: row; overflow: hidden; padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom)); }
.sk-primary-rail__main { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .1rem; }
.sk-primary-rail button { width: 100%; min-width: 0; min-height: 4.55rem; }
.sk-primary-rail .is-mobile-overflow, .sk-primary-rail > .sk-primary-help { display: none; }
.sk-primary-rail .sk-mobile-more { display: grid !important; }
/* The current module lives in «Mer» when it has no tab of its own here. */
.sk-primary-rail .sk-mobile-more.is-mobile-active { background: var(--sk-color-primary); }
.sk-primary-rail .sk-mobile-more.is-mobile-active .sk-primary-rail__label { color: white; }
.sk-secondary-nav, .sk-secondary-nav.is-collapsed { height: auto; }
.sk-secondary-nav nav, .sk-secondary-nav.is-collapsed nav { display: none; }
.sk-secondary-nav__title { display: none; }
.sk-mobile-secondary-nav, .sk-secondary-nav.is-collapsed .sk-mobile-secondary-nav { width: 100%; padding: var(--sk-space-2) var(--sk-space-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sk-space-3); }
.sk-mobile-secondary-nav label { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sk-space-2); min-width: 0; }
/* Visually hidden, still the label's text: the select keeps its name. */
.sk-mobile-secondary-nav label > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sk-mobile-secondary-nav select { width: 100%; min-height: 2.75rem; }
.sk-main, .sk-main.has-secondary-nav { padding-left: 0; padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
/* Strip = 2 × space-2 padding + 2.75rem control row + 1px bottom border;
collapsed shows the same strip, so both get the same offset. */
.sk-main.has-secondary-nav,
.sk-main.has-secondary-nav.has-collapsed-secondary {
padding-top: calc(var(--sk-topbar-height) + 2 * var(--sk-space-2) + var(--sk-control-height) + 1px);
}
.sk-page { padding: 1.3rem var(--sk-space-3) 3rem; }
.sk-card--inset { padding: var(--sk-card-inset); }
.sk-card-header { flex-wrap: wrap; }
.sk-card-header > div:first-child:not(.sk-inline-actions) { flex: 1 0 100%; min-width: 0; }
.sk-card-header > .sk-inline-actions { flex-basis: 100%; }
.sk-detail-list > div { min-height: auto; grid-template-columns: 1fr; align-items: start; gap: var(--sk-space-1); }
/* Full-bleed heroes cancel the page padding with a negative margin. The
desktop values overshoot once .sk-page drops to --sk-space-3, which widens
the document and drags the fixed topbar and rail past the viewport. */
.sk-help-hero { margin-inline: 0; }
.sk-promo-hero { margin-inline: calc(-1 * var(--sk-space-3)); }
.sk-card-grid, .sk-dashboard-grid { gap: var(--sk-space-3); }
.sk-dashboard-card { min-height: 26rem; }
.sk-table-card { min-height: 0; }
.sk-dashboard-operations { min-height: auto; }
.sk-dashboard-operations .sk-dashboard-shortcuts { grid-template-columns: 1fr; }
.sk-dashboard-operations .sk-dashboard-shortcuts > button:last-child:nth-child(odd) { grid-column: auto; }
.sk-drawer { width: 100vw; }
.sk-drawer--client { width: 100vw; }
.sk-auth-card { padding: var(--sk-card-inset); }
.sk-calendar-toolbar__group:first-child .sk-toolbar-select { display: none; }
.sk-form-row, .sk-form-grid { grid-template-columns: 1fr; }
.sk-page-header { display: grid; }
.sk-page-actions, .sk-page-toolbar { flex-wrap: wrap; }
.sk-search-box--inline { width: 100%; }
.sk-rule-row { grid-template-columns: 1fr; }
.sk-primary-actions { flex-wrap: wrap; }
/* The co-pilot launcher floats fixed at bottom: 6.5rem, ~3.35rem tall — a
scrollable grid without this clearance lets the button end up sitting
directly over the last row's tap targets instead of below the content. */
.sk-schedule-board { margin-bottom: 10rem; }
}
@media (max-width: 28rem) {
/* On the narrowest phones the same action remains first in «Mer», while
the top bar keeps enough room for search, notifications and account. */
.sk-topbar-report-action { display: none; }
.sk-location-switcher { flex: 1 1 auto; }
.sk-location-switcher select { min-width: 0; width: 100%; max-width: 6.25rem; }
.sk-tenant-switcher__chevron { display: none; }
.sk-tenant-switcher__trigger { grid-template-columns: auto; }
.sk-workspace-context > .sk-tenant-switcher { flex: 0 0 auto; }
}
@media (max-width: 960px) {
.sk-drawer--client { width: min(56rem, 100vw); }
.sk-catalogue-variant, .sk-customer-address, .sk-customer-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-stat-grid--four, .sk-loyalty-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-sales-summary-grid { grid-template-columns: 1fr; }
.sk-drawer--sale { width: min(52rem, 100vw); }
.sk-sale-workspace { grid-template-columns: 1fr; overflow-y: auto; }
.sk-sale-workspace > main, .sk-sale-workspace > aside { overflow: visible; }
.sk-sale-workspace > aside { border-left: 0; border-top: 1px solid var(--sk-color-border); }
.sk-online-hero { grid-template-columns: 1fr; }
.sk-online-hero > div:first-child { justify-self: center; }
.sk-marketplace-preview { min-height: 30rem; }
.sk-store-hero { grid-template-columns: 1fr; }
.sk-promo-hero { grid-template-columns: 1fr; }
.sk-promo-hero > div:first-child { justify-self: center; }
.sk-board-columns { grid-template-columns: 1fr; }
.sk-report-groups { column-count: 1; }
.sk-report-controls { grid-template-columns: 1fr; }
.sk-report-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-onboarding { grid-template-columns: 14rem minmax(0, 1fr); }
.sk-software-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.sk-report-dimensions { grid-template-columns: 1fr; }
.sk-commission-scope { grid-template-columns: 1fr; }
.sk-catalogue-variant, .sk-customer-address, .sk-customer-contact, .sk-cart-line-editor, .sk-assignment-grid { grid-template-columns: 1fr; }
.sk-stocktake-toolbar { grid-template-columns: 1fr; }
.sk-dashboard-toolbar { align-items: stretch; flex-direction: column; }
.sk-dashboard-toolbar .sk-field { width: 100%; }
.sk-dashboard-tour { grid-template-columns: auto 1fr; }
.sk-dashboard-tour .sk-button { grid-column: 1 / -1; width: 100%; justify-content: center; }
.sk-dashboard-quick-start > header { display: grid; }
.sk-dashboard-quick-start > header > span { width: fit-content; }
.sk-dashboard-quick-start > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-dashboard-quick-start button:last-child { grid-column: 1 / -1; }
.sk-readiness-task-list { grid-template-columns: 1fr; }
.sk-date-popover > div { grid-template-columns: 1fr; }
.sk-date-popover .sk-mini-month:nth-child(2) { display: none; }
.sk-report-source { grid-template-columns: 1fr; }
.sk-shift-break, .sk-timesheet-entry { grid-template-columns: 1fr 1fr; }
.sk-hours-editor { grid-template-columns: 1fr 1fr; }
.sk-hours-editor .sk-button { grid-column: 1 / -1; }
.sk-form-template-row { grid-template-columns: 1fr; }
.sk-count-list > label { grid-template-columns: auto minmax(0, 1fr); }
.sk-count-list > label > input { grid-column: 1 / -1; }
.sk-stat-grid--four, .sk-loyalty-layout { grid-template-columns: 1fr; }
.sk-sale-category-grid, .sk-quick-sale-grid { grid-template-columns: 1fr; }
.sk-sales-datebar { overflow-x: auto; }
.sk-online-hero { padding: var(--sk-space-10) var(--sk-space-5); }
.sk-marketplace-preview { display: none; }
.sk-wizard > header { grid-template-columns: auto 1fr; }
.sk-wizard > header > div:last-child .sk-button:first-child { display: none; }
.sk-wizard-intro { grid-template-columns: 1fr; }
.sk-wizard-illustration { width: 7rem; height: 7rem; }
.sk-hours-row { grid-template-columns: 1fr 6.5rem auto 6.5rem; }
.sk-image-preview-grid, .sk-store-grid { grid-template-columns: 1fr; }
.sk-generated-link { grid-template-columns: auto 1fr; }
.sk-pricing-overview { grid-template-columns: 1fr; }
.sk-promo-art { display: none; }
.sk-help-grid { grid-template-columns: 1fr; }
.sk-support-card { align-items: flex-start; flex-direction: column; }
.sk-connect-workspace { grid-template-columns: 1fr; }
.sk-connect-workspace > aside { max-height: 15rem; border-right: 0; border-bottom: 1px solid var(--sk-color-border); }
.sk-connect-new { inset: 0; }
.sk-auth-links { align-items: flex-start; flex-direction: column; }
.sk-onboarding { grid-template: var(--sk-topbar-height) minmax(0, 1fr) 5rem / 1fr; }
.sk-onboarding > header { grid-template-columns: 1fr auto; }
.sk-onboarding > header .sk-onboarding-progress { display: none; }
.sk-onboarding > aside { display: none; }
.sk-onboarding > main { grid-column: 1; }
.sk-onboarding-content { padding: var(--sk-space-6) var(--sk-space-4); }
.sk-onboarding-heading { grid-template-columns: 1fr; }
.sk-onboarding-choices, .sk-onboarding-start > div:last-child, .sk-launch-summary { grid-template-columns: 1fr; }
.sk-onboarding-modules article { grid-template-columns: auto 1fr; }
.sk-onboarding-modules article .sk-button { grid-column: 1 / -1; }
.sk-readiness-checklist article { grid-template-columns: auto 1fr; }
.sk-readiness-checklist article select { grid-column: 1 / -1; }
.sk-onboarding > footer { padding: 0 var(--sk-space-3); grid-template-columns: auto 1fr; }
.sk-onboarding > footer > span { display: none; }
}
/* Salongterminal: iPad under 1024 px bruker den eksisterende bunnnavigasjonen.
Selve siden står stille i 100dvh; arbeidsflaten og kalenderen ruller i sine
egne bokser, slik at Chrome-kiosk aldri får en ekstra dokumentrull. */
@media (max-width: 63.99rem) {
.sk-terminal-workspace > .sk-terminal-workspace-header {
grid-template-columns: 1fr auto;
min-height: 4.25rem;
flex-basis: 4.25rem;
padding: 0 var(--sk-space-3);
}
.sk-terminal-workspace .sk-terminal-workspace-context,
.sk-terminal-workspace .sk-terminal-profile > span:nth-child(2) {
display: none;
}
.sk-terminal-workspace > .sk-terminal-workspace-layout {
display: block;
/* Fyller det som er igjen under topplinje og varsler (flex: 1 1 auto). */
height: auto;
min-height: 0;
}
.sk-terminal-workspace .sk-terminal-workspace-nav {
position: fixed;
inset: auto 0 0;
z-index: 40;
display: grid;
/* I dette iPad-vinduet er «mer»-knappen (desktop), mobil-mer-knappen og
mellomromsspennet fortsatt til stede sammen med de to primærknappene —
til sammen flere enn fem barn. Et fast repeat(5, …) presset dermed den
siste knappen ned i en egen rad med tomme kolonner ved siden av. Med
auto-flow følger antall kolonner alltid antall synlige knapper, i én rad. */
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
height: auto;
padding: var(--sk-space-2) var(--sk-space-2)
max(var(--sk-space-2), env(safe-area-inset-bottom));
overflow: visible;
border-top: 1px solid color-mix(in srgb, white 12%, transparent);
}
.sk-terminal-workspace .sk-terminal-workspace-nav button {
min-width: 0;
min-height: 4.25rem;
}
.sk-terminal-workspace .sk-terminal-workspace-nav .sk-terminal-nav-secondary {
display: none;
}
.sk-terminal-workspace .sk-terminal-workspace-nav > .sk-terminal-mobile-more-trigger {
display: grid;
}
.sk-terminal-workspace .sk-terminal-workspace-content {
height: 100%;
min-height: 0;
overflow-y: auto;
padding: var(--sk-space-4) var(--sk-space-4) 6.75rem;
}
.sk-terminal-workspace .sk-terminal-workspace-content:has(> .sk-timebook-panel) {
height: 100%;
overflow: hidden;
}
.sk-terminal-workspace .sk-timebook-panel {
display: flex;
height: 100%;
min-height: 0;
}
.sk-terminal-workspace .sk-timebook-panel > .sk-timebook {
min-height: 0;
}
.sk-terminal-workspace .sk-timebook-panel .sk-timebook-scroll {
height: 100%;
max-height: none;
}
.sk-terminal-workspace .sk-terminal-checkout-grid {
grid-template-columns: 1fr;
}
.sk-terminal-workspace .sk-terminal-today-columns {
grid-template-columns: 1fr;
}
.sk-terminal-workspace .sk-terminal-checkout-grid aside {
position: static;
}
.sk-terminal-workspace .sk-terminal-sheet-layer > .sk-timebook-sheet {
width: 100%;
border-radius: 0;
padding: var(--sk-space-5) var(--sk-space-4);
}
.sk-terminal-workspace .sk-profile-hero {
grid-template-columns: auto minmax(0, 1fr);
}
.sk-terminal-workspace .sk-profile-hero-actions {
grid-column: 1 / -1;
justify-content: flex-start;
max-width: none;
}
}
/* iPad portrett: tre profiler gir fire kompakte rader ved 12 ansatte. */
@media (max-width: 48rem) {
.sk-terminal-lock .sk-terminal-roster {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Smalere enn iPad: to kolonner bevarer navn og 44 px treffflate. */
@media (max-width: 36rem) {
.sk-terminal-lock .sk-terminal-roster {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sk-terminal-workspace .sk-terminal-workspace-content {
padding-inline: var(--sk-space-3);
}
}
/* Lav kiosk 1024 × 768 / MacBook 1440 × 719: behold alle funksjoner, men bruk
høyden på selve arbeidet. Navigasjonen og panelene er fortsatt minst 44 px. */
@media (min-width: 64rem) and (max-height: 800px) {
.sk-terminal-lock > .sk-terminal-lock-header,
.sk-terminal-workspace > .sk-terminal-workspace-header {
min-height: 4rem;
flex-basis: 4rem;
}
.sk-terminal-lock > .sk-terminal-lock-content {
padding-block: clamp(0.65rem, 2vh, 1rem);
}
.sk-terminal-lock > .sk-terminal-lock-content h1 {
font-size: var(--sk-type-page-title);
}
.sk-terminal-lock .sk-terminal-roster {
margin-top: clamp(0.65rem, 2vh, 1rem);
}
.sk-terminal-workspace > .sk-terminal-workspace-layout {
min-height: 0;
}
.sk-terminal-workspace .sk-terminal-workspace-nav {
height: 100%;
padding-block: var(--sk-space-2);
}
.sk-terminal-workspace .sk-terminal-workspace-nav button {
min-height: 3.5rem;
}
.sk-terminal-workspace .sk-terminal-workspace-content {
padding: var(--sk-space-4);
}
.sk-terminal-workspace .sk-terminal-workspace-content:has(> .sk-timebook-panel) {
height: 100%;
}
.sk-terminal-workspace .sk-terminal-summary-grid,
.sk-terminal-workspace .sk-terminal-day-toolbar {
margin-bottom: var(--sk-space-4);
}
.sk-terminal-workspace .sk-terminal-summary-grid article {
min-height: 4.75rem;
padding: var(--sk-space-3);
}
.sk-terminal-workspace .sk-terminal-today-columns {
gap: var(--sk-space-4);
}
.sk-terminal-sheet-layer > .sk-timebook-sheet {
padding-block: var(--sk-space-5);
}
}
[data-density="compact"] { --sk-control-height: 2.5rem; --sk-control-height-lg: 2.5rem; }
[data-theme="dark"] { color-scheme: dark; --sk-color-ink: #fbf8f3; --sk-color-ink-soft: #dcd7d1; --sk-color-ink-faint: #b8b3b9; --sk-color-canvas: #18171e; --sk-color-surface: #23212c; --sk-color-surface-hover: #302e39; --sk-color-surface-selected: #4f4150; --sk-color-surface-raised: #2b2934; --sk-color-surface-subtle: #302e39; --sk-color-border: #4b4852; --sk-color-border-soft: #393641; --sk-color-overlay: rgb(0 0 0 / 60%); }
/*
* Skjermklasser for terminalen — se `terminal/screenClass.ts`.
*
* Terminal-CSS-en er skrevet i rem. Det gjør at én rot-skriftstørrelse per
* klasse skalerer hele flaten proporsjonalt: tekst, avstander, kort, knapper.
* Kassa-PC-en (1024×768 touch) får den tetteste skalaen, men touch-målene
* holdes oppe med egne tokens så knappene ikke krymper under fingeren.
*
* html[data-screen="pos-1024"] 1024×768 touch-PC ved kassa
* html[data-screen="tablet-portrait"] iPad stående
* html[data-screen="tablet-landscape"] iPad liggende / små bærbare
* html[data-screen="laptop"] MacBook 1440×900 (719 px kiosk)
* html[data-screen="desktop"] alt større
*
* Overstyr per enhet med `?screen=pos-1024` (huskes) eller `?screen=auto`.
*/
:root {
--sk-terminal-touch-min: max(2.75rem, 44px);
--sk-terminal-nav-w: 9.75rem;
--sk-terminal-panel-pad: var(--sk-space-4, 1rem);
}
html[data-touch="0"] {
--sk-terminal-touch-min: max(2.25rem, 44px);
}
/* Kontraktens kontrollhøyde kan ikke være lavere enn fingermålet. */
html[data-touch="1"] {
--sk-terminal-control-h: max(3.3rem, var(--sk-terminal-touch-min));
}
/* Kontrollhøyden kan ikke være lavere enn fingermålet.
*
* `--sk-control-height` er 2,75 rem og følger derfor rotstørrelsen. På
* kassa-PC-en er roten 12,5 px, så høyden blir 34 px — mens knappene i samme
* rad krever `--sk-terminal-touch-min`, som der er låst til 44 px nettopp
* fordi en finger ikke krymper med skriften. Raden ble altså ti piksler
* lavere enn knappen den inneholdt, og «Stemple inn» stakk ut av sin egen
* boks.
*
* Gulvet settes her, i terminalen, framfor å bytte token på tjue kallsteder:
* en `max()` kan bare gjøre noe høyere, aldri lavere, så ingen flate kan bli
* trangere av dette enn den var. */
.sk-terminal-workspace,
.sk-terminal-lock {
--sk-control-height: max(2.75rem, var(--sk-terminal-touch-min));
--sk-control-height-lg: max(2.9rem, var(--sk-terminal-touch-min));
}
/* ── Kassa-PC 1024×768: liten skrift, tette avstander, smal meny ─────────── */
html[data-screen="pos-1024"] {
font-size: var(--sk-terminal-root-pos);
/* 44 px er minstemålet for en finger — i px, ikke rem, så det ikke krymper
sammen med teksten. */
--sk-terminal-touch-min: 44px;
--sk-terminal-nav-w: 6.5rem;
--sk-terminal-panel-pad: 0.75rem;
}
html[data-screen="pos-1024"] :where(.sk-terminal-workspace-nav) button {
min-height: var(--sk-terminal-touch-min);
padding-block: 0.35rem;
font-size: var(--sk-font-size-xs);
}
html[data-screen="pos-1024"] :where(.sk-terminal-workspace-nav) button svg {
width: 1.25rem;
height: 1.25rem;
}
/* Bredde og fast synlig betaling gjelder bare når menyen er en siderail.
Windows-skalering kan gi 900 px CSS-bredde selv på en 1024 px kasse-PC.
Da flytter menyen seg til bunnen og må fylle hele vinduet. */
@media (min-width: 64rem) {
html[data-screen="pos-1024"] .sk-terminal-workspace-nav {
width: var(--sk-terminal-nav-w);
min-width: var(--sk-terminal-nav-w);
padding-block: var(--sk-space-3);
}
.sk-terminal-workspace-nav > .sk-terminal-nav-pay {
/* Varsler tar høyde fra siderailen. Alle funksjoner kan rulles, mens
Betal forblir synlig nederst også på lave, brede skjermer. */
position: sticky;
bottom: 0;
z-index: 2;
flex-shrink: 0;
margin-top: auto;
}
}
/* Kassa-PC-en har 768 punkter i høyden. En arbeidsdag fra 08 til 20 er 720
minutter; 0,85 px/min gir 612 piksler, og da ser frisøren hele dagen uten
å rulle. Halvtimen blir 25,5 px — nok til navnet, og behandlingen kommer
fram når timen er en time eller mer. */
html[data-screen="pos-1024"] .sk-timebook-scroll {
--sk-timebook-minute: 0.85;
}
html[data-screen="pos-1024"] .sk-terminal-workspace-content:has(> .sk-terminal-checkout-panel) {
height: 100%;
overflow: hidden;
}
html[data-screen="pos-1024"] .sk-terminal-workspace-content:has(> .sk-terminal-work-area) {
box-sizing: border-box;
height: 100%;
overflow: hidden;
}
html[data-screen="pos-1024"] .sk-terminal-checkout-panel,
html[data-screen="pos-1024"] .sk-terminal-sale-layout {
min-height: 0;
height: 100%;
}
/* Toppstripa: enhetsnavnet og «Arbeidsflate»-etiketten tar plass fra jobben. */
html[data-screen="pos-1024"] .sk-terminal-workspace-header,
html[data-screen="pos-1024"] .sk-terminal-lock-header {
min-height: 3rem;
padding-block: 0.25rem;
}
html[data-screen="pos-1024"] .sk-terminal-panel {
padding: var(--sk-terminal-panel-pad);
}
html[data-screen="pos-1024"] h1 {
font-size: var(--sk-type-terminal-compact-title);
}
html[data-screen="pos-1024"] h2 {
font-size: var(--sk-type-terminal-compact-section);
}
html[data-screen="pos-1024"] .sk-terminal-day-status {
gap: 0.5rem;
margin-bottom: 0.5rem;
}
html[data-screen="pos-1024"] .sk-terminal-day-status-item,
html[data-screen="pos-1024"] :where(.sk-terminal-roster-control) > button {
min-height: 44px;
padding: 0.4rem 0.65rem;
}
/* Alle knapper og listerader som kan trykkes på: minst fingerhøyde.
Kontraktens knappevarianter får høyden fra --sk-terminal-control-h, som på
berøringsflater allerede er max(3.3rem, fingermålet) — de skal ikke
trekkes NED til fingermålet her. */
html[data-touch="1"] .sk-terminal-primary,
html[data-touch="1"] .sk-terminal-secondary,
html[data-touch="1"] .sk-terminal-link,
html[data-touch="1"] .sk-terminal-danger,
html[data-touch="1"] .sk-terminal-danger-outline,
html[data-touch="1"] .sk-terminal-icon-button {
min-height: var(--sk-terminal-control-h);
}
html[data-touch="1"] .sk-terminal-nav-primary,
html[data-touch="1"] .sk-terminal-nav-secondary,
html[data-touch="1"] :where(.sk-terminal-catalog-results) button {
min-height: var(--sk-terminal-touch-min);
}
html[data-touch="1"] .sk-terminal-search-control input {
min-height: max(44px, var(--sk-terminal-touch-min));
}
/* ── Nettbrett stående: én kolonne, litt mindre skrift ───────────────────── */
html[data-screen="tablet-portrait"] {
font-size: var(--sk-terminal-root-tablet);
--sk-terminal-touch-min: 44px;
}
html[data-screen="tablet-landscape"] {
font-size: var(--sk-terminal-root-tablet);
--sk-terminal-touch-min: 44px;
--sk-terminal-nav-w: 8rem;
}
html[data-screen="laptop"] {
font-size: var(--sk-terminal-root-laptop);
}
/* Dra-for-å-bekrefte: nettleseren skal aldri tolke draget som rulling. */
.sk-slide-confirm,
.sk-slide-confirm-knob {
touch-action: none;
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none;
-webkit-tap-highlight-color: transparent;
}
.sk-slide-confirm-fallback {
display: flex;
justify-content: flex-end;
margin-top: 0.4rem;
}
:where(.sk-slide-confirm-fallback) button {
min-height: var(--sk-terminal-touch-min);
}
.sk-terminal-walkin-picker {
margin: var(--sk-space-3, 0.75rem) 0;
padding: var(--sk-space-3, 0.75rem);
border: 1px solid var(--sk-color-border, rgba(0, 0, 0, 0.12));
border-radius: var(--sk-terminal-radius, 0.75rem);
}
/* Kontraktens to tokener (docs/architecture/ui/TERMINAL-DESIGN-CONTRACT.md): én høyde for
alle knapper og felt, ett hjørne. Berøringsflater hever høyden i
00-screen-classes.css (`html[data-touch="1"]`). Kort bruker --sk-radius-lg. */
:root {
--sk-terminal-control-h: 3.3rem;
--sk-terminal-radius: 0.8rem;
/* Displayoverskrift: den ENE store tittelen på en flate uten arbeidsflate
(aktivering, lås). Panelene bruker --sk-font-size-2xl fra 00-tokens.css. */
--sk-font-size-3xl: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}
.sk-terminal-loading,
.sk-terminal-enrollment,
.sk-terminal-lock,
.sk-terminal-workspace,
.sk-customer-display {
min-height: 100dvh;
background: var(--sk-color-canvas);
color: var(--sk-color-ink);
}
.sk-terminal-loading,
.sk-terminal-enrollment {
display: grid;
grid-template-columns: minmax(0, 1fr);
place-items: center;
padding: 2rem;
}
.sk-terminal-loading {
align-content: center;
gap: 1rem;
}
.sk-terminal-loading p {
color: var(--sk-color-ink-soft);
}
.sk-terminal-mark {
position: relative;
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 1.15rem;
background: var(--sk-color-primary);
color: white;
font-size: var(--sk-font-size-2xl);
font-weight: var(--sk-font-weight-strong);
letter-spacing: -0.08em;
box-shadow: 0 14px 30px
color-mix(in srgb, var(--sk-color-primary) 24%, transparent);
}
.sk-terminal-mark.is-small {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.8rem;
font-size: var(--sk-font-size-lg);
box-shadow: none;
}
.sk-terminal-enrollment-card {
width: min(31rem, 100%);
min-width: 0;
padding: 2.5rem;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-card-radius);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
}
/* Merket på aktiveringskortet er merkeraden (ring + «min rutine»), ikke en
løs flis: samme merke som låseskjermen og arbeidsflaten. */
.sk-terminal-enrollment-card .sk-terminal-brand {
margin-bottom: 2rem;
}
.sk-terminal-enrollment-card .sk-terminal-brand strong {
font-size: var(--sk-font-size-xl);
letter-spacing: -0.02em;
}
.sk-terminal-eyebrow {
margin: 0 0 0.45rem;
color: var(--sk-color-primary);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sk-terminal-enrollment-card h1 {
/* Kundeskjermen har ikke personalets grensesnitt-attributt, så overskriften falt
tilbake til serif-token. Aktiveringskortet skal se likt ut for begge modusene. */
font-family: var(--sk-font);
margin: 0 0 0.85rem;
font-size: var(--sk-type-page-title);
letter-spacing: -0.04em;
}
.sk-terminal-enrollment-card > p:not(.sk-terminal-eyebrow, .sk-terminal-help) {
color: var(--sk-color-ink-soft);
line-height: 1.55;
}
.sk-terminal-enrollment-form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.7rem;
margin-top: 2rem;
}
.sk-terminal-enrollment-form label {
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-enrollment-form input,
.sk-terminal-inline-fields input {
min-height: var(--sk-terminal-control-h);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
padding: 0 1rem;
background: var(--sk-color-surface);
color: inherit;
font: inherit;
outline: none;
transition:
border-color var(--sk-motion-fast),
box-shadow var(--sk-motion-fast);
}
.sk-terminal-enrollment-form input {
width: 100%;
min-width: 0;
text-align: center;
font-size: var(--sk-font-size-xl);
font-weight: var(--sk-font-weight-strong);
letter-spacing: 0.14em;
}
.sk-terminal-enrollment-form input:focus,
.sk-terminal-inline-fields input:focus {
border-color: var(--sk-color-primary);
box-shadow: 0 0 0 3px var(--sk-color-primary-soft);
}
/* Knappevariantene (.sk-terminal-primary, -secondary, -link, -danger,
-danger-outline, -icon-button) er definert i 01a-contract.css. */
/* «Opprett ny kunde» står under søketreffene, ikke i en verktøylinje: den er
svaret når søket ikke ga det man lette etter, og hører til der man ser. */
.sk-new-customer-cta {
width: 100%;
margin-top: var(--sk-space-3);
}
/* Kunden fantes fra før. Raden ser ut som et søketreff fordi det er nettopp
det den er — treffet søket burde gitt. */
.sk-terminal-duplicate-hit {
display: flex;
gap: var(--sk-space-3);
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: var(--sk-space-2);
border: 1px solid var(--sk-color-primary);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-3) var(--sk-space-4);
background: var(--sk-color-primary-soft);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.sk-terminal-duplicate-hit > span {
display: grid;
min-width: 0;
}
.sk-terminal-duplicate-hit small {
color: var(--sk-color-ink-soft);
}
.sk-terminal-duplicate-hit > small {
flex: none;
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-help {
margin: 1.25rem 0 0;
color: var(--sk-color-ink-faint);
font-size: var(--sk-type-display-small);
line-height: 1.5;
}
.sk-terminal-error {
margin: 0.25rem 0;
color: var(--sk-color-danger);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
/* De to skjermene man møter UTENFOR arbeidsflaten — aktivering og lås — deler
én flate. Fargene er tokener, ikke en engangsgradient. */
.sk-terminal-enrollment,
.sk-terminal-lock {
background: linear-gradient(
135deg,
var(--sk-color-primary-soft) 0%,
var(--sk-color-canvas) 45%,
var(--sk-color-signal-soft) 100%
);
}
.sk-terminal-lock {
display: flex;
height: 100dvh;
flex-direction: column;
overflow: hidden;
background: linear-gradient(
135deg,
var(--sk-color-primary-soft) 0%,
var(--sk-color-canvas) 45%,
var(--sk-color-signal-soft) 100%
);
}
.sk-terminal-lock-header,
.sk-terminal-workspace-header,
.sk-customer-display > header {
flex: 0 0 auto;
min-height: 5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 2rem;
border-bottom: 1px solid
color-mix(in srgb, var(--sk-color-ink) 8%, transparent);
background: color-mix(in srgb, var(--sk-color-surface) 88%, transparent);
backdrop-filter: blur(18px);
}
.sk-terminal-lock-header > div,
.sk-terminal-lock-header > span,
.sk-terminal-brand,
.sk-customer-display > header > div {
display: flex;
align-items: center;
gap: 0.75rem;
}
.sk-terminal-lock-header > span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-terminal-lock-actions,
.sk-terminal-lock-device {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-terminal-lock-device {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-terminal-lock-content {
display: flex;
min-height: 0;
flex: 1 1 auto;
flex-direction: column;
width: min(72rem, calc(100% - 3rem));
margin: 0 auto;
padding: clamp(1rem, 3vh, 3.5rem) 0;
text-align: center;
}
.sk-terminal-lock-content h1 {
margin: 0.25rem 0 0.55rem;
/* «Hvem er du?» er en kort kontrollsetning, ikke en sidetittel; den fylte for mye av iPad-skjermen. */
font-size: var(--sk-type-section-title);
letter-spacing: -0.055em;
}
.sk-terminal-lock-content > p:not(.sk-terminal-eyebrow, .sk-terminal-error) {
margin-block: 0;
color: var(--sk-color-ink-soft);
}
.sk-terminal-roster {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(clamp(9rem, 16vw, 11rem), 1fr)
);
/* Radene skal følge innholdet, ikke skjermhøyden.
Med `1fr`-rader og `flex: 1 1 auto` strakk rutenettet seg over all ledig
plass og delte den likt mellom radene. Ti frisører ble til to rader som
hver fylte en halv skjerm — kortene så høye ut fordi skjermen var høy,
ikke fordi det sto noe i dem.
Minimumshøyden står igjen fordi dette er en berøringsskjerm: kortet er en
treffflate før det er et kort. */
grid-auto-rows: minmax(9.5rem, auto);
align-content: start;
min-height: 0;
flex: 0 1 auto;
gap: clamp(0.6rem, 1.6vh, 1rem);
margin-top: clamp(1rem, 3vh, 2.8rem);
}
:where(.sk-terminal-roster) > button {
position: relative;
display: flex;
min-height: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(0.3rem, 1vh, 0.75rem);
border: 1px solid var(--sk-color-border-soft);
border-radius: 1.15rem;
padding: clamp(0.6rem, 1.6vh, 1.15rem);
background: var(--sk-color-surface);
color: inherit;
font: inherit;
cursor: pointer;
box-shadow: var(--sk-shadow-card);
transition:
border-color var(--sk-motion-base),
box-shadow var(--sk-motion-base),
transform var(--sk-motion-base);
}
:where(.sk-terminal-roster) > button:hover:not(:disabled) {
transform: translateY(-3px);
border-color: var(--sk-color-primary);
box-shadow: 0 16px 38px
color-mix(in srgb, var(--sk-color-ink) 10%, transparent);
}
:where(.sk-terminal-roster) > button:disabled {
border-color: var(--sk-color-disabled-border);
background: var(--sk-color-disabled-bg);
color: var(--sk-color-disabled-text);
cursor: not-allowed;
}
.sk-terminal-roster small {
color: var(--sk-color-ink-soft);
}
.sk-terminal-roster i {
position: absolute;
top: 0.9rem;
right: 0.9rem;
width: 0.65rem;
height: 0.65rem;
border-radius: 50%;
background: var(--sk-color-success);
box-shadow: 0 0 0 4px var(--sk-color-success-soft);
}
.sk-terminal-avatar {
position: relative;
display: grid;
place-items: center;
width: clamp(2.75rem, 7vh, 4.35rem);
height: clamp(2.75rem, 7vh, 4.35rem);
border-radius: 50%;
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary-active);
font-size: var(--sk-font-size-xl);
font-weight: var(--sk-font-weight-strong);
overflow: hidden;
}
.sk-terminal-avatar > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
.sk-terminal-avatar.is-small {
width: 2.55rem;
height: 2.55rem;
flex: 0 0 auto;
font-size: var(--sk-font-size-xs);
}
.sk-terminal-lock > footer {
flex: 0 0 auto;
padding: clamp(0.55rem, 1.5vh, 1.2rem);
color: var(--sk-color-ink-faint);
font-size: var(--sk-font-size-xs);
text-align: center;
}
.sk-terminal-pin-layer {
position: fixed;
inset: 0;
z-index: 100;
display: grid;
place-items: center;
padding: 1.5rem;
background: var(--sk-color-overlay);
backdrop-filter: blur(8px);
animation: sk-fade-in var(--sk-motion-base) var(--sk-ease-standard);
}
/* Bare PIN-dialogen kan rulle hvis kortet er høyere enn skjermen. De andre arkene
deler grunnklassen og skal ikke bli rullbare lag. På touch uten uskarphet: et fixed
lag med backdrop-filter som også ruller er det WebKit på iPad håndterer dårligst. */
.sk-terminal-pin-layer.is-pin {
overflow-y: auto;
overscroll-behavior: contain;
padding: max(1rem, var(--sk-safe-top)) max(1rem, var(--sk-safe-right)) max(1rem, var(--sk-safe-bottom)) max(1rem, var(--sk-safe-left));
}
.sk-terminal-pin-layer.is-pin {
padding-inline: max(clamp(var(--sk-space-1), calc(100vw - 18rem), var(--sk-space-4)), var(--sk-safe-left), var(--sk-safe-right));
}
html[data-touch="1"] .sk-terminal-pin-layer.is-pin {
backdrop-filter: none;
}
html[data-touch="1"] :where(.sk-terminal-keypad) button {
min-width: 44px;
padding-inline: 0;
min-height: max(3.7rem, 56px);
}
.sk-terminal-pin-card {
position: relative;
width: min(24rem, 100%);
margin: auto;
padding: 1.5rem 2rem;
padding-inline: clamp(var(--sk-space-1), calc(100vw - 18rem), var(--sk-space-8));
border-radius: var(--sk-card-radius);
background: var(--sk-color-surface);
text-align: center;
box-shadow: 0 28px 80px rgb(35 33 44 / 25%);
animation: sk-modal-in var(--sk-motion-slow) var(--sk-ease-emphasized);
}
.sk-terminal-pin-card > .sk-terminal-avatar {
margin: 0.25rem auto 1rem;
}
.sk-terminal-pin-card h2 {
margin: 0;
font-size: var(--sk-type-section-title);
}
.sk-terminal-pin-card > p:not(.sk-terminal-error) {
margin: 0.35rem 0 1.1rem;
color: var(--sk-color-ink-soft);
}
.sk-terminal-language-switch {
display: inline-flex;
flex-shrink: 0;
overflow: hidden;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-pill);
background: var(--sk-color-surface);
}
:where(.sk-terminal-language-switch) button {
display: grid;
min-width: 2.75rem;
min-height: 2.75rem;
place-items: center;
border: 0;
padding: 0 var(--sk-space-2);
background: transparent;
color: var(--sk-color-ink-soft);
font: inherit;
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
:where(.sk-terminal-language-switch) button + button {
border-left: 1px solid var(--sk-color-border-soft);
}
:where(.sk-terminal-language-switch) button.is-active {
background: var(--sk-color-primary);
color: white;
}
:where(.sk-terminal-language-switch) button:disabled {
cursor: wait;
opacity: 0.7;
}
.sk-terminal-pin-card > .sk-terminal-language-switch {
margin: 0 auto;
}
/* surface-hover mot kortets surface er 1.09:1 – berøringsmålet var praktisk talt
usynlig. Legger på border-interactive (3.51:1) så treffflaten kan ses i sterkt lys. */
.sk-terminal-back {
min-width: 44px;
min-height: 44px;
position: absolute;
top: 1rem;
left: 1rem;
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
border: 1px solid var(--sk-color-border-interactive);
border-radius: 50%;
background: var(--sk-color-surface-hover);
cursor: pointer;
}
/* «Bytt frisør»: en tydelig knapp med navn og stort trykkmål i stedet for en 36 px pil. */
.sk-terminal-back.is-labeled {
display: inline-flex;
align-items: center;
gap: 0.2rem;
width: auto;
height: auto;
/* Minste fingermål, ikke mer: knappen er en liten utvei, ikke hovedhandlingen. */
min-height: max(44px, var(--sk-terminal-touch-min, 44px));
padding: 0 0.8rem 0 0.4rem;
border-radius: var(--sk-radius-pill, 999px);
color: var(--sk-color-ink-soft);
font: inherit;
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-medium);
}
.sk-terminal-back.is-labeled svg {
width: 1.1rem;
height: 1.1rem;
}
.sk-terminal-pin-card > .sk-terminal-back.is-labeled + .sk-terminal-avatar {
margin-top: 2.75rem;
}
.sk-terminal-pin-dots {
display: flex;
justify-content: center;
gap: 0.65rem;
min-height: 1.05rem;
margin: 1.2rem 0;
}
/* Uutfylte PIN-prikker er eneste tilbakemelding på at et siffer er registrert.
disabled-border #b8b3b9 mot hvitt kort gir 2.06:1 – under 3:1-kravet for grafiske
elementer. border-interactive #8c878f gir 3.51:1 og er samme token som input-rammene. */
.sk-terminal-pin-dots span {
width: 0.72rem;
height: 0.72rem;
border: 1.5px solid var(--sk-color-border-interactive);
border-radius: 50%;
transition:
background var(--sk-motion-fast),
transform var(--sk-motion-fast);
}
.sk-terminal-pin-dots span.is-filled {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary);
transform: scale(1.08);
}
.sk-terminal-keypad {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(var(--sk-space-1), calc(100vw - 18rem), var(--sk-space-3));
margin: 0.75rem 0 1rem;
}
/* Tasteflaten (canvas #fbf8f3) mot kortet (surface #ffffff) er bare 1.06:1, så rammen er
det eneste som viser hvor tasten slutter. border-soft ga 1.24:1; border-interactive gir
3.51:1 og oppfyller 3:1 for UI-komponenter. */
:where(.sk-terminal-keypad) button {
min-height: 3.7rem;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
background: var(--sk-color-canvas);
color: inherit;
font: inherit;
font-size: var(--sk-font-size-xl);
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
:where(.sk-terminal-keypad) button:active {
background: var(--sk-color-primary-soft);
transform: scale(0.97);
}
:where(.sk-terminal-keypad) button.is-muted {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-terminal-keypad button.sk-terminal-key-delete {
font-size: var(--sk-type-keypad-delete);
line-height: 1;
}
.sk-terminal-lock-content > .sk-terminal-forgot {
align-self: center;
}
.sk-terminal-forgot {
display: inline-block;
margin-top: 0.75rem;
padding: 0.6rem 1rem;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm, 0.95rem);
text-decoration: underline;
}
.sk-terminal-pin-card > .sk-terminal-primary {
width: 100%;
}
.sk-terminal-workspace {
min-width: 60rem;
}
.sk-terminal-workspace-header {
position: sticky;
top: 0;
z-index: 20;
min-height: 4.8rem;
padding: 0 1.35rem;
}
.sk-terminal-brand > span:last-child {
padding-left: 0.75rem;
border-left: 1px solid var(--sk-color-border);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-terminal-workspace-header nav {
display: flex;
align-self: stretch;
gap: 0.25rem;
/* Fanene har vokst fra tre til seks. Uten dette presses de sammen på de
smaleste terminalskjermene, og den siste fanen blir uleselig eller faller
utenfor. Vannrett rulling framfor ombrekking: en fanerad som plutselig blir
to linjer flytter alt innholdet under seg nedover midt i arbeidsdagen. */
overflow-x: auto;
scrollbar-width: thin;
}
:where(.sk-terminal-workspace-header nav) button {
/* Fanene skal beholde bredden sin og rulle, ikke krympe til uleselige. */
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0.5rem;
border: 0;
border-bottom: 2px solid transparent;
padding: 0 1.2rem;
background: transparent;
color: var(--sk-color-ink-soft);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
:where(.sk-terminal-workspace-header nav) button svg {
width: 1.15rem;
}
:where(.sk-terminal-workspace-header nav) button.is-active {
border-bottom-color: var(--sk-color-primary);
color: var(--sk-color-ink);
}
.sk-terminal-profile {
display: flex;
align-items: center;
gap: 0.65rem;
border: 0;
border-radius: var(--sk-terminal-radius);
padding: 0.35rem 0.55rem;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.sk-terminal-profile:hover {
background: var(--sk-color-surface-hover);
}
.sk-terminal-profile > span:nth-child(2) {
display: grid;
gap: 0.1rem;
}
.sk-terminal-profile small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-terminal-profile > svg {
width: 1rem;
color: var(--sk-color-ink-soft);
}
.sk-terminal-global-error {
width: min(76rem, calc(100% - 3rem));
margin: 1rem auto 0;
border-radius: var(--sk-radius-md);
padding: 0.8rem 1rem;
background: var(--sk-color-danger-soft);
color: var(--sk-color-danger);
}
.sk-terminal-panel {
width: min(76rem, calc(100% - 3rem));
margin: 0 auto;
padding: 2.4rem 0 4rem;
}
.sk-terminal-day-toolbar {
display: grid;
grid-template-columns: var(--sk-terminal-control-h) 1fr var(--sk-terminal-control-h);
align-items: center;
gap: 1rem;
margin-bottom: 1.8rem;
text-align: center;
}
.sk-timebook-day-toolbar {
align-items: center;
}
/* Norske ukedager og måneder skrives med liten bokstav; bare første tegn i
strengen skal opp («Tirsdag 1. september», ikke «… September»). */
.sk-terminal-day-toolbar h1 {
margin: 0;
font-size: var(--sk-type-page-title);
letter-spacing: -0.04em;
}
.sk-terminal-day-toolbar h1::first-letter {
text-transform: uppercase;
}
/* Pilknappene lå som hvit flate på canvas med border #dcd7d1 = 1.35:1. border-interactive
gir 3.32:1 mot canvas. background: white → surface-tokenet (identisk i lyst tema). */
:where(.sk-terminal-day-toolbar) > button {
display: grid;
place-items: center;
width: var(--sk-terminal-control-h);
height: var(--sk-terminal-control-h);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
background: var(--sk-color-surface);
color: inherit;
cursor: pointer;
}
.is-forward {
transform: rotate(180deg);
}
/* Nøkkeltall (.sk-terminal-summary-grid) og panelhodet
(.sk-terminal-section-heading) er definert i 01a-contract.css. */
.sk-terminal-appointments {
overflow: hidden;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-card);
}
.sk-terminal-appointments article {
display: grid;
grid-template-columns: 5rem 1fr auto;
align-items: center;
gap: 1rem;
min-height: 5.3rem;
padding: 0.9rem 1.15rem;
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-terminal-appointments article.is-roster {
grid-template-columns: 5rem 2.55rem minmax(0, 1fr) auto;
}
.sk-terminal-appointments article:last-child {
border-bottom: 0;
}
.sk-terminal-appointments time {
font-size: var(--sk-font-size-lg);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-appointments article > div {
display: grid;
gap: 0.25rem;
}
.sk-terminal-appointments article > div span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-terminal-appointments article.sk-timesheet-day {
grid-template-columns: 5rem minmax(0, 1fr) auto;
}
.sk-timesheet-day-summary {
display: grid;
min-width: 0;
gap: var(--sk-space-1);
}
.sk-timesheet-day-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sk-space-2);
}
:where(.sk-timesheet-day-actions) button {
min-height: var(--sk-control-height);
}
.sk-timesheet-day-editor {
display: grid;
grid-column: 1 / -1;
grid-template-columns: minmax(12rem, 0.8fr) minmax(14rem, 1.2fr) auto;
align-items: end;
gap: var(--sk-space-3);
margin-top: 0;
border-top: 1px solid var(--sk-color-border-soft);
padding-top: var(--sk-space-4);
}
.sk-timesheet-day-editor fieldset {
min-width: 0;
margin: 0;
border: 0;
padding: 0;
}
.sk-timesheet-day-editor legend,
.sk-timesheet-day-editor label > span {
margin-bottom: var(--sk-space-1);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-timesheet-duration-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-2);
}
.sk-timesheet-duration-fields label,
.sk-timesheet-note-field {
display: grid;
min-width: 0;
}
.sk-timesheet-day-editor input {
min-width: 0;
}
.sk-timesheet-field-help {
margin-top: var(--sk-space-1);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
line-height: 1.4;
}
.sk-timesheet-editor-actions {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-timesheet-absence-fields {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sk-timesheet-day-error {
grid-column: 1 / -1;
}
.sk-timesheet-absence-section {
display: grid;
gap: var(--sk-space-4);
margin-top: var(--sk-space-8);
}
.sk-timesheet-absence-section > .sk-terminal-section-heading {
margin-bottom: 0;
}
.sk-timesheet-labelled-field {
display: grid;
min-width: 0;
gap: var(--sk-space-1);
}
.sk-timesheet-labelled-field > span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-timesheet-labelled-field > span small {
font-weight: var(--sk-font-weight-medium);
}
.sk-timesheet-sick-fields {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
}
.sk-timesheet-absence-form {
display: grid;
gap: var(--sk-space-4);
}
/* Merkelapper (.sk-terminal-status) og tomtilstand (.sk-terminal-empty-card)
er definert i 01a-contract.css. */
.sk-terminal-product-search {
display: grid;
gap: var(--sk-space-3);
margin-top: var(--sk-space-6);
}
.sk-terminal-product-search__label {
display: grid;
gap: var(--sk-space-1);
width: fit-content;
color: var(--sk-color-ink);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-product-search__label small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-medium);
}
/* Skannefeilen står ved feltet den kom fra, ikke i statuslinja øverst — den
er opptatt av kladdefeilen så lenge kladden ikke lot seg lagre. Samme
feilform som ellers (.sk-terminal-error), bare plassert her. */
.sk-terminal-scan-hint {
margin: calc(var(--sk-space-2) * -1) 0 0;
}
/* ── Felt og søk (kontrakt, del 4) ─────────────────────────────────────────
Samme høyde (--sk-terminal-control-h) og hjørne (--sk-terminal-radius) på
tekst-/datofeltet og på søkefeltet med ikon. .sk-terminal-order-search er
alias for søkefeltet og skal ikke brukes i ny kode. */
.sk-terminal-search {
width: 100%;
min-width: 0;
min-height: var(--sk-terminal-control-h);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
padding: 0 var(--sk-space-4);
background: var(--sk-color-surface);
color: inherit;
font: inherit;
}
.sk-terminal-search:focus {
border-color: var(--sk-color-primary);
box-shadow: 0 0 0 3px var(--sk-color-primary-soft);
}
.sk-terminal-order-search,
.sk-terminal-search-control {
display: flex;
align-items: center;
gap: var(--sk-space-3);
width: 100%;
min-width: 0;
min-height: var(--sk-terminal-control-h);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
padding: 0 var(--sk-space-4);
background: var(--sk-color-surface);
color: inherit;
font: inherit;
cursor: text;
transition:
border-color var(--sk-motion-fast),
box-shadow var(--sk-motion-fast);
}
.sk-terminal-order-search:focus-within,
.sk-terminal-search-control:focus-within {
border-color: var(--sk-color-primary);
box-shadow: 0 0 0 3px var(--sk-color-primary-soft);
}
.sk-terminal-order-search svg,
.sk-terminal-search-control svg {
flex: none;
width: 1.2rem;
color: var(--sk-color-ink-faint);
}
.sk-terminal-order-search input,
.sk-terminal-search-control input {
width: 100%;
min-width: 0;
min-height: max(44px, calc(var(--sk-terminal-control-h) - 2px));
flex: 1;
border: 0;
border-radius: 0;
padding: 0;
background: transparent;
color: inherit;
font: inherit;
box-shadow: none !important;
}
/* Nettleserens plassholderfarge følger ikke mørkt tema av seg selv. */
.sk-terminal-search::placeholder,
.sk-terminal-order-search input::placeholder,
.sk-terminal-search-control input::placeholder {
color: var(--sk-color-ink-faint);
opacity: 1;
}
.sk-terminal-order-search input:focus,
.sk-terminal-search-control input:focus {
outline: none;
}
.sk-terminal-catalog-results {
display: grid;
max-height: 28rem;
margin: var(--sk-space-4) 0 0;
padding: 0;
overflow-y: auto;
list-style: none;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
}
.sk-terminal-catalog-results li + li {
border-top: 1px solid var(--sk-color-border-soft);
}
/* Treffet er en rad-knapp: mål og rytme her, farger i :where-regelen under
så en variantklasse aldri taper mot containeren. */
:where(.sk-terminal-catalog-results) button {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--sk-space-4);
width: 100%;
min-height: 5rem;
padding: var(--sk-space-4) var(--sk-space-5);
text-align: left;
cursor: pointer;
}
:where(.sk-terminal-catalog-results) button {
border: 0;
background: transparent;
color: inherit;
font: inherit;
}
:where(.sk-terminal-catalog-results) button:hover {
background: var(--sk-color-surface-hover);
}
.sk-terminal-catalog-result__main {
display: flex;
align-items: center;
gap: var(--sk-space-4);
min-width: 0;
}
.sk-terminal-catalog-result__image {
flex: none;
width: 3.5rem;
height: 3.5rem;
border-radius: var(--sk-radius-md);
object-fit: cover;
background: var(--sk-color-surface-hover);
}
.sk-terminal-catalog-result__content {
display: grid;
min-width: 0;
gap: var(--sk-space-2);
}
.sk-terminal-catalog-result__title,
.sk-terminal-catalog-result__meta {
overflow-wrap: anywhere;
}
.sk-terminal-catalog-result__title {
font-size: var(--sk-font-size-md);
line-height: 1.3;
}
.sk-terminal-catalog-result__meta {
display: flex;
align-items: center;
gap: var(--sk-space-2);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
line-height: 1.4;
}
.sk-terminal-catalog-result__price {
justify-self: end;
padding-left: var(--sk-space-4);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.sk-terminal-customer-list {
margin-top: 1rem;
padding: 0;
overflow: hidden;
list-style: none;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
}
/* Kunderegisteret: en oversikt man leter i, ikke en kø man går gjennom.
Én kolonne ga sju kunder på skjermen og et bredt tomrom til høyre.
`auto-fit` gir to eller tre kolonner der det er plass, og faller til én
på kassa-PC-en uten en egen regel. Radene er egne kort med luft mellom seg
(samme form som Oppgjør-radene); et rutenett med 1px-gap over en grå flate
ga grå fyllceller der siste rad ikke fylte kolonnene. */
.sk-terminal-customer-list.is-directory {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
gap: var(--sk-space-3);
overflow: visible;
border: 0;
border-radius: 0;
background: none;
}
/* Kunderaden: mål og rytme i den første regelen, farger og ramme i
:where-regelen så en variantklasse aldri taper mot containeren. */
:where(.sk-terminal-customer-list) > button,
.sk-terminal-customer-result {
display: flex;
width: 100%;
min-height: 4.75rem;
align-items: center;
gap: 0.8rem;
padding: var(--sk-space-3) var(--sk-space-4);
text-align: left;
cursor: pointer;
}
:where(.sk-terminal-customer-list) > button,
.sk-terminal-customer-result {
border: 0;
border-bottom: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
color: inherit;
font: inherit;
}
:where(.sk-terminal-customer-list) > button:hover,
.sk-terminal-customer-result:hover {
background: var(--sk-color-surface-hover);
}
:where(.sk-terminal-customer-list) > button:last-child,
.sk-terminal-customer-list > li:last-child .sk-terminal-customer-result {
border-bottom: 0;
}
/* Registeret har rutenett-linjer i stedet for radskiller; står etter
grunnregelen fordi begge nå har samme (lave) spesifisitet. */
:where(.sk-terminal-customer-list.is-directory) > button {
min-height: var(--sk-terminal-touch-min);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
}
:where(.sk-terminal-customer-list) > button > span:nth-child(2),
.sk-terminal-customer-result > span:nth-child(2) {
display: grid;
flex: 1;
gap: 0.15rem;
}
.sk-terminal-customer-list small {
color: var(--sk-color-ink-soft);
}
.sk-terminal-customer-contact {
display: block;
margin-top: var(--sk-space-1);
}
.sk-terminal-customer-list .sk-terminal-customer-history {
margin-top: var(--sk-space-1);
color: var(--sk-color-ink-faint);
font-size: var(--sk-font-size-xs);
}
/* Én linje under hodet: «Laster …», forklaring, hjelpetekst. */
.sk-terminal-hint {
display: block;
margin: var(--sk-space-3) 0 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
line-height: 1.5;
}
.sk-terminal-hint[role="status"] {
display: flex;
align-items: center;
gap: var(--sk-space-2);
min-height: var(--sk-terminal-control-h);
margin: 0;
}
.sk-terminal-success {
margin: var(--sk-space-3) 0;
border-radius: var(--sk-radius-md);
padding: var(--sk-space-3) var(--sk-space-4);
background: var(--sk-color-success-soft);
color: var(--sk-color-success);
line-height: 1.45;
}
.sk-terminal-field {
display: grid;
gap: var(--sk-space-2);
min-width: 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-field > input,
.sk-terminal-field > select,
.sk-terminal-field > textarea {
width: 100%;
min-height: var(--sk-control-height);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-3);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
font-weight: var(--sk-font-weight-medium);
}
.sk-terminal-field > textarea {
min-height: 6rem;
resize: vertical;
}
.sk-terminal-check {
display: flex;
align-items: center;
gap: var(--sk-space-2);
min-height: var(--sk-terminal-touch-min);
color: var(--sk-color-ink);
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-terminal-check > input {
width: 1.25rem;
height: 1.25rem;
flex: none;
accent-color: var(--sk-color-primary);
}
/* Terminalens direkte informasjonskort må ha en kontrollerbar tekstflate,
også når den generelle ansattstilen bruker gjennomskinnelige kort. */
html[data-surface="terminal"] #root > section.sk-card.sk-card--inset {
background: var(--sk-color-surface);
backdrop-filter: none;
}
/* Error references and public codes must wrap inside 360 px layouts. */
[role="alert"], .sk-form-error, .sk-terminal-error, .sk-terminal-notice, .sk-customer-portal-alert {
min-width: 0;
overflow-wrap: anywhere;
}
@media (max-width: 480px) {
.sk-terminal-payment-readiness-error {
flex-direction: column;
align-items: stretch;
}
.sk-terminal-payment-readiness-error > p { width: 100%; }
.sk-terminal-payment-readiness-error > button { align-self: flex-start; }
}
/* ── Terminalens designkontrakt ──────────────────────────────────────────────
Se docs/architecture/ui/TERMINAL-DESIGN-CONTRACT.md. Alt som er felles for panelene — knapper,
overskrifter, kort, nøkkeltall, merkelapper, tomtilstand og søk — bor her,
ÉN gang. Tokenene (`--sk-terminal-control-h`, `--sk-terminal-radius`) settes
i 01-foundations.css og 00-screen-classes.css.
Containerregler av typen `.foo button {}` skal skrives `:where(.foo) button`
slik at de aldri slår gjennom variantklassene under. */
/* ── Knapper: fem varianter + ikonknapp. Gamle klasser er aliaser. ─────── */
.sk-terminal-primary,
.sk-terminal-secondary,
.sk-terminal-link,
.sk-terminal-danger,
.sk-terminal-danger-outline,
.sk-terminal-icon-button,
.sk-timebook-sheet-undo,
.sk-timebook-sheet-charge,
.sk-timebook-sheet-danger,
.sk-terminal-danger-button,
.sk-terminal-back-link,
.sk-profile-back {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sk-space-2);
min-height: var(--sk-terminal-control-h);
border-radius: var(--sk-terminal-radius);
font: inherit;
font-weight: var(--sk-font-weight-strong);
line-height: 1.2;
cursor: pointer;
/* Bytt tekst- og bakgrunnsfarge samtidig, slik at kontrasten holder. */
transition: transform var(--sk-motion-fast);
}
.sk-terminal-primary {
border: 0;
padding: 0 var(--sk-space-5);
background: var(--sk-color-primary);
color: white;
}
.sk-terminal-primary:hover:not(:disabled) {
background: var(--sk-color-primary-hover);
}
.sk-terminal-primary:active:not(:disabled) {
transform: translateY(1px);
}
.sk-terminal-primary:disabled {
border: 1px solid var(--sk-color-disabled-border);
background: var(--sk-color-disabled-bg);
color: var(--sk-color-disabled-text);
cursor: not-allowed;
}
.sk-terminal-secondary,
.sk-timebook-sheet-undo,
.sk-timebook-sheet-charge,
.sk-profile-back {
border: 1px solid var(--sk-color-border-interactive);
padding: 0 var(--sk-space-5);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
}
.sk-terminal-secondary:hover:not(:disabled),
.sk-timebook-sheet-undo:hover:not(:disabled),
.sk-timebook-sheet-charge:hover:not(:disabled),
.sk-profile-back:hover:not(:disabled) {
background: var(--sk-color-surface-hover);
}
.sk-terminal-secondary:disabled,
.sk-timebook-sheet-undo:disabled,
.sk-timebook-sheet-charge:disabled,
.sk-profile-back:disabled {
border-color: var(--sk-color-disabled-border);
background: var(--sk-color-disabled-bg);
color: var(--sk-color-disabled-text);
cursor: not-allowed;
}
.sk-terminal-link,
.sk-terminal-back-link {
border: 0;
padding: 0 var(--sk-space-3);
background: transparent;
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-link:hover:not(:disabled),
.sk-terminal-back-link:hover:not(:disabled) {
background: var(--sk-color-primary-soft);
}
/* Tekstknapp for noe som fjerner: samme form, rød tekst. */
.sk-terminal-link.is-danger {
color: var(--sk-color-danger);
}
.sk-terminal-link:disabled,
.sk-terminal-back-link:disabled {
background: transparent;
color: var(--sk-color-disabled-text);
cursor: not-allowed;
}
.sk-terminal-danger {
border: 0;
padding: 0 var(--sk-space-4);
background: var(--sk-color-danger);
color: var(--sk-color-canvas);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-danger:hover:not(:disabled) {
background: color-mix(in srgb, var(--sk-color-danger) 86%, var(--sk-color-ink));
}
.sk-terminal-danger:disabled {
background: var(--sk-color-disabled-bg);
color: var(--sk-color-disabled-text);
cursor: not-allowed;
}
.sk-terminal-danger-outline,
.sk-timebook-sheet-danger,
.sk-terminal-danger-button {
border: 1px solid var(--sk-color-danger);
padding: 0 var(--sk-space-4);
background: var(--sk-color-surface);
color: var(--sk-color-danger);
}
.sk-terminal-danger-outline:hover:not(:disabled),
.sk-timebook-sheet-danger:hover:not(:disabled),
.sk-terminal-danger-button:hover:not(:disabled) {
background: var(--sk-color-danger-soft);
}
.sk-terminal-danger-outline:disabled,
.sk-timebook-sheet-danger:disabled,
.sk-terminal-danger-button:disabled {
border-color: var(--sk-color-disabled-border);
background: var(--sk-color-disabled-bg);
color: var(--sk-color-disabled-text);
cursor: not-allowed;
}
/* Kvadratisk ikonknapp: lukk-X, pil, «forstyrrelser». */
.sk-terminal-icon-button {
width: var(--sk-terminal-control-h);
height: var(--sk-terminal-control-h);
flex: none;
padding: 0;
border: 1px solid var(--sk-color-border-interactive);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
}
.sk-terminal-icon-button:hover:not(:disabled) {
background: var(--sk-color-surface-hover);
}
.sk-terminal-icon-button:disabled {
border-color: var(--sk-color-disabled-border);
color: var(--sk-color-disabled-text);
cursor: not-allowed;
}
.sk-terminal-icon-button svg {
width: 1.1rem;
height: 1.1rem;
}
/* ── Panelhode ─────────────────────────────────────────────────────────────
h1 = panel, h2 = underseksjon, h3 = kort. */
.sk-terminal-section-heading,
.sk-profile-section-heading,
.sk-terminal-cart-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-4);
margin-bottom: var(--sk-space-4);
}
.sk-terminal-section-heading > div,
.sk-profile-section-heading > div,
.sk-terminal-cart-heading > div {
min-width: 0;
}
.sk-terminal-section-heading h1,
.sk-terminal-section-heading h2,
.sk-terminal-section-heading h3,
.sk-profile-section-heading h1,
.sk-profile-section-heading h2,
.sk-profile-section-heading h3,
.sk-terminal-cart-heading h1,
.sk-terminal-cart-heading h2,
.sk-terminal-cart-heading h3 {
margin: 0;
line-height: 1.15;
letter-spacing: -0.035em;
}
.sk-terminal-section-heading h1,
.sk-profile-section-heading h1,
.sk-terminal-cart-heading h1 {
font-size: var(--sk-type-page-title);
letter-spacing: -0.04em;
}
.sk-terminal-section-heading h2,
.sk-profile-section-heading h2,
.sk-terminal-cart-heading h2 {
font-size: var(--sk-type-section-title);
}
.sk-terminal-section-heading h3,
.sk-profile-section-heading h3,
.sk-terminal-cart-heading h3,
.sk-terminal-cart-heading .sk-terminal-cart-section-title {
font-size: var(--sk-type-card-title);
letter-spacing: -0.02em;
}
/* Profile subsections sit beneath the customer heading without changing its visual scale. */
.sk-profile-section .sk-terminal-section-heading h3 {
font-size: var(--sk-type-section-title);
letter-spacing: -0.035em;
}
.sk-terminal-section-heading .sk-terminal-eyebrow,
.sk-profile-section-heading .sk-terminal-eyebrow,
.sk-terminal-cart-heading .sk-terminal-eyebrow {
margin-bottom: var(--sk-space-1);
}
/* Teller i en overskrift eller på en flis: «Venteliste 10», «Oppgaver 0».
Samme merkelapp som .sk-terminal-status.is-muted, men den står INNE i
teksten og skal ikke arve overskriftens størrelse eller sperring.
.sk-nora-tasks__count er alias for overgangen. */
.sk-terminal-heading-count,
.sk-nora-tasks__count {
display: inline-flex;
align-items: center;
gap: var(--sk-space-1);
margin-left: var(--sk-space-2);
border-radius: var(--sk-radius-pill);
padding: var(--sk-space-1) var(--sk-space-3);
background: var(--sk-color-surface-hover);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
letter-spacing: 0;
line-height: 1.3;
vertical-align: middle;
white-space: nowrap;
}
/* Løs tekst i hodet (tellere, datoer) er metatekst. */
.sk-terminal-section-heading > span,
.sk-profile-section-heading > span,
.sk-terminal-cart-heading > span,
.sk-terminal-section-heading p:not(.sk-terminal-eyebrow, .sk-terminal-lead),
.sk-profile-section-heading p:not(.sk-terminal-eyebrow, .sk-terminal-lead),
.sk-terminal-cart-heading p:not(.sk-terminal-eyebrow, .sk-terminal-lead) {
margin: 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-terminal-lead {
max-width: 62ch;
margin: var(--sk-space-2) 0 0;
color: var(--sk-color-ink-soft);
line-height: var(--sk-line-copy);
}
.sk-terminal-heading-actions {
display: flex;
flex: none;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--sk-space-2);
}
/* ── Kort ────────────────────────────────────────────────────────────────── */
.sk-terminal-card,
.sk-terminal-cart-editor,
.sk-nora-side-card,
.sk-terminal-overview-today {
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-5);
background: var(--sk-color-surface);
}
/* Siste barn i et kort skal ikke legge luft oppå kortets egen polstring. */
.sk-terminal-card > .sk-terminal-section-heading:last-child,
.sk-terminal-card > .sk-terminal-summary-grid:last-child,
.sk-terminal-card > .sk-terminal-cart-lines:last-child {
margin-bottom: 0;
}
/* ── Nøkkeltall: fliser i auto-fit-kolonner. article > span + strong ────── */
.sk-terminal-summary-grid,
.sk-profile-stats,
.sk-terminal-my-day {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: var(--sk-space-4);
margin-bottom: var(--sk-space-6);
}
.sk-terminal-summary-grid article,
.sk-profile-stats article,
.sk-terminal-my-day article {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: center;
gap: var(--sk-space-1);
min-height: 6.25rem;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-4);
background: var(--sk-color-surface);
}
.sk-terminal-summary-grid article:has(> svg),
.sk-profile-stats article:has(> svg),
.sk-terminal-my-day article:has(> svg) {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: var(--sk-space-3);
}
.sk-terminal-summary-grid article > svg,
.sk-profile-stats article > svg,
.sk-terminal-my-day article > svg {
grid-row: 1 / 3;
width: 1.4rem;
height: 1.4rem;
color: var(--sk-color-primary);
}
.sk-terminal-summary-grid article span,
.sk-profile-stats article span,
.sk-terminal-my-day article span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-terminal-summary-grid article strong,
.sk-profile-stats article strong,
.sk-terminal-my-day article strong {
font-size: var(--sk-font-size-lg);
font-variant-numeric: tabular-nums;
}
/* Stemplingskortet er invertert (mørk flate). Teksten bruker canvas-tokenet i
stedet for hardkodet white: canvas og ink bytter plass i mørkt tema, så
kortet beholder kontrasten uansett tema. */
.sk-terminal-summary-grid article.is-attendance {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--sk-space-3);
background: var(--sk-color-ink);
color: var(--sk-color-canvas);
}
.sk-terminal-summary-grid article.is-attendance span {
color: var(--sk-color-border);
}
/* Knappen på det mørke kortet: eksplisitt ink på surface, ellers arver den
hvit tekst fra kortet og forsvinner. */
:where(.sk-terminal-summary-grid article.is-attendance) button {
min-height: var(--sk-terminal-touch-min);
border: 0;
border-radius: var(--sk-terminal-radius);
padding: 0 var(--sk-space-4);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
/* Standard fokusring gir bare 2.63:1 mot det mørke kortet; bruk den inverse. */
:where(.sk-terminal-summary-grid article.is-attendance) button:focus-visible {
outline-color: var(--sk-color-focus-ring-inverse);
}
/* ── Merkelapper ─────────────────────────────────────────────────────────── */
.sk-terminal-status {
display: inline-flex;
align-items: center;
gap: var(--sk-space-1);
border-radius: var(--sk-radius-pill);
padding: var(--sk-space-1) var(--sk-space-3);
background: var(--sk-color-surface-hover);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
line-height: 1.3;
white-space: nowrap;
}
.sk-terminal-status.is-info,
.sk-terminal-status.is-confirmed {
background: var(--sk-color-info-soft);
color: var(--sk-color-info);
}
.sk-terminal-status.is-warning,
.sk-terminal-status.is-arrived,
.sk-terminal-status.is-started {
background: var(--sk-color-warning-soft);
color: var(--sk-color-warning);
}
.sk-terminal-status.is-success,
.sk-terminal-status.is-completed {
background: var(--sk-color-success-soft);
color: var(--sk-color-success);
}
.sk-terminal-status.is-danger,
.sk-terminal-status.is-no_show {
background: var(--sk-color-danger-soft);
color: var(--sk-color-danger);
}
.sk-terminal-status.is-muted,
.sk-terminal-status.is-cancelled,
.sk-terminal-status.is-pending {
background: var(--sk-color-surface-hover);
color: var(--sk-color-ink-soft);
}
/* ── Tomtilstand og lastelinje ───────────────────────────────────────────── */
.sk-terminal-empty-card,
.sk-terminal-order-empty,
.sk-terminal-empty {
display: grid;
justify-items: center;
gap: var(--sk-space-2);
margin: 0;
border: 1px dashed var(--sk-color-border);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-8) var(--sk-space-5);
background: var(--sk-color-surface);
color: var(--sk-color-ink-soft);
text-align: center;
}
.sk-terminal-empty-card svg,
.sk-terminal-order-empty svg,
.sk-terminal-empty svg {
width: 1.75rem;
height: 1.75rem;
color: var(--sk-color-ink-faint);
}
.sk-terminal-empty-card h3,
.sk-terminal-order-empty h3,
.sk-terminal-empty h3 {
margin: 0;
color: var(--sk-color-ink);
font-size: var(--sk-type-card-title);
letter-spacing: -0.02em;
}
.sk-terminal-empty-card p,
.sk-terminal-order-empty p,
.sk-terminal-empty p {
margin: 0;
}
/* Lastelinja .sk-terminal-hint ligger i 01-foundations.css. */
/* Felt og søk (.sk-terminal-search, .sk-terminal-search-control og aliaset
.sk-terminal-order-search) ligger i 01-foundations.css. */
/* ── Segmentert velger: to til fire likeverdige valg ──────────────────────────
ÉN definisjon. Den fantes i to — 04-calendar.css (flex, `is-active`, valgt
= surface-hover) og 02-shifts-and-checkout.css (grid, `is-selected`, valgt =
primærfarge) — og hvilken som gjaldt kom an på hvilken fil som lastet sist.
Utslaget var synlig: den UVALGTE «Pris»-fanen beholdt fet skrift, så to av
tre faner så valgte ut samtidig.
Kontrakten her:
`is-active` er alias for `is-selected` mens flatene skrives om.
Den valgte tilstanden er ENTYDIG: fylt flate, invers tekst og tyngre skrift.
Alle tre samtidig, fordi bakgrunnen alene forsvinner i sollys over en
kasseskuff og skriftvekten alene ikke er en tilstand.
MERK: så lenge duplikatene i 02 og 04 står, laster de etter denne og vinner.
De skal fjernes; se rapporten fra Wave 1. */
.sk-terminal-segmented {
display: grid;
/* Like brede flater når det er plass, to og to når det ikke er det. Aldri
smalere enn en tommel — `auto-fit` framfor et mediespørsmål. */
grid-template-columns: repeat(auto-fit, minmax(var(--sk-terminal-control-h), 1fr));
gap: var(--sk-space-1);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-1);
background: var(--sk-color-surface-hover);
}
:where(.sk-terminal-segmented) > button {
min-height: var(--sk-terminal-touch-min);
border: 0;
border-radius: var(--sk-radius-sm);
padding: 0 var(--sk-space-2);
background: transparent;
color: var(--sk-color-ink-soft);
font: inherit;
font-weight: var(--sk-font-weight-strong);
line-height: 1.2;
cursor: pointer;
}
:where(.sk-terminal-segmented) > button:hover:not(:disabled, .is-selected, .is-active) {
background: var(--sk-color-surface);
color: var(--sk-color-ink);
}
:where(.sk-terminal-segmented) > button.is-selected,
:where(.sk-terminal-segmented) > button.is-active {
background: var(--sk-color-primary);
color: white;
font-weight: var(--sk-font-weight-strong);
}
:where(.sk-terminal-segmented) > button:disabled {
color: var(--sk-color-disabled-text);
cursor: not-allowed;
}
/* ── Statuslinje under topplinja ─────────────────────────────────────────────
For beskjeder som gjelder HELE flaten, ikke ett panel: skriveren er borte,
nettet er nede. Den står mellom topplinja og arbeidsflaten fordi
designkontrakten § 3 gir hvert panel ÉN statuslinje — et banner inne i
innholdet dyttet panelets eyebrow og kladdefeilen nedover og ble en andre
status i samme panel.
Kompakt med vilje: den skal leses i forbifarten, ikke ta plassen til
arbeidet. Lukkeknappen er .sk-terminal-link. */
.sk-terminal-bar-notice {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-3);
margin: 0;
padding: var(--sk-space-2) var(--sk-space-5);
border-bottom: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-warning-soft);
color: var(--sk-color-warning);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
line-height: 1.4;
}
.sk-terminal-bar-notice > span {
min-width: 0;
}
:where(.sk-terminal-bar-notice) button {
flex: none;
min-height: var(--sk-terminal-touch-min);
color: inherit;
}
.sk-terminal-camera-preview {
width: 100%;
max-width: 100%;
max-height: 40vh;
}
.sk-terminal-checkout-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 20rem;
gap: var(--sk-space-4);
margin-top: var(--sk-space-6);
}
/* .sk-terminal-cart-editor og .sk-terminal-cart-heading er kort- og
hodealiaser i 01a-contract.css. */
.sk-terminal-checkout-grid aside {
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-5);
background: var(--sk-color-surface);
}
.sk-terminal-inline-fields {
display: grid;
grid-template-columns: 1fr 9rem auto;
gap: 0.6rem;
}
/* Ink-flate med canvas-tekst (14.96:1) i stedet for hardkodet white, så paret følger
temaet og ikke kollapser dersom ink/canvas byttes om.
`:where()` gir containerdelen null spesifisitet, så en variantklasse
(.sk-terminal-secondary på «Oppdater») alltid vinner over denne. */
:where(.sk-terminal-inline-fields) button {
min-height: var(--sk-terminal-control-h);
border: 0;
border-radius: var(--sk-terminal-radius);
padding: 0 var(--sk-space-4);
background: var(--sk-color-ink);
color: var(--sk-color-canvas);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-terminal-cart-lines {
display: grid;
gap: 0.55rem;
margin-top: 1rem;
padding: 0;
list-style: none;
}
.sk-terminal-cart-lines > article,
.sk-terminal-cart-lines > li {
display: grid;
align-items: center;
gap: 0.8rem;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
padding: 0.9rem;
background: var(--sk-color-surface);
color: inherit;
font: inherit;
text-align: left;
}
/* Varelinje i kassa: tittel | antall | beløp | handlinger. Kolonnene tar
plassen innholdet trenger, tittelen får resten; radene har luft nok til at
to linjer tittel ikke klemmer stepperen. */
.sk-terminal-cart-lines > article {
grid-template-columns: minmax(0, 1fr) auto minmax(6.5rem, auto) auto;
gap: var(--sk-space-4);
padding: var(--sk-space-4);
line-height: 1.35;
}
.sk-terminal-cart-lines > article > span:first-child > strong {
font-size: var(--sk-font-size-md);
}
.sk-terminal-cart-lines > li {
grid-template-columns: minmax(0, 1fr) auto;
}
.sk-terminal-cart-lines > article > strong {
min-width: 0;
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.sk-terminal-cart-lines > article > span:first-child,
.sk-terminal-cart-lines > li > span:first-child {
display: grid;
min-width: 0;
gap: var(--sk-space-1);
}
.sk-terminal-cart-lines > article > span:first-child .sk-terminal-price-changed {
color: var(--sk-color-warning);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-cart-lines > article > span:first-child .sk-terminal-unit-price {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-medium);
}
.sk-terminal-cart-lines > li small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
/* Klikkbar rad: hele innholdet er én knapp (kontraktens radgrammatikk
«tid | tittel+meta | beløp | merkelapp»), tegnet som raden selv. */
:where(.sk-terminal-cart-lines > li) > button {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--sk-space-3);
width: 100%;
min-height: 0;
border: 0;
border-radius: 0;
padding: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
:where(.sk-terminal-cart-lines > li) > button:disabled {
cursor: default;
opacity: 0.6;
}
:where(.sk-terminal-cart-lines > li) > button > time {
color: var(--sk-color-ink-soft);
font-variant-numeric: tabular-nums;
}
:where(.sk-terminal-cart-lines > li) > button > span:not(.sk-terminal-status) {
display: grid;
min-width: 0;
gap: var(--sk-space-1);
}
:where(.sk-terminal-cart-lines > li) > button > span:not(.sk-terminal-status) > small {
color: var(--sk-color-ink-soft);
overflow-wrap: anywhere;
}
:where(.sk-terminal-cart-lines > li) > button > strong {
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.sk-terminal-cart-lines > li .sk-terminal-inline-fields {
grid-template-columns: auto auto auto;
align-items: center;
}
/* --- Rabatt i kassa ------------------------------------------------------
Rabatten er en PÅSTAND om at prisen er endret, og skal kunne leses uten å
regne: den strøkne prisen står ved siden av den kunden betaler, og
merkelappen sier hvor mye («−10 %»). */
.sk-terminal-cart-lines > article > strong > s {
display: block;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-medium);
}
.sk-terminal-cart-lines > article > span:first-child > .sk-terminal-status {
justify-self: start;
}
/* Rabattknappen legger til en kolonne i bunnlinja. Regelen står bak :has() så
den bare gjelder den bunnlinja som faktisk har knappen — en eldre bunnlinje
uten den beholder sine fire kolonner. */
.sk-terminal-sale-footer:has(.sk-terminal-sale-discount-trigger) {
grid-template-columns: minmax(10rem, 1fr) auto auto minmax(12rem, auto) minmax(12rem, auto);
}
.sk-terminal-sale-discount {
display: flex;
align-items: center;
gap: var(--sk-space-2);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-terminal-sale-discount > strong {
color: inherit;
font-variant-numeric: tabular-nums;
}
:where(.sk-terminal-sale-discount) button {
min-height: 0;
padding: 0 var(--sk-space-2);
font-size: var(--sk-font-size-xs);
}
/* Rabattarket: samme dialekt som de andre arkene i kassa — rund tilbakepil,
eyebrow med linjen det gjelder, og h2 som tittel. */
.sk-terminal-discount-layer {
position: fixed;
inset: 0;
z-index: 121;
display: grid;
place-items: center;
padding: var(--sk-space-4);
background: rgb(20 18 28 / 55%);
}
.sk-terminal-discount-sheet {
display: grid;
width: min(34rem, 100%);
box-sizing: border-box;
max-height: calc(100dvh - 2 * var(--sk-space-4));
overflow-y: auto;
gap: var(--sk-space-4);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-5);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
}
.sk-terminal-discount-sheet > header {
display: flex;
align-items: center;
gap: var(--sk-space-3);
}
.sk-terminal-discount-sheet h2 {
margin: 0;
}
.sk-terminal-discount-sheet label {
display: grid;
gap: var(--sk-space-2);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-discount-sheet input {
min-height: var(--sk-terminal-touch-min);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
padding: 0 var(--sk-space-3);
background: var(--sk-color-surface);
color: inherit;
font: inherit;
}
.sk-terminal-discount-chips {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-2);
}
.sk-terminal-discount-preview {
margin: 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-md);
font-variant-numeric: tabular-nums;
}
/* Den strøkne prisen på kundeskjermen — samme grep som i kurven. */
.sk-customer-line-original {
display: block;
opacity: 0.6;
font-size: var(--sk-type-display-small);
font-weight: var(--sk-font-weight-medium);
}
/* ── Frisør per linje ──────────────────────────────────────────────────────
Brikken sitter blant linjens handlinger og er en initialbrikke, ikke en
nedtrekksliste: valget tas med en finger, med kunden ved siden av. Åpnet
står laget som brikker i selve brikkens egen rad — en flytende meny ville
blitt klippet av kurvens egen rulling. */
.sk-terminal-line-stylist {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sk-space-2);
/* Laget bryter til flere rader inne i brikken. Uten taket ville en salong
med åtte frisører dyttet tittelkolonnen sammen til ingenting. */
max-width: 12rem;
}
.sk-terminal-stylist-chip {
border-radius: 50%;
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
letter-spacing: 0.02em;
}
.sk-terminal-stylist-chip.is-active {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary);
color: white;
}
.sk-terminal-stylist-choices {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-2);
}
/* «hos Sara» står under tittelen, i samme dempede skrift som enhetsprisen —
den forteller at NOEN har flyttet linjen, ikke at linjen er et varsel. */
.sk-terminal-cart-lines > article > span:first-child .sk-terminal-line-stylist-name {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-price-level-notice { display: grid; gap: var(--sk-space-3); }
.sk-terminal-button { min-height: max(44px,var(--sk-terminal-touch-min)); padding: var(--sk-space-3) var(--sk-space-4); color: var(--sk-color-ink); background: var(--sk-color-surface); border: 1px solid var(--sk-color-border); border-radius: var(--sk-radius-lg); font: inherit; cursor: pointer; }
.sk-terminal-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* En rad som folder seg ut UNDER seg selv — venteliste, oppgjør, retur.
Innholdet ble før løftet ut i et lag over skjermen, og da mistet den som
jobber nedover lista både plassen sin og flatens farger. Her arves begge:
raden er fortsatt raden, den har bare blitt høyere. */
.sk-terminal-row-expand {
grid-column: 1 / -1;
min-width: 0;
margin-top: var(--sk-space-3);
}
/* Kortet har allerede skillelinje og luft fra timearket; her er raden selv
rammen, så toppmargen skal ikke legges oppå den. */
.sk-terminal-row-expand > .sk-timebook-sheet-card {
margin-top: 0;
}
.sk-terminal-cart-lines > li.is-selected-sale {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
}
.sk-cashup-sale-detail {
border-top: 1px solid var(--sk-color-border-soft);
padding-top: var(--sk-space-4);
background: var(--sk-color-surface);
}
.sk-cashup-sale-detail > .sk-terminal-section-heading {
margin-bottom: var(--sk-space-2);
}
.sk-cashup-sale-detail__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-4);
margin-top: var(--sk-space-4);
border-top: 1px solid var(--sk-color-border-soft);
padding-top: var(--sk-space-4);
}
.sk-cashup-sale-detail__footer > span {
display: grid;
gap: var(--sk-space-1);
}
.sk-cashup-sale-detail__footer small {
color: var(--sk-color-ink-soft);
}
:where(.sk-cashup-sale-detail__footer) > button {
display: inline-flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-cashup-return-sheet > .sk-terminal-hint {
margin: 0 0 var(--sk-space-4);
}
.sk-cashup-return-lines {
margin-bottom: var(--sk-space-4);
}
.sk-cashup-return-quantity output {
min-width: 2rem;
text-align: center;
font-weight: var(--sk-font-weight-strong);
font-variant-numeric: tabular-nums;
}
.sk-cashup-return-footer {
position: sticky;
bottom: calc(-1 * var(--sk-space-6));
z-index: 4;
display: grid;
gap: var(--sk-space-2);
margin-top: var(--sk-space-5);
padding: var(--sk-space-4) 0 calc(var(--sk-space-4) + env(safe-area-inset-bottom));
background: var(--sk-color-surface);
}
.sk-cashup-return-footer > strong {
font-size: var(--sk-font-size-lg);
}
/* Trykket som folder ut skal se ut som et trykk, ikke som en lenke man mister
av syne. Pila peker ned når det er noe å åpne, opp når det er åpent. */
.sk-terminal-row-toggle {
display: inline-flex;
align-items: center;
gap: var(--sk-space-1);
}
.sk-terminal-row-toggle svg {
width: 1em;
height: 1em;
flex: none;
transition: transform var(--sk-motion-fast, 120ms) ease;
}
.sk-terminal-row-toggle svg.is-open {
transform: rotate(180deg);
}
/* Arbeidstid er kontraktens panel (.sk-terminal-panel) + retten til å eie hele
høyden på kasse-PC-en. Panelets egen polstring og maksbredde ville skjøvet
vaktplanen ut av den låste skjermen, så de settes her. */
.sk-terminal-work-area,
.sk-terminal-panel.sk-terminal-work-area {
display: flex;
width: min(82rem, 100%);
height: 100%;
min-height: 0;
margin: 0 auto;
padding: 0;
flex-direction: column;
gap: var(--sk-space-3);
}
/* Alias: hodet ER .sk-terminal-section-heading. Her står bare det som skiller
et hode i en flate som eier høyden — det skal ikke krympe, og luften under
kommer fra flex-gapen, ikke fra en margin. */
.sk-terminal-work-area-header {
flex: 0 0 auto;
margin-bottom: 0;
}
.sk-terminal-work-area-header h1 {
margin: var(--sk-space-1) 0 0;
}
/* Innholdet i en arbeidsflate er ikke sitt eget panel — panelet er
.sk-terminal-work-area over. Alias for den eldre panelklassen. */
.sk-terminal-work-area-view {
display: block;
min-height: 0;
padding-bottom: var(--sk-space-6);
}
.sk-terminal-work-area-tabs {
display: inline-flex;
overflow: hidden;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
}
/* Fanene er knapper som ER en flis: mål her, farger i :where-regelen under. */
:where(.sk-terminal-work-area-tabs) button {
display: inline-flex;
min-height: var(--sk-terminal-touch-min);
align-items: center;
gap: var(--sk-space-2);
padding-inline: var(--sk-space-4);
cursor: pointer;
}
:where(.sk-terminal-work-area-tabs) button {
border: 0;
background: transparent;
color: var(--sk-color-ink-soft);
font: inherit;
font-weight: var(--sk-font-weight-strong);
}
:where(.sk-terminal-work-area-tabs) button + button {
border-left: 1px solid var(--sk-color-border-soft);
}
:where(.sk-terminal-work-area-tabs) button.is-active {
background: var(--sk-color-primary);
color: white;
}
.sk-terminal-work-area-tabs svg {
width: 1.25rem;
height: 1.25rem;
}
.sk-terminal-work-area-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.sk-terminal-work-area-body:has(.sk-shift-plan-calendar) {
overflow: hidden;
}
.sk-terminal-work-area-body:has(.sk-shift-plan-calendar) > .sk-terminal-work-area-view,
.sk-terminal-work-area-body:has(.sk-shift-plan-calendar) > .sk-terminal-panel {
display: flex;
height: 100%;
min-height: 0;
flex-direction: column;
overflow: hidden;
padding-bottom: 0;
}
.sk-terminal-work-area-body:has(.sk-shift-plan-calendar) .sk-shift-plan-calendar {
display: grid;
min-height: 0;
flex: 1 1 auto;
grid-template-rows: auto minmax(0, 1fr);
}
.sk-terminal-work-area-body:has(.sk-shift-plan-calendar) .sk-shift-grid {
min-height: 0;
}
.sk-terminal-work-area-body:has(.sk-shift-plan-calendar) .sk-shift-grid-scroll {
height: 100%;
max-height: none;
}
/* Vaktplanen. Én bolk per dag, egne vakter markert — hun leter etter seg selv
først, og finner kollegaen i samme blikk. */
.sk-terminal-shift-day {
margin-top: var(--sk-space-6);
}
/* Norske ukedager skrives med liten bokstav; bare første tegn opp. */
.sk-terminal-shift-day .sk-terminal-eyebrow {
text-transform: none;
}
.sk-terminal-shift-day .sk-terminal-eyebrow::first-letter {
text-transform: uppercase;
}
.sk-shift-plan-calendar {
display: grid;
gap: var(--sk-space-4);
}
.sk-shift-week-tabs {
display: inline-grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-self: start;
overflow: hidden;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
}
:where(.sk-shift-week-tabs) button {
min-height: var(--sk-control-height);
border: 0;
padding: 0 var(--sk-space-4);
background: transparent;
color: var(--sk-color-ink-soft);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
:where(.sk-shift-week-tabs) button + button {
border-left: 1px solid var(--sk-color-border-soft);
}
:where(.sk-shift-week-tabs) button.is-active {
background: var(--sk-color-primary);
color: white;
}
/* Visningsbryteren og ukevalget står på samme linje, men brytes under
hverandre på en smal skjerm framfor å presse tabbene sammen til ulesbare
knapper. */
.sk-shift-plan-toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-3);
align-items: center;
justify-content: space-between;
}
.sk-shift-view-tabs {
/* Denne klassen deles av vaktplanen (uke/dag/liste – 3 knapper) og
timeboken (kalender/liste – 2 knapper). Et fast repeat(3, …) ga et
tomt, tredje rutenett-felt i timeboken når bare to knapper ble
rendret. auto-flow lager i stedet én kolonne per faktisk knapp. */
display: inline-grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
overflow: hidden;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
}
:where(.sk-shift-view-tabs) button {
min-height: var(--sk-control-height);
border: 0;
padding: 0 var(--sk-space-5);
background: transparent;
color: var(--sk-color-ink-soft);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
:where(.sk-shift-view-tabs) button + button {
border-left: 1px solid var(--sk-color-border-soft);
}
:where(.sk-shift-view-tabs) button.is-active {
background: var(--sk-color-primary);
color: white;
}
.sk-shift-day-nav {
display: flex;
gap: var(--sk-space-2);
align-items: center;
}
.sk-shift-day-nav strong {
min-width: 8.5rem;
text-align: center;
}
.sk-shift-day-nav strong::first-letter {
text-transform: uppercase;
}
:where(.sk-shift-day-nav) button {
display: grid;
width: var(--sk-control-height);
height: var(--sk-control-height);
place-items: center;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
color: inherit;
cursor: pointer;
}
:where(.sk-shift-day-nav) button:disabled {
opacity: 0.4;
cursor: default;
}
.sk-shift-day-nav .is-forward {
transform: rotate(180deg);
}
/* Rutenettet. Samme oppbygning som timeboken — klistret overskrift, tidsakse i
margen, absolutt plasserte blokker — så de to flatene leses med samme blikk. */
.sk-shift-grid {
--sk-shift-columns: repeat(7, minmax(5.5rem, 1fr));
overflow: hidden;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-card);
}
.sk-shift-grid-scroll {
max-height: 62vh;
overflow: auto;
overscroll-behavior: contain;
}
.sk-shift-grid-head,
.sk-shift-grid-body {
display: grid;
grid-template-columns: 3.6rem var(--sk-shift-columns);
min-width: max-content;
}
.sk-shift-grid-head-cell,
.sk-shift-grid-corner {
position: sticky;
top: 0;
z-index: 3;
background: var(--sk-color-surface);
border-bottom: 1px solid var(--sk-color-border);
}
.sk-shift-grid-corner {
left: 0;
z-index: 4;
}
.sk-shift-grid-head-cell {
display: grid;
gap: 0.1rem;
align-content: center;
min-height: 4.1rem;
border: 0;
border-left: 1px solid var(--sk-color-border-soft);
padding: 0.5rem 0.6rem;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.sk-shift-grid-head-cell.is-static {
display: flex;
gap: 0.5rem;
align-items: center;
cursor: default;
}
.sk-shift-grid-head-cell > span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-shift-grid-head-cell > span::first-letter {
text-transform: uppercase;
}
.sk-shift-grid-head-cell > strong {
overflow: hidden;
font-size: var(--sk-font-size-md);
white-space: nowrap;
text-overflow: ellipsis;
}
.sk-shift-grid-head-cell > em {
color: var(--sk-color-ink-faint);
font-size: var(--sk-font-size-xs);
font-style: normal;
}
.sk-shift-grid-head-cell.is-mine {
background: var(--sk-color-primary-soft);
}
/* I dag er ikke et utvalg, men et faktum. Prikken skiller de to. */
.sk-shift-grid-head-cell.is-today > strong::after {
display: inline-block;
width: 0.4rem;
height: 0.4rem;
margin-left: 0.3rem;
border-radius: 50%;
background: var(--sk-color-warning);
vertical-align: middle;
content: "";
}
.sk-shift-grid-body {
position: relative;
}
.sk-shift-grid-gutter {
position: relative;
}
.sk-shift-grid-gutter span {
position: absolute;
right: 0.45rem;
transform: translateY(-0.4rem);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-variant-numeric: tabular-nums;
}
.sk-shift-grid-gutter span:first-child {
transform: none;
}
.sk-shift-grid-column {
position: relative;
border-left: 1px solid var(--sk-color-border-soft);
}
.sk-shift-grid-rule {
position: absolute;
left: 0;
right: 0;
border-top: 1px solid var(--sk-color-border);
}
.sk-shift-grid-free {
position: absolute;
top: 0.6rem;
left: 0;
right: 0;
margin: 0;
color: var(--sk-color-ink-faint);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
text-align: center;
}
/* Kollegenes vakter: nok til å se at man ikke står alene, for lite til å
konkurrere med sin egen. */
.sk-shift-coverage {
position: absolute;
left: 0.2rem;
right: 0.2rem;
z-index: 0;
border-radius: 0.4rem;
background: color-mix(
in srgb,
var(--sk-color-ink-faint) 14%,
var(--sk-color-surface)
);
}
.sk-shift-block {
position: absolute;
left: 0.2rem;
right: 0.2rem;
z-index: 1;
display: grid;
gap: 0.05rem;
align-content: start;
overflow: hidden;
border: 1px solid var(--sk-color-border);
border-left: 5px solid var(--sk-color-ink-faint);
border-radius: 0.55rem;
padding: 0.28rem 0.45rem;
background: var(--sk-color-surface);
}
.sk-shift-block.is-mine {
border-color: color-mix(
in srgb,
var(--sk-color-primary) 38%,
var(--sk-color-surface)
);
border-left-color: var(--sk-color-primary);
background: color-mix(
in srgb,
var(--sk-color-primary) 12%,
var(--sk-color-surface)
);
}
.sk-shift-block-time {
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
font-variant-numeric: tabular-nums;
}
.sk-shift-block strong {
overflow: hidden;
font-size: var(--sk-font-size-xs);
white-space: nowrap;
text-overflow: ellipsis;
}
.sk-shift-block small {
overflow: hidden;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
white-space: nowrap;
text-overflow: ellipsis;
}
/* Dagen i rekkefølge. Klokkeslettet står i egen kolonne med tabulærsiffer, så
radene under hverandre danner en lesbar tidslinje framfor en ujevn kant. */
.sk-timebook-list {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.sk-timebook-list-row {
display: grid;
grid-template-columns: 4.4rem minmax(0, 1fr) auto;
gap: var(--sk-space-3);
align-items: center;
width: 100%;
min-height: 3.6rem;
border: 0;
border-bottom: 1px solid var(--sk-color-border-soft);
border-radius: 0;
padding: var(--sk-space-3) var(--sk-space-4);
background: var(--sk-color-surface);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.sk-timebook-list > li:first-child .sk-timebook-list-row {
border-top: 1px solid var(--sk-color-border-soft);
}
.sk-timebook-list-row:hover,
.sk-timebook-list-row:focus-visible {
background: var(--sk-color-surface-hover);
}
.sk-timebook-list-row.is-cancelled {
opacity: 0.62;
}
.sk-timebook-list-time {
display: grid;
font-variant-numeric: tabular-nums;
}
.sk-timebook-list-time small {
color: var(--sk-color-ink-faint);
}
.sk-timebook-list-who {
display: grid;
min-width: 0;
}
.sk-timebook-list-who strong,
.sk-timebook-list-who small {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sk-timebook-list-who small {
color: var(--sk-color-ink-soft);
}
.sk-shift-list {
display: grid;
gap: var(--sk-space-5);
}
.sk-shift-list-day {
display: flex;
gap: var(--sk-space-3);
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--sk-space-2);
}
/* inline-block: ::first-letter virker ikke på en inline-flex-knapp.
Regelen må henge på en egen klasse: `:where(.sk-shift-list-day) button` har
bare elementvekt, og kontraktens .sk-terminal-link (01a-contract.css) vant —
dagen sto igjen med liten forbokstav. */
.sk-terminal-shift-label {
display: inline-block;
}
.sk-terminal-shift-label::first-letter {
text-transform: uppercase;
}
.sk-shift-list-day > span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-shift-day .sk-terminal-section-heading h3::first-letter {
text-transform: uppercase;
}
.sk-terminal-shift-day .sk-terminal-section-heading > span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
/* Egen vakt får venstrekant og fylt flate. Fet skrift alene forsvinner i en
liste der alle rader har et navn i fet skrift. */
.sk-terminal-cart-lines > li.is-mine {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
box-shadow: inset 0.22rem 0 0 var(--sk-color-primary);
}
/* Det kunden allerede har betalt for. Nøytralt når det bare er en opplysning,
tydelig når klippekortet treffer noe som står på regningen akkurat nå. */
.sk-terminal-entitlements {
display: grid;
gap: var(--sk-space-3);
margin: var(--sk-space-4) 0;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-4);
background: var(--sk-color-surface-subtle);
}
.sk-terminal-entitlements.is-actionable {
border-color: var(--sk-color-warning);
background: var(--sk-color-warning-soft);
}
.sk-terminal-entitlements > .sk-terminal-eyebrow {
display: flex;
align-items: center;
gap: var(--sk-space-2);
margin: 0;
}
.sk-terminal-entitlements svg {
width: 1.05em;
height: 1.05em;
flex: none;
}
.sk-terminal-entitlement {
display: grid;
gap: var(--sk-space-1);
}
.sk-terminal-entitlement ul {
display: grid;
gap: var(--sk-space-1);
margin: 0;
padding: 0;
list-style: none;
}
.sk-terminal-entitlement li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sk-space-3);
}
.sk-terminal-entitlement li small {
color: var(--sk-color-ink-soft);
white-space: nowrap;
}
/* Behandlingen som faktisk står på regningen. Det er denne linja frisøren skal
finne på et halvt sekund. */
.sk-terminal-entitlement li.is-match {
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-entitlement li.is-match small {
color: var(--sk-color-warning);
}
.sk-terminal-entitlement-expiry {
color: var(--sk-color-ink-soft);
}
/* Klippet som tender: står OVER betalingsmåtene, ikke blant dem. «Betal med noe
kunden allerede har betalt» hører ikke hjemme i en rekke med Vipps og kort,
og oppdages det etter at kortet er dratt, er det for sent. */
.sk-terminal-package-tender {
display: grid;
gap: var(--sk-space-3);
margin-bottom: var(--sk-space-5);
border: 2px solid var(--sk-color-success);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-4);
background: var(--sk-color-success-soft);
}
.sk-terminal-package-tender > .sk-terminal-eyebrow {
display: flex;
align-items: center;
gap: var(--sk-space-2);
margin: 0;
color: var(--sk-color-success);
}
.sk-terminal-package-tender svg {
width: 1.1em;
height: 1.1em;
flex: none;
}
.sk-terminal-package-tender .sk-terminal-help {
margin: 0;
}
/* Timeboka armert for rebooking. Beskjeden må stå der helt til frisøren har
pekt på et tidspunkt — arket som åpner seg med et navn allerede utfylt er
ellers uforklarlig. */
.sk-terminal-rebook-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-4);
margin-bottom: var(--sk-space-4);
border: 1px solid var(--sk-color-primary);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-3) var(--sk-space-4);
background: var(--sk-color-primary-soft);
}
.sk-terminal-rebook-banner small {
color: var(--sk-color-ink-soft);
}
/* Etter godkjent betaling: bookingen er handlingen, «ferdig» er veien ut. */
.sk-terminal-complete-actions {
display: grid;
gap: var(--sk-space-3);
justify-items: center;
margin-top: var(--sk-space-5);
}
/* Innringerens kundekort følger samme dokumentflyt som de øvrige
terminalpanelene. Det skal aldri dekke arbeidsflaten som et modal-lag. */
.sk-terminal-customer-inline {
width: 100%;
margin-bottom: var(--sk-space-5);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-5);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
border: 1px solid var(--sk-color-border-soft);
box-shadow: var(--sk-shadow-card);
}
/* Kortet er øverst i seksjonen; skillelinja det har mot timearket har ingenting
å skille fra her. */
.sk-terminal-customer-inline > .sk-timebook-sheet-card:first-child {
margin-top: 0;
border-top: 0;
padding-top: 0;
}
.sk-terminal-customer-inline > .sk-terminal-link {
margin-top: var(--sk-space-4);
}
.sk-terminal-checkout-panel {
box-sizing: border-box;
display: flex;
min-height: 0;
flex-direction: column;
overflow: hidden;
padding-bottom: 0;
}
.sk-terminal-sale-layout {
display: grid;
min-height: 0;
flex: 1 1 auto;
grid-template-columns: minmax(18rem, 0.9fr) minmax(28rem, 1.35fr);
grid-template-rows: minmax(0, 1fr) auto;
gap: var(--sk-space-3);
overflow: hidden;
}
.sk-terminal-sale-catalog,
.sk-terminal-sale-cart {
display: flex;
min-width: 0;
min-height: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-3);
background: var(--sk-color-surface);
}
.sk-terminal-sale-catalog {
overflow-x: hidden;
overflow-y: auto; /* search and scan controls stay reachable when a customer tab row shrinks the pane */
overscroll-behavior: contain;
}
.sk-terminal-sale-cart {
overflow: hidden;
}
.sk-terminal-sale-catalog .sk-terminal-catalog-results,
.sk-terminal-sale-cart .sk-terminal-cart-lines {
min-height: 0;
max-height: none;
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
}
.sk-terminal-sale-cart .sk-terminal-cart-editor {
display: flex;
min-height: 0;
flex: 1 1 auto;
flex-direction: column;
padding: 0;
border: 0;
box-shadow: none;
}
.sk-terminal-sale-footer {
display: grid;
grid-column: 1 / -1;
grid-template-columns: minmax(10rem, 1fr) auto auto minmax(12rem, auto);
align-items: center;
gap: var(--sk-space-3);
min-height: 4.75rem;
border-top: 1px solid var(--sk-color-border-soft);
padding-top: var(--sk-space-3);
background: var(--sk-color-canvas);
}
.sk-terminal-sale-status {
min-width: 0;
}
.sk-terminal-sale-status > p {
margin: 0;
}
.sk-terminal-sale-footer .sk-terminal-clear-trigger {
min-height: max(44px, var(--sk-terminal-touch-min));
}
.sk-terminal-sale-total {
display: grid;
justify-items: end;
line-height: 1.1;
}
.sk-terminal-sale-total span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-terminal-sale-total strong {
font-size: var(--sk-font-size-xl);
}
.sk-terminal-add-amount,
.sk-terminal-pay-total {
min-height: var(--sk-terminal-touch-min);
padding-inline: var(--sk-space-4);
white-space: nowrap;
}
.sk-terminal-custom-amount-layer {
position: fixed;
inset: 0;
z-index: 120;
display: grid;
place-items: center;
padding: var(--sk-space-4);
background: rgb(20 18 28 / 55%);
}
.sk-terminal-custom-amount-dialog {
display: grid;
width: min(32rem, 100%);
box-sizing: border-box;
max-height: calc(100dvh - 2 * var(--sk-space-4));
overflow-y: auto;
gap: var(--sk-space-4);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-5);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
}
.sk-terminal-custom-amount-dialog label {
display: grid;
gap: var(--sk-space-2);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-custom-amount-dialog input {
min-height: var(--sk-terminal-touch-min);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
padding-inline: var(--sk-space-3);
font: inherit;
}
.sk-terminal-line-actions {
display: flex;
gap: var(--sk-space-2);
}
.sk-terminal-quantity {
display: grid;
grid-template-columns: repeat(3, var(--sk-control-height));
align-items: center;
justify-self: start;
overflow: hidden;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-sm);
background: var(--sk-color-surface);
}
:where(.sk-terminal-quantity button, .sk-terminal-quantity input) {
width: var(--sk-control-height);
min-height: var(--sk-control-height);
border: 0;
background: transparent;
color: var(--sk-color-ink);
font: inherit;
font-weight: var(--sk-font-weight-strong);
text-align: center;
}
:where(.sk-terminal-quantity) button {
cursor: pointer;
}
:where(.sk-terminal-quantity) button:disabled {
color: var(--sk-color-disabled-text);
cursor: not-allowed;
}
:where(.sk-terminal-quantity) input {
border-inline: 1px solid var(--sk-color-border-soft);
appearance: textfield;
}
:where(.sk-terminal-quantity) input::-webkit-inner-spin-button,
:where(.sk-terminal-quantity) input::-webkit-outer-spin-button {
margin: 0;
appearance: none;
}
:where(.sk-terminal-line-actions button, .sk-terminal-price-editor button, .sk-terminal-undo button) {
min-height: var(--sk-control-height);
padding: 0 var(--sk-space-3);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
background: var(--sk-color-surface);
color: var(--sk-color-primary);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
:where(.sk-terminal-line-actions button):last-child {
color: var(--sk-color-danger);
}
.sk-terminal-price-editor {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(7rem, 0.4fr) minmax(12rem, 1fr) auto auto;
align-items: end;
gap: var(--sk-space-3);
padding-top: var(--sk-space-3);
border-top: 1px solid var(--sk-color-border-soft);
}
.sk-terminal-price-editor label {
display: grid;
gap: var(--sk-space-1);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-price-editor input {
width: 100%;
min-width: 0;
min-height: 2.75rem;
padding: 0 var(--sk-space-3);
}
.sk-terminal-undo {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-3);
margin-top: var(--sk-space-3);
padding: var(--sk-space-3);
border-radius: var(--sk-radius-md);
background: var(--sk-color-info-soft);
color: var(--sk-color-info);
}
.sk-terminal-checkout-grid aside {
display: flex;
position: sticky;
top: calc(4.75rem + var(--sk-space-6));
flex-direction: column;
gap: 0.8rem;
align-self: start;
}
.sk-terminal-checkout-grid aside > span {
color: var(--sk-color-ink-soft);
}
.sk-terminal-checkout-grid aside > strong {
margin-bottom: 0.8rem;
font-size: var(--sk-font-size-display);
letter-spacing: -0.04em;
}
.sk-terminal-checkout-grid aside p {
margin: 0;
color: var(--sk-color-success);
font-size: var(--sk-font-size-xs);
}
.sk-terminal-clear-trigger {
align-self: center;
}
.sk-terminal-clear-confirm {
display: grid;
gap: var(--sk-space-3);
border-top: 1px solid var(--sk-color-border-soft);
padding-top: var(--sk-space-4);
}
.sk-terminal-clear-confirm > p {
color: var(--sk-color-ink);
font-size: var(--sk-font-size-sm);
line-height: var(--sk-line-copy);
}
.sk-terminal-clear-confirm > div {
display: flex;
justify-content: flex-end;
gap: var(--sk-space-2);
}
/* .sk-terminal-danger-button er alias for .sk-terminal-danger-outline i
01a-contract.css. */
.sk-terminal-notice {
margin: 1rem 0 0;
border-radius: var(--sk-radius-md);
padding: 0.8rem 1rem;
background: var(--sk-color-info-soft);
color: var(--sk-color-info);
font-size: var(--sk-font-size-xs);
line-height: 1.45;
}
/* ── Kvittering: valg, sendinger og status ───────────────────────────────────
Valget ligger over betalingsmåtene, ikke under dem: kunden står der, og
spørsmålet «hvor vil du ha kvitteringen?» stilles FØR kortet dras — ikke
etterpå, når hun allerede har snudd seg mot døra. */
.sk-terminal-receipt-choice {
display: grid;
gap: var(--sk-space-2);
margin-top: var(--sk-space-4);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-3);
background: var(--sk-color-surface);
}
/* Fire like store flater. Med `1fr` per kolonne treffer fingeren like sikkert
på «Ingen» som på «Skriv ut», og ingen av dem ser ut som hovedvalget. */
.sk-terminal-segmented {
display: grid;
/* Fire like brede flater når det er plass, to og to når det ikke er det.
`auto-fit` framfor et mediespørsmål: knappene skal aldri bli smalere enn
en tommel, uansett hvilken bredde panelet får. */
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
gap: var(--sk-space-1);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-1);
background: var(--sk-color-surface-hover);
}
.sk-terminal-segmented > button {
min-height: var(--sk-terminal-touch-min);
border: 0;
border-radius: var(--sk-radius-sm);
padding: 0 var(--sk-space-2);
background: transparent;
color: var(--sk-color-ink-soft);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-terminal-segmented > button.is-selected {
background: var(--sk-color-primary);
color: white;
}
.sk-terminal-segmented > button:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.sk-terminal-receipt-paper {
display: flex;
align-items: center;
gap: var(--sk-space-2);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-receipt-target {
display: grid;
gap: var(--sk-space-1);
}
.sk-terminal-receipt-target > span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-receipt-actions {
display: grid;
gap: var(--sk-space-2);
margin-top: var(--sk-space-4);
}
/* Knappene brytes framfor å krympe: «Send på e-post» skal aldri stå med
avkuttet tekst på en håndholdt terminal. */
.sk-terminal-receipt-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-2);
}
.sk-terminal-receipt-deliveries {
display: grid;
gap: var(--sk-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.sk-terminal-receipt-deliveries > li {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-terminal-receipt-deliveries > li > span:last-child {
display: grid;
}
.sk-terminal-receipt-deliveries small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-cashup-sale-receipts {
display: grid;
gap: var(--sk-space-1);
border-top: 1px solid var(--sk-color-border-soft);
padding-top: var(--sk-space-3);
margin-top: var(--sk-space-3);
}
.sk-profile-receipt-preference {
display: grid;
gap: var(--sk-space-2);
}
/* --- Gavekortsalg (wave 3 A) --------------------------------------------
Arket låner formen fra rabattarket med vilje: operatøren skal kjenne igjen
«et ark med felter og én blå knapp», ikke lære en ny flate for hver ting
som selges. Koden etter betalingen står i monospace — den skal leses opp
og tastes inn av et menneske, og 0/O og 1/I må kunne skilles. */
.sk-terminal-giftcard-layer {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
padding: var(--sk-space-4);
background: rgb(0 0 0 / 45%);
}
.sk-terminal-giftcard-sheet {
display: grid;
gap: var(--sk-space-3);
width: min(34rem, 100%);
max-height: 90vh;
overflow-y: auto;
padding: var(--sk-space-5);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
}
.sk-terminal-giftcard-sheet > header {
display: flex;
align-items: center;
gap: var(--sk-space-3);
}
.sk-terminal-giftcard-sheet label,
.sk-terminal-giftcard-issued > ul > li {
display: grid;
gap: var(--sk-space-2);
}
.sk-terminal-giftcard-amounts {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-2);
}
.sk-terminal-giftcard-amounts > button {
flex: 1 1 6rem;
min-height: 3rem;
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-giftcard-amounts > button.is-active,
.sk-terminal-giftcard-pill.is-sent {
border-color: var(--sk-color-accent);
background: var(--sk-color-accent-soft);
}
.sk-terminal-giftcard-vat,
.sk-terminal-giftcard-blocker {
margin: 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-terminal-giftcard-issued {
display: grid;
gap: var(--sk-space-2);
border-top: 1px solid var(--sk-color-border-soft);
padding-top: var(--sk-space-3);
margin-top: var(--sk-space-3);
}
.sk-terminal-giftcard-issued ul {
display: grid;
gap: var(--sk-space-3);
margin: 0;
padding: 0;
list-style: none;
}
.sk-terminal-giftcard-code {
font-family: var(--sk-font-mono);
font-size: var(--sk-font-size-lg);
letter-spacing: 0.08em;
}
.sk-terminal-giftcard-pill {
justify-self: start;
border-radius: 999px;
padding: 0.15rem 0.65rem;
background: var(--sk-color-surface-subtle);
font-size: var(--sk-font-size-xs);
}
.sk-terminal-giftcard-pill.is-failed {
background: var(--sk-color-danger-soft, var(--sk-color-surface-subtle));
}
/* Gavekort-flis ved «Start salg uten time» */
.sk-terminal-giftcard-tile { gap: var(--sk-space-2); }
/* Rabattkode, kundeklubbkupong og kvitteringsvalg i betalingsvalget. Skilt ut fra 02-shifts-and-checkout.css
(grense 1200 linjer); importeres rett etter den, så kaskaden er uendret. */
/* ── Rabattkode og kundeklubbkupong i betalingsvalget ─────────────────────────
Basisklassen .sk-terminal-package-tender er grønn med vilje: den er klippet,
noe kunden ALLEREDE har betalt for. Rabattkoden og kupongen deler den, men
er bare grønne når en kode/kupong faktisk er brukt (`is-applied`). Ellers er
de et vanlig, rolig kort som ikke konkurrerer med betalingsmåtene over. */
.sk-terminal-package-tender.sk-terminal-discount-card:not(.is-applied) {
border: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
}
.sk-terminal-package-tender.sk-terminal-discount-card:not(.is-applied) > .sk-terminal-eyebrow,
.sk-terminal-discount-card:not(.is-applied) > summary .sk-terminal-eyebrow {
color: var(--sk-color-ink-soft);
}
.sk-terminal-discount-card__summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sk-space-2) var(--sk-space-3);
min-height: var(--sk-terminal-touch-min);
list-style: none;
cursor: pointer;
}
.sk-terminal-discount-card__summary::-webkit-details-marker { display: none; }
.sk-terminal-discount-card > summary .sk-terminal-eyebrow {
display: flex;
align-items: center;
gap: var(--sk-space-2);
margin: 0;
}
.sk-terminal-discount-card[open]:not(.is-applied) > summary .sk-terminal-eyebrow { color: var(--sk-color-ink-soft); }
.sk-terminal-discount-card.is-applied > summary .sk-terminal-eyebrow { color: var(--sk-color-success); }
.sk-terminal-discount-card__hint {
flex: 1 1 12rem;
color: var(--sk-color-ink-soft);
}
.sk-terminal-discount-card__chevron {
margin-left: auto;
transition: transform 120ms ease;
}
.sk-terminal-discount-card[open] .sk-terminal-discount-card__chevron { transform: rotate(180deg); }
/* Lukket er kortet én linje: ingen ekstra luft under sammendraget. */
details.sk-terminal-discount-card:not([open]) { gap: 0; }
/* Kvitteringsvalget er sammenlagt til én linje som sier hva kunden får. */
.sk-terminal-receipt-details {
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
}
.sk-terminal-receipt-details > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-3);
min-height: var(--sk-terminal-touch-min);
padding: var(--sk-space-2) var(--sk-space-4);
list-style: none;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-terminal-receipt-details > summary::-webkit-details-marker { display: none; }
.sk-terminal-receipt-details > summary > span { min-width: 0; overflow-wrap: anywhere; }
.sk-terminal-receipt-details > summary > svg { flex: none; transition: transform 120ms ease; }
.sk-terminal-receipt-details[open] > summary > svg { transform: rotate(180deg); }
/* Inne i den sammenlagte rammen trenger valget ikke en egen ramme til. */
.sk-terminal-receipt-details > .sk-terminal-receipt-choice {
margin-top: 0;
border: 0;
border-top: 1px solid var(--sk-color-border-soft);
border-radius: 0 0 var(--sk-radius-md) var(--sk-radius-md);
padding: var(--sk-space-3) var(--sk-space-4) var(--sk-space-4);
}
/* Aktiv rabatt som én linje ved beløpet, så frisøren ser at koden er trukket
fra uten å lete i kortet under betalingsmåtene. */
.sk-terminal-payment-discount-line {
color: var(--sk-color-success);
font-weight: var(--sk-font-weight-strong);
}
/* «Gå til avstemming» står under «Kontroller igjen», som sekundær vei. */
.sk-terminal-payment-reconcile {
display: grid;
gap: var(--sk-space-2);
justify-items: start;
margin-top: var(--sk-space-3);
}
.sk-terminal-payment-reconcile > button { min-height: var(--sk-terminal-touch-min); }
details.sk-terminal-package-tender.sk-terminal-discount-card:not([open]) { padding-block: var(--sk-space-2); }
/* Lange referanser må kunne brytes i den fullførte kvitteringen, også når
kunden bruker større tekst. Hjelpetekst må ha kontrast på den grønne flaten. */
.sk-terminal-payment-flow.is-complete dl,
.sk-terminal-payment-flow.is-complete dd { min-inline-size: 0; }
.sk-terminal-package-tender .sk-terminal-help { color: var(--sk-color-ink); }
/* Beløpet følger valgt tekststørrelse. Skjermbredden velger bare trinnet. */
.sk-terminal-payment-flow.is-complete {
--sk-checkout-total-font-size: var(--sk-type-checkout-total-compact);
--sk-type-display-total: var(--sk-checkout-total-font-size);
overflow-wrap: anywhere;
}
.sk-terminal-payment-flow.is-complete > * { min-inline-size: 0; max-inline-size: 100%; }
@media (min-width: 768px) {
.sk-terminal-payment-flow.is-complete { --sk-checkout-total-font-size: var(--sk-type-checkout-total-medium); }
}
@media (min-width: 1200px) {
.sk-terminal-payment-flow.is-complete { --sk-checkout-total-font-size: var(--sk-type-checkout-total-wide); }
}
/* Invertert skjerm: canvas-tekst på ink-flate = 14.96:1 og følger temaet. */
.sk-customer-display {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--sk-color-ink);
color: var(--sk-color-canvas);
}
/* Kundeskjermen deler enhetsklasse og safe-area med resten av terminalen.
Faste ytre felt; bare varelisten bruker plassen som er igjen og kan rulle. */
html[data-surface="display"] .sk-customer-display {
box-sizing: border-box;
height: 100dvh;
min-height: 0;
padding: var(--sk-safe-top) var(--sk-safe-right) var(--sk-safe-bottom) var(--sk-safe-left);
}
.sk-customer-display::before,
.sk-customer-display::after {
content: "";
position: absolute;
width: 38rem;
height: 38rem;
border-radius: 50%;
filter: blur(80px);
opacity: 0.34;
pointer-events: none;
animation: sk-customer-orbit 14s ease-in-out infinite alternate;
}
.sk-customer-display::before {
top: -18rem;
right: -10rem;
background: var(--sk-color-primary);
}
.sk-customer-display::after {
bottom: -24rem;
left: -8rem;
background: var(--sk-color-signal);
animation-delay: -7s;
}
.sk-customer-display > header {
position: relative;
z-index: 2;
border-color: rgb(255 255 255 / 10%);
background: rgb(17 17 20 / 55%);
}
.sk-customer-display > header > div {
flex-shrink: 0;
}
.sk-customer-display > header > span {
color: rgb(255 255 255 / 60%);
font-size: var(--sk-type-display-small);
min-width: 0;
overflow-wrap: anywhere;
text-align: right;
}
/* Sesongprofilen er et eget, ikke-interaktivt lag. Den kan derfor endres uten
å berøre handlekurv, betalingsstatus eller personverntekst. Uttrykket holdes
i ytterkantene av skjermen slik at beløp og QR-kode alltid har ro. */
.sk-customer-season {
position: absolute;
inset: 5rem 0 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
/* Jul: nisseluen sitter på Min Rutine-merket, mens langsom snø gir liv i den
mørke bakgrunnen uten å konkurrere med betalingen. */
.sk-customer-display.season-christmas .sk-terminal-mark.is-small::before {
content: "";
position: absolute;
top: -0.78rem;
left: -0.12rem;
width: 2.15rem;
height: 1.15rem;
border-radius: 1.6rem 1.6rem 0.18rem 0.18rem;
background: #c9343d;
clip-path: polygon(0 100%, 31% 4%, 100% 78%, 88% 100%);
transform: rotate(-8deg);
transform-origin: bottom center;
}
.sk-customer-display.season-christmas .sk-terminal-mark.is-small::after {
content: "";
position: absolute;
top: -0.18rem;
left: -0.18rem;
width: 2.45rem;
height: 0.42rem;
border-radius: 1rem;
background: #fff7ec;
box-shadow: 1.83rem -0.78rem 0 -0.04rem #fff7ec;
}
.sk-customer-snow {
--snow-left: 8%;
--snow-delay: 0s;
--snow-duration: 12s;
position: absolute;
top: -1.2rem;
left: var(--snow-left);
width: 0.38rem;
height: 0.38rem;
border-radius: 50%;
background: rgb(255 255 255 / 72%);
box-shadow: 0 0 1rem rgb(255 255 255 / 30%);
animation: sk-customer-snowfall var(--snow-duration) linear infinite;
animation-delay: var(--snow-delay);
}
.sk-customer-snow:nth-child(2) {
--snow-left: 16%;
--snow-delay: -8s;
--snow-duration: 15s;
}
.sk-customer-snow:nth-child(3) {
--snow-left: 24%;
--snow-delay: -3s;
--snow-duration: 11s;
}
.sk-customer-snow:nth-child(4) {
--snow-left: 33%;
--snow-delay: -10s;
--snow-duration: 17s;
}
.sk-customer-snow:nth-child(5) {
--snow-left: 41%;
--snow-delay: -5s;
--snow-duration: 13s;
}
.sk-customer-snow:nth-child(6) {
--snow-left: 49%;
--snow-delay: -12s;
--snow-duration: 18s;
}
.sk-customer-snow:nth-child(7) {
--snow-left: 57%;
--snow-delay: -7s;
--snow-duration: 12s;
}
.sk-customer-snow:nth-child(8) {
--snow-left: 64%;
--snow-delay: -1s;
--snow-duration: 16s;
}
.sk-customer-snow:nth-child(9) {
--snow-left: 71%;
--snow-delay: -9s;
--snow-duration: 14s;
}
.sk-customer-snow:nth-child(10) {
--snow-left: 78%;
--snow-delay: -4s;
--snow-duration: 19s;
}
.sk-customer-snow:nth-child(11) {
--snow-left: 84%;
--snow-delay: -13s;
--snow-duration: 15s;
}
.sk-customer-snow:nth-child(12) {
--snow-left: 90%;
--snow-delay: -6s;
--snow-duration: 12s;
}
.sk-customer-snow:nth-child(13) {
--snow-left: 95%;
--snow-delay: -11s;
--snow-duration: 18s;
}
.sk-customer-snow:nth-child(14) {
--snow-left: 4%;
--snow-delay: -2s;
--snow-duration: 16s;
}
.sk-customer-display.season-winter .sk-customer-snow {
opacity: 0.5;
}
/* Vår: lyse kronblader. Sommer: små solglimt. Høst: varme blader. Samme
posisjonsmønster brukes for alle, men form og bevegelse følger årstiden. */
.sk-customer-petal,
.sk-customer-summer-glint,
.sk-customer-leaf {
--season-left: 8%;
--season-delay: 0s;
--season-duration: 16s;
position: absolute;
top: -2rem;
left: var(--season-left);
animation: sk-customer-season-fall var(--season-duration) ease-in-out infinite;
animation-delay: var(--season-delay);
}
.sk-customer-petal {
width: 0.72rem;
height: 1rem;
border-radius: 80% 15% 80% 15%;
background: #f5a9c5;
box-shadow: 0 0 0.8rem rgb(245 169 197 / 22%);
opacity: 0.66;
}
.sk-customer-summer-glint {
width: 0.56rem;
height: 0.56rem;
border-radius: 50%;
background: #ffd264;
box-shadow: 0 0 1.35rem 0.35rem rgb(255 210 100 / 24%);
opacity: 0.72;
animation-name: sk-customer-summer-float;
}
.sk-customer-leaf {
width: 0.66rem;
height: 1.12rem;
border-radius: 85% 12% 85% 12%;
background: #d17a38;
box-shadow: inset -0.16rem -0.1rem rgb(119 58 29 / 25%);
opacity: 0.72;
}
.sk-customer-petal:nth-child(2),
.sk-customer-summer-glint:nth-child(2),
.sk-customer-leaf:nth-child(2) {
--season-left: 16%;
--season-delay: -11s;
--season-duration: 19s;
}
.sk-customer-petal:nth-child(3),
.sk-customer-summer-glint:nth-child(3),
.sk-customer-leaf:nth-child(3) {
--season-left: 25%;
--season-delay: -4s;
--season-duration: 14s;
}
.sk-customer-petal:nth-child(4),
.sk-customer-summer-glint:nth-child(4),
.sk-customer-leaf:nth-child(4) {
--season-left: 34%;
--season-delay: -15s;
--season-duration: 22s;
}
.sk-customer-petal:nth-child(5),
.sk-customer-summer-glint:nth-child(5),
.sk-customer-leaf:nth-child(5) {
--season-left: 43%;
--season-delay: -7s;
--season-duration: 17s;
}
.sk-customer-petal:nth-child(6),
.sk-customer-summer-glint:nth-child(6),
.sk-customer-leaf:nth-child(6) {
--season-left: 52%;
--season-delay: -18s;
--season-duration: 23s;
}
.sk-customer-petal:nth-child(7),
.sk-customer-summer-glint:nth-child(7),
.sk-customer-leaf:nth-child(7) {
--season-left: 61%;
--season-delay: -9s;
--season-duration: 18s;
}
.sk-customer-petal:nth-child(8),
.sk-customer-summer-glint:nth-child(8),
.sk-customer-leaf:nth-child(8) {
--season-left: 70%;
--season-delay: -2s;
--season-duration: 15s;
}
.sk-customer-petal:nth-child(9),
.sk-customer-summer-glint:nth-child(9),
.sk-customer-leaf:nth-child(9) {
--season-left: 79%;
--season-delay: -13s;
--season-duration: 21s;
}
.sk-customer-petal:nth-child(10),
.sk-customer-summer-glint:nth-child(10),
.sk-customer-leaf:nth-child(10) {
--season-left: 88%;
--season-delay: -6s;
--season-duration: 16s;
}
.sk-customer-petal:nth-child(11),
.sk-customer-leaf:nth-child(11) {
--season-left: 95%;
--season-delay: -16s;
--season-duration: 20s;
}
.sk-customer-petal:nth-child(12),
.sk-customer-leaf:nth-child(12) {
--season-left: 4%;
--season-delay: -8s;
--season-duration: 18s;
}
.sk-customer-display.season-spring::after {
background: #77c99a;
}
.sk-customer-display.season-summer::after {
background: #f4b849;
}
.sk-customer-display.season-autumn::after {
background: #c86f36;
}
/* Halloween: to enkle edderkopper beveger seg bare langs ytterkanten. */
.sk-customer-display.season-halloween {
--sk-season-accent: #ff8b2c;
}
.sk-customer-display.season-halloween::after {
background: var(--sk-season-accent);
}
.sk-customer-web {
position: absolute;
top: -6.5rem;
width: 13rem;
height: 13rem;
border: 1px solid rgb(255 255 255 / 15%);
border-radius: 50%;
background:
repeating-conic-gradient(
from 0deg,
rgb(255 255 255 / 14%) 0 1deg,
transparent 1deg 30deg
),
repeating-radial-gradient(
circle,
transparent 0 1.8rem,
rgb(255 255 255 / 12%) 1.85rem 1.92rem
);
}
.sk-customer-web.is-left {
left: -6.5rem;
}
.sk-customer-web.is-right {
right: -6.5rem;
transform: scaleX(-1);
}
.sk-customer-spider {
position: absolute;
top: -1rem;
width: 1px;
height: 9rem;
background: rgb(255 255 255 / 28%);
animation: sk-customer-spider-drop 7s ease-in-out infinite alternate;
}
.sk-customer-spider.is-left {
left: 11%;
}
.sk-customer-spider.is-right {
right: 12%;
animation-delay: -3.5s;
}
.sk-customer-spider b {
position: absolute;
bottom: -0.9rem;
left: -0.58rem;
width: 1.15rem;
height: 1.35rem;
border-radius: 50% 50% 45% 45%;
background: #07070a;
box-shadow:
-0.7rem 0.18rem 0 -0.5rem #07070a,
0.7rem 0.18rem 0 -0.5rem #07070a;
}
.sk-customer-spider b::before,
.sk-customer-spider b::after {
content: "";
position: absolute;
top: 0.42rem;
width: 1rem;
height: 0.55rem;
border-top: 2px solid #07070a;
border-bottom: 2px solid #07070a;
}
.sk-customer-spider b::before {
right: 0.8rem;
transform: rotate(18deg);
}
.sk-customer-spider b::after {
left: 0.8rem;
transform: rotate(-18deg);
}
/* Pride: samme mørke Min Rutine-flate, med en rolig fargebue langs kanten. */
.sk-customer-display.season-pride::before {
background: #7957ff;
}
.sk-customer-pride-ribbon {
position: absolute;
width: 45rem;
height: 45rem;
border: 0.7rem solid transparent;
border-radius: 50%;
background:
linear-gradient(var(--sk-color-ink), var(--sk-color-ink)) padding-box,
conic-gradient(
#e93445,
#f49b2f,
#f2dc4b,
#2eac6d,
#82667f,
#8250be,
#e93445
)
border-box;
opacity: 0.36;
animation: sk-customer-pride-drift 18s ease-in-out infinite alternate;
}
.sk-customer-pride-ribbon.is-one {
right: -28rem;
top: -24rem;
}
.sk-customer-pride-ribbon.is-two {
left: -34rem;
bottom: -31rem;
animation-delay: -9s;
}
@keyframes sk-customer-snowfall {
from {
transform: translate3d(-0.8rem, -2rem, 0) rotate(0deg);
}
50% {
transform: translate3d(1.1rem, 50vh, 0) rotate(140deg);
}
to {
transform: translate3d(-0.4rem, 105vh, 0) rotate(280deg);
}
}
@keyframes sk-customer-spider-drop {
from {
transform: translateY(-3.5rem);
}
to {
transform: translateY(3rem);
}
}
@keyframes sk-customer-pride-drift {
from {
transform: rotate(-8deg) scale(0.96);
}
to {
transform: rotate(8deg) scale(1.04);
}
}
@keyframes sk-customer-season-fall {
from {
transform: translate3d(-1rem, -3rem, 0) rotate(-20deg);
}
35% {
transform: translate3d(1.5rem, 35vh, 0) rotate(90deg);
}
70% {
transform: translate3d(-1.2rem, 72vh, 0) rotate(210deg);
}
to {
transform: translate3d(1rem, 108vh, 0) rotate(340deg);
}
}
@keyframes sk-customer-summer-float {
from {
transform: translate3d(0, 105vh, 0) scale(0.7);
opacity: 0;
}
25% {
opacity: 0.72;
}
60% {
transform: translate3d(1.2rem, 48vh, 0) scale(1);
}
to {
transform: translate3d(-0.7rem, -3rem, 0) scale(0.76);
opacity: 0;
}
}
.sk-customer-welcome,
.sk-customer-transaction {
position: relative;
z-index: 1;
flex: 1;
}
.sk-customer-display .sk-customer-welcome,
.sk-customer-display .sk-customer-transaction {
min-height: 0;
min-width: 0;
}
.sk-customer-welcome {
display: grid;
place-items: center;
align-content: center;
text-align: center;
}
.sk-customer-display .sk-display-portal-entrance {
box-sizing: border-box;
max-width: calc(100% - var(--sk-space-8));
}
/* Norske ukedager og måneder skrives med liten bokstav; bare første tegn opp. */
.sk-customer-welcome-date {
display: inline-block;
color: rgb(255 255 255 / 58%);
}
.sk-customer-welcome-date::first-letter {
text-transform: uppercase;
}
.sk-customer-welcome h1 {
margin: 0.4rem 0;
max-width: min(90vw, 60rem);
font-size: var(--sk-type-display-queue);
letter-spacing: -0.05em;
text-wrap: balance;
}
.sk-customer-display .sk-customer-welcome h1,
.sk-customer-display .sk-customer-transaction-heading h1 {
overflow-wrap: anywhere;
}
.sk-customer-welcome span {
color: rgb(255 255 255 / 76%);
font-size: var(--sk-font-size-2xl);
}
/* 40 % hvit ga 3.73:1 mot ink – under 4.5:1 for brødtekst, og bare 2.54:1 der den lyse
signal-sirkelen nederst til venstre slår inn. 72 % gir 8.82:1 mot ink og 4.59:1 i
verste punkt over sirkelen, men holder fortsatt notisen nedtonet. */
.sk-customer-privacy {
position: relative;
z-index: 1;
padding: 1rem;
color: rgb(255 255 255 / 72%);
font-size: var(--sk-type-display-small);
text-align: center;
}
.sk-customer-display .sk-customer-privacy {
flex: 0 0 auto;
}
.sk-customer-transaction {
display: grid;
grid-template-rows: auto 1fr auto;
width: min(64rem, calc(100% - 4rem));
margin: 0 auto;
padding: 3rem 0 2rem;
}
.sk-customer-display .sk-customer-transaction {
grid-template-rows: auto minmax(0, 1fr) auto;
gap: var(--sk-space-4);
padding-block: clamp(var(--sk-space-4), 3vh, var(--sk-space-12)) var(--sk-space-4);
}
.sk-customer-transaction-body {
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
gap: var(--sk-space-4);
}
.sk-customer-display .sk-customer-qr {
flex: 0 0 auto;
max-width: 100%;
margin-block: 0;
}
.sk-customer-display .sk-customer-qr svg {
width: clamp(9rem, 23vh, 240px);
height: auto;
max-width: 100%;
}
.sk-customer-transaction-heading {
text-align: center;
}
.sk-customer-transaction-heading p {
margin: 0 0 0.65rem;
color: var(--sk-color-primary-soft);
font-size: var(--sk-type-display-small);
font-weight: var(--sk-font-weight-strong);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sk-customer-transaction-heading h1 {
margin: 0;
font-size: var(--sk-type-display-name);
letter-spacing: -0.06em;
}
.sk-customer-transaction-heading > span:not(.sk-customer-result-icon) {
display: block;
margin-top: 0.8rem;
color: rgb(255 255 255 / 62%);
}
.sk-customer-result-icon {
display: grid;
place-items: center;
width: 5rem;
height: 5rem;
margin: 0 auto 1.2rem;
border-radius: 50%;
background: var(--sk-color-success);
font-size: var(--sk-font-size-display);
}
.sk-customer-lines {
align-self: center;
overflow: hidden;
border: 1px solid rgb(255 255 255 / 10%);
border-radius: 1rem;
background: rgb(255 255 255 / 5%);
}
.sk-customer-display .sk-customer-lines {
flex: 1 1 auto;
align-self: stretch;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
.sk-customer-lines > div {
display: flex;
justify-content: space-between;
gap: 2rem;
border-bottom: 1px solid rgb(255 255 255 / 9%);
padding: 1.1rem 1.25rem;
font-size: var(--sk-font-size-lg);
}
.sk-customer-display .sk-customer-lines > div {
gap: var(--sk-space-4);
}
.sk-customer-lines > div > span {
min-width: 0;
overflow-wrap: anywhere;
}
.sk-customer-lines > div > strong {
flex-shrink: 0;
text-align: right;
}
.sk-customer-lines > div:last-child {
border-bottom: 0;
}
.sk-customer-transaction > footer {
display: flex;
align-items: end;
justify-content: space-between;
border-top: 1px solid rgb(255 255 255 / 15%);
padding-top: 1.4rem;
}
.sk-customer-display .sk-customer-transaction > footer {
gap: var(--sk-space-4);
min-width: 0;
}
/* Foten ligger over den lyse signal-sirkelen nederst til venstre: 60 % hvit falt til
3.72:1 der. 72 % gir 4.59:1 i verste punkt og 8.82:1 mot ren ink-bakgrunn. */
.sk-customer-transaction > footer span {
color: rgb(255 255 255 / 72%);
}
.sk-customer-transaction > footer strong {
font-size: var(--sk-type-display-welcome);
letter-spacing: -0.06em;
}
.sk-customer-display .sk-customer-transaction > footer strong {
white-space: nowrap;
}
/* Stående nettbrett: kurv, tips og QR stables, også på iPad Pro. */
@media (orientation: portrait) {
html[data-surface="display"][data-device="tablet-portrait"] .sk-customer-transaction-body {
flex-direction: column;
}
html[data-surface="display"][data-device="tablet-portrait"] .sk-customer-transaction {
width: calc(100% - var(--sk-space-8));
}
}
@media (max-width: 760px) {
.sk-customer-display > header {
padding-inline: var(--sk-space-4);
}
.sk-customer-display .sk-customer-transaction {
width: calc(100% - var(--sk-space-8));
}
.sk-customer-display .sk-customer-lines > div {
padding: var(--sk-space-3) var(--sk-space-4);
}
.sk-customer-display .sk-customer-result-icon {
width: var(--sk-space-12);
height: var(--sk-space-12);
margin-bottom: var(--sk-space-2);
}
.sk-customer-display .sk-display-portal-entrance {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
text-align: left;
gap: var(--sk-space-4);
}
.sk-customer-display .sk-display-portal-entrance > svg {
width: clamp(7rem, 20vw, 144px);
height: auto;
}
.sk-customer-display .sk-customer-welcome h1 {
max-width: calc(100vw - var(--sk-space-8) - var(--sk-safe-left) - var(--sk-safe-right));
}
.sk-terminal-enrollment-card {
padding: 1.6rem;
}
.sk-terminal-lock-header {
padding: 0 1rem;
flex-wrap: wrap;
padding-block: 0.75rem;
}
.sk-terminal-lock-header > .sk-terminal-lock-actions {
flex-wrap: wrap;
min-width: 0;
}
.sk-terminal-lock-device {
min-width: 0;
overflow-wrap: anywhere;
}
.sk-terminal-lock-device svg {
flex-shrink: 0;
}
.sk-terminal-lock-header > span {
display: none;
}
.sk-terminal-lock-content {
width: min(100% - 2rem, 36rem);
padding: 2rem 0;
}
.sk-terminal-roster {
grid-template-columns: repeat(2, 1fr);
}
:where(.sk-terminal-roster) > button {
min-height: 9.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-terminal-pin-layer,
.sk-terminal-pin-card,
.sk-customer-display::before,
.sk-customer-display::after {
animation: none;
}
.sk-customer-snow,
.sk-customer-spider,
.sk-customer-pride-ribbon,
.sk-customer-petal,
.sk-customer-summer-glint,
.sk-customer-leaf,
.sk-customer-heart,
.sk-customer-flag,
.sk-customer-spark {
animation: none;
}
}
.sk-terminal-admin-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.sk-terminal-admin-heading p {
margin: 0.3rem 0 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
line-height: 1.45;
}
.sk-terminal-admin-heading > svg {
color: var(--sk-color-primary);
}
.sk-terminal-activation {
display: grid;
justify-items: center;
gap: 0.35rem;
border: 1px solid var(--sk-color-primary);
border-radius: var(--sk-radius-md);
padding: 1.1rem;
background: var(--sk-color-primary-soft);
text-align: center;
}
.sk-terminal-activation span,
.sk-terminal-activation small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-type-display-small);
}
.sk-terminal-activation strong {
color: var(--sk-color-primary-active);
font-size: var(--sk-font-size-2xl);
letter-spacing: 0.12em;
}
.sk-terminal-pin-status {
display: grid;
overflow: hidden;
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
}
.sk-terminal-pin-status > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid var(--sk-color-border-soft);
padding: 0.75rem 1rem;
}
.sk-terminal-pin-status > div:last-child {
border-bottom: 0;
}
.sk-terminal-device-list {
display: grid;
overflow: hidden;
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-md);
}
.sk-terminal-device-list > article {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 0.8rem;
border-bottom: 1px solid var(--sk-color-border-soft);
padding: 0.8rem;
}
.sk-terminal-device-list > article:last-child {
border-bottom: 0;
}
.sk-terminal-device-list article > div {
display: grid;
gap: 0.15rem;
}
.sk-terminal-device-list small {
color: var(--sk-color-ink-soft);
}
.sk-terminal-device-icon {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.7rem;
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
}
.sk-terminal-device-icon svg {
width: 1.15rem;
}
/* ── Tips (wave 2 B) ───────────────────────────────────────────────────────
Tipsspørsmålet på kundeskjermen. Beløpene er STORE fordi de leses på
halvannen meters avstand, tvers over disken — det er hele poenget med å
vise dem i det hele tatt. Ingenting her er klikkbart: kundeskjermen har
ingen returkanal, og frisøren taster valget. Se CustomerDisplayTip.tsx. */
.sk-customer-tip {
display: grid;
gap: 1rem;
justify-items: center;
text-align: center;
margin-top: 1.2rem;
}
.sk-customer-display .sk-customer-tip {
flex: 0 0 auto;
margin-top: 0;
gap: var(--sk-space-2);
}
.sk-customer-tip-lead {
font-size: var(--sk-font-size-3xl, 2rem);
font-weight: var(--sk-font-weight-strong);
margin: 0;
}
.sk-customer-tip-options {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.9rem;
}
.sk-customer-display .sk-customer-tip-options {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
width: 100%;
gap: var(--sk-space-2);
}
@media (max-width: 760px) {
.sk-customer-display .sk-customer-tip-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.sk-customer-tip-option {
display: grid;
gap: 0.25rem;
min-width: 9rem;
padding: 1.2rem 1.6rem;
border: 2px solid var(--sk-color-border-soft);
border-radius: var(--sk-terminal-radius, 0.8rem);
background: var(--sk-color-surface, #fff);
/* Kortet er lyst på mørk kundeskjerm; uten egen tekstfarge arvet prosentvalget
hvit tekst og ble usynlig (sett i nettleserharnesset 17. okt). */
color: var(--sk-color-ink);
}
.sk-customer-display .sk-customer-tip-option,
.sk-customer-display .sk-customer-tip-decline {
box-sizing: border-box;
min-width: 44px;
min-height: 44px;
overflow-wrap: anywhere;
padding: var(--sk-space-3) var(--sk-space-4);
}
html[data-surface="display"][data-touch="1"] .sk-customer-tip-option,
html[data-surface="display"][data-touch="1"] .sk-customer-tip-decline {
min-height: var(--sk-touch-min);
}
.sk-customer-tip-option strong {
font-size: var(--sk-font-size-display);
line-height: 1.1;
}
.sk-customer-tip-option span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-lg);
}
.sk-customer-tip-option.is-chosen,
.sk-customer-tip-decline.is-chosen {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
}
.sk-customer-tip-decline {
padding: 0.8rem 1.6rem;
border: 2px solid var(--sk-color-border-soft);
border-radius: var(--sk-terminal-radius, 0.8rem);
font-size: var(--sk-font-size-xl);
}
.sk-customer-tip-note {
margin: 0;
color: var(--sk-color-ink-soft);
}
/* Kassens egen tipsrad. Den bor i betalingsflaten, men stilen står her
sammen med resten av driksen slik at de to sidene holdes i takt. */
.sk-terminal-tip {
display: grid;
gap: 0.6rem;
padding: 0.9rem 0;
border-top: 1px solid var(--sk-color-border-soft);
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-terminal-tip-chips {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.sk-terminal-tip-chips button {
display: grid;
gap: 0.1rem;
min-width: 6.5rem;
justify-items: center;
}
.sk-terminal-tip-custom {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.6rem;
}
.sk-terminal-tip-stylists {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.sk-terminal-tip-stylist {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.8rem 0.4rem 0.4rem;
border: 1px solid var(--sk-color-border-soft);
border-radius: 999px;
background: var(--sk-color-surface, #fff);
}
.sk-terminal-tip-stylist span {
display: grid;
place-items: center;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-tip-stylist.is-selected {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
}
/* ---------------------------------------------------------------------------
Betalings-QR på kundeskjermen.
Hvit flate med god margin rundt koden er ikke pynt: QR-lesere trenger den
stille sonen for å finne kanten av mønsteret, og kundeskjermen har ellers en
mørk bakgrunn som ville spist den. Derfor får koden sitt eget lyse felt.
--------------------------------------------------------------------------- */
.sk-customer-qr {
margin: 20px auto 8px;
padding: 16px;
width: fit-content;
background: #fff;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.sk-customer-qr svg {
display: block;
/* Skarpe modulkanter. Uten dette interpolerer nettleseren rutene og gjør
mønsteret uskarpt i kantene, som er nettopp der leseren finner det. */
image-rendering: pixelated;
}
.sk-customer-qr figcaption {
color: #23212c;
font-size: var(--sk-font-size-md);
font-weight: var(--sk-font-weight-medium);
text-align: center;
max-width: 22ch;
}
/* ------------------------------------------------------------------ Timebok
*
* Rutenettet for hele salongen: én kolonne per frisør, tidsakse til venstre.
* Flaten er en BERØRINGSSKJERM — hvert kvarter er 30 px høyt, dra-håndtaket i
* bunnen av en blokk er en drøy centimeter, og alt som kan dras har
* `touch-action: none` slik at skjermen ikke ruller i stedet for å flytte timen.
*/
.sk-timebook {
overflow: hidden;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-card);
}
/* Loddrett skala, lest av TimebookPanel. Én verdi styrer både det som tegnes
og det draing regner med — to tall ville drevet fra hverandre. */
.sk-timebook-scroll {
--sk-timebook-minute: 1.05;
/* `72vh` tok ikke hensyn til alt annet på skjermen — topplinje, dato- og
visningsvelger, handlingsrad. På en lav skjerm ble kalenderen da høyere
enn det som var igjen av plassen, og siden bak begynte å scrolle i
stedet for kalenderen. `dvh` framfor `vh` fordi mobilens adresselinje
endrer høyden mens man scroller. */
max-height: min(72dvh, calc(100dvh - 16rem));
overflow: auto;
overscroll-behavior: contain;
/* Kalenderen scroller vannrett når frisørene ikke får plass. Uten dette
arvet den sidens berøringsretning og satt fast. */
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
}
.sk-timebook-grid {
display: grid;
grid-template-columns: 4.5rem var(--sk-timebook-columns);
min-width: max-content;
}
/* Hvor smal en frisørkolonne får bli. Et navn og et klokkeslett trenger
ikke 11rem — under 7rem blir avtalene derimot uleselige, og da er det
bedre å scrolle vannrett. */
.sk-timebook {
--sk-timebook-column-min: 11rem;
}
.sk-timebook-head,
.sk-timebook-body {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
min-width: 0;
}
.sk-timebook-head {
position: sticky;
top: 0;
z-index: 3;
}
.sk-timebook-head-cell,
.sk-timebook-corner {
background: var(--sk-color-surface);
border-bottom: 1px solid var(--sk-color-border);
}
.sk-timebook-corner {
position: sticky;
left: 0;
z-index: 4;
}
.sk-timebook-head-cell {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
min-height: 4.1rem;
overflow: hidden;
padding: 0.55rem 0.7rem;
border-left: 1px solid var(--sk-color-border-soft);
}
.sk-timebook-head-cell strong {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
font-size: var(--sk-font-size-md);
white-space: nowrap;
text-overflow: ellipsis;
}
.sk-timebook-head-cell small {
color: var(--sk-color-ink-faint);
font-size: var(--sk-font-size-xs);
}
.sk-timebook-head-cell.is-me {
background: var(--sk-color-primary-soft);
}
.sk-timebook-body {
position: relative;
}
.sk-timebook-gutter {
position: relative;
}
.sk-timebook-gutter span {
position: absolute;
right: 0.55rem;
transform: translateY(-0.4rem);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-variant-numeric: tabular-nums;
}
/* Første klokkeslett ligger på selve toppkanten. Uten dette klippes øverste
halvdel av tallet bort, og dagen ser ut til å begynne en time senere. */
.sk-timebook-gutter span:first-child {
transform: none;
}
.sk-timebook-column {
position: relative;
border-left: 1px solid var(--sk-color-border-soft);
}
.sk-timebook-slot {
border-bottom: 0;
}
.sk-timebook-slot.is-half-hour {
border-bottom: 1px dashed
color-mix(in srgb, var(--sk-color-border) 45%, var(--sk-color-surface));
}
.sk-timebook-slot.is-hour {
border-bottom: 1px solid var(--sk-color-border);
}
/* Slippsonen må ses fra en armlengdes avstand, ikke bare anes. */
.sk-timebook-slot.is-target {
background: var(--sk-color-primary-soft);
box-shadow: inset 0 0 0 1px var(--sk-color-primary);
}
.sk-timebook-now {
position: absolute;
left: 0;
right: 0;
z-index: 2;
height: 2px;
background: var(--sk-color-signal);
pointer-events: none;
}
.sk-timebook-block {
--sk-timebook-accent: var(--sk-appointment-booked);
position: absolute;
z-index: 1;
display: grid;
gap: 0.05rem;
align-content: start;
overflow: hidden;
border: 1px solid
color-mix(in srgb, var(--sk-timebook-accent) 38%, var(--sk-color-surface));
border-left: 5px solid var(--sk-timebook-accent);
border-radius: 0.55rem;
padding: 0.28rem 0.45rem 0;
background: color-mix(
in srgb,
var(--sk-timebook-accent) 12%,
var(--sk-color-surface)
);
color: var(--sk-color-ink);
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.sk-timebook-block:active {
cursor: grabbing;
}
.sk-timebook-block strong {
overflow: hidden;
font-size: var(--sk-font-size-sm);
white-space: nowrap;
text-overflow: ellipsis;
}
.sk-timebook-block small {
overflow: hidden;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
white-space: nowrap;
text-overflow: ellipsis;
}
.sk-timebook-block-time {
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
font-variant-numeric: tabular-nums;
}
.sk-timebook-block.is-narrow {
padding-right: 0.25rem;
padding-left: 0.3rem;
}
/* Under 60 minutter (38–50 px på kasse-PC) er blokka to tekstrader høy. Rutenettet ga tid, navn og
merkelapp hver sin rad, og `overflow: hidden` klipte akkurat det navnet
frisøren leser rutenettet for. Korte blokker legger derfor tid og navn på
samme rad; merkelappen står i aria-teksten og på kortet. */
.sk-timebook-block.is-short {
grid-auto-flow: column;
grid-template-columns: auto minmax(0, 1fr);
align-content: center;
align-items: baseline;
gap: 0.3rem;
padding-bottom: 0.28rem;
}
.sk-timebook-block.is-short.is-fragment {
grid-auto-flow: row;
}
.sk-timebook-block.is-short.is-fragment .sk-timebook-block-time {
grid-column: 1;
grid-row: 1;
}
.sk-timebook-block.is-short.is-fragment strong {
grid-column: 2;
grid-row: 1;
}
.sk-timebook-block.is-short.is-fragment .sk-timebook-continuation {
grid-column: 1 / -1;
grid-row: 2;
}
.sk-timebook-block.is-short .sk-timebook-block-status {
display: none;
}
/* Håndtaket dekket hele rad to. På en kort blokk er det navnets rad. */
.sk-timebook-block.is-short .sk-timebook-resize {
height: 0.6rem;
}
.sk-timebook-block.is-arrived,
.sk-timebook-block.is-started {
--sk-timebook-accent: var(--sk-appointment-arrived);
}
.sk-timebook-block.is-completed {
--sk-timebook-accent: var(--sk-appointment-completed);
}
.sk-timebook-block.is-no_show {
--sk-timebook-accent: var(--sk-appointment-no-show);
}
.sk-timebook-block.is-pending {
--sk-timebook-accent: var(--sk-appointment-pending);
}
.sk-timebook-block.is-locked {
cursor: default;
}
/* Blokkert tid er ikke en time. Den er dempet og skravert nettopp for å ikke
kunne forveksles med en kunde på tvers av rommet: ingen aksentkant i
statusfarge, ingen merkelapp, og ingen dra-gest — den kan bare fjernes. */
.sk-timebook-block.is-block {
--sk-timebook-accent: var(--sk-color-ink-faint);
border-left-width: 1px;
background:
repeating-linear-gradient(
135deg,
transparent 0 6px,
color-mix(in srgb, var(--sk-color-ink-faint) 16%, transparent) 6px 12px
),
color-mix(in srgb, var(--sk-color-ink-faint) 8%, var(--sk-color-surface));
color: var(--sk-color-ink-soft);
cursor: pointer;
touch-action: manipulation;
}
.sk-timebook-block.is-dragging {
opacity: 0.42;
}
.sk-timebook-block.is-resizing {
z-index: 5;
box-shadow: 0 10px 26px rgb(35 33 44 / 22%);
}
/* Mens svaret ventes er blokka ikke fasit ennå. Den dempes så ingen rekker å
tro at flyttingen er lagret før serveren har sagt ja. */
.sk-timebook-block.is-saving {
opacity: 0.62;
cursor: progress;
}
.sk-timebook-resize {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1.35rem;
border-radius: 0 0 0.5rem 0.5rem;
background: linear-gradient(
to top,
color-mix(in srgb, var(--sk-timebook-accent) 26%, transparent),
transparent
);
cursor: ns-resize;
touch-action: none;
}
.sk-timebook-resize::after {
content: "";
position: absolute;
bottom: 0.28rem;
left: 50%;
width: 1.6rem;
height: 3px;
transform: translateX(-50%);
border-radius: 2px;
background: var(--sk-timebook-accent);
}
/* Radene i «Mine avtaler» er knapper: kunden står foran deg, og statusen skal
være ett trykk unna der navnet allerede står. */
:where(.sk-terminal-appointments) > button {
display: grid;
grid-template-columns: 5rem 1fr auto;
align-items: center;
gap: 1rem;
width: 100%;
min-height: 5.3rem;
padding: 0.9rem 1.15rem;
border: 0;
border-bottom: 1px solid var(--sk-color-border-soft);
background: var(--sk-color-surface);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
:where(.sk-terminal-appointments) > button:last-child {
border-bottom: 0;
}
:where(.sk-terminal-appointments) > button:hover {
background: var(--sk-color-surface-hover);
}
:where(.sk-terminal-appointments) > button time {
font-size: var(--sk-font-size-lg);
font-weight: var(--sk-font-weight-strong);
}
:where(.sk-terminal-appointments) > button > div {
display: grid;
gap: 0.25rem;
}
:where(.sk-terminal-appointments) > button > div span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
/* Detaljene bak en blokk. Ligger på samme lag som PIN-koden, og arver derfor
dens bakgrunn, uskarphet og animasjon. */
.sk-timebook-sheet {
position: relative;
width: min(28rem, 100%);
padding: 2rem 1.8rem 1.8rem;
border-radius: 1.4rem;
background: var(--sk-color-surface);
box-shadow: 0 28px 80px rgb(35 33 44 / 25%);
animation: sk-modal-in var(--sk-motion-slow) var(--sk-ease-emphasized);
}
.sk-timebook-sheet h2 {
margin: 0.15rem 0 0.2rem;
font-size: var(--sk-type-section-title);
letter-spacing: -0.035em;
}
.sk-timebook-sheet > .sk-terminal-eyebrow {
margin-top: 1.6rem;
}
.sk-timebook-sheet-service {
margin: 0 0 1.2rem;
color: var(--sk-color-ink-soft);
}
/* Hvem kunden er: status og telefon på samme linje, rett under navnet.
De lå før i en definisjonsliste under kundekortet — for å ringe kunden
måtte man bla forbi forrige behandling og fargeformelen. */
.sk-timebook-sheet-identity {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sk-space-3);
margin: 0 0 0.35rem;
}
.sk-timebook-sheet-phone {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--sk-color-primary);
}
.sk-timebook-sheet-notes {
margin: 0 0 1.2rem;
border-radius: var(--sk-radius-md);
padding: 0.8rem 0.95rem;
background: var(--sk-color-surface-hover);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-timebook-sheet-actions {
display: grid;
gap: 0.6rem;
}
:where(.sk-timebook-sheet-actions) button {
min-height: var(--sk-terminal-control-h);
}
.sk-timebook-visit-workflow {
display: grid;
gap: var(--sk-space-3);
margin-top: var(--sk-space-5);
border-top: 1px solid var(--sk-color-border-soft);
padding-top: var(--sk-space-4);
}
.sk-timebook-visit-workflow__heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sk-space-3);
}
.sk-timebook-visit-workflow__heading h3,
.sk-timebook-visit-workflow__heading span {
margin: 0;
}
.sk-timebook-visit-workflow__heading h3 {
font-size: var(--sk-type-card-title);
}
.sk-timebook-visit-workflow__heading span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-timebook-progress {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
margin: 0;
padding: 0;
list-style: none;
}
.sk-timebook-progress li {
position: relative;
display: grid;
justify-items: center;
gap: var(--sk-space-1);
min-width: 0;
color: var(--sk-color-ink-faint);
text-align: center;
}
.sk-timebook-progress li::before {
position: absolute;
top: 0.42rem;
right: 50%;
left: -50%;
height: 2px;
background: var(--sk-color-border-soft);
content: "";
}
.sk-timebook-progress li:first-child::before {
display: none;
}
.sk-timebook-progress li > span {
position: relative;
z-index: 1;
width: 0.9rem;
height: 0.9rem;
border: 2px solid var(--sk-color-border-interactive);
border-radius: 50%;
background: var(--sk-color-surface);
}
.sk-timebook-progress li.is-complete,
.sk-timebook-progress li.is-current {
color: var(--sk-color-ink);
}
.sk-timebook-progress li.is-complete::before,
.sk-timebook-progress li.is-current::before {
background: var(--sk-color-primary);
}
.sk-timebook-progress li.is-complete > span {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary);
}
.sk-timebook-progress li.is-current > span {
border-color: var(--sk-color-primary);
box-shadow: 0 0 0 4px var(--sk-color-primary-soft);
}
.sk-timebook-progress small {
max-width: 100%;
overflow: hidden;
font-size: var(--sk-font-size-xs);
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-timebook-sheet-actions.is-forward-actions,
.sk-timebook-sheet-actions.is-undo-actions {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.sk-timebook-sheet-actions.is-undo-actions {
border-top: 1px solid var(--sk-color-border-soft);
padding-top: var(--sk-space-3);
}
.sk-timebook-sheet-actions.is-undo-actions > small {
grid-column: 1 / -1;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-timebook-sheet-exception {
border-top: 1px solid var(--sk-color-border-soft);
padding-top: var(--sk-space-3);
}
:where(.sk-timebook-sheet-exception) > button {
width: 100%;
}
.sk-timebook-sheet-work-actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--sk-space-3);
margin-top: var(--sk-space-5);
}
:where(.sk-timebook-sheet-work-actions) > button,
:where(.sk-timebook-sheet-work-actions) > a {
width: 100%;
}
.sk-timebook-sheet-work-actions > .sk-terminal-hint {
grid-column: 1 / -1;
}
/* .sk-timebook-sheet-danger, -undo og -charge er aliaser i 01a-contract.css
(danger-outline / secondary) og skal ikke brukes i ny kode. */
/* Arket bærer nå både timen, notatet og kundekortet. Det blir høyere enn en
liggende terminalskjerm, så det ruller — men bare inni seg selv, slik at
bakgrunnen bak ligger stille. */
.sk-timebook-sheet {
max-height: min(92vh, 58rem);
overflow-y: auto;
overscroll-behavior: contain;
}
/* To likeverdige valg ved siden av hverandre: kunde fra registeret, eller
drop-in. Ingen av dem er «det avanserte alternativet». */
.sk-terminal-segmented {
display: flex;
gap: 0.4rem;
margin-top: 1.4rem;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-terminal-radius);
padding: 0.3rem;
}
:where(.sk-terminal-segmented) button {
flex: 1;
min-height: 2.8rem;
border: 0;
border-radius: var(--sk-terminal-radius);
background: transparent;
color: var(--sk-color-ink-soft);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
:where(.sk-terminal-segmented) button.is-active {
background: var(--sk-color-surface-hover);
color: inherit;
}
.sk-timebook-sheet-delay {
margin-top: 1.5rem;
border-top: 1px solid var(--sk-color-border-soft);
padding-top: 1.1rem;
}
.sk-timebook-sheet-delay-actions {
display: flex;
gap: 0.6rem;
margin-top: 0.5rem;
}
:where(.sk-timebook-sheet-delay-actions) button {
flex: 1;
}
.sk-timebook-delay-preview {
display: grid;
gap: var(--sk-space-2);
margin-top: var(--sk-space-3);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-4);
background: var(--sk-color-surface-hover);
}
.sk-timebook-delay-preview > label {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-timebook-delay-preview > textarea {
width: 100%;
min-height: 7.5rem;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-3);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
line-height: 1.5;
resize: vertical;
}
.sk-timebook-delay-preview > small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
/* Knappen som setter opp en ny time. Står i seksjonsoverskriften, der blikket
allerede er når man leter etter en ledig rute. */
.sk-timebook-new {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: var(--sk-terminal-control-h);
padding-inline: 1.1rem;
white-space: nowrap;
}
.sk-timebook-view-summary,
.sk-timebook-opening-hours {
margin: 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
line-height: 1.45;
}
.sk-timebook-opening-hours {
display: block;
margin-top: var(--sk-space-1);
}
.sk-timebook-heading {
align-items: flex-start;
flex-wrap: wrap;
}
.sk-timebook-date-nav {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-timebook-date-nav h1 {
margin: 0;
/* Dag/Uke, «Bare mine», Kalender/Liste og Ny time deler raden med datoen;
datoen brytes ikke — verktøylinja bryter i stedet under. */
white-space: nowrap;
}
.sk-timebook-date-nav h1::first-letter {
text-transform: uppercase;
}
.sk-timebook-controls {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
row-gap: var(--sk-space-2);
align-items: center;
justify-content: flex-end;
gap: var(--sk-space-3);
margin-left: auto;
}
/* Står sammen med .sk-terminal-icon-button (01a-contract.css), som eier
form og størrelse; her bare fargen og varselet ved hover. */
.sk-timebook-disruption {
color: var(--sk-color-ink-soft);
}
.sk-timebook-disruption:hover:not(:disabled) {
border-color: var(--sk-color-warning);
color: var(--sk-color-warning);
}
/* En ledig rute skal se ut som noe man kan trykke på — men bare så vidt, ellers
konkurrerer rutenettet med timene som ligger i det. */
.sk-timebook-slot.is-open {
cursor: pointer;
}
.sk-timebook-slot.is-open:hover {
background: var(--sk-color-surface-hover);
}
.sk-timebook-sheet-note {
display: grid;
gap: 0.45rem;
margin-top: 1.4rem;
}
.sk-timebook-sheet-note input,
.sk-timebook-sheet-note select {
width: 100%;
min-height: var(--sk-terminal-control-h);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-terminal-radius);
padding: 0.55rem 0.85rem;
background: var(--sk-color-surface);
color: inherit;
font: inherit;
}
.sk-timebook-sheet-note label {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-timebook-sheet-note > small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-appointment-cancellation {
display: grid;
gap: var(--sk-space-3);
margin-top: var(--sk-space-3);
border-top: 1px solid var(--sk-color-border-soft);
padding-top: var(--sk-space-4);
}
.sk-appointment-cancellation > p {
margin: 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
line-height: 1.5;
}
.sk-appointment-cancellation__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sk-space-3);
}
.sk-timebook-sheet-exception.is-cancellation {
margin-top: 0;
border-top: 1px solid var(--sk-color-border-soft);
padding-top: var(--sk-space-3);
}
.sk-disruption-sheet {
width: min(54rem, 100%);
max-height: min(90vh, 58rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.sk-disruption-tabs {
margin: var(--sk-space-5) 0 var(--sk-space-4);
}
.sk-disruption-list {
display: grid;
gap: var(--sk-space-3);
margin-top: var(--sk-space-4);
}
.sk-disruption-item {
display: grid;
gap: var(--sk-space-3);
border-top: 1px solid var(--sk-color-border-soft);
padding: var(--sk-space-4) 0 0;
}
.sk-disruption-item > header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sk-space-4);
}
.sk-disruption-item > header > span:first-child {
display: grid;
min-width: 0;
gap: var(--sk-space-1);
}
.sk-disruption-item > header small {
color: var(--sk-color-ink-soft);
}
.sk-disruption-choice {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-2) var(--sk-space-5);
}
.sk-disruption-choice > label {
display: flex;
align-items: center;
gap: var(--sk-space-2);
min-height: var(--sk-terminal-touch-min);
font-weight: var(--sk-font-weight-strong);
}
.sk-disruption-choice input {
width: 1.2rem;
height: 1.2rem;
accent-color: var(--sk-color-primary);
}
.sk-disruption-message {
display: grid;
gap: var(--sk-space-2);
}
.sk-disruption-message > textarea,
.sk-disruption-item > textarea {
width: 100%;
min-height: 6rem;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-3);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
resize: vertical;
}
.sk-disruption-delay-options {
display: flex;
gap: var(--sk-space-2);
margin-top: var(--sk-space-4);
}
:where(.sk-disruption-delay-options) > button {
min-height: var(--sk-terminal-touch-min);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-pill);
padding: 0 var(--sk-space-4);
background: var(--sk-color-surface);
color: inherit;
font: inherit;
font-weight: var(--sk-font-weight-strong);
}
:where(.sk-disruption-delay-options) > button.is-active {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
}
.sk-disruption-submit {
position: sticky;
bottom: calc(-1 * var(--sk-space-6));
z-index: 4;
width: 100%;
margin-top: var(--sk-space-5);
box-shadow: 0 -1rem 1.5rem var(--sk-color-surface);
}
.sk-timebook-sheet-note > small.sk-terminal-error {
color: var(--sk-color-danger);
}
.sk-timebook-sheet-note textarea {
width: 100%;
min-height: 3.6rem;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-terminal-radius);
padding: 0.7rem 0.85rem;
background: var(--sk-color-surface);
color: inherit;
font: inherit;
resize: vertical;
}
.sk-new-appointment-schedule {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-3);
}
.sk-new-appointment-schedule-state {
margin: var(--sk-space-2) 0 0;
}
.sk-new-appointment-customer-selected {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-4);
min-height: var(--sk-control-height);
margin-top: var(--sk-space-3);
border: 1px solid var(--sk-color-primary);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-3) var(--sk-space-4);
background: var(--sk-color-primary-soft);
}
.sk-new-appointment-customer-selected > span {
display: grid;
min-width: 0;
gap: var(--sk-space-1);
}
.sk-new-appointment-customer-selected small {
overflow: hidden;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-new-service-picker {
position: relative;
}
.sk-new-service-picker__label {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-new-service-picker__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-3);
width: 100%;
min-height: var(--sk-control-height);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-3) var(--sk-space-4);
background: var(--sk-color-surface);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.sk-new-service-picker__trigger > span {
display: grid;
min-width: 0;
gap: var(--sk-space-1);
}
.sk-new-service-picker__trigger small,
.sk-new-service-options small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-new-service-picker__trigger svg {
width: 1.1rem;
flex: none;
transform: rotate(-90deg);
transition: transform var(--sk-motion-fast) var(--sk-ease-standard);
}
.sk-new-service-picker__trigger svg.is-open {
transform: rotate(90deg);
}
.sk-new-service-options {
display: grid;
max-height: min(32rem, 52vh);
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
}
.sk-new-service-picker__panel {
display: grid;
gap: var(--sk-space-2);
padding-top: var(--sk-space-2);
}
.sk-new-service-picker__panel > label {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-new-service-picker__search {
display: flex;
align-items: center;
gap: var(--sk-space-2);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
padding: 0 var(--sk-space-3);
background: var(--sk-color-surface);
}
.sk-new-service-picker__search svg { width: 1rem; flex: none; }
.sk-new-service-picker__search input {
width: 100%;
min-height: var(--sk-control-height);
border: 0;
background: transparent;
color: inherit;
font: inherit;
}
.sk-new-service-picker__search input:focus { outline: 0; }
.sk-new-service-picker__search:focus-within { outline: 2px solid var(--sk-color-border-interactive); outline-offset: 2px; }
.sk-new-service-picker__empty { padding: var(--sk-space-3) var(--sk-space-4); }
:where(.sk-new-service-options) > button {
display: grid;
justify-items: start;
gap: var(--sk-space-1);
min-height: var(--sk-terminal-touch-min);
border: 0;
border-bottom: 1px solid var(--sk-color-border-soft);
padding: var(--sk-space-3) var(--sk-space-4);
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
:where(.sk-new-service-options) > button:last-of-type {
border-bottom: 0;
}
:where(.sk-new-service-options) > button:hover,
:where(.sk-new-service-options) > button:focus-visible,
:where(.sk-new-service-options) > button.is-selected {
background: var(--sk-color-surface-selected);
}
.sk-new-appointment-notifications {
display: grid;
gap: var(--sk-space-2);
margin: var(--sk-space-5) 0 0;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-4);
}
.sk-new-appointment-notifications legend {
padding: 0 var(--sk-space-2);
font-weight: var(--sk-font-weight-strong);
}
.sk-new-appointment-notifications > p {
margin: 0 0 var(--sk-space-1);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-new-appointment-notifications > label {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
align-items: center;
gap: var(--sk-space-3);
min-height: var(--sk-control-height);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-3);
background: var(--sk-color-surface);
cursor: pointer;
}
.sk-new-appointment-notifications > label.is-disabled {
background: var(--sk-color-disabled-bg);
color: var(--sk-color-disabled-text);
cursor: not-allowed;
}
.sk-new-appointment-notifications input {
width: 1.25rem;
height: 1.25rem;
accent-color: var(--sk-color-primary);
}
.sk-new-appointment-notifications svg {
width: 1.25rem;
height: 1.25rem;
}
.sk-new-appointment-notifications span {
display: grid;
min-width: 0;
gap: 0.15rem;
}
.sk-new-appointment-notifications small {
overflow: hidden;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-timebook-sheet-note-actions {
display: flex;
align-items: center;
gap: 0.7rem;
}
:where(.sk-timebook-sheet-note-actions) button {
min-height: var(--sk-terminal-control-h);
}
.sk-timebook-sheet > .sk-timebook-sheet-actions:last-of-type {
position: sticky;
bottom: calc(-1 * var(--sk-space-6));
z-index: 4;
margin-top: var(--sk-space-5);
padding: var(--sk-space-4) 0 calc(var(--sk-space-4) + env(safe-area-inset-bottom));
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--sk-color-surface) 0%, transparent),
var(--sk-color-surface) var(--sk-space-4)
);
}
.sk-timebook-sheet > .sk-timebook-sheet-actions:last-of-type > small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
text-align: center;
}
/* Kundekortet. Skilt fra timen med en linje, fordi det er kundens historikk og
ikke dagens avtale. */
.sk-timebook-sheet-card {
margin-top: 1.6rem;
border-top: 1px solid var(--sk-color-border-soft);
padding-top: 1.2rem;
}
.sk-timebook-sheet-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.sk-timebook-sheet-card-head h3 {
margin: 0;
font-size: var(--sk-type-card-title);
}
.sk-timebook-sheet-latest {
display: grid;
gap: 0.2rem;
margin: 0.8rem 0 1.2rem;
border-radius: var(--sk-radius-md);
padding: 0.85rem 0.95rem;
background: var(--sk-color-surface-hover);
}
.sk-timebook-sheet-latest p {
margin: 0;
}
.sk-timebook-sheet-latest small {
color: var(--sk-color-ink-soft);
}
/* Fargeformelen leses av og skrives inn igjen på en flaske. Den skal kunne
leses tegn for tegn på en armlengdes avstand. */
.sk-timebook-sheet-formula {
margin-top: 0.35rem;
font-family: var(--sk-font-mono);
font-size: var(--sk-font-size-md);
letter-spacing: 0.02em;
}
.sk-timebook-sheet-notes-list,
.sk-timebook-sheet-history {
display: grid;
gap: 0.6rem;
margin: 0.6rem 0 1.2rem;
padding: 0;
list-style: none;
}
.sk-timebook-sheet-notes-list > li,
.sk-timebook-sheet-history > li {
display: grid;
gap: 0.15rem;
border-radius: var(--sk-radius-md);
padding: 0.7rem 0.85rem;
background: var(--sk-color-surface-hover);
font-size: var(--sk-font-size-sm);
}
.sk-timebook-sheet-notes-list p,
.sk-timebook-sheet-history span {
margin: 0;
}
.sk-timebook-sheet-notes-list time,
.sk-timebook-sheet-history time,
.sk-timebook-sheet-history small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
/* Varsel-spørsmålet etter en flytting. Ligger som en stripe nederst framfor som
en modal: flyttingen ER lagret, og spørsmålet skal ikke sperre neste gest. */
.sk-timebook-notify {
position: sticky;
bottom: 0;
z-index: 5;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.25rem;
margin-top: 0.75rem;
padding: 0.9rem 1.15rem;
border: 1px solid var(--sk-color-border);
border-radius: 0.9rem;
background: var(--sk-color-surface);
box-shadow: 0 -2px 16px rgb(0 0 0 / 12%);
}
.sk-timebook-notify p {
margin: 0;
font-size: var(--sk-font-size-md);
font-weight: var(--sk-font-weight-strong);
}
.sk-timebook-notify-actions {
display: flex;
gap: 0.6rem;
}
.sk-timebook-notify-dismiss {
min-height: var(--sk-terminal-control-h);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-terminal-radius);
padding: 0 1.25rem;
background: transparent;
color: var(--sk-color-ink-faint);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-timebook-notify-dismiss:hover {
color: var(--sk-color-ink);
}
/* --- Dobbeltbooking: spørsmålet som stopper en overlapp -------------------
Laget legger seg over arkene (z-index høyere enn timebok-arket), fordi
spørsmålet kommer AV en handling i arket og må besvares før det gir mening
å røre noe annet. */
.sk-overlap-layer {
position: fixed;
inset: 0;
z-index: 140;
display: grid;
place-items: center;
padding: 1rem;
background: rgb(20 18 28 / 60%);
}
.sk-overlap-dialog {
display: grid;
width: min(30rem, 100%);
gap: 0.9rem;
border-radius: var(--sk-terminal-radius);
padding: 1.5rem;
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
}
.sk-overlap-dialog h2 {
margin: 0;
font-size: var(--sk-type-section-title);
line-height: 1.35;
}
/* Timen som står i veien står som et faktum, ikke som en advarsel: den er
ikke en feil, den er opplysningen operatøren mangler. */
.sk-overlap-dialog__clash {
margin: 0;
border-radius: var(--sk-terminal-radius);
padding: 0.6rem 0.75rem;
background: var(--sk-color-surface-muted, rgb(0 0 0 / 4%));
color: var(--sk-color-ink-faint);
font-weight: var(--sk-font-weight-strong);
}
.sk-overlap-dialog .sk-terminal-field textarea {
min-height: 4.5rem;
border: 1px solid var(--sk-color-border-interactive, var(--sk-color-border));
border-radius: var(--sk-terminal-radius);
padding: 0.6rem 0.75rem;
font: inherit;
resize: vertical;
}
.sk-overlap-dialog .sk-inline-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
align-items: center;
}
/* ── Kundeprofilen ────────────────────────────────────────────────────────────
En egen arbeidsflate, ikke et kort i timedetaljene. Modalvarianten dekker
skjermen og ligger over timearket. Workspace-varianten nedenfor blir i
terminalens vanlige dokumentflyt, slik at toppfelt og navigasjon beholdes. */
.sk-profile-layer {
position: fixed;
inset: 0;
z-index: 110;
display: flex;
flex-direction: column;
gap: var(--sk-space-5);
padding: var(--sk-space-5) clamp(1rem, 4vw, 2.4rem) var(--sk-space-8);
overflow-y: auto;
background: var(--sk-color-canvas);
animation: sk-fade-in var(--sk-motion-base) var(--sk-ease-standard);
}
.sk-profile-layer.is-workspace {
position: static;
inset: auto;
z-index: auto;
width: 100%;
gap: var(--sk-space-6);
padding: 0;
overflow: visible;
background: transparent;
animation: none;
}
.sk-profile-layer.is-workspace > :not(.sk-terminal-pin-layer) {
width: 100%;
max-width: none;
}
.sk-profile-head {
display: grid;
gap: var(--sk-space-3);
}
/* Profilen beholder sin egen arbeidsflate, men innholdet skal ikke strekkes til
skjermbredden. En rolig lesekolonne gjør journal og handlinger skannbare på
brede terminaler, uten å ofre full bredde på håndholdte flater. */
.sk-profile-layer > :not(.sk-terminal-pin-layer) {
flex: 0 0 auto;
width: min(100%, 64rem);
margin-inline: auto;
}
.sk-profile-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-4);
min-height: 2.75rem;
}
.sk-profile-topline > span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
/* .sk-profile-back er alias for .sk-terminal-secondary i 01a-contract.css. */
.sk-profile-hero {
display: grid;
grid-template-columns: auto minmax(0, 1fr) minmax(17rem, 22rem);
align-items: center;
gap: var(--sk-space-5);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-5);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-card);
}
.sk-profile-photo {
display: grid;
place-items: center;
width: 5.5rem;
height: 5.5rem;
overflow: hidden;
border-radius: 50%;
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
font-size: var(--sk-font-size-xl);
font-weight: var(--sk-font-weight-strong);
}
.sk-profile-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sk-profile-identity {
min-width: 0;
}
.sk-profile-identity h2 {
margin: 0 0 var(--sk-space-1);
font-size: var(--sk-type-section-title);
letter-spacing: -0.035em;
}
.sk-profile-contact {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1rem;
margin: 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-profile-contact a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
text-decoration: none;
}
.sk-profile-hero-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sk-space-2);
flex-wrap: wrap;
max-width: 22rem;
}
.sk-profile-image-action,
.sk-profile-image-remove {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sk-space-2);
min-height: var(--sk-terminal-control-h);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
padding: 0 var(--sk-space-4);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-profile-image-action input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
clip-path: inset(50%);
}
.sk-profile-image-action:has(input:focus-visible) {
outline: 3px solid var(--sk-color-focus-ring);
outline-offset: 2px;
}
.sk-profile-image-action:has(input:disabled),
.sk-profile-image-remove:disabled {
background: var(--sk-color-disabled-bg);
color: var(--sk-color-disabled-text);
cursor: wait;
}
.sk-profile-image-remove {
width: var(--sk-terminal-control-h);
padding: 0;
color: var(--sk-color-danger);
}
.sk-profile-image-error {
margin-block: calc(-1 * var(--sk-space-2)) 0;
}
.sk-profile-workspace {
overflow: hidden;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-card);
}
/* Allergier står OVER fanene. Et varsel som ligger bak et trykk er et varsel
ingen leser før det er for sent. */
.sk-profile-alerts {
display: grid;
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-profile-alerts p {
margin: 0;
border-bottom: 1px solid var(--sk-color-border-soft);
padding: var(--sk-space-3) var(--sk-space-5);
background: var(--sk-color-surface-hover);
font-size: var(--sk-font-size-md);
}
.sk-profile-alerts p:last-child {
border-bottom: 0;
}
.sk-profile-alerts p.is-critical {
background: var(--sk-color-danger-soft);
color: var(--sk-color-danger);
}
.sk-profile-alerts strong {
margin-right: 0.5rem;
text-transform: uppercase;
font-size: var(--sk-font-size-xs);
letter-spacing: 0.08em;
}
.sk-profile-tabs {
display: flex;
gap: var(--sk-space-1);
overflow-x: auto;
border-bottom: 1px solid var(--sk-color-border-soft);
padding: 0 var(--sk-space-4);
}
:where(.sk-profile-tabs) button {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 3.25rem;
padding: 0 var(--sk-space-3);
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--sk-color-ink-soft);
font-weight: var(--sk-font-weight-strong);
white-space: nowrap;
cursor: pointer;
}
:where(.sk-profile-tabs) button.is-active {
border-bottom-color: var(--sk-color-primary);
color: var(--sk-color-ink);
}
:where(.sk-profile-tabs) button small {
border-radius: var(--sk-radius-pill);
padding: 0.05rem 0.45rem;
background: color-mix(in srgb, var(--sk-color-ink) 8%, transparent);
font-size: var(--sk-font-size-xs);
}
:where(.sk-profile-tabs) button.is-active small {
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
}
.sk-profile-body {
display: grid;
gap: var(--sk-space-5);
align-content: start;
padding: var(--sk-space-5);
}
.sk-profile-body > .sk-terminal-eyebrow {
margin: 0.8rem 0 0;
}
.sk-profile-overview {
display: grid;
gap: var(--sk-space-7);
}
.sk-profile-section {
display: grid;
gap: var(--sk-space-4);
padding-top: var(--sk-space-6);
border-top: 1px solid var(--sk-color-border-soft);
}
.sk-profile-section.is-summary {
padding-top: 0;
border-top: 0;
}
/* .sk-profile-section-heading (panelhode) og .sk-profile-stats (nøkkeltall)
er aliaser i 01a-contract.css. */
.sk-profile-section-heading {
margin-bottom: 0;
}
/* Seks nøkkeltall: tre i bredden i lesekolonnen, to på smal skjerm. */
.sk-profile-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-bottom: 0;
}
/* Fargeformelen settes i monospace. Den LESES tegn for tegn og skrives av til
en skål — «6.34 + 9%» tåler ikke en skrift som gjør 1 og l like. */
.sk-profile-formulas,
.sk-profile-visits,
.sk-profile-treatments,
.sk-profile-purchases,
.sk-profile-products {
display: grid;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.sk-profile-formulas > li {
display: grid;
gap: 0.4rem;
border-bottom: 1px solid var(--sk-color-border-soft);
padding: var(--sk-space-3) 0 var(--sk-space-4);
}
.sk-profile-formulas > li:last-child {
border-bottom: 0;
}
.sk-profile-formulas small,
.sk-profile-visits small,
.sk-profile-treatments small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-profile-formulas > li > div {
display: grid;
gap: 0.1rem;
}
.sk-profile-formulas > li > .sk-profile-formula-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: var(--sk-space-3);
}
.sk-profile-formula-head > div {
display: grid;
min-width: 0;
gap: 0.1rem;
}
.sk-profile-formula-edit {
display: inline-flex;
flex: none;
align-items: center;
gap: var(--sk-space-2);
min-height: 2.5rem;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
padding: 0 var(--sk-space-3);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-profile-formula-edit:hover {
border-color: var(--sk-color-primary);
color: var(--sk-color-primary);
}
.sk-profile-formulas em {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-style: normal;
}
.sk-profile-layer code {
border-radius: 0.6rem;
padding: 0.45rem 0.7rem;
background: var(--sk-color-signal-soft);
color: var(--sk-color-ink);
font-family: var(--sk-font-mono);
font-size: var(--sk-font-size-md);
letter-spacing: 0.02em;
word-break: break-word;
}
.sk-profile-next {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.9rem;
border-left: 3px solid var(--sk-color-primary);
border-radius: var(--sk-radius-sm);
padding: var(--sk-space-4);
background: var(--sk-color-primary-soft);
}
.sk-profile-next span:not(.sk-terminal-status) {
color: var(--sk-color-ink-soft);
}
.sk-profile-visits > li {
display: grid;
grid-template-columns: 7rem 1fr auto;
align-items: center;
gap: 0.3rem 0.8rem;
border-bottom: 1px solid var(--sk-color-border-soft);
padding: var(--sk-space-3) 0;
}
.sk-profile-visits.is-upcoming > li:first-child {
border-left: 3px solid var(--sk-color-primary);
border-radius: var(--sk-radius-sm);
padding-inline: var(--sk-space-4);
background: var(--sk-color-primary-soft);
}
.sk-profile-visits time {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-profile-visits small {
grid-column: 2 / -1;
}
.sk-profile-history-heading {
margin: var(--sk-space-2) 0 0;
font-size: var(--sk-font-size-md);
}
.sk-profile-treatments > li {
display: grid;
gap: 0.5rem;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: 0.9rem 1rem;
background: var(--sk-color-surface);
}
.sk-profile-treatments > li.is-reversed {
border-style: dashed;
opacity: 0.75;
}
.sk-profile-treatment-edit {
justify-self: start;
min-height: var(--sk-terminal-control-h);
padding-inline: var(--sk-space-4);
}
.sk-profile-treatments p {
margin: 0;
}
.sk-profile-reversed {
color: var(--sk-color-danger);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-profile-treatment-head,
.sk-profile-purchase-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 1rem;
}
.sk-profile-treatment-head > div:first-child,
.sk-profile-purchase-head > div {
display: grid;
gap: 0.15rem;
}
.sk-profile-purchase-head > div:last-child {
justify-items: end;
gap: 0.35rem;
}
/* Produktene som gikk med i behandlingen — undertøyet i journalen, ikke
overskriften. Derfor lettere ramme enn raden de hører til. */
.sk-profile-products {
gap: 0.25rem;
border-top: 1px solid var(--sk-color-border-soft);
padding-top: 0.5rem;
}
.sk-profile-products > li {
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: var(--sk-font-size-sm);
}
.sk-profile-products small {
color: var(--sk-color-ink-soft);
}
.sk-profile-purchases > li {
display: grid;
gap: 0.5rem;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: 0.9rem 1rem;
background: var(--sk-color-surface);
}
.sk-profile-purchases ul {
display: grid;
gap: 0.25rem;
margin: 0;
border-top: 1px solid var(--sk-color-border-soft);
padding: 0.5rem 0 0;
list-style: none;
}
.sk-profile-purchases ul li {
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: var(--sk-font-size-sm);
}
.sk-profile-purchases ul small {
color: var(--sk-color-ink-soft);
}
/* Inngangen til profilen, slik den ser ut nede i timen: ett kort, ett trykk.
Alt som før krevde rulling ligger nå bak dette trykket. */
.sk-profile-teaser {
display: flex;
align-items: center;
gap: 0.8rem;
width: 100%;
margin-top: 1.2rem;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-lg);
padding: 0.9rem 1rem;
background: var(--sk-color-surface);
text-align: left;
cursor: pointer;
transition:
border-color var(--sk-motion-fast),
background var(--sk-motion-fast);
}
.sk-profile-teaser:hover {
border-color: var(--sk-color-primary);
background: var(--sk-color-surface-hover);
}
.sk-profile-teaser-body {
display: grid;
gap: 0.25rem;
flex: 1;
min-width: 0;
}
.sk-profile-teaser strong {
font-size: var(--sk-font-size-lg);
}
.sk-profile-teaser small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-profile-teaser-latest {
color: var(--sk-color-ink);
font-size: var(--sk-font-size-sm);
}
.sk-profile-teaser code {
justify-self: start;
border-radius: 0.55rem;
padding: 0.3rem 0.55rem;
background: var(--sk-color-signal-soft);
font-family: var(--sk-font-mono);
font-size: var(--sk-font-size-sm);
}
.sk-profile-teaser-cta {
color: var(--sk-color-primary);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-profile-teaser svg {
flex: none;
color: var(--sk-color-ink-faint);
}
/* Navnet i timearket er også en vei inn til kunden — samme mål, kortere vei. */
.sk-timebook-sheet-customer {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin: 0.15rem 0 0.2rem;
border: 0;
padding: 0;
background: none;
color: var(--sk-color-ink);
font: inherit;
font-size: var(--sk-font-size-2xl);
font-weight: var(--sk-font-weight-strong);
letter-spacing: -0.035em;
cursor: pointer;
}
.sk-timebook-sheet-customer svg {
width: 1.15rem;
height: 1.15rem;
color: var(--sk-color-primary);
}
.sk-timebook-sheet-customer:hover span {
text-decoration: underline;
}
/* ── Registrer behandling ─────────────────────────────────────────────────────
Arket er høyere enn de andre fordi det SKRIVES i, ikke bare trykkes i: felt,
søk og forbruksrader under hverandre. Rullingen ligger inne i arket, slik at
knappen for å lagre aldri havner utenfor skjermen på en liten terminal. */
.sk-treatment-sheet {
width: min(34rem, 100%);
max-height: min(92vh, 60rem);
overflow-y: auto;
}
.sk-treatment-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
gap: 0.8rem;
margin: 1rem 0 1.4rem;
}
.sk-treatment-fields label {
display: grid;
gap: 0.3rem;
}
.sk-treatment-fields > * {
min-width: 0;
}
.sk-treatment-fields > .is-wide {
grid-column: 1 / -1;
}
.sk-treatment-fields > .is-wide > .sk-terminal-secondary {
min-inline-size: 0;
max-inline-size: 100%;
white-space: normal;
}
.sk-treatment-fields span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-treatment-fields input,
.sk-treatment-fields textarea {
width: 100%;
min-height: var(--sk-terminal-control-h);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
padding: 0.6rem 0.8rem;
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
resize: vertical;
}
.sk-treatment-fields input:focus-visible,
.sk-treatment-fields textarea:focus-visible {
outline: 2px solid var(--sk-color-focus-ring);
outline-offset: 2px;
border-color: var(--sk-color-primary);
}
/* Formelen skrives av til en skål og leses tegn for tegn — samme begrunnelse
som når den vises i profilen. */
.sk-treatment-fields input.sk-treatment-formula,
.sk-treatment-fields textarea.sk-treatment-formula {
font-family: var(--sk-font-mono);
letter-spacing: 0.02em;
}
.sk-treatment-lines {
display: grid;
gap: 0.4rem;
margin: 0.4rem 0 0.8rem;
padding: 0;
list-style: none;
}
.sk-treatment-lines > li {
display: grid;
grid-template-columns: 1fr 4.5rem auto auto;
align-items: center;
gap: 0.6rem;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
padding: 0.5rem 0.7rem;
background: var(--sk-color-surface);
}
.sk-treatment-lines input {
width: 100%;
min-height: 2.5rem;
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
padding: 0.35rem 0.5rem;
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
text-align: right;
}
.sk-treatment-lines small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-treatment-remove {
display: grid;
place-items: center;
width: 2.2rem;
height: 2.2rem;
border: 0;
border-radius: 50%;
background: var(--sk-color-surface-hover);
color: var(--sk-color-ink-soft);
cursor: pointer;
}
.sk-treatment-hits {
display: grid;
gap: var(--sk-space-2);
margin: var(--sk-space-4) 0;
padding: 0;
list-style: none;
}
/* Treffet er en rad-knapp: mål her, farger i :where-regelen under. */
:where(.sk-treatment-hits) button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
min-height: 4.75rem;
padding: var(--sk-space-3) var(--sk-space-4);
text-align: left;
cursor: pointer;
}
:where(.sk-treatment-hits) button {
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
}
:where(.sk-treatment-hits) button:hover {
border-color: var(--sk-color-primary);
background: var(--sk-color-surface-hover);
}
.sk-treatment-hits small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
/* Journalknappen står blant timens handlinger, men er ikke en statusendring —
samme form som «Ta betalt», som den deler plass med. */
.sk-timebook-sheet-journal {
min-height: var(--sk-terminal-control-h);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-timebook-sheet-journal:hover {
border-color: var(--sk-color-primary);
color: var(--sk-color-primary);
}
.sk-profile-register {
justify-self: start;
min-height: var(--sk-terminal-control-h);
padding: 0.5rem 1.2rem;
}
/* Samtykkekortet på oversikten.
Raden er den samme grammatikken som ellers i profilen: tittel + metatekst
til venstre, kontrollen til høyre. Beviset står i metateksten og ikke i en
egen boks — det skal leses sammen med svaret, ikke som en fotnote. */
.sk-profile-consents {
display: grid;
gap: var(--sk-space-2);
}
.sk-profile-consent-rows {
display: grid;
gap: var(--sk-space-3);
margin: 0;
padding: 0;
list-style: none;
}
.sk-profile-consent-rows > li {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-3);
align-items: center;
justify-content: space-between;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-3);
}
.sk-profile-consent-rows > li > span {
display: grid;
gap: 0.15rem;
min-width: 12rem;
flex: 1 1 12rem;
}
.sk-profile-consent-rows small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
/* To like brede svar, aldri smalere enn en tommel. */
.sk-profile-consent-rows .sk-terminal-segmented {
flex: 0 0 auto;
grid-template-columns: repeat(2, minmax(5rem, 1fr));
}
/* ── Samlet terminalarbeidsflate ─────────────────────────────────────────────
Terminalen bruker samme rytme, flater og navigasjonslogikk som resten av
Min Rutine. Navigasjonen er en rolig arbeidsrail på store skjermer og en
fast, scrollbar fanerad på håndholdte flater. */
.sk-terminal-workspace {
display: flex;
height: 100vh;
height: 100dvh;
min-width: 0;
min-height: 100vh;
min-height: 100dvh;
flex-direction: column;
overflow: hidden;
background: var(--sk-color-canvas);
}
.sk-terminal-skip-link {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
box-sizing: border-box;
position: fixed;
top: 0.5rem;
left: 0.5rem;
z-index: 250;
padding: var(--sk-space-2) var(--sk-space-3);
border-radius: var(--sk-radius-md);
background: var(--sk-color-ink);
color: var(--sk-color-canvas);
transform: translateY(-150%);
}
.sk-terminal-skip-link:focus {
transform: translateY(0);
}
.sk-terminal-workspace-header {
position: sticky;
top: 0;
z-index: 30;
display: grid;
flex: 0 0 4.75rem;
grid-template-columns: minmax(12rem, auto) 1fr auto;
min-height: 4.75rem;
padding: 0 var(--sk-space-5);
border-bottom: 1px solid var(--sk-color-border-soft);
background: color-mix(in srgb, var(--sk-color-surface) 94%, transparent);
box-shadow: 0 1px 0 rgb(35 33 44 / 3%);
}
/* Innholdet bestemmer høyden også når responsive regler setter flex-basis.
Enhetsnavn og knapper må bli i headeren når tekst bryter over flere linjer. */
.sk-terminal-workspace > header.sk-terminal-workspace-header {
flex-basis: auto;
}
.sk-terminal-workspace-header > *,
.sk-terminal-workspace-header .sk-terminal-brand > span:last-child {
min-width: 0;
}
.sk-terminal-workspace-header .sk-terminal-brand > span:last-child small {
white-space: normal;
overflow-wrap: anywhere;
}
.sk-terminal-brand > span:last-child {
display: grid;
gap: 0.1rem;
padding: 0;
border: 0;
color: var(--sk-color-ink);
}
.sk-terminal-brand > span:last-child strong {
line-height: 1;
letter-spacing: -0.025em;
}
.sk-terminal-brand > span:last-child small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-medium);
}
.sk-terminal-workspace-context {
display: grid;
align-content: center;
justify-items: center;
line-height: 1.2;
}
.sk-terminal-workspace-context span {
color: var(--sk-color-ink-faint);
font-size: var(--sk-font-size-xs);
}
.sk-terminal-workspace-context strong {
font-size: var(--sk-font-size-sm);
}
.sk-terminal-workspace-context strong::first-letter {
text-transform: uppercase;
}
.sk-terminal-workspace-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--sk-space-2);
}
/* Skriverbrikka står ved siden av språkvalget. Den bruker den vanlige
merkelappen fra kontrakten — ingen egen farge, ingen egen form — men skal
aldri brytes over to linjer eller presse profilknappen ut av topplinja. */
.sk-terminal-workspace-actions > .sk-terminal-status {
flex: 0 0 auto;
align-self: center;
}
/* Under 900 px er plassen brukt opp av dato og profil. Fargen på brikka bærer
beskjeden alene der; den fulle setningen står uansett i varselet under
overskriften. */
@media (max-width: 56.25rem) {
.sk-terminal-workspace-actions > .sk-terminal-status {
padding: var(--sk-space-1) var(--sk-space-2);
font-size: 0;
}
.sk-terminal-workspace-actions > .sk-terminal-status::before {
content: "";
display: block;
width: 0.5rem;
height: 0.5rem;
border-radius: var(--sk-radius-pill);
background: currentcolor;
}
}
.sk-terminal-workspace-layout {
display: grid;
grid-template-columns: 7rem minmax(0, 1fr);
/* Én rad som er nøyaktig så høy som plassen under topplinja OG eventuelle
varsler (skriver frakoblet, nett borte). Menyen og innholdet måler seg mot
denne raden — ikke mot 100dvh minus en fast topplinje. Med det gamle
regnestykket dyttet skriver-banneret «Betal» under kanten på kasse-PC-en. */
grid-template-rows: minmax(0, 1fr);
min-height: 0;
flex: 1 1 auto;
overflow: hidden;
}
.sk-terminal-workspace-nav {
align-self: stretch;
display: flex;
flex-direction: column;
gap: var(--sk-space-1);
height: 100%;
min-height: 0;
padding: var(--sk-space-3) var(--sk-space-2);
overflow-y: auto;
background: var(--sk-color-ink);
}
:where(.sk-terminal-workspace-nav) button {
display: grid;
place-items: center;
gap: 0.3rem;
min-height: 4.25rem;
border: 0;
border-radius: var(--sk-radius-md);
padding: var(--sk-space-2);
background: transparent;
color: color-mix(in srgb, var(--sk-color-canvas) 72%, transparent);
font: inherit;
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
:where(.sk-terminal-workspace-nav) button svg {
width: 1.25rem;
height: 1.25rem;
}
:where(.sk-terminal-workspace-nav) button:hover {
background: color-mix(in srgb, var(--sk-color-canvas) 9%, transparent);
color: var(--sk-color-canvas);
}
:where(.sk-terminal-workspace-nav) button.is-active {
background: var(--sk-color-primary);
color: white;
box-shadow: 0 0.45rem 1.3rem
color-mix(in srgb, var(--sk-color-primary) 32%, transparent);
}
:where(.sk-terminal-workspace-nav) button.sk-terminal-nav-pay {
min-height: var(--sk-terminal-touch-min);
background: var(--sk-color-primary);
color: var(--sk-color-on-action);
}
:where(.sk-terminal-workspace-nav) button.sk-terminal-nav-pay[aria-current="page"] {
box-shadow: 0 0 0 2px white, 0 0.45rem 1.3rem color-mix(in srgb, var(--sk-color-primary) 42%, transparent);
}
/* «Betal» og beløpet skal alltid være lesbare mot den fylte knappen, uansett hvilken
nav-regel (rail, bunnmeny) som ellers gjør tekst dempet. */
.sk-terminal-workspace-nav button.sk-terminal-nav-pay :is(span, small, svg) {
color: var(--sk-color-on-action);
opacity: 1;
}
:where(.sk-terminal-workspace-nav) button.sk-terminal-nav-pay small {
/* Flisa er smal. «Aktivt salg: 919 kr» brøt over tre linjer og dyttet
betalingsknappen ut av rekka — beløpet er det eneste tallet noen leser her,
og hele setningen står i tittel og aria-etikett. */
max-width: 100%;
overflow: hidden;
font-size: var(--sk-font-size-xs);
line-height: 1.1;
white-space: nowrap;
text-overflow: ellipsis;
}
.sk-terminal-nav-spacer {
flex: 1 1 auto;
}
.sk-terminal-workspace-nav > .sk-terminal-mobile-more-trigger {
position: relative;
display: none;
}
.sk-terminal-nav-badge {
position: absolute;
top: var(--sk-space-1);
right: var(--sk-space-2);
display: inline-grid;
min-width: 1.2rem;
height: 1.2rem;
place-items: center;
border-radius: var(--sk-radius-pill);
padding-inline: 0.3rem;
background: var(--sk-color-warning);
color: white;
font-size: var(--sk-font-size-xs);
line-height: 1;
}
.sk-terminal-mobile-more-layer {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
align-items: end;
padding: var(--sk-space-4);
background: color-mix(in srgb, var(--sk-color-ink) 58%, transparent);
}
.sk-terminal-mobile-more-sheet {
width: min(34rem, 100%);
margin-inline: auto;
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-5);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
animation: sk-terminal-more-enter var(--sk-motion-base) ease-out;
}
.sk-terminal-mobile-more-sheet > header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sk-space-4);
margin-bottom: var(--sk-space-4);
}
.sk-terminal-mobile-more-sheet h2 {
margin: 0;
font-size: var(--sk-type-section-title);
letter-spacing: -0.035em;
}
:where(.sk-terminal-mobile-more-sheet > header) > button {
display: grid;
width: var(--sk-control-height);
height: var(--sk-control-height);
flex: none;
place-items: center;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
cursor: pointer;
}
.sk-terminal-mobile-more-sheet > header svg {
width: 1.25rem;
}
.sk-terminal-mobile-more-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-3);
}
:where(.sk-terminal-mobile-more-grid) > button {
position: relative;
display: flex;
min-height: 4.5rem;
align-items: center;
gap: var(--sk-space-3);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-4);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
font-weight: var(--sk-font-weight-strong);
text-align: left;
cursor: pointer;
}
:where(.sk-terminal-mobile-more-grid) > button:hover,
:where(.sk-terminal-mobile-more-grid) > button.is-active {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
}
:where(.sk-terminal-mobile-more-grid) > button svg {
width: 1.3rem;
flex: none;
color: var(--sk-color-primary);
}
:where(.sk-terminal-mobile-more-grid) > button strong {
display: inline-grid;
min-width: 1.4rem;
height: 1.4rem;
margin-left: auto;
place-items: center;
border-radius: var(--sk-radius-pill);
background: var(--sk-color-warning);
color: white;
font-size: var(--sk-font-size-xs);
}
@keyframes sk-terminal-more-enter {
from {
opacity: 0;
transform: translateY(var(--sk-space-4));
}
}
.sk-terminal-workspace-content {
height: 100%;
min-width: 0;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--sk-space-6);
}
.sk-terminal-workspace-content:has(> .sk-timebook-panel) {
box-sizing: border-box;
height: 100%;
min-height: 0;
overflow: hidden;
}
.sk-terminal-workspace-content > .sk-terminal-panel,
.sk-terminal-workspace-content > .sk-timebook-panel {
width: min(82rem, 100%);
margin: 0 auto;
padding: 0 0 var(--sk-space-8);
}
.sk-terminal-workspace-content > .sk-page {
width: min(82rem, 100%);
margin: 0 auto;
padding: 0 0 var(--sk-space-8);
}
.sk-terminal-workspace-content > .sk-timebook-panel {
padding-bottom: 0;
}
/* Oversikten («Hjem»: hode, snarveier, dagens timer, «mer»-rutenettet) ligger i
06b-workspace-overview.css. */
.sk-timebook-panel {
display: flex;
height: 100%;
min-height: 0;
flex-direction: column;
}
.sk-timebook-panel > .sk-timebook {
min-height: 16rem;
flex: 1 1 auto;
}
.sk-timebook-panel .sk-timebook-scroll {
height: 100%;
max-height: none;
}
.sk-terminal-day-status {
position: relative;
z-index: 8;
display: grid;
flex: 0 0 auto;
grid-template-columns: minmax(8rem, 0.8fr) minmax(6rem, 0.55fr) minmax(17rem, 1.5fr) minmax(10rem, auto);
gap: var(--sk-space-2);
margin-bottom: var(--sk-space-3);
}
.sk-terminal-day-status.is-compact {
display: flex;
margin: 0;
}
.sk-terminal-day-status.is-compact .sk-terminal-day-status-item {
/* Stemplingen står nå i kontrollraden ved siden av visningsvelgeren og
«Ny time». Den skal ta den plassen den trenger, ikke 28 rem. */
/* Ingen egen boks i hodet: tekst + knapp, som de andre handlingene. Boksen
fikk «Stemple inn» til å se ut som en annen slags knapp enn «Ny time». */
width: auto;
min-height: 0;
border: 0;
border-radius: 0;
padding: 0;
background: transparent;
}
/* Ikke stemplet inn: varselfargen bare på ikonet, ikke en gul boks midt i
hodet. */
.sk-terminal-day-status.is-compact .sk-terminal-day-status-item:not(.is-clocked-in) > svg {
color: var(--sk-color-warning);
}
.sk-timebook-panel > .sk-terminal-section-heading {
align-items: center;
min-height: var(--sk-control-height);
}
.sk-terminal-day-status-item,
:where(.sk-terminal-roster-control) > button {
display: flex;
min-height: var(--sk-terminal-touch-min);
align-items: center;
gap: var(--sk-space-2);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-2) var(--sk-space-3);
background: var(--sk-color-surface);
}
.sk-terminal-day-status-item {
justify-content: space-between;
}
.sk-terminal-day-status-item > span {
color: var(--sk-color-ink-soft);
}
:where(.sk-terminal-day-status-item.is-attendance) button,
:where(.sk-terminal-roster-control) > button {
min-height: var(--sk-terminal-touch-min);
border: 0;
border-radius: var(--sk-terminal-radius);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
:where(.sk-terminal-day-status-item.is-attendance) button {
margin-left: auto;
padding-inline: var(--sk-space-3);
background: var(--sk-color-primary);
color: white;
}
.sk-terminal-roster-control {
position: relative;
}
:where(.sk-terminal-roster-control) > button {
width: 100%;
justify-content: center;
background: var(--sk-color-surface);
color: var(--sk-color-ink);
}
.sk-terminal-roster-popover {
position: absolute;
top: calc(100% + var(--sk-space-2));
right: 0;
z-index: 20;
width: min(28rem, calc(100vw - var(--sk-terminal-nav-w) - 2rem));
max-height: min(30rem, calc(100dvh - 10rem));
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-3);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
}
.sk-terminal-global-error {
width: min(82rem, 100%);
margin: 0 auto var(--sk-space-4);
}
.sk-terminal-day-toolbar {
max-width: 38rem;
margin: 0 auto var(--sk-space-5);
}
.sk-terminal-today-columns {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 0.85fr);
gap: var(--sk-space-6);
align-items: start;
}
.sk-terminal-today-section {
min-width: 0;
}
/* Sammenlagt tar vaktlisten én rad, ikke en halv skjerm. Kolonnen krymper med
den, så egne avtaler får plassen tilbake framfor å stå igjen ved siden av et
tomt felt. */
.sk-terminal-roster-aside {
align-self: start;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
}
.sk-terminal-roster-toggle {
display: flex;
gap: var(--sk-space-3);
align-items: center;
width: 100%;
border: 0;
border-radius: inherit;
padding: var(--sk-space-4);
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.sk-terminal-roster-toggle > span:first-child {
flex: 1;
min-width: 0;
}
.sk-terminal-roster-toggle h2 {
margin: 0;
font-size: var(--sk-type-section-title);
}
.sk-terminal-roster-count {
flex: none;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-roster-toggle > svg {
flex: none;
transition: transform var(--sk-motion-fast);
}
.sk-terminal-roster-aside.is-open .sk-terminal-roster-toggle > svg {
transform: rotate(180deg);
}
.sk-terminal-roster-aside > div {
padding: 0 var(--sk-space-4) var(--sk-space-4);
}
/* Lukket har den ikke lenger krav på sin egen spalte. */
.sk-terminal-today-columns:has(
.sk-terminal-roster-aside:not(.is-open)
) {
grid-template-columns: minmax(0, 1fr) minmax(16rem, auto);
}
.sk-terminal-today-section .sk-terminal-appointments {
border-radius: var(--sk-radius-lg);
}
/* Fra iPad-landskap og oppover eier «I dag» resten av arbeidshøyden. Begge
listene ruller i sine egne paneler; dagshodet og vaktlista blir dermed stående
synlig uten at selve arbeidskolonnen får en ekstra rull. */
@media (min-width: 64rem) {
.sk-terminal-workspace-content:has(> .sk-terminal-today-panel) {
overflow: hidden;
}
.sk-terminal-workspace-content > .sk-terminal-today-panel {
box-sizing: border-box;
display: flex;
height: 100%;
min-height: 0;
flex-direction: column;
padding-bottom: 0;
}
.sk-terminal-today-panel > .sk-terminal-day-toolbar,
.sk-terminal-today-panel > .sk-terminal-summary-grid {
flex: 0 0 auto;
}
.sk-terminal-today-panel > .sk-terminal-today-columns {
min-height: 0;
flex: 1 1 auto;
align-items: stretch;
}
.sk-terminal-today-columns > .sk-terminal-today-section {
display: flex;
min-height: 0;
flex-direction: column;
overflow: hidden;
}
.sk-terminal-today-columns
> section.sk-terminal-today-section
> .sk-terminal-appointments,
.sk-terminal-today-columns
> section.sk-terminal-today-section
> .sk-terminal-empty-card,
.sk-terminal-roster-aside > div {
min-height: 0;
flex: 1 1 auto;
overflow: auto;
overscroll-behavior: contain;
}
.sk-terminal-roster-aside {
align-self: stretch;
}
.sk-terminal-roster-toggle,
.sk-terminal-section-heading {
flex: 0 0 auto;
}
}
/* 768 px POS-/719 px kiosk-høyde: behold de tre beslutningskortene på én rad,
men gi mesteparten av høyden til avtalene og vaktlista. */
@media (min-width: 64rem) and (max-height: 800px) {
.sk-terminal-workspace .sk-terminal-day-toolbar {
max-width: 34rem;
margin-bottom: var(--sk-space-3);
}
.sk-terminal-workspace .sk-terminal-day-toolbar h1 {
font-size: var(--sk-font-size-xl);
}
.sk-terminal-workspace .sk-terminal-summary-grid {
gap: var(--sk-space-3);
margin-bottom: var(--sk-space-3);
}
.sk-terminal-workspace .sk-terminal-summary-grid article {
min-height: 4.25rem;
padding: var(--sk-space-2) var(--sk-space-3);
}
.sk-terminal-workspace .sk-terminal-summary-grid article strong {
font-size: var(--sk-font-size-md);
}
.sk-terminal-workspace .sk-terminal-today-columns {
gap: var(--sk-space-3);
}
.sk-terminal-workspace .sk-terminal-section-heading,
.sk-terminal-workspace .sk-terminal-roster-toggle {
margin-bottom: var(--sk-space-2);
}
.sk-terminal-workspace .sk-terminal-roster-toggle {
padding: var(--sk-space-3);
}
.sk-terminal-workspace .sk-terminal-roster-aside > div {
padding: 0 var(--sk-space-3) var(--sk-space-3);
}
}
/* Arbeidsark er høyrestilte drawers på terminal/desktop. Det bevarer dagens
kontekst og følger samme mønster som administrasjonsappen. */
.sk-terminal-sheet-layer {
display: flex;
align-items: stretch;
justify-content: flex-end;
padding: 0;
}
.sk-terminal-sheet-layer > .sk-timebook-sheet {
width: min(38rem, 100%);
height: 100dvh;
max-height: 100dvh;
border-radius: var(--sk-radius-lg) 0 0 var(--sk-radius-lg);
padding: var(--sk-space-7) var(--sk-space-6);
box-shadow: var(--sk-shadow-popover);
}
.sk-timebook-sheet:focus,
.sk-terminal-pin-card:focus,
.sk-profile-layer:focus {
outline: none;
}
.sk-timebook-sheet-note.is-appointment-note {
margin-top: var(--sk-space-5);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-4);
background: var(--sk-color-surface-hover);
}
.sk-timebook-sheet > .sk-terminal-eyebrow {
min-height: 1.5rem;
margin-left: 3.5rem;
}
/* Dra-bryteren for hovedhandlingen. Bred nok til at banen er en tydelig
bevegelse, høy nok til at knotten treffes med tommelen. */
.sk-slide-confirm {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
min-height: 3.6rem;
margin: var(--sk-space-4) 0 var(--sk-space-3);
border: 1px solid var(--sk-color-primary);
border-radius: 1.8rem;
background: var(--sk-color-primary-soft);
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.sk-slide-confirm.is-ready {
background: var(--sk-color-primary);
}
.sk-slide-confirm.is-ready .sk-slide-confirm-label {
color: white;
}
.sk-slide-confirm.is-locked {
border-color: var(--sk-color-disabled-border);
background: var(--sk-color-disabled-bg);
cursor: progress;
}
.sk-slide-confirm-label {
/* Teksten står midt i sporet, ikke etter knotten: den skal kunne leses før
bevegelsen begynner, og bli stående mens knotten passerer. */
position: absolute;
left: 0;
right: 0;
text-align: center;
font-weight: var(--sk-font-weight-strong);
pointer-events: none;
}
.sk-slide-confirm-knob {
display: grid;
width: 3.2rem;
height: 3.2rem;
margin: 0.2rem;
place-items: center;
border-radius: 50%;
background: var(--sk-color-primary);
color: white;
touch-action: none;
}
.sk-slide-confirm.is-locked .sk-slide-confirm-knob {
background: var(--sk-color-disabled-text);
}
.sk-slide-confirm:focus-visible {
outline: 2px solid var(--sk-color-primary);
outline-offset: 2px;
}
/* Rediger og send står side om side: begge handler om timen som helhet, og
begge er sjeldnere enn statusknappene under.
Marginen over er ikke pynt. Kundekortet rett foran har sin egen ramme, og
uten luft mellom dem la knappene seg inntil kortkanten og så ut som en del
av kortet — to flater som klistret seg sammen. */
.sk-timebook-sheet-toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-2);
align-items: center;
margin-top: var(--sk-space-5);
margin-bottom: var(--sk-space-3);
padding-top: var(--sk-space-4);
border-top: 1px solid var(--sk-color-border-soft);
}
/* Hva kunden faktisk har fått, hentet fra køen og ikke fra en knapp som husker
sitt eget trykk. Står under knappen fordi den svarer på «hva skjedde da jeg
trykket» — og på «har noen andre allerede sendt dette?». */
.sk-message-log {
display: grid;
gap: var(--sk-space-1);
width: 100%;
margin: var(--sk-space-2) 0 0;
padding: 0;
list-style: none;
}
.sk-message-log > li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0 var(--sk-space-3);
align-items: baseline;
border-radius: var(--sk-radius-md);
padding: var(--sk-space-2) var(--sk-space-3);
background: var(--sk-color-surface-hover);
}
.sk-message-log strong {
font-size: var(--sk-font-size-sm);
}
.sk-message-log > li > span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
font-variant-numeric: tabular-nums;
text-align: right;
}
.sk-message-log small {
grid-column: 1 / -1;
color: var(--sk-color-ink-faint);
font-size: var(--sk-font-size-xs);
}
.sk-timebook-sheet-edit,
.sk-timebook-sheet-send {
display: inline-flex;
align-items: center;
gap: var(--sk-space-2);
min-height: var(--sk-terminal-control-h);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
padding: 0 var(--sk-space-3);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-timebook-sheet-send:disabled {
border-color: var(--sk-color-disabled-border);
background: var(--sk-color-disabled-bg);
color: var(--sk-color-disabled-text);
cursor: not-allowed;
}
.sk-timebook-sheet-toolbar > small {
flex-basis: 100%;
}
.sk-timebook-sheet-edit-form {
display: grid;
gap: var(--sk-space-3);
margin: 0 0 var(--sk-space-5);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-4);
background: var(--sk-color-surface-hover);
}
.sk-timebook-sheet-edit-summary {
display: flex;
justify-content: space-between;
gap: var(--sk-space-3);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-timebook-sheet-edit-summary strong {
color: var(--sk-color-ink);
}
.sk-timebook-sheet-note.is-appointment-note > p,
.sk-treatment-journal-note > small {
margin: 0 0 var(--sk-space-2);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
line-height: 1.45;
}
.sk-treatment-journal-note {
border: 1px solid
color-mix(in srgb, var(--sk-color-primary) 24%, var(--sk-color-border-soft));
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-4);
background: var(--sk-color-primary-soft);
}
.sk-treatment-journal-note > span {
color: var(--sk-color-primary);
font-weight: var(--sk-font-weight-strong);
}
/* Kladdens ENE statuslinje. Feilteksten og et nytt forsøk står på samme rad så
lenge det er plass; knappen faller under på smal skjerm. */
.sk-terminal-draft-status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sk-space-3);
}
.sk-timebook-block-status {
display: inline-flex;
align-self: end;
width: max-content;
border-radius: var(--sk-radius-pill);
padding: 0.08rem 0.38rem;
background: color-mix(in srgb, currentColor 8%, transparent);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-timebook-block:focus-visible,
.sk-timebook-slot[role="button"]:focus-visible {
z-index: 8;
outline: 3px solid var(--sk-color-focus-ring);
outline-offset: -3px;
}
.sk-timebook-block.is-no_show,
.sk-timebook-block.is-cancelled {
border-style: dashed;
}
/* Redigering av bekreftede kundeopplysninger ligger på samme profilflate,
og sikkerhetsfeltene er fullbredde slik at de ikke kan overses. */
.sk-profile-edit,
.sk-profile-book {
display: inline-flex;
align-items: center;
gap: var(--sk-space-2);
min-height: var(--sk-terminal-control-h);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
padding: 0 var(--sk-space-4);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-profile-book {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary);
color: white;
}
.sk-profile-book:hover {
filter: brightness(0.96);
}
.sk-profile-edit-card {
display: grid;
gap: var(--sk-space-5);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-card-radius);
padding: var(--sk-card-inset);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-card);
}
.sk-profile-edit-card > .sk-terminal-section-heading {
margin-bottom: 0;
}
.sk-profile-edit-card > .sk-terminal-error {
margin: 0;
}
.sk-profile-edit-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-4);
}
.sk-profile-edit-grid label,
.sk-timebook-sheet-edit-form label {
display: grid;
gap: var(--sk-space-2);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
/* Hjelpelinja under et felt står i samme rutenett som etiketten, og arvet
derfor både den halvfete vekten og en toppmarg oppå rutenettets mellomrom.
Den skal leses som en forklaring, ikke som enda en etikett. */
.sk-timebook-sheet-edit-form label > .sk-terminal-hint {
margin: 0;
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-body);
}
.sk-profile-edit-grid label.is-wide {
grid-column: 1 / -1;
}
.sk-profile-edit-grid input,
.sk-profile-edit-grid textarea,
.sk-timebook-sheet-edit-form input,
.sk-timebook-sheet-edit-form select,
.sk-treatment-fields input,
.sk-treatment-fields select,
.sk-treatment-fields textarea {
width: 100%;
min-height: var(--sk-terminal-control-h);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-terminal-radius);
padding: var(--sk-space-2) var(--sk-space-3);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
}
.sk-profile-edit-grid textarea,
.sk-treatment-fields textarea {
resize: vertical;
}
/* Knappene i arket får høyden fra kontrakten (--sk-terminal-control-h);
.sk-terminal-back er et fast 2.6rem-mål i 01-foundations.css. */
.sk-treatment-remove {
min-height: var(--sk-control-height);
}
.sk-treatment-remove {
width: var(--sk-control-height);
height: var(--sk-control-height);
}
.sk-terminal-inline-fields input[type="checkbox"] {
width: 1.5rem;
height: 1.5rem;
min-height: 1.5rem;
accent-color: var(--sk-color-primary);
}
.sk-terminal-inline-fields:has(input[type="checkbox"]) {
min-height: var(--sk-control-height);
align-items: center;
}
/* Gjenbrukte design-systemkontroller blir ellers 40–42 px i Oppgaver-fanen.
I terminalen er de berøringsmål og følger derfor samme 44 px-kontrakt som
de lokale terminalknappene. */
.sk-terminal-workspace .sk-inline-actions .sk-button,
.sk-terminal-workspace .sk-chip,
.sk-terminal-workspace .sk-linklike,
.sk-terminal-workspace .sk-terminal-profile,
.sk-terminal-workspace .sk-terminal-payment-readiness-error button,
.sk-terminal-workspace .sk-profile-formula-edit,
.sk-terminal-workspace .sk-timebook-sheet-customer {
min-height: var(--sk-control-height);
}
.sk-terminal-workspace .sk-linklike,
.sk-terminal-workspace .sk-timebook-sheet-customer {
display: inline-flex;
align-items: center;
}
.sk-terminal-workspace .sk-call-row {
min-height: var(--sk-control-height);
align-items: center;
}
.sk-terminal-workspace button:focus-visible,
.sk-terminal-workspace a:focus-visible,
.sk-terminal-workspace input:focus-visible,
.sk-terminal-workspace select:focus-visible,
.sk-terminal-workspace textarea:focus-visible,
.sk-terminal-pin-layer button:focus-visible,
.sk-profile-layer button:focus-visible {
outline: 3px solid var(--sk-color-focus-ring);
outline-offset: 2px;
}
@media (max-width: 72rem) {
.sk-terminal-cart-lines > article {
grid-template-columns: minmax(0, 1fr) 8.25rem 9rem;
}
.sk-terminal-line-actions {
grid-column: 2 / -1;
justify-content: flex-end;
}
}
@media (max-width: 56rem) {
.sk-terminal-workspace {
min-width: 0;
}
.sk-terminal-workspace-header {
grid-template-columns: 1fr auto;
min-height: 4.25rem;
padding: 0 var(--sk-space-3);
}
.sk-terminal-workspace-context {
display: none;
}
.sk-terminal-profile > span:nth-child(2) {
display: none;
}
.sk-terminal-workspace-layout {
display: block;
min-height: 0;
}
.sk-terminal-workspace-nav {
position: fixed;
inset: auto 0 0;
z-index: 40;
display: grid;
/* Under denne bredden skjules sekundærknappene, desktop-versjonen av
«mer» og mellomrommet. Antall synlige hovedknapper kan endres når
arbeidsflaten får nye snarveier, så kolonnene følger det som faktisk
rendres i stedet for et hardkodet antall. */
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
height: auto;
padding: var(--sk-space-2) var(--sk-space-2)
max(var(--sk-space-2), env(safe-area-inset-bottom));
overflow: visible;
border-top: 1px solid color-mix(in srgb, white 12%, transparent);
}
:where(.sk-terminal-workspace-nav) button {
min-width: 0;
min-height: 4.25rem;
}
.sk-terminal-workspace-nav .sk-terminal-nav-secondary {
display: none;
}
.sk-terminal-workspace-nav .sk-terminal-nav-desktop-more,
.sk-terminal-workspace-nav .sk-terminal-nav-spacer {
display: none;
}
.sk-terminal-workspace-nav > .sk-terminal-mobile-more-trigger {
display: grid;
}
.sk-terminal-workspace-content {
padding: var(--sk-space-4) var(--sk-space-4) 6.75rem;
}
.sk-terminal-overview-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sk-terminal-workspace-content:has(> .sk-timebook-panel) {
height: auto;
overflow: visible;
}
.sk-timebook-panel {
display: block;
height: auto;
}
.sk-timebook-panel .sk-timebook-scroll {
height: auto;
max-height: 72vh;
}
.sk-shift-calendar-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sk-terminal-payment-flow.is-processing,
.sk-terminal-payment-flow.is-complete {
min-height: calc(100dvh - 4.25rem - 6.75rem);
}
.sk-terminal-summary-grid article.is-attendance {
grid-column: 1 / -1;
}
.sk-terminal-checkout-grid {
grid-template-columns: 1fr;
}
.sk-terminal-sale-layout {
display: flex;
height: auto;
overflow: visible;
flex-direction: column;
}
.sk-terminal-sale-catalog,
.sk-terminal-sale-cart {
overflow: visible;
}
.sk-terminal-sale-footer {
position: sticky;
bottom: 6.75rem;
grid-template-columns: 1fr auto;
}
.sk-terminal-sale-status {
grid-column: 1 / -1;
}
.sk-terminal-checkout-grid aside {
position: static;
}
.sk-terminal-price-editor {
grid-template-columns: 1fr 1fr;
}
.sk-timesheet-day-editor {
grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1.25fr);
}
.sk-timesheet-editor-actions {
grid-column: 1 / -1;
justify-content: flex-end;
}
.sk-terminal-sheet-layer > .sk-timebook-sheet {
width: 100%;
border-radius: 0;
padding: var(--sk-space-5) var(--sk-space-4);
}
.sk-profile-hero {
grid-template-columns: auto minmax(0, 1fr);
}
.sk-profile-hero-actions {
grid-column: 1 / -1;
justify-content: flex-start;
max-width: none;
}
}
/* «Mer» sto i fire kolonner mens Oversikt sto i tre, på samme skjerm, rett ved
siden av hverandre — `auto-fit` teller plass, ikke fliser. Tre kolonner er
tallet Oversikt bruker, og de to flatene skal møte øyet likt.
Regelen er skrevet med panelet foran seg fordi 06b-workspace-overview.css
lastes ETTER denne fila; en like spesifikk regel her ville tapt. */
.sk-terminal-more-panel .sk-terminal-more-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 56rem) {
.sk-terminal-more-panel .sk-terminal-more-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.sk-terminal-mobile-more-sheet {
animation: none;
}
}
/* Din dag (.sk-terminal-my-day) er nøkkeltallsfliser — alias for
.sk-terminal-summary-grid i 01a-contract.css. */
/* Desktop header parts keep their own text width; enlarged text may take another row. */
@media (min-width: 64rem) {
.sk-terminal-workspace > .sk-terminal-workspace-header {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.sk-terminal-workspace-header > .sk-terminal-brand,
.sk-terminal-workspace-header > .sk-terminal-workspace-actions {
flex: 1 1 max-content;
max-inline-size: 100%;
}
.sk-terminal-workspace-header > .sk-terminal-workspace-context {
flex: 0 1 max-content;
max-inline-size: 100%;
}
}
/* Tastaturfokus må rulle hele menyvalget over den faktisk målte Betal-flisa. */
@media (min-width: 64rem) {
.sk-terminal-workspace-nav {
scroll-padding-block-end: calc(var(--sk-terminal-sticky-pay-height, 0px) + var(--sk-space-3));
}
}
/* Stable groups replace wrapping header rows; no action or identity is removed. */
.sk-terminal-workspace > header.sk-terminal-workspace-header {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: var(--sk-space-3);
padding-block: var(--sk-space-3);
}
.sk-terminal-workspace-header > .sk-terminal-brand {
flex-direction: column;
align-items: flex-start;
}
.sk-terminal-workspace-header > .sk-terminal-workspace-context {
grid-column: 1;
max-inline-size: 100%;
}
.sk-terminal-workspace-header > .sk-terminal-workspace-actions {
display: grid;
grid-column: 2;
grid-row: 1 / 3;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
align-items: center;
justify-items: start;
}
.sk-terminal-workspace-actions > * { min-inline-size: 0; max-inline-size: 100%; }
.sk-terminal-workspace-actions > [data-deployment-phase-slot],
.sk-terminal-workspace-actions > .sk-terminal-profile { grid-column: 1 / -1; }
.sk-terminal-workspace-actions > .sk-terminal-profile {
inline-size: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
/* Queue content and rail remain scrollable instead of being cut by an outer frame. */
.sk-terminal-workspace:has(.sk-terminal-order-list) { overflow: auto; }
.sk-terminal-workspace:has(.sk-terminal-order-list) > .sk-terminal-workspace-layout {
overflow: auto;
}
/* A tall enlarged header must not collapse the rail before the operator can navigate. */
.sk-terminal-workspace { overflow: auto; }
.sk-terminal-workspace > header.sk-terminal-workspace-header { position: static; }
.sk-terminal-workspace > .sk-terminal-workspace-layout {
flex: 1 0 auto;
min-block-size: min(70dvh, calc(var(--sk-terminal-control-h) * 6));
overflow: auto;
}
/* The identity column stays at the top even when the action column is taller. */
.sk-terminal-workspace > header.sk-terminal-workspace-header {
grid-template-rows: min-content minmax(0, 1fr);
align-items: start;
}
.sk-terminal-workspace-header > .sk-terminal-workspace-context {
align-self: start;
align-content: start;
}
.sk-terminal-workspace > .sk-terminal-workspace-layout { margin-block-start: var(--sk-space-2); }
/* ── Oversikten («Hjem») ─────────────────────────────────────────────────────
Panelhode, snarveirutenett, dagens timer og «mer»-rutenettet. Skilt ut fra
06-workspace.css for lengdens skyld; samme kontrakt (01a-contract.css). */
.sk-terminal-overview-header {
max-width: 44rem;
margin-bottom: var(--sk-space-6);
}
.sk-terminal-overview-header h1 {
margin: var(--sk-space-1) 0 var(--sk-space-2);
font-size: var(--sk-type-page-title);
letter-spacing: -0.045em;
}
.sk-terminal-overview-header > p:last-child {
margin: 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-lg);
}
/* Rutenettet hadde to spalter fordi dagens timer sto i den andre. Da listen
ble flyttet ned, ble spalte to stående tom og handlingene klemt inn på
halve bredden. En layout skal ikke huske et barn den ikke har lenger. */
.sk-terminal-overview-layout {
display: grid;
gap: var(--sk-space-6);
align-items: start;
}
/* Ni ruter i tre kolonner — det eneste antallet som deler ni jevnt, så alle
rutene får samme bredde uansett skjerm. `auto-fit` ga 4 over 5 med kanter
som aldri traff hverandre. På smal skjerm (under 56rem) blir det to. */
.sk-terminal-overview-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sk-space-3);
}
/* Rutene ER knapper (flis-mønsteret): stilen kommer fra containeren, med
`:where()` så en variantklasse aldri taper mot den. */
:where(.sk-terminal-overview-actions) > button {
display: flex;
min-width: 0;
min-height: 6.75rem;
align-items: center;
gap: var(--sk-space-3);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-4);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
text-align: left;
cursor: pointer;
}
:where(.sk-terminal-overview-actions) > button:hover {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
}
.sk-terminal-overview-actions svg {
width: 1.5rem;
height: 1.5rem;
flex: none;
color: var(--sk-color-primary);
}
.sk-terminal-overview-actions span {
display: grid;
min-width: 0;
gap: var(--sk-space-1);
}
.sk-terminal-overview-actions strong {
font-size: var(--sk-font-size-lg);
}
.sk-terminal-overview-actions small {
color: var(--sk-color-ink-soft);
line-height: 1.35;
}
/* Dagens timer står nederst, over hele bredden. Kortutseendet er
.sk-terminal-card-aliaset i 01a-contract.css. */
.sk-terminal-overview-today {
min-width: 0;
margin-top: var(--sk-space-6);
}
.sk-terminal-overview-today .sk-terminal-section-heading {
margin-bottom: var(--sk-space-3);
}
.sk-terminal-overview-today .sk-terminal-appointments {
border-top: 1px solid var(--sk-color-border-soft);
}
/* «Mer»-panelet: de sekundære flatene som fliser. */
.sk-terminal-more-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--sk-space-4);
}
:where(.sk-terminal-more-grid) > button {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--sk-space-4);
min-height: 5.5rem;
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
:where(.sk-terminal-more-grid) > button:hover {
background: var(--sk-color-surface-hover);
}
:where(.sk-terminal-more-grid) > button > span {
min-width: 0;
display: grid;
gap: var(--sk-space-1);
}
.sk-terminal-more-grid small {
color: var(--sk-color-ink-soft);
}
/* Timeboken på liten skjerm.
Terminalen hadde ingen slike regler i det hele tatt: kolonnene lå fast på
11 rem, så fire frisører ga et rutenett på 48 rem som aldri fikk plass.
Det som manglet var ikke bare bredden, men et sted å si det. */
@media (max-width: 64rem) {
.sk-timebook {
--sk-timebook-column-min: 8.5rem;
}
/* Dagsraden lå på fire faste kolonner med til sammen 41 rem som minimum.
Under det klemte den «Stemple inn» og bemanningsknappen sammen til de
ikke lenger var til å trykke på. To rader er den ærlige løsningen: vakt
og antall timer er opplysninger, stempling og bemanning er handlinger. */
.sk-terminal-day-status {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
@media (max-width: 48rem) {
.sk-timebook {
--sk-timebook-column-min: 7rem;
}
/* Én ting per rad. «Stemplet inn 08:14» og knappen ved siden av trenger
hele bredden når skriften ikke krymper. */
.sk-terminal-day-status {
grid-template-columns: minmax(0, 1fr);
}
.sk-terminal-day-status.is-compact .sk-terminal-day-status-item {
width: 100%;
}
/* Timelinjalen tar 4,5 rem av en skjerm som ikke har dem å avse. */
.sk-timebook-grid {
grid-template-columns: 3.25rem var(--sk-timebook-columns);
}
/* Mer av skjermen til selve dagen når det er lite igjen av den. */
.sk-timebook-scroll {
max-height: min(78dvh, calc(100dvh - 12rem));
}
}
/* Bunnmenyen aktiveres under 1024 px; samme grense må gjelde for innholdets
rulling. Mellom 896 og 1023 px var menyen mobil, mens kassen fortsatt
låste salgsflaten til skrivebordshøyde og skjulte betalingsknappene. */
@media (max-width: 63.99rem) {
/* On iPad Safari the checkout panel must grow with its catalog and cart.
The desktop height lock otherwise clips the cart while the footer fills
the only visible part of the page. Keep one scroll owner: workspace. */
.sk-terminal-workspace .sk-terminal-workspace-content:has(> .sk-terminal-checkout-panel) {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.sk-terminal-workspace .sk-terminal-checkout-panel {
display: block;
height: auto;
overflow: visible;
}
.sk-terminal-workspace .sk-terminal-sale-layout {
display: flex;
flex: none;
height: auto;
overflow: visible;
flex-direction: column;
}
.sk-terminal-workspace .sk-terminal-sale-catalog,
.sk-terminal-workspace .sk-terminal-sale-cart,
.sk-terminal-workspace .sk-terminal-sale-catalog .sk-terminal-catalog-results,
.sk-terminal-workspace .sk-terminal-sale-cart .sk-terminal-cart-lines {
flex: none;
max-height: none;
overflow: visible;
}
.sk-terminal-workspace .sk-terminal-sale-footer {
position: static;
bottom: auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sk-terminal-sale-footer .sk-terminal-sale-status {
grid-column: auto;
}
.sk-terminal-sale-footer .sk-terminal-add-amount,
.sk-terminal-sale-footer .sk-terminal-sale-discount-trigger,
.sk-terminal-sale-footer .sk-terminal-pay-total {
width: 100%;
min-width: 0;
white-space: normal;
}
.sk-terminal-workspace .sk-terminal-workspace-content:has(> .sk-timebook-panel) {
height: 100%;
overflow-y: auto;
}
.sk-terminal-workspace .sk-timebook-panel {
display: block;
height: auto;
}
.sk-terminal-workspace .sk-timebook-panel > .sk-timebook {
min-height: 16rem;
}
.sk-terminal-workspace .sk-timebook-panel .sk-timebook-scroll {
height: auto;
max-height: min(78dvh, calc(100dvh - 12rem));
}
.sk-terminal-overview-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-screen="pos-1024"] .sk-terminal-workspace-nav {
width: 100%;
min-width: 0;
overflow: visible;
}
html[data-screen="pos-1024"] .sk-terminal-workspace-content:has(> .sk-terminal-checkout-panel),
html[data-screen="pos-1024"] .sk-terminal-workspace-content:has(> .sk-terminal-work-area) {
height: auto;
overflow-y: auto;
}
}
/* The 1024px landscape iPad shares the compact POS screen class, whose
fixed-height checkout otherwise hides the cart behind the footer. Larger
touch tablets need the same single scroll owner. */
:is(html[data-screen="pos-1024"], html[data-screen="tablet-landscape"][data-touch="1"])
.sk-terminal-workspace-content:has(> .sk-terminal-checkout-panel) {
box-sizing: border-box;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
:is(html[data-screen="pos-1024"], html[data-screen="tablet-landscape"][data-touch="1"])
.sk-terminal-checkout-panel,
:is(html[data-screen="pos-1024"], html[data-screen="tablet-landscape"][data-touch="1"])
.sk-terminal-sale-layout {
height: auto;
flex: none;
overflow: visible;
}
:is(html[data-screen="pos-1024"], html[data-screen="tablet-landscape"][data-touch="1"])
.sk-terminal-sale-layout {
align-items: start;
grid-template-rows: auto auto;
}
:is(html[data-screen="pos-1024"], html[data-screen="tablet-landscape"][data-touch="1"])
.sk-terminal-sale-catalog,
:is(html[data-screen="pos-1024"], html[data-screen="tablet-landscape"][data-touch="1"])
.sk-terminal-sale-cart,
:is(html[data-screen="pos-1024"], html[data-screen="tablet-landscape"][data-touch="1"])
.sk-terminal-sale-catalog .sk-terminal-catalog-results,
:is(html[data-screen="pos-1024"], html[data-screen="tablet-landscape"][data-touch="1"])
.sk-terminal-sale-cart .sk-terminal-cart-lines {
max-height: none;
overflow: visible;
}
/* The POS scroll area becomes shorter when a printer or day-close notice is
shown. Keep the action row visible while the catalog and cart scroll inside
the checkout workspace. */
@media (min-width: 64rem) {
html[data-screen="pos-1024"]
.sk-terminal-workspace-content:has(> .sk-terminal-checkout-panel)
.sk-terminal-sale-footer {
position: sticky;
bottom: 0;
z-index: 2;
padding-bottom: var(--sk-space-2);
box-shadow: 0 -1px 0 var(--sk-color-border-soft);
}
}
/* I et kort kiosk-vindu kan dagsoppgjør og skrivervarsel spise opp høyden
over salget. Hold betalingsraden synlig mens varelisten rulles. Vanlig
nettbrettlandskap beholder den opprinnelige raden. */
@media (min-width: 64rem) and (max-height: 38rem) {
html[data-screen="pos-1024"]
.sk-terminal-workspace-content:has(> .sk-terminal-checkout-panel) {
padding-bottom: 7rem;
}
html[data-screen="pos-1024"]
.sk-terminal-workspace-content:has(> .sk-terminal-checkout-panel)
.sk-terminal-sale-footer {
position: fixed;
bottom: 0;
left: calc(var(--sk-terminal-nav-w) + var(--sk-space-6));
right: var(--sk-space-6);
z-index: 35;
padding: var(--sk-space-3);
background: var(--sk-color-canvas);
box-shadow: 0 -0.5rem 1rem rgb(0 0 0 / 10%);
}
}
/* Flishøyden på den minste skjermen. Regelen sto i 06-workspace.css, men den
fila lastes FØR 06b-workspace-overview.css: da `.sk-terminal-overview-actions
> button` ble skrevet med `:where()` (kontrakten § 2) tapte den mot
grunnregelen der. Her, etter 06b, vinner den på rekkefølge i stedet for på
spesifisitet — som er nettopp poenget med `:where()`. */
@media (max-width: 34rem) {
.sk-terminal-overview-actions,
:where(.sk-terminal-overview-actions) > button {
min-height: 5.75rem;
}
}
@media (max-width: 36rem) {
.sk-terminal-sale-footer { padding-bottom: var(--sk-space-4); }
.sk-terminal-workspace .sk-terminal-payment-heading {
display: flex;
align-items: stretch;
flex-direction: column;
}
.sk-terminal-payment-heading > .sk-terminal-heading-actions {
width: 100%;
justify-content: space-between;
}
.sk-terminal-open-orders > .sk-terminal-section-heading,
.sk-terminal-work-area-header {
align-items: stretch;
flex-direction: column;
}
.sk-terminal-open-orders > .sk-terminal-section-heading > .sk-terminal-heading-actions,
.sk-terminal-work-area-header > .sk-terminal-heading-actions {
width: 100%;
justify-content: flex-start;
}
.sk-timebook-heading > div:first-child,
.sk-timebook-date-nav {
width: 100%;
}
.sk-timebook-date-nav {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
}
.sk-timebook-date-nav h1 {
min-width: 0;
text-align: center;
white-space: normal;
}
.sk-timebook-controls {
flex-wrap: wrap;
}
.sk-timebook-disruption {
order: 0;
width: var(--sk-terminal-control-h);
justify-content: center;
}
.sk-disruption-item > header,
.sk-appointment-cancellation__actions {
align-items: stretch;
flex-direction: column;
}
.sk-cashup-sale-detail__footer {
align-items: stretch;
flex-direction: column;
}
.sk-new-appointment-schedule {
grid-template-columns: 1fr;
gap: 0;
}
.sk-terminal-workspace-content {
padding-inline: var(--sk-space-3);
}
.sk-terminal-brand > span:last-child small {
max-width: 9rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-terminal-day-toolbar h1 {
font-size: var(--sk-type-page-title);
}
.sk-terminal-mobile-more-layer {
padding: var(--sk-space-2);
}
.sk-terminal-mobile-more-sheet {
padding: var(--sk-space-4);
}
.sk-terminal-mobile-more-grid {
grid-template-columns: 1fr;
gap: var(--sk-space-2);
}
.sk-terminal-summary-grid,
.sk-profile-edit-grid {
grid-template-columns: 1fr;
}
.sk-shift-week-tabs {
width: 100%;
}
.sk-shift-calendar-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sk-profile-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sk-profile-tabs {
overflow-x: auto;
padding-inline: var(--sk-space-2);
}
:where(.sk-profile-tabs) button {
width: auto;
padding-inline: var(--sk-space-3);
}
.sk-profile-body {
padding: var(--sk-space-4);
}
.sk-terminal-workspace .sk-profile-hero {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.sk-profile-photo {
width: 4.75rem;
height: 4.75rem;
}
.sk-terminal-workspace .sk-profile-hero-actions {
grid-column: auto;
justify-content: stretch;
}
.sk-profile-hero-actions > * {
flex: 1 1 auto;
}
.sk-terminal-cart-lines > article,
.sk-terminal-price-editor {
grid-template-columns: 1fr;
}
.sk-terminal-cart-lines > li {
grid-template-columns: 1fr;
}
.sk-terminal-cart-lines > li > .sk-terminal-link {
grid-template-columns: auto 1fr;
}
.sk-terminal-cart-lines > li > .sk-terminal-link small {
grid-column: 1 / -1;
}
.sk-terminal-line-actions {
grid-column: auto;
flex-wrap: wrap;
}
:where(.sk-terminal-catalog-results) button {
grid-template-columns: 1fr;
align-items: start;
gap: var(--sk-space-3);
padding: var(--sk-space-4);
}
.sk-terminal-catalog-result__price {
justify-self: start;
padding-left: 0;
}
.sk-profile-edit-grid label.is-wide {
grid-column: auto;
}
:where(.sk-terminal-appointments) > button,
.sk-terminal-appointments article {
grid-template-columns: 3.75rem minmax(0, 1fr);
}
.sk-terminal-appointments article.sk-timesheet-day {
grid-template-columns: 4.25rem minmax(0, 1fr);
}
.sk-terminal-appointments article.is-roster {
grid-template-columns: 3.75rem 2.55rem minmax(0, 1fr);
}
.sk-timesheet-day-actions {
grid-column: 1 / -1;
justify-content: flex-end;
flex-wrap: wrap;
}
.sk-timesheet-day-editor {
grid-template-columns: 1fr;
}
.sk-timesheet-day-editor > fieldset,
.sk-timesheet-note-field,
.sk-timesheet-editor-actions {
grid-column: 1 / -1;
}
.sk-timesheet-editor-actions {
justify-content: flex-end;
flex-wrap: wrap;
}
.sk-timesheet-absence-fields {
grid-template-columns: 1fr;
}
.sk-timesheet-sick-fields {
grid-template-columns: 1fr;
}
.sk-terminal-appointments .sk-terminal-status {
grid-column: 2;
justify-self: start;
}
.sk-terminal-appointments article.is-roster .sk-terminal-status {
grid-column: 3;
}
}
/* Keep operator identity, language controls and lock reachable on phones. */
@media (max-width: 48rem) {
.sk-terminal-workspace .sk-terminal-workspace-header {
grid-template-columns: minmax(0, 1fr);
flex-basis: auto;
min-height: 0;
padding-block: var(--sk-space-3);
gap: var(--sk-space-3);
}
.sk-terminal-workspace-header .sk-terminal-brand,
.sk-terminal-workspace-header .sk-terminal-brand > span:last-child {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
}
.sk-terminal-workspace-header .sk-terminal-brand > span:last-child small { white-space: normal; overflow: visible; max-width: 100%; }
.sk-terminal-workspace-header .sk-terminal-workspace-actions {
min-width: 0;
flex-wrap: wrap;
justify-content: flex-start;
}
.sk-terminal-workspace-header .sk-terminal-profile > span:nth-child(2) {
display: grid;
min-width: 0;
overflow-wrap: anywhere;
}
.sk-terminal-workspace-header .sk-terminal-profile { max-width: 100%; }
}
@media (max-width: 48rem) {
.sk-terminal-workspace .sk-terminal-overview-actions strong,
.sk-terminal-workspace .sk-terminal-overview-actions small { overflow-wrap: anywhere; }
}
@media (max-width: 24rem) {
.sk-terminal-workspace .sk-terminal-overview-actions { grid-template-columns: minmax(0, 1fr); }
}
/* Oversikt på iPad stående: Vakt og Timer er bare to tall, og trenger ikke hver sin
fullbredde stripe. De står side om side; stempling, pauser og «På jobb» har knapper
og beholder full bredde. Fem striper over flisene ble nesten en hel skjerm. */
html[data-screen="tablet-portrait"] .sk-terminal-day-status:not(.is-compact) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-screen="tablet-portrait"] .sk-terminal-day-status:not(.is-compact) > .is-attendance,
html[data-screen="tablet-portrait"] .sk-terminal-day-status:not(.is-compact) > .is-break,
html[data-screen="tablet-portrait"] .sk-terminal-day-status:not(.is-compact) > .sk-terminal-roster-control {
grid-column: 1 / -1;
}
/* Stemplingsknappen skifter tekst (Stemple inn / Stemple ut / Lagrer …) og skal ikke
flytte raden eller bli smalere enn fingeren. */
.sk-terminal-day-status-item.is-attendance > .sk-terminal-attendance-button {
flex: 0 0 auto;
min-width: calc(var(--sk-space-6) * 5);
margin-left: auto;
white-space: nowrap;
}
.sk-terminal-day-status-item.is-attendance > span {
min-width: 0;
}
/* Bunnmenyen på iPad stående og smalere ligger over innholdet. Panelfargen i
stafflaget er halvgjennomsiktig (glass), så kort, tid og knapper rullet synlig
gjennom menyen. Lerretsfargen er alltid dekkende (lys og mørk). */
@media (max-width: 63.99rem) {
html:root .sk-terminal-workspace .sk-terminal-workspace-nav {
background: var(--sk-color-canvas);
}
}
/* A tall, enlarged header must scroll away so the queue and checkout remain reachable. */
@media (max-width: 30rem) {
.sk-terminal-workspace:has(.sk-terminal-order-list, .sk-terminal-checkout-panel) {
overflow-y: auto;
}
.sk-terminal-workspace:has(.sk-terminal-order-list, .sk-terminal-checkout-panel) > .sk-terminal-workspace-header {
position: static;
}
.sk-terminal-workspace:has(.sk-terminal-order-list, .sk-terminal-checkout-panel) > .sk-terminal-workspace-layout {
flex: 0 0 auto;
overflow: visible;
}
.sk-terminal-workspace:has(.sk-terminal-order-list, .sk-terminal-checkout-panel) .sk-terminal-workspace-content {
height: auto;
overflow: visible;
}
}
/* Large text uses the existing compact sale layout when this workspace,
rather than the physical viewport, cannot fit the desktop columns. */
@media (min-width: 64rem) {
.sk-terminal-workspace-content:has(> .sk-terminal-checkout-panel) {
container: terminal-checkout / inline-size;
overflow-y: auto;
}
@container terminal-checkout (width < 56rem) {
.sk-terminal-workspace .sk-terminal-checkout-panel {
display: block;
height: auto;
overflow: visible;
}
.sk-terminal-workspace .sk-terminal-sale-layout {
display: flex;
flex: none;
height: auto;
overflow: visible;
flex-direction: column;
}
.sk-terminal-workspace .sk-terminal-sale-catalog,
.sk-terminal-workspace .sk-terminal-sale-cart,
.sk-terminal-workspace .sk-terminal-sale-catalog .sk-terminal-catalog-results,
.sk-terminal-workspace .sk-terminal-sale-cart .sk-terminal-cart-lines {
flex: none;
max-height: none;
overflow: visible;
}
.sk-terminal-workspace .sk-terminal-workspace-content .sk-terminal-checkout-panel .sk-terminal-sale-layout > .sk-terminal-sale-footer {
position: static;
bottom: auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sk-terminal-workspace .sk-terminal-sale-footer .sk-terminal-sale-status {
grid-column: auto;
}
.sk-terminal-workspace .sk-terminal-sale-footer .sk-terminal-add-amount,
.sk-terminal-workspace .sk-terminal-sale-footer .sk-terminal-sale-discount-trigger,
.sk-terminal-workspace .sk-terminal-sale-footer .sk-terminal-pay-total {
width: 100%;
min-width: 0;
white-space: normal;
}
}
}
/* Mobilheader: innholdets bredde bestemmer radene også ved 200 % tekst.
Ordmerket og enhetsnavnet må ikke konkurrere om den samme smale resten.
Behold alle handlinger og tekststørrelsen; la hele kontrollen bryte. */
@media (max-width: 48rem) {
.sk-terminal-workspace-header .sk-terminal-brand {
flex-wrap: wrap;
}
.sk-terminal-workspace-header .sk-terminal-brand > img {
max-inline-size: 100%;
height: auto;
}
.sk-terminal-workspace-header .sk-terminal-brand > span:last-child {
flex: 1 1 12rem;
}
.sk-terminal-workspace-header .sk-terminal-workspace-actions > * {
min-inline-size: 0;
max-inline-size: 100%;
}
.sk-terminal-workspace-header .sk-terminal-workspace-actions > button,
.sk-terminal-workspace-header .sk-terminal-profile > span:nth-child(2) {
white-space: normal;
overflow-wrap: anywhere;
}
.sk-terminal-workspace-header .sk-terminal-profile > span:nth-child(2) {
flex: 1 1 auto;
}
}
/* Fase- og driftsbrikken beholder reserverte plasser, men ikke en bredde
på 19 rem når stor tekst gjør selve headeren smalere enn reservasjonen. */
@media (max-width: 48rem) {
.sk-terminal-workspace-header .sk-terminal-workspace-actions {
container: terminal-header-actions / inline-size;
}
@container terminal-header-actions (width < 19rem) {
.sk-terminal-workspace-header .sk-terminal-workspace-actions > [data-deployment-phase-slot]:not(.employee-phase-slot) {
width: 100%;
min-width: 0;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: repeat(2, minmax(max(var(--sk-control-height), var(--sk-touch-min)), auto));
height: auto;
gap: var(--sk-space-2);
}
.sk-terminal-workspace-header [data-deployment-phase-slot] > .sk-service-chip--inline {
grid-column: 1;
grid-row: 2;
min-width: 0;
max-width: 100%;
white-space: normal;
}
}
}
/* The whole phone scroll viewport ends above the measured fixed navigation.
Reserving space only inside the layout left the tall header behind the menu. */
@media (max-width: 30rem) {
.sk-terminal-workspace:has(.sk-terminal-order-list, .sk-terminal-checkout-panel) {
height: calc(100dvh - var(--sk-terminal-measured-bottom-nav-height, var(--sk-terminal-bottom-nav-height)));
min-height: 0;
margin-bottom: var(--sk-terminal-measured-bottom-nav-height, var(--sk-terminal-bottom-nav-height));
}
.sk-terminal-workspace:has(.sk-terminal-order-list, .sk-terminal-checkout-panel) > .sk-terminal-workspace-layout {
margin-bottom: 0;
}
}
/* One header group per row below the rail breakpoint, including tablets. */
@media (max-width: 63.99rem) {
.sk-terminal-workspace > header.sk-terminal-workspace-header {
grid-template-columns: minmax(0, 1fr);
}
.sk-terminal-workspace-header > .sk-terminal-workspace-actions {
grid-column: 1;
grid-row: auto;
}
.sk-terminal-workspace:has(.sk-terminal-order-list, .sk-terminal-checkout-panel) {
height: calc(100dvh - var(--sk-terminal-measured-bottom-nav-height, var(--sk-terminal-bottom-nav-height)));
min-height: 0;
margin-bottom: var(--sk-terminal-measured-bottom-nav-height, var(--sk-terminal-bottom-nav-height));
overflow-y: auto;
scroll-padding-block-end: var(--sk-space-2);
}
.sk-terminal-workspace:has(.sk-terminal-order-list, .sk-terminal-checkout-panel) > .sk-terminal-workspace-header {
position: static;
}
.sk-terminal-workspace:has(.sk-terminal-order-list, .sk-terminal-checkout-panel) > .sk-terminal-workspace-layout {
flex: 0 0 auto;
margin-bottom: 0;
overflow: visible;
}
.sk-terminal-workspace:has(.sk-terminal-order-list, .sk-terminal-checkout-panel) .sk-terminal-workspace-content {
height: auto;
overflow: visible;
}
}
/* A horizontal flex basis must not become a blank vertical brand row. */
.sk-terminal-workspace > .sk-terminal-workspace-header > .sk-terminal-brand > span:last-child {
flex: 0 1 auto;
inline-size: 100%;
align-content: start;
}
/* Theme follows its existing React DOM order, then the phase/service portals.
The phase, service chip and existing theme control share the reserved first
row. At narrow sizes the service chip gets its own second row; phase and
theme still share the same real grid row rather than a positional offset. */
.sk-terminal-workspace-header .sk-terminal-workspace-actions {
container: terminal-header-actions / inline-size;
}
.sk-terminal-workspace-header .sk-terminal-workspace-actions > [data-deployment-phase-slot].sk-terminal-workspace-phase-tools {
grid-template-columns: var(--sk-touch-min) calc(var(--sk-space-4) * 8) calc(var(--sk-space-4) * 10);
width: calc(var(--sk-space-4) * 20 + var(--sk-touch-min));
min-width: 0;
}
.sk-terminal-workspace-phase-tools > .sk-interface-theme {
grid-column: 1;
grid-row: 1;
align-self: center;
min-width: var(--sk-touch-min);
min-height: var(--sk-touch-min);
}
.sk-terminal-workspace-phase-tools > .sk-deployment-phase--inline {
grid-column: 2;
grid-row: 1;
}
.sk-terminal-workspace-phase-tools > .sk-service-chip--inline {
grid-column: 3;
grid-row: 1;
}
/* 19rem original phase/service reservation +1rem gap +44px theme target. */
@container terminal-header-actions (width < calc(20rem + 44px)) {
.sk-terminal-workspace-header .sk-terminal-workspace-actions > [data-deployment-phase-slot].sk-terminal-workspace-phase-tools {
width: 100%;
grid-template-columns: var(--sk-touch-min) minmax(0, 1fr);
grid-template-rows: repeat(2, minmax(max(var(--sk-control-height), var(--sk-touch-min)), auto));
height: auto;
gap: var(--sk-space-2);
}
.sk-terminal-workspace-header .sk-terminal-workspace-phase-tools > .sk-service-chip--inline {
grid-column: 1 / -1;
grid-row: 2;
}
}
/* Keep the existing lock-screen theme control beside the phase it qualifies.
The real group follows its keyboard order; phones reserve the service row. */
.sk-terminal-lock-header .sk-terminal-lock-actions > [data-deployment-phase-slot].sk-terminal-lock-phase-tools {
grid-template-columns: var(--sk-touch-min) calc(var(--sk-space-4) * 8) calc(var(--sk-space-4) * 10);
width: calc(var(--sk-space-4) * 20 + var(--sk-touch-min));
min-width: 0;
}
.sk-terminal-lock-phase-tools > .sk-interface-theme {
grid-column: 1;
grid-row: 1;
align-self: center;
min-width: var(--sk-touch-min);
min-height: var(--sk-touch-min);
}
.sk-terminal-lock-phase-tools > .sk-deployment-phase--inline {
grid-column: 2;
grid-row: 1;
}
.sk-terminal-lock-phase-tools > .sk-service-chip--inline {
grid-column: 3;
grid-row: 1;
}
@media (max-width: 600px) {
.sk-terminal-lock-header .sk-terminal-lock-actions > [data-deployment-phase-slot].sk-terminal-lock-phase-tools {
width: 100%;
grid-template-columns: var(--sk-touch-min) minmax(0, 1fr);
grid-template-rows: repeat(2, minmax(max(var(--sk-control-height), var(--sk-touch-min)), auto));
height: auto;
gap: var(--sk-space-2);
}
.sk-terminal-lock-header .sk-terminal-lock-phase-tools > .sk-service-chip--inline {
grid-column: 1 / -1;
grid-row: 2;
}
}
/* -------------------------------------------------------------------------
Åpne ordre og betaling i salongterminalen.
Dette er en arbeidskø, ikke en rapporttabell: hele raden er trykkbar, de fire
beslutningsfeltene står alltid i samme rekkefølge, og opprinnelig frisør er
synlig selv når en kollega tar betalingen. */
.sk-terminal-open-orders,
.sk-terminal-payment-flow {
display: grid;
gap: var(--sk-space-4);
}
/* Panelhodet i Åpne ordre er det delte .sk-terminal-section-heading; ikonknappen
er .sk-terminal-icon-button — begge i 01a-contract.css. */
.sk-terminal-payment-heading h1 {
margin: 0;
letter-spacing: -0.035em;
}
.sk-terminal-payment-heading p:last-child {
margin: var(--sk-space-1) 0 0;
color: var(--sk-color-ink-soft);
}
/* Betalingskøen.
*
* Raden var et rutenett på fem kolonner — kunde, ordrenummer, frisør, sum og
* en «Ta betalt»-etikett — hver med sin egen overskrift, 5,5 rem høy. Fem
* kolonneoverskrifter for én linje informasjon, og en handlingsetikett på en
* rad som ALLEREDE var én stor knapp. Nå er raden én linje, og hele linjen er
* knappen. */
.sk-terminal-order-toolbar {
display: flex;
align-items: center;
gap: var(--sk-space-3);
margin-bottom: var(--sk-space-3);
}
/* .sk-terminal-order-search er alias for .sk-terminal-search-control
(01a-contract.css); her bare plassen i verktøylinja. */
.sk-terminal-order-search {
flex: 1 1 auto;
}
.sk-terminal-order-toolbar > p {
display: flex;
flex: 0 0 auto;
align-items: baseline;
gap: var(--sk-space-2);
margin: 0;
color: var(--sk-color-ink-soft);
}
.sk-terminal-order-toolbar strong {
color: var(--sk-color-ink);
font-size: var(--sk-font-size-lg);
}
.sk-terminal-order-list {
display: grid;
gap: var(--sk-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.sk-terminal-order-list > li {
overflow: hidden;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
}
/* Raden er én linje. Fingermålet gjelder for HELE `li`-en, som også rommer
forkast-knappen — så knappen her trenger ikke sette det på nytt, og
loddrett polstring på toppen av det gjorde raden høyere enn innholdet. */
:where(.sk-terminal-order-list > li > button:first-child) {
display: flex;
align-items: center;
gap: var(--sk-space-3);
min-height: var(--sk-terminal-touch-min);
padding: 0 var(--sk-space-3);
border: 0;
background: transparent;
color: inherit;
text-align: left;
}
:where(.sk-terminal-order-list > li > button:first-child):hover,
:where(.sk-terminal-order-list > li > button:first-child):focus-visible {
background: color-mix(in srgb, var(--sk-color-primary) 5%, transparent);
}
.sk-terminal-order-list .sk-terminal-avatar.is-small {
width: 1.75rem;
height: 1.75rem;
font-size: var(--sk-font-size-sm);
}
.sk-terminal-order-name {
display: grid;
flex: 1 1 auto;
min-width: 0;
line-height: 1.25;
}
.sk-terminal-order-name strong,
.sk-terminal-order-name small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-terminal-order-name small {
color: var(--sk-color-ink-soft);
}
.sk-terminal-order-stylist {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: var(--sk-space-2);
color: var(--sk-color-ink-soft);
}
.sk-terminal-order-stylist svg {
width: 1rem;
color: var(--sk-color-primary);
}
.sk-terminal-order-total {
flex: 0 0 auto;
font-size: var(--sk-font-size-lg);
font-variant-numeric: tabular-nums;
}
:where(.sk-terminal-order-list > li > button:first-child) > svg:last-child {
flex: 0 0 auto;
width: 1rem;
color: var(--sk-color-primary);
}
.sk-terminal-order-list > li > p {
margin: 0;
padding: 0 var(--sk-space-3) var(--sk-space-2);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
/* «Forkast» ligger i selve raden, ytterst.
Det hadde før en egen linje under HVER ordre — også når det ikke sto noe
der — og gjorde listen tykkere enn innholdet krevde. */
.sk-terminal-order-list > li {
display: flex;
align-items: center;
flex-wrap: wrap;
}
:where(.sk-terminal-order-list > li > button:first-child) {
flex: 1 1 auto;
min-width: 0;
}
.sk-terminal-order-discard {
display: grid;
flex: 0 0 auto;
place-items: center;
width: var(--sk-terminal-touch-min);
min-height: var(--sk-terminal-touch-min);
margin-right: var(--sk-space-2);
border: 0;
border-radius: var(--sk-radius-sm);
background: transparent;
color: var(--sk-color-ink-faint);
cursor: pointer;
}
.sk-terminal-order-discard:hover:not(:disabled) {
background: color-mix(in srgb, var(--sk-color-danger) 10%, transparent);
color: var(--sk-color-danger);
}
.sk-terminal-order-discard svg {
width: 1rem;
}
/* Bekreftelsen bytter plass med ikonet i samme rad. Legges den i en ny linje
flytter alt under seg, og man mister det man så på. */
.sk-terminal-order-confirm {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: var(--sk-space-1);
margin-right: var(--sk-space-2);
}
:where(.sk-terminal-order-confirm) button {
min-height: var(--sk-terminal-touch-min);
padding: 0 var(--sk-space-2);
border: 0;
background: transparent;
color: var(--sk-color-ink-soft);
font: inherit;
cursor: pointer;
}
.sk-terminal-order-list > li > p {
flex: 1 0 100%;
}
/* .sk-terminal-order-empty er alias for .sk-terminal-empty-card (01a-contract.css). */
.sk-terminal-payment-heading {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--sk-space-4);
}
:where(.sk-terminal-payment-heading) > button {
display: inline-flex;
align-items: center;
gap: var(--sk-space-2);
min-height: var(--sk-terminal-control-h);
padding: 0 var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-terminal-radius);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
}
:where(.sk-terminal-payment-heading) > button svg {
width: 1rem;
}
.sk-terminal-payment-heading > strong {
font-size: var(--sk-type-display-heading);
letter-spacing: -0.04em;
}
.sk-terminal-payment-attribution {
display: flex;
align-items: center;
gap: var(--sk-space-2);
margin: 0;
padding: var(--sk-space-3) var(--sk-space-4);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface-subtle);
color: var(--sk-color-ink-soft);
}
.sk-terminal-payment-attribution svg {
width: 1rem;
color: var(--sk-color-primary);
}
.sk-terminal-payment-methods {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-3);
}
:where(.sk-terminal-payment-methods) > button {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--sk-space-4);
min-height: 7rem;
padding: var(--sk-space-5);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
text-align: left;
}
:where(.sk-terminal-payment-methods) > button:hover,
:where(.sk-terminal-payment-methods) > button:focus-visible {
border-color: var(--sk-color-primary);
background: color-mix(in srgb, var(--sk-color-primary) 5%, transparent);
}
:where(.sk-terminal-payment-methods) > button:disabled {
cursor: not-allowed;
border-color: var(--sk-color-border-soft);
background: var(--sk-color-surface-subtle);
color: var(--sk-color-ink-soft);
opacity: 0.72;
}
:where(.sk-terminal-payment-methods) > button:disabled svg {
color: var(--sk-color-ink-soft);
}
.sk-terminal-payment-methods svg {
width: 1.75rem;
height: 1.75rem;
color: var(--sk-color-primary);
}
.sk-terminal-payment-methods span {
display: grid;
gap: var(--sk-space-1);
}
.sk-terminal-payment-methods strong {
font-size: var(--sk-font-size-lg);
}
.sk-terminal-payment-methods small {
color: var(--sk-color-ink-soft);
}
.sk-terminal-payment-readiness-error {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-3);
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid color-mix(in srgb, var(--sk-color-danger) 30%, transparent);
border-radius: var(--sk-radius-md);
background: color-mix(in srgb, var(--sk-color-danger) 7%, transparent);
}
.sk-terminal-payment-readiness-error p {
margin: 0;
}
:where(.sk-terminal-payment-readiness-error) button {
flex: 0 0 auto;
min-height: var(--sk-terminal-control-h);
padding-inline: var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-terminal-radius);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-payment-form,
.sk-terminal-split-payment {
display: grid;
gap: var(--sk-space-4);
width: min(38rem, 100%);
}
.sk-terminal-payment-form label,
.sk-terminal-split-fields label {
display: grid;
gap: var(--sk-space-2);
color: var(--sk-color-ink-soft);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-payment-form input,
.sk-terminal-split-fields input,
.sk-terminal-split-fields select {
width: 100%;
min-height: var(--sk-terminal-control-h);
padding: 0 var(--sk-space-3);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-terminal-radius);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
}
.sk-terminal-change {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sk-space-4);
padding: var(--sk-space-4);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface-subtle);
}
.sk-terminal-change strong {
font-size: var(--sk-font-size-xl);
}
.sk-terminal-split-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
align-items: end;
gap: var(--sk-space-3);
}
:where(.sk-terminal-split-fields) > button {
min-height: var(--sk-terminal-control-h);
padding: 0 var(--sk-space-4);
border: 1px solid var(--sk-color-primary);
border-radius: var(--sk-terminal-radius);
background: var(--sk-color-primary);
color: white;
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-allocation-list {
display: grid;
gap: var(--sk-space-2);
}
.sk-terminal-allocation-list > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--sk-space-3);
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
}
.sk-terminal-allocation-list span {
display: grid;
}
.sk-terminal-allocation-list small {
color: var(--sk-color-ink-soft);
}
:where(.sk-terminal-allocation-list) button {
border: 0;
background: transparent;
color: var(--sk-color-danger);
}
.sk-terminal-payment-flow.is-processing,
.sk-terminal-payment-flow.is-complete {
place-items: center;
align-content: center;
min-height: min(36rem, calc(100dvh - 10rem));
text-align: center;
}
.sk-terminal-payment-flow.is-processing > svg,
.sk-terminal-payment-flow.is-complete > svg,
.sk-terminal-payment-flow.is-complete > .sk-terminal-completed-details > svg {
width: 3.5rem;
height: 3.5rem;
color: var(--sk-color-primary);
}
.sk-terminal-payment-flow.is-processing > strong,
.sk-terminal-payment-flow.is-complete > h1,
.sk-terminal-payment-flow.is-complete > .sk-terminal-completed-details > h1 {
margin: 0;
font-size: var(--sk-type-display-total);
letter-spacing: -0.05em;
}
.sk-terminal-payment-flow.is-processing .sk-customer-qr {
margin-block: var(--sk-space-2);
}
.sk-terminal-payment-flow.is-complete dl {
display: grid;
width: min(32rem, 100%);
margin: 0;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
}
.sk-terminal-payment-flow.is-complete dl > div {
display: flex;
justify-content: space-between;
gap: var(--sk-space-4);
padding: var(--sk-space-3) var(--sk-space-4);
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-terminal-payment-flow.is-complete dl > div:last-child {
border-bottom: 0;
}
.sk-terminal-payment-flow.is-complete dt {
color: var(--sk-color-ink-soft);
}
.sk-terminal-payment-flow.is-complete dd {
margin: 0;
font-weight: var(--sk-font-weight-strong);
}
.is-spinning {
animation: sk-terminal-spin 0.9s linear infinite;
}
@keyframes sk-terminal-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 70rem) {
/* Frisørnavnet er det første som kan gå når raden blir trang: det står
også i beskjeden under raden når det er en annens kunde. */
.sk-terminal-order-stylist {
display: none;
}
}
@media (max-width: 48rem) {
/* Søkefeltet og summen får hver sin linje når de ikke får plass ved siden
av hverandre. */
.sk-terminal-order-toolbar {
flex-wrap: wrap;
}
.sk-terminal-order-toolbar > p {
flex: 1 0 100%;
}
.sk-terminal-payment-heading {
grid-template-columns: minmax(0, 1fr);
}
.sk-terminal-payment-heading > div { min-width: 0; }
.sk-terminal-payment-heading .sk-terminal-heading-actions {
justify-content: space-between;
flex-wrap: wrap;
}
.sk-terminal-payment-heading > strong {
grid-column: 2;
}
}
@media (max-width: 36rem) {
.sk-terminal-payment-methods,
.sk-terminal-split-fields {
grid-template-columns: 1fr;
}
:where(.sk-terminal-payment-methods) > button {
min-height: 5.75rem;
padding: var(--sk-space-4);
}
.sk-terminal-payment-flow.is-processing {
gap: var(--sk-space-4);
}
.sk-terminal-payment-flow.is-processing .sk-customer-qr {
padding: 0.75rem;
}
.sk-terminal-payment-flow.is-processing .sk-customer-qr svg {
width: 13.125rem;
height: 13.125rem;
}
:where(.sk-terminal-split-fields) > button {
width: 100%;
}
.sk-terminal-payment-flow.is-complete dl > div {
display: grid;
gap: var(--sk-space-1);
text-align: left;
}
}
/* Nora UI-batch 2026-08-12: checkout skann/format + retur + logo */
.sk-terminal-workspace .sk-terminal-search-control input:focus-visible { outline: none; }
.sk-terminal-catalog-result__kind { flex: none; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--sk-color-surface-hover); color: var(--sk-color-ink-soft); font-size: var(--sk-font-size-xs); font-weight: var(--sk-font-weight-strong); text-transform: uppercase; letter-spacing: 0.03em; }
.sk-terminal-catalog-result__price { justify-self: end; padding-left: var(--sk-space-4); white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--sk-font-weight-strong); font-size: var(--sk-font-size-md); }
.sk-terminal-cart-editor > .sk-terminal-search,
.sk-terminal-cart-editor > .sk-terminal-checkout-grid,
.sk-terminal-cart-editor > .sk-terminal-cart-editor { margin-top: 1rem; }
.sk-terminal-mark.has-logo { background: none; box-shadow: none; color: inherit; }
.sk-terminal-mark.has-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; animation: mr-brand-sway 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sk-terminal-mark.has-logo img { animation: none; transform: none; } }
/* Kundeskjerm-berikelse 2026-08: velkomst + nyttår/valentine/17.mai-dekor */
.sk-customer-welcome-eyebrow { margin: 0 0 0.1rem; color: rgb(255 255 255 / 55%); font-size: var(--sk-type-display-caption); font-weight: var(--sk-font-weight-strong); letter-spacing: 0.16em; text-transform: uppercase; }
.sk-customer-welcome-greeting { margin: 0.85rem 0 0; padding: 0.4rem 1.1rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / 14%); background: rgb(255 255 255 / 9%); color: rgb(255 255 255 / 90%); font-size: var(--sk-type-display-label); font-weight: var(--sk-font-weight-strong); }
.sk-customer-heart, .sk-customer-flag, .sk-customer-spark { --season-left: 8%; --season-delay: 0s; --season-duration: 16s; position: absolute; top: -2rem; left: var(--season-left); animation: sk-customer-season-fall var(--season-duration) ease-in-out infinite; animation-delay: var(--season-delay); }
.sk-customer-heart:nth-child(2), .sk-customer-flag:nth-child(2), .sk-customer-spark:nth-child(2) { --season-left: 16%; --season-delay: -11s; --season-duration: 19s; }
.sk-customer-heart:nth-child(3), .sk-customer-flag:nth-child(3), .sk-customer-spark:nth-child(3) { --season-left: 25%; --season-delay: -4s; --season-duration: 14s; }
.sk-customer-heart:nth-child(4), .sk-customer-flag:nth-child(4), .sk-customer-spark:nth-child(4) { --season-left: 34%; --season-delay: -15s; --season-duration: 22s; }
.sk-customer-heart:nth-child(5), .sk-customer-flag:nth-child(5), .sk-customer-spark:nth-child(5) { --season-left: 43%; --season-delay: -7s; --season-duration: 17s; }
.sk-customer-heart:nth-child(6), .sk-customer-flag:nth-child(6), .sk-customer-spark:nth-child(6) { --season-left: 52%; --season-delay: -18s; --season-duration: 23s; }
.sk-customer-heart:nth-child(7), .sk-customer-flag:nth-child(7), .sk-customer-spark:nth-child(7) { --season-left: 61%; --season-delay: -9s; --season-duration: 18s; }
.sk-customer-heart:nth-child(8), .sk-customer-flag:nth-child(8), .sk-customer-spark:nth-child(8) { --season-left: 70%; --season-delay: -2s; --season-duration: 15s; }
.sk-customer-heart:nth-child(9), .sk-customer-flag:nth-child(9), .sk-customer-spark:nth-child(9) { --season-left: 79%; --season-delay: -13s; --season-duration: 21s; }
.sk-customer-heart:nth-child(10), .sk-customer-flag:nth-child(10), .sk-customer-spark:nth-child(10) { --season-left: 88%; --season-delay: -6s; --season-duration: 16s; }
.sk-customer-heart:nth-child(11), .sk-customer-flag:nth-child(11), .sk-customer-spark:nth-child(11) { --season-left: 95%; --season-delay: -16s; --season-duration: 20s; }
.sk-customer-heart:nth-child(12), .sk-customer-flag:nth-child(12), .sk-customer-spark:nth-child(12) { --season-left: 4%; --season-delay: -8s; --season-duration: 18s; }
.sk-customer-heart { width: 0.9rem; height: 0.9rem; opacity: 0.7; background: #e5537b; transform: rotate(-45deg); box-shadow: 0 0 0.9rem rgb(229 83 123 / 22%); }
.sk-customer-heart::before, .sk-customer-heart::after { content: ""; position: absolute; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: inherit; }
.sk-customer-heart::before { top: -0.45rem; left: 0; }
.sk-customer-heart::after { top: 0; left: 0.45rem; }
.sk-customer-flag { width: 1.3rem; height: 0.95rem; border-radius: 0.1rem; opacity: 0.72; box-shadow: 0 0.15rem 0.5rem rgb(0 0 0 / 20%); background: linear-gradient(#ba0c2f, #ba0c2f); }
.sk-customer-spark { width: 0.5rem; height: 0.5rem; border-radius: 50%; opacity: 0.8; background: #e8c66a; box-shadow: 0 0 1.1rem 0.3rem rgb(232 198 106 / 28%), 0 0 0.2rem 0.05rem rgb(255 255 255 / 60%); animation-name: sk-customer-summer-float; }
.sk-customer-display.season-newyear::before { background: #e8c66a; }
.sk-customer-display.season-newyear::after { background: var(--sk-color-primary); }
.sk-customer-display.season-valentine::before { background: #e5537b; }
.sk-customer-display.season-valentine::after { background: #f4a6c0; }
.sk-customer-display.season-seventeenth::before { background: #ba0c2f; }
.sk-customer-display.season-seventeenth::after { background: #33292f; }
/* Shared finite geometry animation; never apply bitmap CSS motion to its fallback. */
.sk-terminal-mark.sk-brand-logo--geometry > img { animation: none; transform: scale(.82); }
.sk-terminal-workspace-nav :focus-visible { outline-color: var(--sk-color-focus-ring-inverse); }
/* Payment decisions and Nora enquiries keep separate positions in Tasks. */
.sk-terminal-nav-badge--fee { right: auto; left: var(--sk-space-2); background: var(--sk-color-primary); }
.sk-terminal-mobile-more-grid .sk-terminal-nav-badge--fee { position: static; margin-inline: auto; }
/* Søkefeltet er en pille som viser fokus selv (`:focus-within`). Feltet inni skal ikke
få en egen firkantet ramme oppå den, som på iPad ble en blå firkant i pillen. */
:root .sk-terminal-workspace .sk-terminal-search-control input:is(:focus, :focus-visible),
:root .sk-terminal-workspace .sk-terminal-order-search input:is(:focus, :focus-visible) {
border: 0;
outline: 0;
box-shadow: none;
}
/* Venteflaten under kortbetaling. Regelen over (`min(36rem, …)`) lastes ETTER
06-workspace.css og vant derfor over høyden derfra på iPad stående: flaten
ble 36 rem høy og innholdet lå i øvre del, med en stor tom flate under.
Her fyller den den synlige arbeidsflaten, og innholdet står i midten. */
.sk-terminal-payment-flow.is-processing {
min-height: calc(100dvh - var(--sk-terminal-wait-chrome, 14rem));
gap: var(--sk-space-3);
}
@media (max-width: 56rem) {
.sk-terminal-payment-flow.is-processing { --sk-terminal-wait-chrome: 17rem; }
}
.sk-terminal-payment-flow.is-processing > p { margin: 0; max-width: 34rem; }
.sk-terminal-payment-wait__elapsed {
min-height: 1.5em;
color: var(--sk-color-ink-soft);
font-variant-numeric: tabular-nums;
}
.sk-terminal-payment-wait__phase {
font-size: var(--sk-font-size-lg, 1.125rem);
font-weight: var(--sk-font-weight-strong);
}
.sk-terminal-payment-wait__phase.is-uncertain {
border: 1px solid var(--sk-color-warning);
border-radius: var(--sk-radius-md);
padding: var(--sk-space-3) var(--sk-space-4);
background: var(--sk-color-warning-soft, var(--sk-color-surface));
}
.sk-terminal-payment-wait__hint { color: var(--sk-color-ink-soft); }
/* Oppgaver: én rolig linje når begge betalingskortene er bekreftet tomme. */
.sk-nora-tasks__payments-clear { margin: 0; color: var(--sk-color-ink-soft); }
.sk-terminal-workspace > .sk-terminal-bar-notice {
flex-shrink: 0;
}
/* Bunnmenyen eier sin del av vinduet; innholdet ruller over den, ikke bak den.
Samme høyde inkluderer eksisterende knappmål, polstring og trygg bunnkant. */
@media (max-width: 63.99rem) {
.sk-terminal-workspace {
--sk-terminal-bottom-nav-height: calc(max(4.25rem, var(--sk-terminal-touch-min)) + var(--sk-space-2) + max(var(--sk-space-2), env(safe-area-inset-bottom)) + 1px);
scroll-padding-block-end: calc(var(--sk-terminal-measured-bottom-nav-height, var(--sk-terminal-bottom-nav-height)) + var(--sk-space-2));
}
.sk-terminal-workspace > .sk-terminal-workspace-layout {
margin-bottom: var(--sk-terminal-measured-bottom-nav-height, var(--sk-terminal-bottom-nav-height));
}
.sk-terminal-workspace > .sk-terminal-workspace-layout > .sk-terminal-workspace-nav {
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: auto;
min-height: var(--sk-terminal-bottom-nav-height);
max-height: 100vh;
max-height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
}
/* Beløpsendringer skal ikke flytte Betal eller naboknappene. Full sum
står fortsatt i handlekurven og knappens tilgjengelige etikett. */
.sk-terminal-workspace .sk-terminal-workspace-nav > .sk-terminal-nav-pay small {
inline-size: 8ch;
max-inline-size: 100%;
text-align: center;
}
.sk-terminal-workspace .sk-terminal-workspace-nav > button {
flex: 1 1 auto;
min-inline-size: max-content;
max-inline-size: 100%;
white-space: normal;
overflow-wrap: normal;
}
}
/* The queue has deliberate rows, not a wrapped strip of unrelated controls. */
.sk-terminal-open-orders .sk-terminal-order-toolbar {
flex-direction: column;
align-items: stretch;
}
.sk-terminal-open-orders .sk-terminal-order-toolbar > p {
display: block;
flex: none;
overflow-wrap: anywhere;
}
.sk-terminal-open-orders .sk-terminal-order-toolbar > p > strong {
display: block;
}
.sk-terminal-open-orders .sk-terminal-heading-actions {
flex-direction: column;
align-items: stretch;
}
.sk-terminal-order-list > li {
flex-direction: column;
align-items: stretch;
gap: var(--sk-space-2);
}
.sk-terminal-order-list > li > button:first-child {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
inline-size: 100%;
padding: var(--sk-space-3);
}
.sk-terminal-order-list > li > button:first-child > .sk-terminal-order-name {
grid-column: 2 / -1;
}
.sk-terminal-order-list .sk-terminal-order-name :is(strong, small) {
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
}
.sk-terminal-order-list > li > button:first-child > .sk-terminal-order-stylist,
.sk-terminal-order-list > li > button:first-child > .sk-terminal-order-total {
grid-column: 2;
}
.sk-terminal-order-list > li > button:first-child > svg:last-child { grid-column: 3; }
.sk-terminal-order-list .sk-terminal-order-discard {
align-self: flex-end;
margin-block-end: var(--sk-space-2);
}
@media (max-width: 63.99rem) {
.sk-terminal-workspace > .sk-terminal-workspace-layout > .sk-terminal-workspace-nav {
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 8ch), 1fr));
gap: var(--sk-space-2);
}
.sk-terminal-workspace-nav > .sk-terminal-nav-pay { grid-column: 1 / -1; }
}
/* Enlarged labels own their full height instead of overflowing a fixed control. */
.sk-terminal-open-orders .sk-terminal-heading-actions > button {
height: auto;
min-height: var(--sk-terminal-control-h);
padding-block: var(--sk-space-2);
/* Wrapped labels (large text) need leading above the glyph height, or the two lines touch. */
line-height: 1.3;
}
/* Grouping remains layout-transparent outside the native cashier viewport. */
.sk-terminal-payment-content {display:contents;}
.sk-terminal-completed-details,.sk-terminal-post-sale-details {display:contents;}
.ipad-club-enrollment-details {display:contents;}
/* Innkommende anrop ligger under terminalhodet, men over øvrige overlays som
en rolig, tydelig arbeidsbeskjed. Ingen kundeopplysninger vises før PIN. */
.sk-incoming-call {
position: fixed;
top: calc(4.75rem + var(--sk-space-3) + env(safe-area-inset-top));
right: max(var(--sk-space-4), env(safe-area-inset-right));
z-index: var(--sk-z-toast);
width: min(25rem, calc(100vw - 2 * var(--sk-space-4)));
min-height: 5rem;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--sk-space-3);
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface-raised);
color: var(--sk-color-ink);
box-shadow: var(--sk-shadow-popover);
}
.sk-incoming-call__icon {
width: 3rem;
height: 3rem;
display: grid;
place-items: center;
border-radius: var(--sk-radius-pill);
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
animation: sk-incoming-call-ring 1.1s var(--sk-ease-standard) infinite;
}
.sk-incoming-call__icon svg { width: 1.4rem; height: 1.4rem; }
.sk-incoming-call__open {
min-width: 0;
min-height: 3.5rem;
padding: var(--sk-space-1) var(--sk-space-2);
border: 0;
border-radius: var(--sk-radius-md);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-content: center;
column-gap: var(--sk-space-2);
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.sk-incoming-call__open:hover { background: var(--sk-color-surface-hover); }
.sk-incoming-call__open > :not(svg) { grid-column: 1; }
.sk-incoming-call__open > svg {
grid-column: 2;
grid-row: 1 / 4;
align-self: center;
width: 1.15rem;
color: var(--sk-color-primary);
}
.sk-incoming-call__eyebrow {
color: var(--sk-color-primary);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
letter-spacing: .055em;
text-transform: uppercase;
}
.sk-incoming-call__open strong,
.sk-incoming-call__locked strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--sk-font-size-md);
}
.sk-incoming-call__open > span:last-of-type,
.sk-incoming-call__locked span {
overflow: hidden;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-incoming-call__locked { min-width: 0; display: grid; gap: var(--sk-space-1); }
.sk-incoming-call__close {
width: var(--sk-control-height);
height: var(--sk-control-height);
border: 0;
border-radius: var(--sk-radius-pill);
display: grid;
place-items: center;
background: transparent;
color: var(--sk-color-ink-soft);
cursor: pointer;
}
.sk-incoming-call__close:hover { background: var(--sk-color-surface-hover); color: var(--sk-color-ink); }
.sk-incoming-call__close svg { width: 1.1rem; }
:where(.sk-incoming-call) button:focus-visible {
outline: 3px solid var(--sk-color-focus-ring);
outline-offset: 2px;
}
@keyframes sk-incoming-call-ring {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-10deg); }
40% { transform: rotate(8deg); }
60% { transform: rotate(-5deg); }
80% { transform: rotate(3deg); }
}
/* Oppgaver er en arbeidskø, ikke en stabel med generiske administrasjonskort. */
.sk-nora-tasks { display: grid; align-content: start; gap: var(--sk-space-5); }
.sk-nora-tasks__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sk-space-6);
}
.sk-nora-tasks__header > div { min-width: 0; }
.sk-nora-tasks__header h1 {
margin: 0;
font-size: var(--sk-type-page-title);
letter-spacing: -.04em;
}
.sk-nora-tasks__header > div > p:last-child {
max-width: 62ch;
margin: var(--sk-space-2) 0 0;
color: var(--sk-color-ink-soft);
line-height: var(--sk-line-copy);
}
.sk-nora-tasks__title-row {
display: flex;
align-items: center;
gap: var(--sk-space-3);
flex-wrap: wrap;
}
.sk-nora-tasks__header .is-refreshing svg { animation: sk-terminal-spin .8s linear infinite; }
@keyframes sk-terminal-spin { to { transform: rotate(360deg); } }
.sk-nora-tasks__error {
min-height: var(--sk-control-height);
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid color-mix(in srgb, var(--sk-color-danger) 35%, transparent);
border-radius: var(--sk-radius-md);
display: flex;
align-items: center;
gap: var(--sk-space-3);
background: var(--sk-color-danger-soft);
color: var(--sk-color-danger);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-nora-tasks__error svg { width: 1.15rem; flex: 0 0 auto; }
.sk-nora-tasks__layout {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .75fr);
align-items: start;
gap: var(--sk-space-5);
}
/* .sk-nora-side-card er kortalias (01a-contract.css). Begge har hode og rader
med egen polstring, så selve kortet står uten. */
.sk-nora-work-queue {
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
}
.sk-nora-work-queue,
.sk-nora-side-card {
overflow: hidden;
padding: 0;
}
.sk-nora-work-queue > header,
.sk-nora-side-card > header {
padding: var(--sk-space-5);
border-bottom: 1px solid var(--sk-color-border-soft);
}
.sk-nora-work-queue > header h2,
.sk-nora-side-card > header h2 {
margin: 0;
font-size: var(--sk-type-section-title);
}
.sk-nora-work-queue > header p,
.sk-nora-side-card > header p {
margin: var(--sk-space-1) 0 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
line-height: var(--sk-line-copy);
}
.sk-nora-work-queue > .sk-empty-state { margin: var(--sk-space-5); }
.sk-nora-task-list { display: grid; }
.sk-nora-task {
position: relative;
min-width: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: var(--sk-space-4);
padding: var(--sk-space-5);
border-left: 3px solid var(--sk-color-primary);
}
.sk-nora-task + .sk-nora-task { border-top: 1px solid var(--sk-color-border-soft); }
.sk-nora-task.is-complaint { border-left-color: var(--sk-color-danger); }
.sk-nora-task.is-waitlist { border-left-color: var(--sk-color-warning); }
.sk-nora-task.is-followup { border-left-color: var(--sk-color-success); }
.sk-nora-task__icon,
.sk-nora-call-log__icon {
width: 2.7rem;
height: 2.7rem;
display: grid;
place-items: center;
border-radius: var(--sk-radius-md);
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
}
.sk-nora-task.is-complaint .sk-nora-task__icon { background: var(--sk-color-danger-soft); color: var(--sk-color-danger); }
.sk-nora-task.is-waitlist .sk-nora-task__icon { background: var(--sk-color-warning-soft); color: var(--sk-color-warning); }
.sk-nora-task.is-followup .sk-nora-task__icon { background: var(--sk-color-success-soft); color: var(--sk-color-success); }
.sk-nora-task__icon svg,
.sk-nora-call-log__icon svg { width: 1.2rem; height: 1.2rem; }
.sk-nora-task__body { min-width: 0; }
.sk-nora-task__meta {
display: flex;
align-items: center;
gap: var(--sk-space-2);
flex-wrap: wrap;
}
.sk-nora-task__meta time { color: var(--sk-color-ink-faint); font-size: var(--sk-font-size-xs); }
.sk-nora-kind {
display: inline-flex;
padding: var(--sk-space-1) var(--sk-space-2);
border-radius: var(--sk-radius-pill);
background: var(--sk-color-primary-soft);
color: var(--sk-color-primary);
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
}
.sk-nora-kind.is-complaint { background: var(--sk-color-danger-soft); color: var(--sk-color-danger); }
.sk-nora-kind.is-waitlist { background: var(--sk-color-warning-soft); color: var(--sk-color-warning); }
.sk-nora-kind.is-followup { background: var(--sk-color-success-soft); color: var(--sk-color-success); }
.sk-nora-task__body h3 { margin: var(--sk-space-2) 0 0; font-size: var(--sk-type-card-title); }
.sk-nora-task__phone { margin: var(--sk-space-1) 0 0; color: var(--sk-color-ink-soft); font-size: var(--sk-font-size-sm); }
.sk-nora-task__note {
max-width: 65ch;
margin: var(--sk-space-3) 0 0;
color: var(--sk-color-ink);
line-height: var(--sk-line-copy);
overflow-wrap: anywhere;
}
.sk-nora-task__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sk-space-2);
flex-wrap: wrap;
}
.sk-nora-task__remove { color: var(--sk-color-danger); }
.sk-nora-tasks__sidebar { min-width: 0; display: grid; gap: var(--sk-space-5); }
.sk-nora-answer-mode { min-width: 0; margin: 0; padding: var(--sk-space-5); border: 0; }
.sk-nora-answer-mode legend { padding: 0; font-size: var(--sk-font-size-lg); font-weight: var(--sk-font-weight-strong); }
.sk-nora-answer-mode > p { margin: var(--sk-space-1) 0 var(--sk-space-4); color: var(--sk-color-ink-soft); font-size: var(--sk-font-size-sm); line-height: var(--sk-line-copy); }
.sk-nora-answer-mode > div { display: grid; gap: var(--sk-space-2); }
.sk-nora-answer-mode label {
position: relative;
min-height: var(--sk-control-height);
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
display: flex;
/* Forklaringen står under navnet, så knappen er ikke lenger én linje.
`center` ville lagt radioknappen midt på to linjer tekst. */
align-items: flex-start;
gap: var(--sk-space-3);
background: var(--sk-color-surface);
cursor: pointer;
}
.sk-nora-answer-mode label > span {
display: grid;
gap: 0.15rem;
min-width: 0;
}
.sk-nora-answer-mode label small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-body);
line-height: var(--sk-line-copy);
}
/* Den valgte muligheten farger navnet, ikke forklaringen — den skal være
like lesbar i alle tre. */
.sk-nora-answer-mode label.is-active small {
color: var(--sk-color-ink-soft);
}
.sk-nora-answer-mode input {
margin-top: 0.2rem;
}
.sk-nora-answer-mode label:hover { border-color: var(--sk-color-primary); }
.sk-nora-answer-mode label.is-active { border-color: var(--sk-color-primary); background: var(--sk-color-primary-soft); color: var(--sk-color-primary); font-weight: var(--sk-font-weight-strong); }
.sk-nora-answer-mode input { width: 1rem; height: 1rem; accent-color: var(--sk-color-primary); }
.sk-nora-call-log,
.sk-nora-call-log ul { margin: 0; padding: 0; list-style: none; }
.sk-nora-call-log li + li { border-top: 1px solid var(--sk-color-border-soft); }
:where(.sk-nora-call-log) button {
width: 100%;
min-height: 5rem;
padding: var(--sk-space-3) var(--sk-space-4);
border: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--sk-space-3);
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
:where(.sk-nora-call-log) button:hover { background: var(--sk-color-surface-hover); }
.sk-nora-call-log__icon { width: 2.35rem; height: 2.35rem; border-radius: var(--sk-radius-pill); }
.sk-nora-call-log__body { min-width: 0; display: grid; gap: .1rem; }
.sk-nora-call-log__body strong,
.sk-nora-call-log__body small,
.sk-nora-call-log__body > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-nora-call-log__body small,
.sk-nora-call-log__body > span { color: var(--sk-color-ink-soft); font-size: var(--sk-font-size-xs); }
.sk-nora-call-log__time { display: flex; align-items: center; gap: var(--sk-space-1); color: var(--sk-color-ink-faint); font-size: var(--sk-font-size-xs); }
.sk-nora-call-log__time svg { width: .95rem; }
.sk-nora-call-log__empty { margin: 0; padding: var(--sk-space-5); color: var(--sk-color-ink-soft); }
.sk-terminal-caller-context {
margin-bottom: var(--sk-space-4);
padding: var(--sk-space-4);
border: 1px solid color-mix(in srgb, var(--sk-color-primary) 30%, var(--sk-color-border));
border-radius: var(--sk-radius-lg);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--sk-space-3);
background: var(--sk-color-primary-soft);
color: var(--sk-color-ink);
}
.sk-terminal-caller-context > span {
width: 2.75rem;
height: 2.75rem;
border-radius: var(--sk-radius-pill);
display: grid;
place-items: center;
background: var(--sk-color-surface);
color: var(--sk-color-primary);
}
.sk-terminal-caller-context svg { width: 1.2rem; }
.sk-terminal-caller-context strong { display: block; }
.sk-terminal-caller-context p { margin: var(--sk-space-1) 0 0; color: var(--sk-color-ink-soft); font-size: var(--sk-font-size-sm); }
.sk-terminal-caller-context small { display: block; margin-top: var(--sk-space-1); color: var(--sk-color-primary); font-weight: var(--sk-font-weight-strong); }
.sk-terminal-workspace-nav > .sk-terminal-nav-secondary { position: relative; }
@media (width <= 72rem) {
.sk-nora-tasks__layout { grid-template-columns: 1fr; }
.sk-nora-tasks__sidebar { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
@media (width <= 56rem) {
.sk-incoming-call { top: calc(4.25rem + var(--sk-space-3) + env(safe-area-inset-top)); }
.sk-nora-tasks__header { display: grid; }
.sk-nora-tasks > .sk-terminal-section-heading { align-items: stretch; flex-direction: column; }
.sk-nora-tasks > .sk-terminal-section-heading > div { min-width: 0; width: 100%; }
.sk-nora-tasks > .sk-terminal-section-heading > .sk-terminal-heading-actions { justify-content: flex-start; flex-wrap: wrap; }
.sk-nora-tasks__sidebar { grid-template-columns: 1fr; }
.sk-nora-task { grid-template-columns: auto minmax(0, 1fr); }
.sk-nora-task__actions { grid-column: 1 / -1; justify-content: stretch; }
}
@media (width <= 36rem) {
.sk-incoming-call {
top: auto;
right: max(var(--sk-space-3), env(safe-area-inset-right));
bottom: calc(5.5rem + env(safe-area-inset-bottom));
left: max(var(--sk-space-3), env(safe-area-inset-left));
width: auto;
}
.sk-nora-task { padding: var(--sk-space-4); }
.sk-nora-task__actions { display: grid; grid-template-columns: 1fr 1fr; }
.sk-nora-task__actions .sk-nora-task__open { grid-column: 1 / -1; }
:where(.sk-nora-call-log) button { padding-inline: var(--sk-space-3); }
}
@media (prefers-reduced-motion: reduce) {
.sk-incoming-call__icon,
.sk-nora-tasks__header .is-refreshing svg { animation: none; }
}
/* Financial recovery uses the same card and summary contract as Kundeprofil. */
.sk-terminal-payment-overview { display: grid; gap: var(--sk-space-3); min-width: 0; }
.sk-terminal-payment-overview p { margin: 0; }
.sk-terminal-payment-overview__list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap: var(--sk-space-4); list-style: none; margin: 0; padding: 0; }
.sk-terminal-payment-overview__list > li { display: grid; align-content: start; gap: var(--sk-space-2); padding-top: var(--sk-space-4); border-top: 1px solid var(--sk-color-border-soft); min-width: 0; }
.sk-terminal-payment-overview__list h3 { margin: 0; }
.sk-terminal-payment-overview__reference { overflow-wrap: anywhere; }
.sk-terminal-payment-overview .sk-terminal-status { justify-self: start; }
@media(max-width:720px) { .sk-terminal-payment-overview > .sk-terminal-section-heading { flex-direction: column; align-items: stretch; } .sk-terminal-payment-overview .sk-terminal-heading-actions { justify-content: flex-start; } }
.sk-terminal-payment-overview .sk-terminal-summary-grid { grid-template-columns: minmax(0,1fr); gap: 0; margin-bottom: 0; }
.sk-terminal-payment-overview .sk-terminal-summary-grid article { grid-template-columns: minmax(0,1fr) auto; min-height: 0; gap: var(--sk-space-2); border: 0; border-radius: 0; border-bottom: 1px solid var(--sk-color-border-soft); padding: var(--sk-space-2) 0; }
.sk-terminal-payment-overview .sk-terminal-summary-grid strong { align-self: center; white-space: nowrap; }
/* Original sale inspection stays within its existing recovery card. */
.sk-terminal-payment-inspection { display: grid; gap: var(--sk-space-3); min-width: 0; }
.sk-terminal-payment-inspection .sk-terminal-cart-lines,
.sk-terminal-payment-inspection .sk-terminal-cart-lines > li,
.sk-terminal-payment-inspection .sk-cashup-sale-detail { min-width: 0; max-width: 100%; }
.sk-terminal-payment-inspection .sk-terminal-cart-lines > li { grid-template-columns: minmax(0,1fr); overflow-wrap: anywhere; }
.sk-terminal-payment-inspection .sk-terminal-cart-lines > li > span { min-width: 0; }
.sk-terminal-payment-inspection .sk-terminal-section-heading { flex-wrap: wrap; }
.sk-terminal-payment-inspection .sk-terminal-section-heading > div { min-width: 0; }
.sk-terminal-payment-inspection .sk-terminal-cart-lines > li > button { grid-template-columns: minmax(0,1fr) auto; }
.sk-terminal-payment-inspection .sk-terminal-cart-lines > li > button > span:not(.sk-terminal-status) { grid-column: 1 / -1; grid-row: 1; }
.sk-terminal-payment-inspection .sk-terminal-cart-lines > li > button > strong { grid-column: 1; }
.sk-terminal-payment-inspection .sk-terminal-cart-lines > li > button > .sk-terminal-status { grid-column: 2; }
/* Betalingskortene i Oppgaver ligger i hver sin ramme. Rammen skjules (`hidden`)
bare når kortet har bekreftet at det er tomt; den er ellers usynlig. */
.sk-nora-tasks__payments { min-width: 0; }
/* Venteliste-booking og anropslogg.
Skilt ut fra 01-foundations.css, som traff strukturvaktens grense på
1200 linjer. Reglene hører uansett sammen: begge er snarveier fra en
liste til en handling. */
/* Ventelisten er en kompakt arbeidskø. Den hadde tidligere kassens generelle
varelinje-klasse, og hver person fikk derfor høyden og kolonnene til en
ordre. Det blir særlig voldsomt på iMac-flaten. Detaljer lastes og vises
først når raden er åpnet. */
.sk-terminal-waitlist-list {
display: grid;
gap: var(--sk-space-2);
margin: var(--sk-space-3) 0 0;
padding: 0;
list-style: none;
}
.sk-terminal-waitlist-list > li {
display: grid;
gap: var(--sk-space-2);
min-height: var(--sk-terminal-touch-min);
padding: var(--sk-space-2) var(--sk-space-3);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
}
.sk-terminal-waitlist-list > li.is-expanded {
border-color: color-mix(in srgb, var(--sk-color-primary) 35%, var(--sk-color-border-soft));
}
/* Kontraktens radgrammatikk (§4): hele radens innhold er ÉN knapp, tegnet som
raden selv — ikke en lenke inni raden. */
:where(.sk-terminal-waitlist-list > li) > button {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--sk-space-2) var(--sk-space-3);
width: 100%;
min-height: 0;
border: 0;
border-radius: 0;
padding: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
:where(.sk-terminal-waitlist-list > li) > button:disabled {
cursor: default;
}
:where(.sk-terminal-waitlist-list > li) > button > span:first-child {
display: grid;
min-width: 0;
gap: 0.15rem;
}
:where(.sk-terminal-waitlist-list > li) > button > span:first-child > strong {
font-weight: var(--sk-font-weight-strong);
}
:where(.sk-terminal-waitlist-list > li) > button > span:first-child > small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
:where(.sk-terminal-waitlist-list > li) > button > svg {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
color: var(--sk-color-ink-soft);
transition: transform 140ms ease;
}
:where(.sk-terminal-waitlist-list > li) > button > svg.is-open {
transform: rotate(180deg);
}
/* Kundens egne ord, synlig først når raden er åpnet. */
.sk-terminal-waitlist-note {
margin: 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
line-height: var(--sk-line-copy);
}
/* Alias for overgangen: den gamle lenkeknappen i raden. Skal ikke brukes i ny
kode — raden er knappen. */
.sk-terminal-waitlist-list .sk-terminal-row-toggle {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: var(--sk-space-1);
width: fit-content;
max-width: 100%;
min-height: 0;
padding: 0;
font-weight: var(--sk-font-weight-strong);
text-align: left;
}
.sk-terminal-waitlist-list .sk-terminal-row-toggle svg {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
transition: transform 140ms ease;
}
.sk-terminal-waitlist-list .sk-terminal-row-toggle svg.is-open {
transform: rotate(180deg);
}
.sk-terminal-waitlist-list .sk-waitlist-book,
.sk-terminal-waitlist-list .sk-terminal-row-expand {
grid-column: 1 / -1;
}
.sk-terminal-waitlist-list .sk-terminal-row-expand {
min-width: 0;
padding-top: var(--sk-space-2);
border-top: 1px solid var(--sk-color-border-soft);
}
@media (max-width: 48rem) {
:where(.sk-terminal-waitlist-list > li) > button {
grid-template-columns: minmax(0, 1fr) auto;
}
:where(.sk-terminal-waitlist-list > li) > button > .sk-terminal-status {
grid-column: 2;
}
:where(.sk-terminal-waitlist-list > li) > button > svg {
grid-column: 2;
}
}
/* Snarveien fra ventelisten til en booket time.
Knappene er tidspunkter, og de trykkes med en finger på en terminal — de
er derfor store nok til det, og bryter til flere rader framfor å krympe. */
.sk-waitlist-book {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sk-space-2) var(--sk-space-3);
margin-top: var(--sk-space-2);
}
.sk-waitlist-book__slots {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-2);
}
/* Egen komponentklasse, ikke en etterkommerregel: :where() har null vekt, så
`:where(.sk-waitlist-book__slots) > button` tapte mot kontraktens
.sk-terminal-secondary (01a-contract.css) og knappene ble inline-flex igjen —
tidspunktet og frisørnavnet la seg på samme linje. Beholderen under er
fortsatt en containerregel og skal fortsatt skrives med :where(). */
.sk-terminal-waitlist-slot {
min-height: 2.9rem;
display: grid;
gap: 0.1rem;
line-height: 1.15;
}
.sk-waitlist-book__slots small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-xs);
}
.sk-waitlist-book__tom {
color: var(--sk-color-ink-soft);
}
/* Selve raden som åpner kunden. Fikk en egen klasse da sletteknappen kom
ved siden av, slik at de to ikke arver samme regler. */
.sk-nora-call-log__open {
width: 100%;
}
/* Sletting av transkripsjon ligger som en egen knapp UNDER raden, ikke inni
den: den store knappen åpner kunden, og en knapp inni en knapp er ugyldig
markup og umulig å treffe med tastatur. */
.sk-nora-call-log__forget {
justify-self: start;
margin: 0 0 var(--sk-space-2) var(--sk-space-2);
padding: var(--sk-space-1) var(--sk-space-2);
border: 0;
background: transparent;
color: var(--sk-color-danger);
font: inherit;
font-size: var(--sk-font-size-xs);
text-decoration: underline;
cursor: pointer;
}
.sk-nora-call-log__forget:disabled {
color: var(--sk-color-ink-faint);
cursor: default;
}
/* Samtaleloggen åpner sin egen detaljflate. Oppsummering og transkripsjon
skal være lesbare som en samtale, ikke som et kundekort klemt nederst på
oppgavesiden. */
.sk-nora-call-detail {
display: grid;
align-content: start;
}
/* «Tilbake» i en samtaledetalj er en tekstknapp (kontrakt §2), ikke den runde
sk-terminal-back-pilen som hører til arkene. .sk-terminal-back-link er beholdt
som alias i 01a-contract.css og skal ikke brukes i ny kode. */
:where(.sk-nora-call-detail) > .sk-terminal-link:first-child,
.sk-terminal-back-link {
justify-self: start;
width: fit-content;
margin-bottom: var(--sk-space-3);
padding-inline: var(--sk-space-2);
}
:where(.sk-nora-call-detail) > .sk-terminal-link:first-child svg,
.sk-terminal-back-link svg {
width: 1rem;
}
.sk-nora-call-detail__icon {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 999px;
background: color-mix(in srgb, var(--sk-color-primary) 10%, transparent);
color: var(--sk-color-primary);
}
.sk-nora-call-detail__content {
display: grid;
gap: var(--sk-space-3);
margin-top: var(--sk-space-4);
}
.sk-nora-call-detail__content > section {
display: grid;
gap: var(--sk-space-2);
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
}
.sk-nora-call-detail__content h2,
.sk-nora-call-detail__content p {
margin: 0;
}
.sk-nora-call-detail__transcript {
max-width: 72ch;
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: 1.65;
}
.sk-nora-call-detail__actions {
justify-content: flex-start;
margin-top: var(--sk-space-4);
}
/* Vaktblokka er nå en knapp, ikke en . Den arver ikke knappens
standardutseende — den skal se ut nøyaktig som før, bare kunne trykkes. */
button.sk-shift-block {
border: 0;
font: inherit;
text-align: left;
cursor: pointer;
}
/* Detaljene om én vakt. Merknaden er ofte det eneste som ikke fikk plass i
blokka, så den får bryte over flere linjer her. */
.sk-shift-detail {
margin: var(--sk-space-4) 0 0;
display: grid;
gap: var(--sk-space-3);
}
.sk-shift-detail > div {
display: grid;
gap: var(--sk-space-1);
}
.sk-shift-detail dt {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-shift-detail dd {
margin: 0;
font-weight: var(--sk-font-weight-strong);
overflow-wrap: anywhere;
}
/* Explicit wait-time choices remain reachable on narrow terminal screens. */
.sk-terminal-waitlist-horizons { display: flex; flex-wrap: wrap; }
.sk-terminal-waitlist-horizons > p { flex-basis: 100%; }
/* Musikk i lokalet.
*
* Panelet styres av folk som står, ofte med en saks i den andre hånden. Alt
* som kan trykkes holder fingermålet, og volumet er en skyvebryter framfor to
* knapper: å treffe «opp» fire ganger på rad er verre enn å dra én gang. */
.sk-terminal-music-now {
display: flex;
align-items: center;
gap: var(--sk-space-3);
margin-bottom: var(--sk-space-3);
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
}
.sk-terminal-music-track {
display: grid;
flex: 1 1 auto;
min-width: 0;
}
.sk-terminal-music-track strong,
.sk-terminal-music-track small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-terminal-music-track small {
color: var(--sk-color-ink-soft);
}
.sk-terminal-music-controls {
display: flex;
flex: 0 0 auto;
gap: var(--sk-space-2);
}
:where(.sk-terminal-music-controls) > button {
display: grid;
place-items: center;
width: var(--sk-terminal-touch-min);
min-height: var(--sk-terminal-touch-min);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-sm);
background: var(--sk-color-surface-subtle);
color: var(--sk-color-primary);
cursor: pointer;
}
:where(.sk-terminal-music-controls) > button:disabled {
opacity: 0.5;
cursor: default;
}
.sk-terminal-music-volume {
display: flex;
align-items: center;
gap: var(--sk-space-3);
min-height: var(--sk-terminal-touch-min);
margin-bottom: var(--sk-space-2);
}
.sk-terminal-music-volume svg {
width: 1.15rem;
color: var(--sk-color-ink-soft);
}
.sk-terminal-music-volume input {
flex: 1 1 auto;
min-width: 0;
/* Selve sporet skal være lett å treffe, ikke bare håndtaket. */
height: var(--sk-terminal-touch-min);
accent-color: var(--sk-color-primary);
}
.sk-terminal-music-volume strong {
min-width: 2.5rem;
text-align: right;
font-variant-numeric: tabular-nums;
}
.sk-terminal-music-playlists {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--sk-space-2);
margin-top: var(--sk-space-3);
}
:where(.sk-terminal-music-playlists) > button {
display: flex;
align-items: center;
gap: var(--sk-space-3);
min-height: var(--sk-terminal-touch-min);
padding: var(--sk-space-2) var(--sk-space-3);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
color: inherit;
text-align: left;
cursor: pointer;
}
:where(.sk-terminal-music-playlists) > button:hover:not(:disabled),
:where(.sk-terminal-music-playlists) > button:focus-visible {
background: color-mix(in srgb, var(--sk-color-primary) 5%, transparent);
}
:where(.sk-terminal-music-playlists) > button:disabled {
opacity: 0.55;
cursor: default;
}
.sk-terminal-music-playlists svg {
flex: 0 0 auto;
width: 1.1rem;
color: var(--sk-color-primary);
}
.sk-terminal-music-playlists span {
display: grid;
min-width: 0;
}
.sk-terminal-music-playlists strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-terminal-music-playlists small {
color: var(--sk-color-ink-soft);
}
/* ── «Tell kassa»: kasseopptelling ved dagsoppgjør ──────────────────────────
Visningen følger designkontraktens panelskjelett
(docs/architecture/ui/TERMINAL-DESIGN-CONTRACT.md § 3): `sk-terminal-panel`, eyebrow + h1 i
`.sk-terminal-section-heading`, bokser som `.sk-terminal-card` og knapper i
kontraktens varianter. Her ligger BARE det som er særegent for
opptellingen: valørradene med bildene, summen, stepperen og PIN-blokken.
Alle mål går gjennom tokenene. En valørrad som er lavere enn
`--sk-terminal-control-h` er ikke til å treffe med en finger over en åpen
kasseskuff. Oppsettet styres av panelets egen bredde (container queries),
ikke av vinduet: kassa-PC-en på 1024×768 og en 1280×800-skjerm gir omtrent
like brede paneler fordi rotskriften er ulik. */
.sk-terminal-panel--cash-count {
container-type: inline-size;
display: flex;
flex-direction: column;
gap: var(--sk-space-4);
}
.sk-cash-count-back {
align-self: flex-start;
}
/* Overskriften får fokus når visningen åpnes (tar rullingen til toppen).
Den skal ikke få en fokusring av det — den er ikke en kontroll. */
.sk-terminal-panel--cash-count h1:focus {
outline: none;
}
/* Én kolonne på smalt panel; valørene til venstre og summen/bekreftelsen til
høyre når panelet har plass til begge. */
.sk-cash-count-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--sk-space-4);
align-items: start;
}
@container (min-width: 60rem) {
.sk-cash-count-layout {
grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.9fr);
}
}
.sk-cash-count-side,
.sk-cash-count-done,
.sk-cash-count-confirm,
.sk-cash-count-summary,
.sk-cash-count-denominations {
display: flex;
flex-direction: column;
gap: var(--sk-space-4);
min-width: 0;
}
.sk-cash-count-group {
display: flex;
flex-direction: column;
gap: var(--sk-space-2);
}
.sk-cash-count-card-title {
margin: 0;
font-size: var(--sk-font-size-lg);
}
.sk-cash-count-group-title {
margin: 0;
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ── Valørradene: [bilde] valør · − antall + · sum ─────────────────────── */
.sk-cash-count-rows {
display: flex;
flex-direction: column;
gap: var(--sk-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.sk-cash-count-row {
display: grid;
grid-template-columns: 4.5rem minmax(3.5rem, 1fr) auto minmax(6rem, auto);
align-items: center;
gap: var(--sk-space-3);
padding: var(--sk-space-2) var(--sk-space-3);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
}
.sk-cash-count-row-label {
font-size: var(--sk-font-size-lg);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.sk-cash-count-row-sum {
justify-self: end;
font-size: var(--sk-font-size-md);
font-weight: var(--sk-font-weight-strong);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Bildet ved valøren. Stiliserte illustrasjoner (se cash/DenominationArt.tsx)
med faste farger — en tjuekroning er gul også i mørk modus. */
.sk-cash-art {
display: flex;
align-items: center;
justify-content: center;
width: 4.5rem;
height: 3rem;
}
.sk-cash-art svg {
display: block;
width: 100%;
height: 100%;
}
.sk-cash-art.is-coin svg {
width: 3rem;
}
.sk-cash-art.is-note svg {
filter: drop-shadow(0 1px 1px rgb(0 0 0 / 18%));
}
.sk-cash-count-stepper {
display: grid;
grid-template-columns: var(--sk-terminal-control-h) minmax(4rem, 5rem) var(--sk-terminal-control-h);
align-items: center;
gap: var(--sk-space-2);
}
/* `:where()` holder regelen på variantens egen spesifisitet (kontrakten § 2). */
:where(.sk-cash-count-stepper) > .sk-terminal-icon-button {
font-size: var(--sk-font-size-xl);
font-weight: var(--sk-font-weight-strong);
}
.sk-cash-count-stepper input {
min-height: var(--sk-terminal-control-h);
text-align: center;
font-size: var(--sk-font-size-lg);
font-variant-numeric: tabular-nums;
font-weight: var(--sk-font-weight-strong);
}
/* Nullstiller nettleserens egne pilknapper: de er små, de ligger inntil
hverandre, og over en åpen skuff treffer ingen dem. −/+ er knappene. */
.sk-cash-count-stepper input::-webkit-outer-spin-button,
.sk-cash-count-stepper input::-webkit-inner-spin-button {
margin: 0;
appearance: none;
}
.sk-cash-count-stepper input {
appearance: textfield;
}
/* Smalt panel (telefon, iPad stående): stepperen går på egen linje under
bildet, valøren og summen, så knappene beholder full fingerstørrelse. */
@container (max-width: 34rem) {
.sk-cash-count-row {
grid-template-columns: 4rem minmax(0, 1fr) auto;
}
.sk-cash-count-row .sk-cash-count-stepper {
grid-column: 1 / -1;
grid-row: 2;
grid-template-columns: var(--sk-terminal-control-h) minmax(0, 1fr) var(--sk-terminal-control-h);
}
.sk-cash-art {
width: 4rem;
}
}
/* ── Summen: talt (stort), forventet med regnestykket, avviket ─────────── */
.sk-cash-count-total {
display: flex;
flex-direction: column;
gap: var(--sk-space-1);
}
.sk-cash-count-total > span {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
font-weight: var(--sk-font-weight-strong);
}
.sk-cash-count-total > strong {
font-size: var(--sk-font-size-2xl);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.sk-cash-count-totals {
font-variant-numeric: tabular-nums;
}
/* Regnestykket bak «forventet». Det står under tallet, ikke ved siden av: en
linje som brytes midt i en formel er verre enn ingen formel. */
.sk-cash-count-breakdown {
display: block;
color: var(--sk-color-ink-soft);
}
.sk-cash-count-money-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--sk-space-3);
}
/* Hvem som signerer: den som er logget inn på kassa (ingen ny PIN). */
.sk-cash-count-signer {
margin: 0;
color: var(--sk-color-ink-soft);
font-weight: var(--sk-font-weight-strong);
}
/* Forventet beløp kunne ikke hentes: beskjeden og «Prøv igjen» på én linje.
Rutene med det som er talt står urørt. */
.sk-cash-count-load-error {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sk-space-3);
}
.sk-cash-count-actions {
flex-wrap: wrap;
}
/* Opptellingen slik den står i Z-kvitteringen etterpå. Samme radgrammatikk
som resten av kassakortet — dette er tallene noen slår opp i ettertid. */
.sk-cash-count-block {
font-variant-numeric: tabular-nums;
}
/* Startkassen hos Oppgjør: tilbudet om å føre differansen som kontant inn/ut.
Egen blokk inne i godkjenningskortet, skilt med samme myke linje. */
.sk-cash-count-adjust {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sk-space-3);
padding-top: var(--sk-space-4);
border-top: 1px solid var(--sk-color-border-soft);
}
/* ── Uka i timeboken ────────────────────────────────────────────────────────
Ukevisningen ARVER dagsrutenettet fra 04-calendar.css. `.sk-timebook`,
`.sk-timebook-grid`, `.sk-timebook-block` og statusklassene er nøyaktig de
samme — en time skal se lik ut uansett hvilken visning den står i. Her ligger
BARE de tre tingene uka gjør annerledes:
1. sju kolonner må få plass på 1280 piksler, ikke fire brede frisørspalter,
2. kolonnehodet viser en ukedag i stedet for et navn og et ansikt,
3. blokkert tid er bakgrunn, ikke innhold.
Alle mål går gjennom tokenene, som resten av terminalen. */
.sk-timebook-week {
/* Sju ganger 11rem er 77rem pluss tidsaksen — bredere enn skjermen, og da
dytter rutenettet seg ut i stedet for å krympe. 8,5rem gir sju kolonner
pluss akse innenfor 64rem, og en kolonne er fortsatt bred nok til at
klokkeslett og fornavn står på hver sin linje. */
--sk-timebook-column-min: 8.5rem;
}
.sk-timebook-week-head {
/* Ingen avatar her: kolonnen er en dag, ikke en person. */
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
text-transform: capitalize;
}
.sk-timebook-week-head small {
color: var(--sk-color-ink-soft);
}
/* I dag skal kunne pekes ut fra andre siden av rommet. */
.sk-timebook-week-head.is-today {
border-bottom: 2px solid var(--sk-color-primary);
}
.sk-timebook-week-head.is-today strong {
color: var(--sk-color-primary);
}
/* Dagen man kom fra i dagsvisningen, så uka viser hvor man står. */
.sk-timebook-week-head.is-selected {
background: color-mix(in srgb, var(--sk-color-primary) 8%, transparent);
}
.sk-timebook-week-closed {
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
color: var(--sk-color-ink-faint);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sk-timebook-week-column.is-today {
background: color-mix(in srgb, var(--sk-color-primary) 4%, transparent);
}
/* Blokkert tid sier «her er det opptatt». Den skal ikke konkurrere med kundens
time, som ligger oppå den — derfor stripet flate og dempet tekst framfor en
farget blokk med kant. */
.sk-timebook-week-block {
--sk-timebook-accent: var(--sk-color-ink-faint);
display: flex;
align-items: flex-start;
overflow: hidden;
padding: 0.2rem 0.35rem;
border-left-style: dashed;
background: repeating-linear-gradient(
135deg,
color-mix(in srgb, var(--sk-color-ink-faint) 14%, transparent),
color-mix(in srgb, var(--sk-color-ink-faint) 14%, transparent) 6px,
transparent 6px,
transparent 12px
);
color: var(--sk-color-ink-soft);
cursor: default;
}
.sk-timebook-week-block span {
overflow: hidden;
font-size: var(--sk-font-size-xs);
font-weight: var(--sk-font-weight-strong);
white-space: nowrap;
text-overflow: ellipsis;
}
/* Dag/uke-velgeren og «Bare mine» står i det samme hodet som kalender/liste.
Velgeren arver segmentformen fra `.sk-shift-view-tabs`; her sikres bare at
den ikke klemmes sammen når hodet blir trangt — den bestemmer hva alt det
andre i hodet handler om, og skal aldri være det første som krymper.
Knappen beholder sekundærformen fra designkontrakten; `is-active` sier bare
at filteret står på. */
.sk-timebook-mode-tabs {
flex-shrink: 0;
}
.sk-timebook-only-mine.is-active {
border-color: var(--sk-color-primary);
background: color-mix(in srgb, var(--sk-color-primary) 10%, transparent);
color: var(--sk-color-primary);
}
.sk-timebook-only-mine:disabled {
/* Låst PÅ i ukemodus, ikke slått av. Den skal se valgt ut, bare ikke
trykkbar — en grå, tom knapp ville lest som «av». */
opacity: 1;
border-color: var(--sk-color-border-soft);
background: color-mix(in srgb, var(--sk-color-primary) 6%, transparent);
color: var(--sk-color-ink-soft);
cursor: not-allowed;
}
@media (max-width: 60rem) {
.sk-timebook-week {
--sk-timebook-column-min: 7rem;
}
}
/* ── Dagsoppgjør: varsel og bekreftelse ─────────────────────────────────────
Statuslinja arver `.sk-terminal-bar-notice` fra designkontrakten (gul som
standard). Her legges bare den røde varianten på, og plass til tekst og
knapper på samme linje. Knappene er kontraktens egne varianter. */
.sk-terminal-bar-notice.is-danger {
background: var(--sk-color-danger-soft);
color: var(--sk-color-danger);
}
.sk-day-close-notice {
/* Varselteksten skal aldri presses opp i headeren av arbeidsflaten. */
flex: 0 0 auto;
min-width: 0;
flex-wrap: wrap;
}
.sk-day-close-notice-text {
display: flex;
min-width: 0;
flex-wrap: wrap;
overflow-wrap: anywhere;
align-items: center;
gap: var(--sk-space-2) var(--sk-space-3);
}
.sk-day-close-notice-text small {
font-weight: var(--sk-font-weight-medium);
}
.sk-day-close-notice-actions {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-2);
}
.sk-day-close-sheet {
display: flex;
flex-direction: column;
gap: var(--sk-space-4);
}
.sk-day-close-choice,
.sk-day-close-form {
display: flex;
flex-direction: column;
gap: var(--sk-space-3);
}
/* ── Oppgjør: «Dagens oppgjør», fliser og resultatet ─────────────────────────
Reviewen 2026-09-22 og Peters tilbakemelding samme dag: ett panelhode, ÉN
primærknapp, sekundære handlinger som fliser (samme grammatikk som
«Mer»-panelet: ikon | tittel + undertekst), og resultatet etter
avslutningen i sin EGEN seksjon med luft — ikke klemt inntil kortet. Knappene er kontraktens egne varianter;
flisene er knapper som ER en flis og får stilen fra containeren
(`:where(.sk-cashup-tiles) > button`). */
.sk-cashup-headline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sk-space-2) var(--sk-space-3);
}
.sk-cashup-day {
display: flex;
flex-direction: column;
gap: var(--sk-space-4);
margin-top: var(--sk-space-4);
}
/* Hovedknappen bærer fagbegrepet i undertekst; den er høyere enn en vanlig
knapp, men fortsatt kontraktens primærknapp. */
.sk-cashup-close-day {
width: 100%;
min-height: calc(var(--sk-terminal-control-h) * 1.4);
padding-block: var(--sk-space-3);
}
.sk-cashup-close-day > span {
display: grid;
gap: var(--sk-space-1);
text-align: center;
}
/* Undertekst i primærknappen: samme farge som knappeteksten (hvit, eller
deaktivert grå), aldri den dempede brødtekstfargen på blått. */
.sk-cashup-close-day small {
color: inherit;
font-weight: var(--sk-font-weight-medium);
opacity: 0.92;
}
.sk-cashup-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--sk-space-3);
}
:where(.sk-cashup-tiles) > button {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--sk-space-3);
min-height: 4.5rem;
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
:where(.sk-cashup-tiles) > button:hover:not(:disabled) {
background: var(--sk-color-surface-hover);
}
:where(.sk-cashup-tiles) > button:focus-visible {
outline: 3px solid var(--sk-color-primary);
outline-offset: 2px;
}
:where(.sk-cashup-tiles) > button:disabled {
border-color: var(--sk-color-disabled-border);
background: var(--sk-color-disabled-bg);
color: var(--sk-color-disabled-text);
cursor: not-allowed;
}
:where(.sk-cashup-tiles) > button > svg {
width: 1.5rem;
height: 1.5rem;
color: var(--sk-color-primary);
}
:where(.sk-cashup-tiles) > button > span {
min-width: 0;
display: grid;
gap: var(--sk-space-1);
}
:where(.sk-cashup-tiles) > button small {
color: var(--sk-color-ink-soft);
font-weight: var(--sk-font-weight-medium);
}
/* Én kort linje: «Dagsoppgjøret tas av leder.» / «Kassa må telles i kveld». */
.sk-cashup-leader-only,
.sk-cashup-must-count {
margin: 0;
}
/* «Dagen er gjort opp»: egen seksjon under kassekortet, med samme luft som
mellom andre seksjoner i panelet (designkontrakten § 3–4). */
.sk-cashup-result {
display: flex;
flex-direction: column;
gap: var(--sk-space-3);
margin-top: var(--sk-space-6);
}
.sk-cashup-result > h2 {
margin: 0;
}
.sk-cashup-sales-heading {
margin-top: var(--sk-space-6);
}
.sk-cashup-sales-heading p {
margin: var(--sk-space-1) 0 0;
}
/* Smal skjerm: flisene under hverandre, aldri en rad som renner ut. */
@media (max-width: 36rem) {
.sk-cashup-tiles {
grid-template-columns: 1fr;
}
}
/* «Meld feil» i terminalens topplinje (TerminalBugReportButton.tsx).
Arket gjenbruker .sk-terminal-sheet-layer/.sk-timebook-sheet; her står bare
typevelgeren, samtykkene, forhåndsvisningen og krasjkortet. */
.sk-terminal-bug-sheet {
display: flex;
flex-direction: column;
gap: var(--sk-space-4);
overflow-y: auto;
}
.sk-terminal-bug-lead {
margin: 0;
color: var(--sk-color-ink-soft);
}
.sk-terminal-bug-kinds {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sk-space-3);
}
.sk-terminal-bug-kind {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: var(--sk-space-3);
row-gap: var(--sk-space-1);
min-height: 5.5rem;
padding: var(--sk-space-4);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
text-align: left;
cursor: pointer;
}
.sk-terminal-bug-kind svg {
grid-row: span 2;
width: 1.75rem;
height: 1.75rem;
color: var(--sk-color-primary);
}
.sk-terminal-bug-kind small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-terminal-bug-kind.is-active {
border-color: var(--sk-color-primary);
background: var(--sk-color-primary-soft);
box-shadow: inset 0 0 0 1px var(--sk-color-primary);
}
.sk-terminal-bug-consent {
display: flex;
align-items: flex-start;
gap: var(--sk-space-3);
min-height: 3rem;
cursor: pointer;
}
.sk-terminal-bug-consent input {
flex: none;
width: 1.5rem;
height: 1.5rem;
margin-top: 0.1rem;
}
.sk-terminal-bug-consent span {
display: grid;
gap: var(--sk-space-1);
}
.sk-terminal-bug-consent small {
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
}
.sk-terminal-bug-preview {
display: flex;
align-items: center;
gap: var(--sk-space-3);
}
.sk-terminal-bug-preview img {
width: 10rem;
max-height: 7rem;
object-fit: cover;
object-position: top left;
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
}
.sk-terminal-bug-error {
margin: 0;
color: var(--sk-color-danger);
}
.sk-terminal-bug-actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--sk-space-3);
margin-top: auto;
}
.sk-terminal-bug-done {
display: grid;
justify-items: start;
gap: var(--sk-space-3);
}
.sk-terminal-bug-done > svg {
width: 2.5rem;
height: 2.5rem;
color: var(--sk-color-success);
}
.sk-terminal-bug-crash {
position: fixed;
right: var(--sk-space-5);
bottom: var(--sk-space-5);
z-index: 60;
display: grid;
gap: var(--sk-space-3);
width: min(26rem, calc(100vw - 2 * var(--sk-space-5)));
padding: var(--sk-space-5);
border: 1px solid var(--sk-color-border);
border-radius: var(--sk-radius-lg);
background: var(--sk-color-surface);
box-shadow: var(--sk-shadow-popover);
}
.sk-terminal-bug-crash p {
margin: 0;
color: var(--sk-color-ink-soft);
}
.sk-terminal-bug-crash textarea {
width: 100%;
}
@media (max-width: 640px) {
.sk-terminal-bug-kinds {
grid-template-columns: 1fr;
}
}
/* «Hjelp» i topplinjen og på låseskjermen. Tekstknapp (ikke bare ikon) slik at
inngangen er synlig, minst så høy som øvrige kontroller (touch ≥ 44 px). */
.sk-terminal-help-button {
display: inline-flex;
align-items: center;
gap: var(--sk-space-2);
flex: none;
min-height: var(--sk-terminal-control-h);
padding: 0 var(--sk-space-3);
border: 1px solid var(--sk-color-border-interactive);
border-radius: var(--sk-radius-md);
background: var(--sk-color-surface);
color: var(--sk-color-ink);
font: inherit;
font-weight: var(--sk-font-weight-strong);
cursor: pointer;
}
.sk-terminal-help-button:hover:not(:disabled) {
background: var(--sk-color-surface-hover);
}
.sk-terminal-help-button svg {
width: 1.1rem;
height: 1.1rem;
}
.sk-terminal-help-button.is-urgent {
border-color: var(--sk-color-danger);
background: var(--sk-color-danger-soft);
color: var(--sk-color-danger);
}
/* De to kritiske valgene skiller seg med farge og kant, aldri med farge alene:
teksten sier «Kritisk». */
.sk-terminal-help-choices {
grid-template-columns: minmax(0, 1fr);
}
.sk-terminal-bug-kind.is-critical {
border-color: var(--sk-color-danger);
background: var(--sk-color-danger-soft);
}
.sk-terminal-bug-kind.is-critical svg {
color: var(--sk-color-danger);
}
.sk-terminal-primary.is-critical {
background: var(--sk-color-danger);
border-color: var(--sk-color-danger);
}
.sk-terminal-help-critical {
display: grid;
gap: var(--sk-space-3);
}
.sk-terminal-help-critical-title {
margin: 0;
font-weight: var(--sk-font-weight-strong);
color: var(--sk-color-danger);
}
.sk-terminal-help-technical {
margin: 0;
padding: var(--sk-space-3);
border: 1px solid var(--sk-color-border-soft);
border-radius: var(--sk-radius-md);
color: var(--sk-color-ink-soft);
font-size: var(--sk-font-size-sm);
overflow-wrap: anywhere;
}
@media (min-width: 48rem) {
.sk-terminal-help-choices {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.sk-terminal-help-link {
border: 0;
background: none;
font: inherit;
cursor: pointer;
min-height: var(--sk-terminal-control-h);
}
/* Arket går helt ned, men den nederste fanelinja (Oversikt … Betal) ligger over
det på iPad stående. Uten fri plass under var «Send» skjult bak den, og en
kritisk melding kunne ikke sendes. 6.5 rem dekker fanelinja pluss sikker sone. */
.sk-terminal-sheet-layer > .sk-timebook-sheet.sk-terminal-bug-sheet,
.sk-terminal-workspace .sk-terminal-sheet-layer > .sk-timebook-sheet.sk-terminal-bug-sheet {
padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}
/* Knappene følger innholdet i stedet for å ligge i bunnen av et ark som er
høyere enn skjermen: «Send» skal være i øyehøyde, ikke bak fanelinja. */
.sk-terminal-bug-sheet .sk-terminal-bug-actions {
margin-top: var(--sk-space-4);
}
/* Terminalens ark (drawers): felles topplinje og felles luft.
Lastes sist i 09-terminal.css, slik at én regel her gjelder alle ark uten å
kjempe mot de eldre per-ark-reglene i 04-calendar.css og 06-workspace.css.
1. Topplinjen. Tilbakeknappen var absolutt plassert oppe til venstre, 2,6 rem
(32–39 px, under fingermålet) med eyebrow-teksten skjøvet 3,5 rem inn ved
siden av og tittelen en hel linje lenger ned. På iPad så pila ut som den
fløt over innholdet, og «Ny time» havnet langt nede. Nå er knappen og
overskriften én rad i