:host {
  display: flex;
  row-gap: 24px;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.level-path {
  color: var(--color--title-primary, #2B3A54);
  font-weight: var(--text-weight--medium, 400);
  padding-right: 3px;
}

.grid-container {
  min-height: 100px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-decoration: none;
  border-radius: var(--border--radius-medium);
  background-color: var(--color--gray-70, #FFFFFF);
  border: 1px solid var(--color--petroleum-100, #C8CCD3);
}

.detail-header {
  padding-bottom: 0;
}

snk-data-unit {
  flex: 1;
  gap: var(--space--12, 12px);
  display: flex;
  flex-direction: column;
}

snk-grid {
  height: 100%;
  --snk-grid-margin: 0px;
  --snk-grid-box-shadow: none;
}

.form-and-detail-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: auto;
  padding: var(--space--12, 12px);
}

.ez-tabselector-internal {
  margin: var(--space--8, 8px) 0;
}

.selected-record-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space--8, 8px) var(--space--12, 12px);
  padding: var(--space--12, 12px) var(--space--16, 16px);
  margin-bottom: var(--space--12, 12px);
  background: var(--color--gray-80, #F9F9F9);
  border-radius: var(--border--radius-12, 12px);
  font-family: var(--font--pattern);
  border: 1px solid var(--color--petroleum-100, #C8CCD3);
  border-left: 4px solid var(--color--ocean-green-500, #00B07E);
}

.selected-record-header--message {
  border-left-color: var(--color--primary, #007EFF);
}

.selected-record-header__message {
  font-size: var(--font-size--default, 14px);
  font-weight: var(--font-weight--medium, 500);
  color: var(--color--title-primary, #2B3A54);
}

.selected-record-header__chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space--4, 4px);
  min-width: 0;
}

.selected-record-header__label {
  font-size: var(--font-size--xs, 11px);
  font-weight: var(--font-weight--medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color--text-secondary, #6E7A8A);
}

.selected-record-header__value {
  font-size: var(--font-size--md, 15px);
  font-weight: var(--font-weight--semibold, 600);
  color: var(--color--ocean-green-1000, #00281D);
  line-height: 1.2;
  word-break: break-word;
}

.selected-record-header__separator {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  background: var(--color--petroleum-100, #C8CCD3);
  margin: 0 var(--space--4, 4px);
}