@import "ng-zorro-antd/ng-zorro-antd.min.css";

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

// Global utilities
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

.mr-8 { margin-right: 8px; }
.mr-16 { margin-right: 16px; }

.ml-8 { margin-left: 8px; }
.ml-16 { margin-left: 16px; }

.p-16 { padding: 16px; }
.p-24 { padding: 24px; }

.w-100 { width: 100%; }

// Monospace for IDs and keys
.mono {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
  font-size: 13px;
}

// Card styling
.content-card {
  margin-bottom: 16px;
}

// Page content wrapper
.page-content {
  padding: 24px;
  background: #fff;
  min-height: calc(100vh - 64px);
}

// Filter bar
.filter-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}

// Clickable row with anchor link for proper middle-click support
.clickable-row {
  &:hover {
    background-color: #fafafa;
  }
}

td:has(> a.cell-link) {
  padding: 0 !important;
}

a.cell-link {
  display: block;
  padding: 8px;
  color: inherit;
  text-decoration: none;

  &:hover {
    color: inherit;
  }
}

// Status colors
.status-confirmed {
  color: #52c41a;
}

.status-pending {
  color: #faad14;
}

.status-inactive {
  color: #999;
}

// Priority colors
.priority-high {
  color: #f5222d;
}

.priority-normal {
  color: #1890ff;
}

.priority-low {
  color: #999;
}

// Empty state wrapper
.empty-wrapper {
  padding: 48px 0;
}

// Action buttons group
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

// Detail page header
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

// QR code display
.qr-code-container {
  display: flex;
  justify-content: center;
  padding: 24px;

  img {
    max-width: 256px;
    width: 100%;
    height: auto;
  }
}

nz-card {
  border: 1px solid #CCC !important;
  box-shadow: 0 0 6px #CCC;

  > .ant-card-head {
    border-bottom: 1px solid #CCC;
  }

  display: flex;
  flex-direction: column;

  > .ant-card-body {
    flex-grow: 1;
  }
}

th {
  white-space: pre;
}