:host {
  display: block;
}

// Print mode: an entity-link chip is meaningless once printed (nothing to click) — render it
// as plain text instead of a bordered button, and drop the "open in new" affordance icon.
@media print {
  .entity-link-chip {
    border: none;
    padding: 0;
    background: none;
    color: var(--text-primary);
  }
  .entity-link-icon {
    display: none;
  }
  .field-action-btn {
    display: none;
  }
}

// ======================================
// FIELD STACK
// ======================================

.field-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stack-item {
  width: 100%;
}

// ======================================
// FIELD CONTAINER
// ======================================

.field-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  min-width: 0;
}

// ======================================
// LABEL
// ======================================

.field-label {
  width: fit-content;
  text-align: left;
  font-size: calc(var(--font-size-xs) *1px);
  font-weight: var(--font-weight-regular);
  line-height: calc(var(--font-lineHeight-xs) * 1px);
  letter-spacing: calc(var(--font-letterSpacing-lg) * 1px);
  color: var(--text-secondary);
}

// ======================================
// VALUE
// ======================================

.field-value {
  width: fit-content;
  text-align: left;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: calc(var(--font-size-sm) *1px);
  font-weight: var(--font-weight-semiBold);
  line-height: calc(var(--font-lineHeight-sm) * 1px);
  letter-spacing: calc(var(--font-letterSpacing-md) * 1px);
  color: var(--text-primary);
  word-break: break-word;
}

// ======================================
// BIG-VALUE
// ======================================

.field-big-value {
  width: fit-content;
  text-align: left;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: calc(var(--font-size-key) * 1px);
  font-weight: var(--font-weight-semiBold);
  line-height: calc(var(--font-lineHeight-key) * 1px);
  letter-spacing: calc(var(--font-letterSpacing-sm) * 1px);
  word-break: break-word;
  color: var(--text-primary);
}


// ======================================
// IMAGE / AVATAR
// ======================================

.field-image {
  max-width: 160px;
  max-height: 160px;
  border-radius: 4px;
  object-fit: cover;
}

.field-image-placeholder {
  color: var(--text-secondary);
}

.field-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-secondary, #e5e7eb);
  flex-shrink: 0;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-fallback-icon {
  color: var(--text-secondary);
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.avatar-fallback.avatar-initials {
  font-size: calc(var(--font-size-xs) * 1px);
  font-weight: var(--font-weight-semiBold);
  color: var(--text-secondary);
}

.field-avatar-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.avatar-text-label {
  font-size: calc(var(--font-size-sm) *1px);
  font-weight: var(--font-weight-semiBold);
  color: var(--text-primary);
}

// ======================================
// FIELD ACTIONS
// ======================================

.field-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.field-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;

  &:hover {
    background: var(--surface-secondary, #f3f4f6);
    color: var(--text-primary);
  }

  mat-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }
}

// ======================================
// ENTITY-LINK
// ======================================

.entity-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 4px;
  border-radius: 999px;
  border: 1px solid var(--border-secondary, #e5e7eb);
  background: var(--surface-primary, #fff);
  cursor: pointer;
  font-size: calc(var(--font-size-sm) * 1px);
  font-weight: var(--font-weight-semiBold);
  color: var(--text-link, #2563eb);

  &:hover {
    background: var(--surface-secondary, #f3f4f6);
  }
}

.entity-link-label {
  color: inherit;
}

.entity-link-icon {
  font-size: 14px;
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
}

// ======================================
// BADGE
// ======================================

.field-badge {
  width: fit-content;
  text-align: left;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: calc(var(--font-size-xs) *1px);
  font-weight: var(--font-weight-regular);
  line-height: calc(var(--font-lineHeight-xs) * 1px);
  letter-spacing: calc(var(--font-letterSpacing-lg) * 1px);
  word-break: break-word;
  color: var(--text-primary);
}


// ======================================
// REMARKS
// ======================================

.remarks-value {
  width: 100%;
  font-size: calc(var(--font-size-sm) *1px);
  font-weight: var(--font-weight-semiBold);
  line-height: calc(var(--font-lineHeight-sm) * 1px);
  letter-spacing: calc(var(--font-letterSpacing-md) * 1px);
  color: var(--text-secondary);
  white-space: pre-wrap;
}

// ======================================
// OBJECT VIEW
// ======================================

.object-value {
  width: 100%;
  white-space: pre-wrap;
  background: #f8fafc;
  padding: 14px;
  border-radius: 12px;
  overflow-x: auto;
  font-size: 13px;
}

// ======================================
// ARRAY TABLE
// ======================================

.array-table {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.array-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}

.array-table th {
  background: #f9fafb;
  padding: 14px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.array-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #111827;
  font-size: 14px;
}

// ======================================
// VOUCHER TABLE
// ======================================

.voucher-table-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.voucher-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 650px;
}

.voucher-table th {
  background: #f9fafb;
  padding: 14px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.voucher-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #111827;
  font-size: 14px;
}

.voucher-table tbody tr:hover {
  background: #f8fafc;
}

// ======================================
// NO DATA
// ======================================

.no-data {
  padding: 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

// ======================================
// TYPE CLASSES
// ======================================

.currency-value {
  font-family: monospace;
}

.percentage-value {
  font-weight: 600;
}

.date-value {
  font-weight: var(--font-weight-semiBold);
}

.email-value {
  color: #2563eb;
}

.phone-value {
  font-family: monospace;
}

.boolean-value.boolean-true {
  color: #16a34a;
}

.boolean-value.boolean-false {
  color: #dc2626;
}

// ======================================
// RESPONSIVE
// ======================================

@media (max-width: 768px) {
  .field-label {
    font-size: 12px;
  }

  .field-value {
    font-size: 14px;
  }

  .field-badge {
    font-size: calc(var(--font-size-sm) *1px);
    font-weight: var(--font-weight-medium);
    line-height: calc(var(--font-lineHeight-xs) * 1px);
    letter-spacing: calc(var(--font-letterSpacing-lg) * 1px);
  }

  .voucher-table,
  .array-table table {
    min-width: 450px;
  }
}