/* restogogo surface primitives: page base, top-level panels and card anatomy.
   Shell layout lives in shell.css; page skeleton in module-header.css.
   Surface meaning:
   - rs-frame = rare full-frame shell (kiosk/terminal exception)
   - rs-card  = top-level content panel/card inside an rs-page-board
   - rs-section-surface = inner grouping surface, owned by section-primitives.css
   Module CSS may add layout only; it must not create new panel chrome. */
.rs-page,
.rs-page * {
  box-sizing: border-box;
}

.rs-page {
  color: var(--rst-ui-text);
  font-family: var(--rst-ui-font);
  --rst-page-shell-gap: 12px;
  --rst-page-shell-top: 0;
  --rst-page-header-h: 128px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.rs-page :is(h1,h2,h3,h4,p,span,strong,small,label,button,input,select,textarea) {
  font-family: inherit;
}

/* Full workspace frame: use only for full-shell/kiosk contexts, not for normal nested module panels. */
.rs-frame {
  border: 1px solid var(--rst-ui-surface-panel-border);
  border-radius: var(--rst-ui-radius-xl);
  background: var(--rst-ui-surface-board);
  box-shadow: var(--rst-ui-shadow-frame);
  overflow: hidden;
}

/* Shared workspace body: neutral app canvas inside top-level content cards/boards. */
.rs-workspace-body {
  min-width: 0;
  min-height: 0;
  background: var(--rst-ui-surface-body);
}

/* Top-level content panel/card. Home cards, Team/Restaurant main cards and employee calendar boards use this. */
.rs-card {
  border: 1px solid var(--rst-ui-surface-panel-border);
  border-radius: var(--rst-ui-radius-lg);
  background: var(--rst-ui-surface-panel);
  box-shadow: none;
  overflow: hidden;
}

/* Shared card header, body and title primitives.
   Same flat header contract as rs-grid-toolbar, rs-entity-header and tab bars. */
.rs-card-head {
  min-height: 46px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--rst-ui-surface-divider);
  background: var(--rst-ui-surface-panel-head);
}

.rs-card-body {
  min-width: 0;
  min-height: 0;
  background: var(--rst-ui-surface-panel-body);
}

.rs-card-head-title {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

.rs-card-head :is(h2,h3) {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--rst-ui-panel-title);
  font-size: 15px;
  line-height: 1;
  font-weight: var(--rst-fw-bold);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-card-head small {
  flex: 0 0 auto;
  max-width: 44%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--rst-ui-muted);
  font-size: 10.5px;
  line-height: 1;
  font-weight: var(--rst-fw-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-card-head .rs-icon-badge {
  --rs-icon-badge-size: 28px;
  --rs-icon-badge-glyph: 16px;
  border-radius: var(--rst-ui-radius-md);
}

/* Top-level cards and boards share one header/body rhythm. */
.rs-card > .rs-card-head,
.rs-card > .rs-entity-header {
  background: var(--rst-ui-surface-panel-head);
}

.rs-card > :is(.rs-card-body,.rs-card-link,.rs-workbench-body) {
  background: var(--rst-ui-surface-panel-body);
}