:root {
  color-scheme: light;
  --background: #f3f5f8;
  --surface: #ffffff;
  --text: #202d40;
  --muted: #58677b;
  --border: #d3dce6;
  --accent: #235bc4;
  --accent-dark: #194492;
  --danger: #a12b2b;
  --focus: #ffbf47;
  --radius: 14px;
  --shadow: 0 4px 20px rgb(32 45 64 / 5%);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
}

.page-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 32px;
}

.panel {
  width: min(100%, 560px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 16px 32px rgba(23, 32, 42, 0.08);
}

.cashier-panel {
  width: min(100%, 1120px);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
}

.intro,
.success-note {
  margin: 12px 0 0;
  color: var(--muted);
}

.shift-section,
.sale-section,
.payment-section,
.cancellation-section,
.admin-section,
.shift-history-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.shift-section h2,
.sale-section h2,
.payment-section h2,
.cancellation-section h2,
.admin-section h2,
.shift-history-section h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.shift-report-section {
  margin-top: 24px;
}

.shift-report-section h3,
.sale-section h3,
.payment-section h3,
.cancellation-section h3,
.admin-section h3,
.shift-history-section h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.25;
}

.status-text {
  min-height: 24px;
  margin: 12px 0 0;
  font-weight: 700;
}

.stack {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.field {
  display: grid;
  gap: 8px;
}

label,
dt {
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text);
  background: #ffffff;
  font: inherit;
}

input:focus,
select:focus,
textarea:focus,
summary:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 2px;
}

button {
  min-height: 52px;
  border: 0;
  border-radius: 6px;
  padding: 12px 18px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.member-form-field { margin-bottom: 16px; }
#catalog-member-form { padding-top: 16px; }
#catalog-member-form .member-form-field > label { margin: 0; }
.member-form-field > .message:empty { display: none; }
.member-form-group { margin: 0 0 18px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
.member-form-group legend { padding: 0 8px; font-weight: 700; }
.member-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.member-form-wide { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .member-form-grid { grid-template-columns: 1fr; }
  .member-form-wide { grid-column: auto; }
}

/* Leave room for the 4px outline plus its 2px offset between admin controls. */
#cashier-admin-new,
#cashier-admin-send,
#security-email-send {
  margin-top: 16px;
}
button[aria-busy="true"] { cursor: wait; }

.primary-button {
  background: var(--accent);
  color: #ffffff;
}

.primary-button:hover {
  background: var(--accent-dark);
}

.secondary-button {
  margin-top: 28px;
  background: #26323d;
  color: #ffffff;
}

.secondary-button:hover {
  background: #17202a;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button-row .secondary-button {
  margin-top: 0;
}

.compact-form {
  margin-top: 28px;
}

.inline-button {
  margin-top: 12px;
}

.message {
  white-space: pre-line;
  min-height: 24px;
  margin: 0;
  color: var(--danger);
  font-weight: 700;
}

.sale-selection-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 18px;
}

.sale-selection-controls .compact-toggle {
  margin-top: 0;
  min-height: 46px;
}

.selection-pin {
  margin: 0;
  font-size: 0.92rem;
}

.sale-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.sale-grid.manual-selection-open {
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.25fr);
}

.sale-grid.manual-selection-both {
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.25fr) minmax(260px, 1fr);
}

.manual-selection-panel {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.payment-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.sale-column {
  min-width: 0;
}

.selection-list,
.article-list,
.cart-items {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.selection-list {
  max-height: 360px;
  overflow: auto;
}

.member-button,
.article-button,
.cart-button,
.download-link {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  text-align: left;
}

.download-link {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  border-radius: 6px;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none;
}

.member-button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}


#guest-cancellation-list .member-button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: none;
}

.article-category {
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.article-button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.quick-article-section,
.quick-member-section {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.quick-article-section h4,
.quick-member-section h4 {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.quick-article-list,
.quick-member-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.muted-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.quick-article-button,
.quick-member-button {
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  text-align: left;
}

.quick-member-button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}

.quick-article-button strong {
  color: var(--accent);
}

.checkbox-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
  color: var(--text);
  font-weight: 700;
}

.checkbox-row input {
  width: auto;
  margin: 0;
}

.cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.report-transaction-row {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.report-transaction-row strong {
  color: var(--text);
}

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

.cart-button {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  text-align: center;
}

.selected-member,
.cart-total {
  margin: 0 0 12px;
  color: var(--muted);
}

.cancellation-items {
  display: grid;
  gap: 8px;
  padding: 8px 0 12px 12px;
  border-left: 4px solid var(--accent);
}

.cancellation-items-heading {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

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

.cancellation-item-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.cart-total {
  margin-top: 16px;
  color: var(--text);
}

.identity-list {
  display: grid;
  gap: 16px;
  margin: 28px 0 0;
}

.shift-details {
  margin-top: 16px;
}

.identity-list div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.identity-list dd {
  margin: 0;
}

[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .sale-grid.manual-selection-open,
  .sale-grid.manual-selection-both {
    grid-template-columns: 1fr;
  }

  .sale-selection-controls {
    align-items: stretch;
  }

  .sale-selection-controls .button-row,
  .sale-selection-controls .compact-toggle {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .page-shell {
    align-items: start;
    padding: 20px;
  }

  .panel {
    padding: 24px;
  }

  h1 {
    font-size: 1.6rem;
  }

  .identity-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .sale-grid {
    grid-template-columns: 1fr;
  }

  .payment-grid {
    grid-template-columns: 1fr;
  }

  .cancellation-item-row {
    grid-template-columns: 1fr;
  }
}

.download-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.message-success {
  color: #176b4d;
  white-space: pre-line;
}

.balance-debt { color: var(--danger); }
.balance-credit { color: #176b4d; }

/* Workspace system: surfaces, spacing, navigation and touch-sized controls. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-page="kasse"] .cashier-shell { display: block; padding: 0 28px 32px; }
[data-page="kasse"] .cashier-panel { max-width: 1600px; width: 100%; margin: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
#legacy-content { display: none; }
.workspace-header { display: flex; align-items: center; gap: 24px; min-height: 104px; flex-wrap: wrap; padding: 20px 0; }
.brand { display: flex; gap: 12px; align-items: center; margin-right: auto; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: white; font-size: 1.6rem; font-weight: 800; }
.brand .eyebrow { margin: 0; color: var(--text); font-size: 1.2rem; text-transform: none; }
.brand-caption { color: var(--muted); font-size: .8rem; margin: 0; }
.workspace-header .identity-list { display: flex; margin: 0; gap: 28px; }
.workspace-header .identity-list div { display: block; padding: 0; border: 0; }
.workspace-header dt { color: var(--muted); font-size: .75rem; font-weight: 500; }
.workspace-header dd { font-weight: 650; overflow-wrap: anywhere; }
.workspace-header .identity-list > div { min-width: 0; }
[data-page="kasse"] :is(p, dd, h2, h3, .report-transaction-row, .cart-row) { overflow-wrap: anywhere; }
.role-badge { background: #e7edf6; color: #405570; padding: 6px 10px; border-radius: 8px; font-size: .8rem; }
[data-page="kasse"] .secondary-button { background: #e6ecf4; color: var(--text); margin-top: 0; }
[data-page="kasse"] .secondary-button:hover { background: #d9e3f1; }
.workspace-nav, .operation-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.workspace-nav { background: var(--surface); padding: 8px; border-radius: var(--radius); box-shadow: var(--shadow); }
.workspace-nav button { color: var(--muted); background: transparent; padding: 12px 22px; }
.workspace-nav button[aria-current="page"] { background: var(--accent); color: white; }
.workspace-nav #nav-admin { margin-left: auto; }
.operation-nav { padding: 0 0 24px; }
.operation-nav button { background: transparent; color: var(--muted); min-height: 48px; border: 1px solid transparent; padding: 10px 16px; }
.operation-nav button[aria-pressed="true"] { background: white; border-color: var(--border); color: var(--accent); box-shadow: var(--shadow); }
.shift-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px 4px; font-size: .85rem; }
.shift-strip > div { flex: 1; min-width: 180px; }
.shift-strip .eyebrow { font-size: .7rem; color: var(--muted); }
.shift-strip p { margin: 2px 0 0; }
#workspace-cash { font-weight: 650; }
.shift-strip button { font-size: .85rem; min-height: 48px; }
[data-view-panel] { min-width: 0; }
[data-view-panel] > h2 { margin: 0; font-size: 1.7rem; }
[data-view-panel] > .intro { margin: 8px 0 24px; }
[data-view-panel] > input { max-width: 640px; display: block; margin: 8px 0 24px; }
[data-page="kasse"] :is(.shift-section, .sale-section, .payment-section, .cancellation-section, .admin-section, .shift-history-section) { margin: 0; padding: 0; border: 0; }
[data-page="kasse"] :is(.shift-section, .shift-history-section) { background: var(--surface); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; box-shadow: var(--shadow); }
[data-page="kasse"] h2 { font-size: 1.7rem; line-height: 1.3; }
.section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading .eyebrow { font-size: .75rem; margin: 0 0 4px; }
.workflow-hint { color: var(--muted); font-size: .9rem; margin: 0; }
[data-page="kasse"] .status-text { font-weight: 500; color: var(--muted); }
#sale-state { margin-top: 4px; }
#scan-help { margin: 10px 0 4px; }
.message:empty { min-height: 0; }
.message:not(:empty) { padding: 12px 14px; margin: 12px 0; border-radius: 10px; background: #fff0ee; }
.message-success:not(:empty) { background: #e8f5ed; color: #176b4d; }
.sale-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
[data-page="kasse"] .sale-column, .surface-card { background: var(--surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.step-number { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 6px; background: #edf2fb; color: var(--accent); border-radius: 8px; font-size: .85rem; }
[data-page="kasse"] h3 { font-weight: 650; }
[data-page="kasse"] label { display: block; margin: 14px 0 6px; font-size: .9rem; }
[data-page="kasse"] input, [data-page="kasse"] select, [data-page="kasse"] textarea { border-radius: 10px; }
textarea { min-height: 100px; resize: vertical; }
.selection-list { max-height: 380px; scrollbar-gutter: stable; overscroll-behavior: contain; }
.member-button, .quick-member-button, .article-button, .quick-article-button, .directory-card { border: 1px solid #e1e7ef; border-radius: 11px; min-height: 64px; overflow-wrap: anywhere; }
.member-button, .quick-member-button { font-weight: 600; }
:is(.member-button, .quick-member-button, .directory-card)[aria-pressed="true"] { background: #edf3ff; border-color: var(--accent); box-shadow: inset 4px 0 var(--accent); }
.article-list, .quick-article-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 430px; overflow-y: auto; }
.article-category { grid-column: 1 / -1; margin: 10px 0 0; }
.article-button, .quick-article-button { display: flex; flex-direction: column; align-items: start; justify-content: space-between; min-height: 96px; padding: 14px; gap: 10px; }
.article-button strong, .quick-article-button strong { color: var(--accent); font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.quick-member-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-member-section, .quick-article-section { margin-top: 20px; }
.cart-column .selected-member { color: var(--text); font-size: 1.15rem; font-weight: 650; }
.sale-grid > .cart-column { position: sticky; top: 20px; border-top: 4px solid var(--accent); }
.empty-cart { padding: 24px 0; color: var(--muted); font-size: .95rem; }
.cart-row { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
.cart-actions { flex-wrap: wrap; }
.cart-button { min-height: 48px; min-width: 48px; border-radius: 8px; }
.cart-total { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 12px; font-size: 1.05rem; }
#cart-total { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
[data-page="kasse"] .primary-button { min-height: 56px; border-radius: 10px; padding: 14px 20px; }
.cart-column > .primary-button { width: 100%; margin-top: 16px; }
#sale-submit-button { font-size: 1.15rem; min-height: 64px; }
.directory-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.directory-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; max-height: 65vh; overflow-y: auto; }
.directory-card { display: flex; flex-direction: column; align-items: start; gap: 8px; padding: 20px; background: white; text-align: left; }
.directory-card { min-width: 0; }
.directory-card span { font-size: .9rem; color: var(--muted); font-weight: 400; }
.settings-group { background: white; border-radius: var(--radius); margin: 16px 0; box-shadow: var(--shadow); }
.settings-group summary { cursor: pointer; min-height: 64px; padding: 20px 24px; font-size: 1.05rem; font-weight: 650; }
.settings-group > .sale-column { box-shadow: none; max-width: 900px; }
.settings-group h3 { display: none; }
.admin-section > .payment-grid:empty { display: none; }
[data-page="kasse"] label:has(input[type="checkbox"]) { display: flex; gap: 12px; align-items: center; min-height: 48px; }
input[type="checkbox"] { flex-shrink: 0; width: 24px; height: 24px; min-height: 24px; accent-color: var(--accent); }
.cash-count-result { white-space: pre-line; }
#cash-opening, #cash-counting, #cash-movement-panel { max-width: 760px; margin: 24px 0; padding: 20px; border-radius: 12px; background: #f4f7fb; }
.shift-details { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.shift-details div { grid-template-columns: 1fr; gap: 4px; border: 0; padding: 12px; background: #f5f7fa; border-radius: 10px; }
.shift-details dt { font-size: .85rem; color: var(--muted); }
.shift-details dd { font-weight: 650; }
.download-link { flex: 1 1 160px; width: auto; justify-content: center; color: var(--accent); border-radius: 10px; }
[aria-invalid="true"] { border-color: var(--danger); background: #fff7f5; }
.auth-panel { border: 0; box-shadow: var(--shadow); padding: 40px; }
.auth-panel .primary-button { width: 100%; }
@media (hover: hover) {
  :is(.member-button, .article-button, .quick-member-button, .quick-article-button, button.directory-card):hover:not(:disabled) { border-color: var(--accent); background: #f3f7ff; }
}
@media (max-width: 1150px) {
  .sale-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .sale-grid > .cart-column { grid-column: 1 / -1; position: static; }
  .workspace-header { gap: 16px; }
  .workspace-header .identity-list { gap: 16px; }
  .cart-items { max-height: 340px; overflow: auto; }
}
@media (max-width: 760px) {
  [data-page="kasse"] .cashier-shell { padding: 0 12px 24px; }
  .workspace-header { gap: 12px; padding: 16px 4px; }
  .workspace-header .identity-list { order: 3; width: 100%; }
  .brand-caption, .role-badge { display: none; }
  .workspace-nav button { flex: 1 1 130px; padding: 10px; }
  .workspace-nav #nav-admin { margin-left: 0; }
  .operation-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-bottom: 16px; }
  .operation-nav button { font-size: .9rem; padding: 10px; }
  .sale-grid, .payment-grid, .directory-layout { grid-template-columns: minmax(0, 1fr); }
  .sale-grid > .cart-column { grid-column: auto; }
  [data-page="kasse"] .sale-column { padding: 18px; }
  [data-page="kasse"] h2 { font-size: 1.4rem; }
  .selection-list { max-height: 240px; }
  .article-list { max-height: 320px; }
  .directory-layout > .surface-card { grid-row: 1; }
  .shift-strip { gap: 10px; }
  .shift-strip > div { min-width: 0; flex-basis: 100%; }
  .shift-strip button { margin-left: auto; }
  .shift-details { grid-template-columns: minmax(0, 1fr); }
  .auth-panel { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
.message-info:not(:empty) { color: #244b73; background: #edf4fc; }
.message-warning:not(:empty) { color: #755000; background: #fff4d6; }
.member-number { display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.scanner-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.scanner-actions #scanner-focus { grid-column: 1 / -1; }
.scanner-actions button { min-width: 0; min-height: 44px; }
.scanner-actions button[aria-pressed="true"] { border-color: var(--accent); background: #edf4fc; color: var(--accent-dark); }
#scanner-status { overflow-wrap: anywhere; }
#scanner-input:focus { outline: 4px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 760px) {
  .workspace-header { min-height: 0; gap: 8px; padding: 8px 4px; }
  .workspace-header .identity-list { gap: 12px; }
  .workspace-nav { gap: 4px; padding: 4px; }
  .workspace-nav button { flex-basis: 105px; padding: 6px; min-height: 52px; font-size: .85rem; }
  .shift-strip { gap: 6px; padding: 8px 4px; }
  .shift-strip > div { flex: 1 1 140px; }
  .shift-strip button { padding: 8px; }
  .operation-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 8px; gap: 4px; }
  .operation-nav button { padding: 6px; overflow-wrap: anywhere; }
  .sale-section > .section-heading { gap: 4px; }
  #scan-help { margin: 4px 0; font-size: .8rem; }
}
#member-change-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
#member-change-dialog::backdrop { background: rgb(20 30 45 / 55%); }
.member-change-actions { display: grid; gap: 12px; }
.member-change-actions button { min-width: 0; min-height: 48px; overflow-wrap: anywhere; }
#cash-close-confirmation { padding: 16px; margin-block: 16px; border: 2px solid var(--accent); border-radius: var(--radius); }

.guest-stock-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 24px; }
#guest-stock form { display: grid; gap: 16px; }
#guest-stock .guest-stock-field { display: grid; gap: 6px; min-width: 0; }
#guest-stock .guest-stock-field > label, #guest-stock .message { margin: 0; }
#guest-stock .guest-stock-reason { margin-block: 24px 16px; }
#guest-stock :is(input, select, button) { min-width: 0; max-width: 100%; }
#guest-stock :is(button, p, li) { overflow-wrap: anywhere; }
#guest-stock .button-row { gap: 16px; }
#guest-edit-message:not(:empty) { margin-top: 16px; }
#guest-stock-hint:not(:empty) { margin-bottom: 16px; }
@media (max-width: 760px) { .guest-stock-grid { grid-template-columns: minmax(0, 1fr); } }

/* Scoped admin spacing keeps the existing 4px focus ring and 2px offset clear. */
#admin-reply-to-input + .button-row,
#admin-member-save,
#catalog-member-new { margin-top: 16px; }
#cashier-admin-form { padding-top: 16px; }
#cashier-admin-form > input,
#admin-member-email { margin-bottom: 16px; }
#admin-member-suggestions { margin: 16px 0; padding: 0; list-style: none; max-height: 18rem; overflow-y: auto; }
#admin-member-suggestions [role="option"] { padding: 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
#admin-member-suggestions [aria-selected="true"] { background: var(--accent); color: white; }
#admin-member-selected { margin-block: 16px; }


.receivable-operation {
  margin-top: 24px;
}

.receivable-layout,
.receivables-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 20px;
  margin-top: 20px;
}

.receivable-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.receivable-fields label {
  display: grid;
  gap: 6px;
}

.receivable-fields .wide-field {
  grid-column: 1 / -1;
}

.receivable-form,
.receivables-admin-card,
#receivable-detail {
  padding: 18px;
}

.receivables-admin-card {
  margin: 20px 0;
}

.receivables-admin-card .compact-toggle {
  margin-top: 0;
}

.receivable-case-button {
  display: block;
  line-height: 1.4;
}

#receivable-history {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

#receivable-detail-summary p,
#receivable-history p {
  margin: 7px 0;
}

@media (max-width: 900px) {
  .receivable-layout,
  .receivables-admin-layout,
  .receivable-fields {
    grid-template-columns: 1fr;
  }

  .receivable-fields .wide-field {
    grid-column: auto;
  }
}


/* Sale workspace: keep the cart visible beside optional manual lookup on tablet/desktop. */
.sale-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
  gap: 24px;
  align-items: start;
  margin-top: 18px;
}
.sale-workspace .sale-selection-controls { margin-top: 0; }
.sale-workspace .sale-grid { margin-top: 14px; }
.sale-workspace .sale-grid,
.sale-workspace .sale-grid.manual-selection-open,
.sale-workspace .sale-grid.manual-selection-both {
  grid-template-columns: minmax(0, 1fr);
}
.sale-workspace .sale-grid > .cart-column { display: none; }
.sale-workspace > .cart-column {
  position: sticky;
  top: 20px;
  border-top: 4px solid var(--accent);
}
@media (max-width: 760px) {
  .sale-workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sale-workspace > .cart-column { position: static; }
}


/* Primary sale workspace: scanner and cart aligned in the first viewport. */
.sale-top-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
  gap: 24px;
  align-items: start;
}
.sale-scan-column { min-width: 0; }
.sale-top-workspace .scanner-bar,
.sale-top-workspace > .cart-column {
  border-top: 4px solid var(--accent);
}
.sale-top-workspace .scanner-bar { margin-top: 0; }
.sale-top-workspace > .cart-column {
  position: sticky;
  top: 20px;
}
@media (max-width: 900px) {
  .sale-top-workspace { grid-template-columns: minmax(0, 1fr); }
  .sale-top-workspace > .cart-column { position: static; }
}

.operation-member-scan {
  padding: 12px;
  margin-bottom: 14px;
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.operation-member-scan input { width: 100%; }
.compact-message:empty { display: none; }

.payment-grid > .sale-column { border-top: 4px solid var(--accent); }
.operation-member-scan { padding: 0; margin-bottom: 14px; border-top: 0; border-radius: 0; background: transparent; }
.operation-search-toggle { width: 100%; margin-top: 10px; }
.operation-member-search-panel { margin-top: 12px; }
.operation-member-search-panel[hidden] { display: none; }

.payment-grid { align-items: start; }
.payment-grid > .sale-column { min-height: 0; }
.payment-grid > .cart-column { padding-top: 22px; }
.payment-grid .inline-button { margin-top: 12px; }

.cancellation-mode-switch{display:flex;gap:10px;margin:12px 0 16px}.cancellation-mode-switch .secondary-button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}#cancellation-guest-mode-panel .receivable-layout>*{border-top:4px solid var(--accent)}@media(max-width:720px){.cancellation-mode-switch{flex-direction:column}}

#guest-cancellation-reason { margin-bottom: 10px; }

.admin-category-nav { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
.admin-category-nav button[aria-pressed="true"] { border-color:var(--accent, #2563eb); box-shadow:0 0 0 1px var(--accent, #2563eb) inset; }
.admin-category-panel { margin-top:14px; }
.admin-category-panel > h2 { margin-bottom:14px; }
.admin-category-panel > .settings-group,
.admin-category-panel > .surface-card { margin-bottom:14px; }
#catalog-member-find-list:empty { display:none; }
#catalog-member-find-list { margin:8px 0 14px; }

/* Platform administration: balanced rows and reusable management sections. */
#dashboard-organizations { display:grid; gap:10px; margin:14px 0 18px; }
.organization-dashboard-row { display:grid; grid-template-columns:minmax(220px,1fr) auto auto; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.organization-dashboard-row > :is(a,button) { margin:0; white-space:nowrap; }
#first-admin-correction-form + #send-first-admin-verification { margin-top:14px; }
.platform-management-card { margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.platform-management-card > h3 { margin-top:0; }
@media (max-width:760px) { .organization-dashboard-row { grid-template-columns:minmax(0,1fr); } .organization-dashboard-row > :is(a,button) { width:100%; } }

/* Guest checkout: make the cash decision unmistakable at the counter. */
.guest-settlement-totals {
  margin: 18px 0;
  padding: 16px 18px;
  border: 2px solid currentColor;
  border-radius: 10px;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.35;
}

#guest-settlement:not([hidden]) {
  grid-column: 2;
}

#guest-settlement:not([hidden]) #guest-settlement-context {
  font-size: 1.15rem;
  font-weight: 700;
}

@media (max-width: 760px) {
  #guest-settlement:not([hidden]) { grid-column: 1; }
}


/* CK-UI-001: keep manual search controls next to the sale workspace. */
.sale-section .sale-selection-controls {
  justify-content: flex-start;
  margin-top: 8px;
  margin-bottom: 8px;
}
.sale-section .sale-selection-controls .button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sale-section .sale-selection-controls .selection-pin { margin-left: 4px; }
.sale-section .sale-grid.manual-selection-open { grid-template-columns: minmax(0, 1fr); }
.cash-register-notice {
  margin: 1.5rem 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 2px solid #946200;
  border-radius: 1rem;
  background: #fff5d6;
  color: #352600;
}
.cash-register-notice h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cash-register-notice p { max-width: 65ch; font-size: 1.125rem; line-height: 1.6; }

/* Shared form rhythm. Keep space for the existing 4px focus ring + 2px offset. */
.field { min-width: 0; gap: var(--space-2); }
.field > label,
[data-page="kasse"] .field > label { margin: 0; }
.field > :is(.message, .muted-hint) { margin: 0; }
.member-form-grid { gap: var(--space-4); margin-block: var(--space-4); }
.member-form-grid > .member-form-field { margin: 0; }
.member-form-group { margin-bottom: var(--space-5); padding: var(--space-4); min-width: 0; }
.stack, .login-form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
:is(.stack, .login-form) > * { margin-block: 0; min-width: 0; }
:is(.stack, .login-form) > :is(.message, .status-text):empty { display: none; }
:is(input, select, textarea, .field, .muted-hint, .status-text, .message) + :is(button, .button-row, .download-links) {
  margin-top: var(--space-4);
}
:is(.stack, .login-form) > :is(button, .button-row, .message, .status-text) { margin-block: 0; }
.button-row, .download-links { gap: var(--space-4); align-items: center; }
.button-row > :is(button, a) { margin-block: 0; max-width: 100%; }
.link-button, .button-row > a.primary-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: var(--space-3) 18px; border-radius: 6px; text-decoration: none;
}
:is(button, .link-button, .download-link) { overflow-wrap: anywhere; }
:is(input, select, textarea, .sale-column, .surface-card, .payment-grid > *, .directory-layout > *) { min-width: 0; }
.muted-hint { margin-block: var(--space-2) var(--space-4); overflow-wrap: anywhere; }
.message:not(:empty) { margin-block: var(--space-4); }
.message:empty { margin: 0; padding: 0; min-height: 0; }
.status-text:empty { margin: 0; min-height: 0; }
:is(h1, h2, h3, legend, summary, .message, .status-text) { overflow-wrap: anywhere; }
.field > .message:not(:empty) { margin: 0; }
:is(.stack, .login-form) > .message:not(:empty) { margin-block: 0; }
.surface-card > :first-child { margin-top: 0; }
.surface-card > :last-child { margin-bottom: 0; }
.settings-group { margin-block: var(--space-4); }
.settings-group > .surface-card { box-shadow: none; }
.section-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); justify-content: space-between; }
.section-header :is(h2, .status-text) { margin: 0; }
.section-header .status-text:not(:empty) { margin-top: var(--space-2); }
[data-page="platform-admin"] .panel { min-width: 0; }
[data-page="platform-admin"] #admin-section > section { margin-top: var(--space-5); }
.platform-management-card { margin-top: var(--space-5); padding-top: var(--space-5); }
.organization-dashboard-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4); }
.organization-dashboard-row > span { min-width: 0; overflow-wrap: anywhere; }
.organization-dashboard-row > :is(a, button) { white-space: normal; }
.selection-list, .directory-list { padding: var(--space-2); }
dialog { width: min(560px, calc(100% - var(--space-6))); max-height: calc(100% - var(--space-6)); overflow-y: auto; padding: var(--space-5); }
dialog .button-row { margin-top: var(--space-5); }
@media (max-width: 760px) {
  .organization-dashboard-row { grid-template-columns: minmax(0, 1fr); }
  :is(.button-row, .download-links) > :is(button, a) { flex: 1 1 160px; }
}