PlanTempusApp/PlanTempus.Application/wwwroot/css/customers.css

/**
 * Customers - Page Styling
 *
 * Feature-specific styling only.
 * Reuses:
 *   - swp-sticky-header, swp-header-content, swp-page-container (page.css)
 *   - swp-stats-row, swp-stat-card, swp-quick-stats (stats.css)
 *   - swp-action-bar, swp-search-input (components.css, services.css)
 *   - swp-data-table, swp-avatar, swp-tag, swp-empty-state (components.css)
 *   - swp-btn (components.css)
 */

/* ===========================================
   CUSTOMER TABLE (uses swp-data-table from components.css)
   =========================================== */
swp-card.customers-list {
  padding: 0;
  overflow: hidden;
}

/* Table columns: Navn(1fr) | Tlf(120px) | Email(180px) | Besøg(70px) | Sidste(90px) | Frisør(100px) | Oprettet(90px) | Tags(140px) */
swp-card.customers-list swp-data-table {
  grid-template-columns: minmax(200px, 1fr) 120px 180px 70px 90px 100px 90px 140px;
}

swp-card.customers-list swp-data-table-header,
swp-card.customers-list swp-data-table-row {
  padding: 0 var(--spacing-10);
}

swp-card.customers-list swp-data-table-header swp-data-table-cell {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}

swp-card.customers-list swp-data-table-row {
  cursor: pointer;
}

swp-card.customers-list swp-data-table-cell {
  padding: var(--spacing-5) 0;
}

/* Name cell with avatar */
swp-card.customers-list swp-data-table-cell:first-child {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

/* Mono font for visits column */
swp-card.customers-list swp-data-table-row swp-data-table-cell:nth-child(4) {
  font-family: var(--font-mono);
  text-align: center;
}

/* Muted text for email and created columns */
swp-card.customers-list swp-data-table-row swp-data-table-cell:nth-child(3),
swp-card.customers-list swp-data-table-row swp-data-table-cell:nth-child(7) {
  color: var(--color-text-secondary);
}

/* Tags cell */
swp-card.customers-list swp-data-table-cell:last-child {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

/* ===========================================
   CUSTOMER DRAWER
   Reuses: swp-drawer-* (drawers.css), swp-section-label (components.css),
           swp-edit-section/row (components.css), swp-toggle-row/slider (controls.css)
   =========================================== */

/* Drawer header actions */
swp-drawer-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.drawer-detail-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-teal);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);

  &:hover {
    background: var(--bg-teal-subtle);
  }

  i {
    font-size: var(--font-size-base);
  }
}

/* Customer Header */
swp-customer-header {
  display: flex;
  gap: var(--spacing-6);
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-6);
}

swp-customer-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: var(--color-teal);
  color: white;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

swp-customer-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-3);
}

swp-customer-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-4);
}

swp-customer-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

swp-customer-header-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

swp-customer-since {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

swp-customer-header-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);

  a {
    color: var(--color-teal);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

swp-customer-tags {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-1);
}

/* Marketing Section */
swp-marketing-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);

  swp-toggle-row,
  swp-toggle-row:last-child {
    padding: var(--spacing-4);
    background: var(--color-background-alt);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
  }
}

/* Profile Boxes (2x2 grid) */
swp-profile-boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

swp-profile-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--color-background-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);

  &.warning {
    background: var(--bg-red-subtle);
    border: 1px solid var(--border-red);

    swp-profile-box-label {
      color: var(--color-red);
    }
  }
}

swp-profile-box-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

swp-profile-box-value {
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* Chart Section */
swp-chart-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-border);
}

swp-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

swp-chart-legend {
  display: flex;
  gap: var(--spacing-5);
}

swp-chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

swp-chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);

  &.services {
    background: var(--color-teal);
  }

  &.products {
    background: var(--color-blue);
  }
}

swp-chart-container {
  width: 100%;
  height: 180px;
  background: var(--color-background-alt);
  border-radius: var(--radius-md);
}

/* Notes Section */
swp-notes-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-border);
}

swp-note-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--color-background-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

swp-note-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

swp-note-type {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-teal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

swp-note-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

swp-note-text {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.5;
}

swp-see-all-link {
  font-size: var(--font-size-sm);
  color: var(--color-teal);
  cursor: pointer;
  text-align: center;
  padding-top: var(--spacing-2);

  &:hover {
    text-decoration: underline;
  }
}

/* Edit input variant for drawer */
swp-edit-input {
  display: flex;
  gap: var(--spacing-2);

  input {
    flex: 1;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);

    &:focus {
      outline: none;
      border-color: var(--color-teal);
    }

    &.short {
      width: 80px;
      flex: none;
    }
  }
}

/* ===========================================
   CUSTOMER DETAIL PAGE
   Reuses: swp-sticky-header, swp-header-content (page.css),
           swp-tab-bar/swp-tab (tabs.css), swp-detail-grid (components.css)
   =========================================== */

/* Customer Detail Header (inside swp-header-content) */
swp-customer-detail-header {
  display: flex;
  gap: var(--spacing-6);
  margin-top: var(--spacing-6);
}

swp-customer-detail-header swp-customer-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
  color: white;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

swp-customer-detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Name row with name, tags, and booking exclusion toggle */
swp-customer-name-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

swp-customer-detail-name {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

swp-customer-detail-tags {
  display: flex;
  gap: var(--spacing-2);
}

/* Booking exclusion toggle */
swp-booking-exclusion {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-left: auto;

  &[data-excluded="false"] {
    background: var(--color-background);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
  }

  &[data-excluded="true"] {
    background: var(--bg-red-subtle);
    color: var(--color-red);
    border: 1px solid var(--border-red);
  }

  .icon {
    font-size: var(--font-size-base);
  }
}

/* Contact line with phone, email, customer since */
swp-contact-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);

  a {
    color: var(--color-teal);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .separator {
    color: var(--color-border);
  }
}

/* Customer Group Row (in card) */
swp-customer-group-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

swp-customer-group-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Relations List */
swp-relations-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

swp-relation-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

swp-relation-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-purple);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

swp-relation-info {
  flex: 1;
}

swp-relation-name {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

swp-relation-type {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

swp-relation-actions {
  display: flex;
  gap: var(--spacing-3);
}

swp-relation-link {
  font-size: var(--font-size-sm);
  color: var(--color-teal);
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

swp-relation-remove {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  cursor: pointer;
  opacity: 0.6;

  &:hover {
    opacity: 1;
    color: var(--color-red);
  }
}

swp-add-relation {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);

  &:hover {
    border-color: var(--color-teal);
    color: var(--color-teal);
  }
}

/* Toggle info wrapper (for toggles with description) */
swp-toggle-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

swp-toggle-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Profile box full-width variant */
swp-profile-box.full-width {
  grid-column: span 2;
}

/* ===========================================
   CUSTOMER DETAIL - APPOINTMENTS TABLE
   =========================================== */
swp-card.customer-appointments {
  padding: 0;
  overflow: hidden;
}

swp-card.customer-appointments swp-card-header {
  padding: var(--spacing-6);
}

swp-card.customer-appointments swp-data-table {
  grid-template-columns: 80px 60px 1fr 100px 110px;
}

/* ===========================================
   CUSTOMER DETAIL - GIFTCARDS TABLE
   =========================================== */
swp-card.customer-giftcards {
  padding: 0;
  overflow: hidden;
}

swp-card.customer-giftcards swp-card-header {
  padding: var(--spacing-6);
}

swp-card.customer-giftcards swp-data-table {
  grid-template-columns: 140px 100px 80px 80px 100px;
}

/* ===========================================
   CUSTOMER DETAIL - ACTIVITY LIST
   =========================================== */
swp-card.customer-activity {
  padding: 0;
  overflow: hidden;
}

swp-card.customer-activity swp-card-header {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
}

swp-card.customer-activity swp-attention-list {
  display: grid;
  grid-template-columns: 56px 1fr 100px;
  padding: var(--spacing-4);
  gap: var(--spacing-3);
}

swp-card.customer-activity swp-attention-item {
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
}

swp-card.customer-activity swp-attention-action {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* ===========================================
   CUSTOMER DETAIL - JOURNAL NOTES
   Override notes-section when inside a card
   =========================================== */
swp-card swp-notes-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  padding: var(--spacing-6);
  padding-top: 0;
}

/* Override chart-section when inside a card */
swp-card swp-chart-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  padding: var(--spacing-6);
  padding-top: 0;
}

/* ===========================================
   CUSTOMER DETAIL - STATISTICS TAB
   =========================================== */

/* Grid helpers */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-4);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-6);
}

.grid-2.compact {
  gap: var(--spacing-3);
}

/* Stat card variants */
swp-stat-card.warning swp-stat-value {
  color: var(--color-amber);
}

swp-stat-card.danger swp-stat-value {
  color: var(--color-red);
}

swp-stat-card.success swp-stat-value {
  color: var(--color-green);
}

swp-stat-value.small {
  font-size: var(--font-size-xl);
}

/* Key-Value List */
swp-kv-list {
  display: flex;
  flex-direction: column;
}

swp-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--color-border);
}

swp-kv-row:last-child {
  border-bottom: none;
}

swp-kv-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

swp-kv-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  color: var(--color-text);
}

/* Attendance Bar */
swp-attendance-bar {
  display: flex;
  height: 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--spacing-4);
}

swp-attendance-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: white;
}

swp-attendance-segment.attended {
  background: var(--color-teal);
}

swp-attendance-segment.cancelled {
  background: var(--color-amber);
}

swp-attendance-segment.noshow {
  background: var(--color-red);
}

/* Top List */
swp-top-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

swp-top-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  font-size: var(--font-size-sm);
}

swp-top-rank {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-background);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

swp-top-item:first-child swp-top-rank {
  background: var(--bg-teal-subtle);
  color: var(--color-teal);
}

swp-top-name {
  flex: 1;
  color: var(--color-text);
}

swp-top-count {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Risk Indicator */
swp-risk-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}

swp-risk-indicator.low swp-risk-dot {
  background: var(--color-green);
}

swp-risk-indicator.low span {
  color: var(--color-green);
}

swp-risk-indicator.medium swp-risk-dot {
  background: var(--color-amber);
}

swp-risk-indicator.medium span {
  color: var(--color-amber);
}

swp-risk-indicator.high swp-risk-dot {
  background: var(--color-red);
}

swp-risk-indicator.high span {
  color: var(--color-red);
}

swp-risk-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

/* Section label small variant */
swp-section-label.small {
  font-size: 10px;
  margin-bottom: var(--spacing-3);
}

/* ===========================================
   CUSTOMER DETAIL - JOURNAL TAB
   =========================================== */

/* Journal Mini Tabs (filter tabs) */
swp-journal-mini-tabs {
  display: flex;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-6);
}

swp-journal-mini-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

swp-journal-mini-tab:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

swp-journal-mini-tab.active {
  background: var(--bg-teal-subtle);
  border-color: var(--color-teal);
  color: var(--color-teal);
}

.tab-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.tab-dot.blue {
  background: var(--color-blue);
}

.tab-dot.amber {
  background: var(--color-amber);
}

.tab-dot.purple {
  background: var(--color-purple);
}

.tab-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* Journal Color Dots */
.col-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
}

.col-dot.blue {
  background: var(--color-blue);
}

.col-dot.amber {
  background: var(--color-amber);
}

.col-dot.purple {
  background: var(--color-purple);
}

/* Journal Entry Card */
swp-journal-entry {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

swp-journal-entry-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

swp-journal-entry-type {
  display: inline-flex;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
}

swp-journal-entry-type.note {
  background: var(--bg-blue-subtle);
  color: var(--color-blue);
}

swp-journal-entry-type.advarsel {
  background: var(--bg-red-subtle);
  color: var(--color-red);
}

swp-journal-entry-type.farveformel {
  background: var(--bg-amber-subtle);
  color: var(--color-amber);
}

swp-journal-entry-type.analyse {
  background: var(--bg-purple-subtle);
  color: var(--color-purple);
}

swp-journal-entry-tags {
  display: flex;
  gap: var(--spacing-2);
}

swp-journal-tag {
  display: inline-flex;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

swp-journal-tag.allergi {
  background: var(--bg-red-subtle);
  color: var(--color-red);
}

swp-journal-entry-delete {
  margin-left: auto;
  color: var(--color-text-tertiary);
  cursor: pointer;
  opacity: 0.6;
  transition: all var(--transition-fast);
}

swp-journal-entry-delete:hover {
  opacity: 1;
  color: var(--color-red);
}

swp-journal-entry-body {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.6;
}

swp-journal-entry-body .label {
  color: var(--color-text-secondary);
}

swp-journal-entry-body .mono {
  font-family: var(--font-mono);
}

swp-journal-entry-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border);
}

swp-journal-entry-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

swp-journal-entry-visibility {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

swp-journal-entry-visibility.warning {
  color: var(--color-amber);
}

/* ===========================================
   CUSTOMER DETAIL - APPOINTMENTS TAB
   =========================================== */

/* Appointment Card (for upcoming) */
swp-appointment-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

swp-appointment-date {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

swp-appointment-details {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

swp-appointment-actions {
  display: flex;
  gap: var(--spacing-3);
  margin-top: var(--spacing-2);
}

/* Simple Table (for previous appointments) */
swp-table {
  display: flex;
  flex-direction: column;
}

swp-table-header {
  display: grid;
  grid-template-columns: 120px 1fr 100px 80px 100px;
  padding: var(--spacing-3) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

swp-table-header span:last-child {
  text-align: right;
}

swp-table-row {
  display: grid;
  grid-template-columns: 120px 1fr 100px 80px 100px;
  padding: var(--spacing-4) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

swp-table-row:last-child {
  border-bottom: none;
}

swp-table-row span:last-child {
  text-align: right;
}

swp-table-row .mono {
  font-family: var(--font-mono);
}

/* See All Link */
swp-see-all {
  display: block;
  padding-top: var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-teal);
  text-align: center;
  cursor: pointer;
}

swp-see-all:hover {
  text-decoration: underline;
}

/* Button */
swp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

swp-btn.primary {
  background: var(--color-teal);
  color: white;
}

swp-btn.primary:hover {
  background: var(--color-teal-hover);
}

swp-btn.secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

swp-btn.secondary:hover {
  background: var(--color-background);
}

/* ===========================================
   CUSTOMER DETAIL - GIFTCARDS TAB
   =========================================== */

/* Giftcard Card */
swp-giftcard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

swp-giftcard-header {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

swp-giftcard-balance {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

swp-giftcard-balance strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

swp-giftcard-expires {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* Progress Bar */
swp-progress-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

swp-progress-fill {
  height: 100%;
  background: var(--color-teal);
  border-radius: var(--radius-full);
}

/* ===========================================
   CUSTOMER DETAIL - ACTIVITY TAB
   =========================================== */

/* Activity Filters */
swp-activity-filters {
  display: flex;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-6);
  flex-wrap: wrap;
}

swp-activity-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

swp-activity-filter:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

swp-activity-filter.active {
  background: var(--bg-teal-subtle);
  border-color: var(--color-teal);
  color: var(--color-teal);
}

swp-activity-filter i {
  font-size: var(--font-size-base);
  opacity: 0.7;
}

/* Activity Timeline */
swp-activity-timeline {
  display: flex;
  flex-direction: column;
}

swp-activity-date-group {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
}

swp-activity-date-group:last-child {
  border-bottom: none;
}

swp-activity-date-header {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-4);
}

swp-activity-item {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-3) 0;
}

swp-activity-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--font-size-base);
}

swp-activity-icon.communication {
  background: var(--bg-blue-subtle);
  color: var(--color-blue);
}

swp-activity-icon.customer {
  background: var(--bg-purple-subtle);
  color: var(--color-purple);
}

swp-activity-icon.booking {
  background: var(--bg-teal-subtle);
  color: var(--color-teal);
}

swp-activity-icon.edit {
  background: var(--bg-amber-subtle);
  color: var(--color-amber);
}

swp-activity-icon.warning {
  background: var(--bg-red-subtle);
  color: var(--color-red);
}

swp-activity-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

swp-activity-title {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

swp-activity-badge {
  display: inline-flex;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

swp-activity-badge.auto {
  background: var(--color-background);
  color: var(--color-text-secondary);
}

swp-activity-badge.online {
  background: var(--bg-blue-subtle);
  color: var(--color-blue);
}

swp-activity-meta {
  display: flex;
  gap: var(--spacing-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

swp-activity-time {
  font-family: var(--font-mono);
}

swp-activity-actor {
  color: var(--color-text-secondary);
}