/* Calm overview panels: shared across staff, guests and managed/exported websites. */
.calm-panel {
  --panel-surface: var(--surface, #fff);
  --panel-ink: var(--ink, #202020);
  --panel-muted: var(--muted, #626262);
  --panel-line: var(--line, #dbe7f4);
  --panel-accent: var(--primary, #fd4d00);
  color: var(--panel-ink);
  background: var(--panel-surface);
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  box-sizing: border-box;
}
dialog.calm-panel,
dialog.calm-panel.record-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(600px, calc(100vw - 48px));
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 16px 0 0 16px;
  overflow: hidden;
}
dialog.calm-panel[open] {
  display: flex;
  flex-direction: column;
  animation: calm-panel-enter 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
dialog.calm-panel.panel-wide {
  width: min(780px, calc(100vw - 48px));
}
dialog.calm-panel::backdrop {
  background: rgb(0 0 0 / 40%);
  backdrop-filter: none;
}
html:has(dialog.calm-panel[open]:not(.panel-is-docked)),
body:has(dialog.calm-panel[open]:not(.panel-is-docked)) {
  overflow: hidden;
}
.calm-panel .panel-header {
  display: block;
  flex: 0 0 auto;
  padding: 24px 28px 20px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--panel-line);
  background: var(--panel-surface);
}
.calm-panel .panel-header.panel-title,
.calm-panel .panel-header.operations-editor-heading,
.calm-panel .panel-header.inbox-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.calm-panel .panel-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}
.calm-panel .panel-header h2 {
  margin: 0;
  color: var(--panel-ink);
  font:
    700 21px/1.35 Manrope,
    'DM Sans',
    sans-serif;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  flex: 1;
}
.calm-panel .panel-context {
  font-size: 13px;
  color: var(--panel-muted);
  margin: 6px 44px 0 0;
}
.calm-panel .panel-description {
  margin: 8px 44px 0 0;
  font-size: 14px;
  color: var(--panel-muted);
}
.calm-panel .panel-header .icon-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 0;
  color: var(--panel-muted);
  background: transparent;
  padding: 8px;
}
.calm-panel .panel-header .icon-button:hover {
  color: var(--panel-ink);
  background: var(--raised);
}
.calm-panel .panel-header .icon-button .icon {
  width: 20px;
  height: 20px;
}
.calm-panel .panel-body,
.calm-panel .panel-form-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-line) transparent;
}
.calm-panel .panel-body.panel-form-container {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.calm-panel .panel-form-container > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.calm-panel .panel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex: 0 0 auto;
  gap: 10px;
  padding: 18px 28px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--panel-line);
  background: var(--panel-surface);
}
.calm-panel .panel-footer > .form-error,
.calm-panel .panel-footer > p {
  flex-basis: 100%;
}
.calm-panel .panel-footer .button {
  width: auto;
  margin: 0;
  flex: 0 1 auto;
}
.calm-panel .button {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  text-align: center;
}
.calm-panel .button:not(.primary):not(.danger) {
  color: var(--panel-ink);
  background: transparent;
  border-color: transparent;
}
.calm-panel .button:not(.primary):not(.danger):hover {
  background: var(--raised);
}
.calm-panel .button.primary {
  background: var(--panel-accent);
  border-color: var(--panel-accent);
  color: var(--on-primary, #031234);
}
.calm-panel .button.danger {
  color: var(--red, #b92835);
  background: var(--red-soft, #ffecee);
  border-color: transparent;
}
.calm-panel .button .icon {
  width: 18px;
  height: 18px;
}
.calm-panel .button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.calm-panel :is(button, a, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--panel-accent);
  outline-offset: 3px;
}
.calm-panel .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
.calm-panel .field {
  margin: 0;
  min-width: 0;
  font-size: 14px;
}
.calm-panel .field > span,
.calm-panel legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--panel-ink);
}
.calm-panel .field small,
.calm-panel .muted {
  font-size: 13px;
  color: var(--panel-muted);
  line-height: 1.55;
}
.calm-panel
  .field
  input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='color']),
.calm-panel select,
.calm-panel textarea {
  font: inherit;
  font-size: 15px;
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: var(--panel-surface);
  color: var(--panel-ink);
}
.calm-panel textarea {
  resize: vertical;
}
.calm-panel fieldset {
  margin: 24px 0;
  border: 0;
  padding: 0;
  min-width: 0;
}
.calm-panel fieldset:first-child {
  margin-top: 0;
}
.calm-panel legend {
  margin-bottom: 12px;
}
.calm-panel .repeat-field {
  padding-top: 16px;
  border-top: 1px solid var(--panel-line);
}
.calm-panel .notice {
  margin: 18px 0;
  padding: 12px 0;
  background: transparent;
  border: 0;
  color: var(--panel-muted);
  font-size: 14px;
}
.calm-panel .form-error:not(:empty),
.calm-panel [role='alert'] {
  color: var(--red, #b92835);
  font-size: 14px;
}
.calm-panel .info-grid,
.calm-panel .info-grid-nested {
  display: block;
  margin: 0;
}
.calm-panel .info-card {
  display: grid;
  grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 20px;
  padding: 16px 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--panel-line);
  background: transparent;
}
.calm-panel .info-card dt {
  font-size: 14px;
  color: var(--panel-muted);
  line-height: 1.5;
}
.calm-panel .info-card dd {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
.calm-panel .info-card .copy-value {
  opacity: 1;
}
.calm-panel .info-complex {
  margin-top: 16px;
}
.calm-panel :is(.info-disclosure, .panel-advanced, .operation-advanced) {
  padding: 14px 0;
  margin: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--panel-line);
  background: transparent;
  border-radius: 0;
}
.calm-panel :is(.info-disclosure, .panel-advanced, .operation-advanced) > summary {
  color: var(--panel-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}
.calm-panel .info-expanded {
  padding: 16px 0 0;
}
.calm-panel :is(pre, .json-view) {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.calm-panel .panel-action-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 18px 0 0;
}
.calm-panel .panel-action-list > .button {
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}
.calm-panel .panel-action-list > .primary {
  justify-content: center;
  text-align: center;
  margin-bottom: 8px;
}
.calm-panel .panel-action-list h3 {
  margin: 0 0 8px;
}
.calm-panel .panel-tools .panel-action-list {
  margin-top: 8px;
}
.calm-panel .badge,
.calm-panel .operations-tag {
  font-size: 12px;
  padding: 5px 8px;
}
.calm-panel h3 {
  font-size: 16px;
  font-weight: 650;
  margin: 26px 0 12px;
}
.calm-panel h3:first-child {
  margin-top: 0;
}
/* Embedded detail/edit panels remain nonmodal; the containing page stays usable. */
.operations-layout.with-inspector {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
}
.orders-layout {
  grid-template-columns: minmax(0, 1fr) minmax(440px, 580px);
}
.operations-inspector.inspector.calm-panel {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 16px;
  padding: 0;
  width: auto;
  max-height: calc(100dvh - 110px);
  overflow: hidden;
  border: 1px solid var(--panel-line);
  border-radius: 12px;
}
.calm-panel .order-panel-metadata,
.calm-panel .order-panel-summary {
  font-size: 14px;
}
.calm-panel .order-panel-metadata > div,
.calm-panel .order-panel-summary > div {
  padding-block: 9px;
}
.calm-panel .order-item-main,
.calm-panel .order-item-addon {
  font-size: 14px;
}
.calm-panel .order-item-main small,
.calm-panel .order-item-addon small,
.calm-panel .order-item-notes {
  font-size: 13px;
}
.calm-panel .order-panel-total {
  font-size: 21px;
}
.calm-panel .order-panel-status {
  gap: 8px;
  margin-bottom: 18px;
}
.calm-panel .order-panel-actions {
  grid-template-columns: 1fr;
}
.calm-panel .order-panel-actions .button {
  font-size: 14px;
}
.calm-panel .image-upload-field {
  border: 0;
  padding: 0;
}
.calm-panel .operations-editor-tabs {
  flex: 0 0 auto;
  margin: 0 0 22px;
}
.calm-panel .switch-field {
  box-shadow: none;
  border: 0;
  padding: 12px 0;
  background: transparent;
}
.calm-panel .switch-field > span {
  font-size: 14px;
}
.calm-panel .choice-grid {
  max-height: none;
  font-size: 14px;
}
/* Custom nonmodal arrivals and service requests retain acknowledge/minimize behavior. */
.order-inbox-host {
  width: min(560px, calc(100vw - 24px));
}
.order-inbox-tray.calm-panel {
  max-height: calc(100dvh - 100px);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgb(3 18 52 / 16%);
}
.calm-panel .inbox-items strong,
.calm-panel .inbox-items small,
.calm-panel .inbox-totals,
.calm-panel .inbox-contact span,
.calm-panel .inbox-contact p {
  font-size: 14px;
}
.calm-panel .inbox-items li {
  border-bottom: 1px solid var(--panel-line);
  padding: 16px 0;
}
.calm-panel .inbox-header p,
.calm-panel .inbox-status {
  font-size: 13px;
}
.calm-panel .inbox-actions .button {
  font-size: 14px;
}
.service-request-tray.calm-panel {
  padding: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 100px);
}
.service-request-tray.calm-panel .panel-header {
  padding: 18px 22px;
}
.service-request-tray.calm-panel .panel-body {
  padding: 18px 22px;
}
.service-request-tray.calm-panel .service-request-intro {
  font-size: 14px;
  margin-top: 0;
}
.service-request-tray.calm-panel .service-request-context strong {
  font-size: 20px;
}
.service-request-tray.calm-panel .service-request-context small {
  font-size: 12px;
}
.calm-popover {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.calm-popover :is(p, button, a, input) {
  font-size: 14px;
}
@media (min-width: 1450px) {
  body:has(.service-request-tray) .order-inbox-host {
    right: 456px;
  }
}
@media (max-width: 1449px) {
  body:has(.service-request-tray) .order-inbox-host {
    right: 18px;
    bottom: 88px;
  }
}
@media (max-width: 1250px) {
  .operations-layout.with-inspector,
  .orders-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .operations-inspector.inspector.calm-panel {
    position: static;
    max-height: min(900px, calc(100dvh - 100px));
  }
}
@media (max-width: 640px) {
  dialog.calm-panel,
  dialog.calm-panel.record-drawer,
  dialog.calm-panel.panel-wide {
    width: 100vw;
    border-radius: 0;
  }
  .calm-panel .panel-header {
    padding: 20px;
  }
  .calm-panel .panel-body,
  .calm-panel .panel-form-scroll {
    padding: 20px;
  }
  .calm-panel .panel-footer {
    padding: 16px 20px max(16px, env(safe-area-inset-bottom));
  }
  .calm-panel .panel-body.panel-form-container {
    padding: 0;
  }
  .calm-panel .info-card {
    gap: 12px;
    grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.2fr);
  }
  .operations-inspector.inspector.calm-panel {
    max-height: calc(100dvh - 90px);
  }
  .calm-panel .panel-header h2 {
    font-size: 20px;
  }
}
@keyframes calm-panel-enter {
  from {
    transform: translateX(16px);
  }
  to {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog.calm-panel[open] {
    animation: none;
  }
}
@media print {
  .calm-panel .panel-header button,
  .calm-panel .panel-footer {
    display: none;
  }
  dialog.calm-panel {
    position: static;
    width: auto;
    height: auto;
    max-height: none;
  }
  .calm-panel .panel-body {
    overflow: visible;
  }
}

.calm-panel .operation-variant-editor .button.primary,
.calm-panel .station-display-settings .button.primary {
  background: transparent;
  border-color: var(--panel-line);
  color: var(--panel-ink);
}

.calm-panel .panel-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 0 0 20px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--panel-line);
}
.calm-panel .panel-summary .info-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
}
.calm-panel .panel-summary .info-card dt {
  font-size: 13px;
}

.calm-panel .repeat-row {
  padding: 18px 0;
  border: 0;
  border-top: 1px solid var(--panel-line);
  background: transparent;
  border-radius: 0;
}
.calm-panel .service-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calm-panel .service-actions > .button {
  justify-content: flex-start;
  width: 100%;
}
.calm-panel .stats {
  gap: 22px;
  margin: 0 0 24px;
}
.calm-panel .stat {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
.calm-panel .stat strong {
  font-size: 21px;
}
.calm-panel .stat p {
  font-size: 13px;
}
.calm-panel .payment-success {
  text-align: left;
  padding: 0;
  background: transparent;
  border: 0;
}
.calm-panel .payment-success > .icon {
  width: 36px;
  height: 36px;
}
.calm-panel table {
  font-size: 14px;
}
@media (max-width: 640px) {
  .calm-panel
    .field
    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='color']),
  .calm-panel select,
  .calm-panel textarea {
    font-size: 16px;
  }
}
.service-request-tray.calm-panel .panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.service-request-tray.calm-panel .panel-header > div {
  flex: 1;
  min-width: 0;
}
.calm-panel .inbox-waiting {
  font-size: 13px;
}
.calm-panel .inbox-quantity,
.calm-panel .inbox-items b,
.calm-panel .service-request-link {
  font-size: 14px;
}

.calm-panel [hidden] {
  display: none !important;
}

/* Information-only utility popups stay compact and have no artificial actions. */
#toast {
  background: var(--surface, #fff);
  color: var(--ink, #202020);
  border: 1px solid var(--line, #dbe7f4);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.5;
}
#toast.error {
  color: var(--red, #b92835);
  background: var(--surface, #fff);
}

/* Pending requests are a header control until explicitly expanded. */
.service-request-tray.calm-panel.is-collapsed {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 42px;
  min-width: 42px;
  height: 42px;
  max-height: 42px;
  margin: 0;
  border: 0;
  border-radius: 7px;
  box-shadow: none;
  background: transparent;
}
.service-request-tray.is-collapsed .panel-header {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
}
.service-request-tray.is-collapsed .panel-header > div {
  display: none;
}
.service-request-tray.is-collapsed .panel-header > .count {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  pointer-events: none;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
}
.service-request-tray.is-collapsed .panel-header .icon-button {
  width: 42px;
  height: 42px;
  color: var(--ink);
}
.service-request-tray.is-collapsed .panel-body {
  display: none;
}
body:has(.service-request-tray.is-collapsed) .order-inbox-host {
  right: 18px;
  bottom: 18px;
}
.calm-panel .panel-form-scroll > .field,
.calm-panel .panel-body > form > .field {
  margin-bottom: 22px;
}
.calm-panel .totals,
.calm-panel .totals dt,
.calm-panel .totals dd {
  font-size: 14px;
}
.calm-panel .totals dt {
  text-transform: capitalize;
}
.calm-panel .totals > div:last-child dt,
.calm-panel .totals > div:last-child dd {
  font-size: 18px;
  font-weight: 700;
}

.calm-panel > .inspector-empty {
  padding: 28px;
}
.calm-panel > p[role='status'],
.calm-panel > .order-panel-error {
  padding: 24px 28px;
  margin: 0;
  min-height: 0;
  overflow: auto;
}

/* Record selection opens above the workspace rather than consuming table width. */
.orders-layout {
  grid-template-columns: minmax(0, 1fr);
}
dialog.operations-inspector.inspector.calm-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(600px, calc(100vw - 48px));
  height: 100dvh;
  max-height: 100dvh;
  max-width: 100vw;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}
dialog#inspector:not([open]) {
  display: none !important;
}
dialog#inspector[open] {
  display: flex;
  flex-direction: column;
}
dialog#inspector .panel-header {
  flex: none;
}
dialog#inspector .panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 640px) {
  dialog.operations-inspector.inspector.calm-panel {
    width: 100vw;
  }
}