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)
   =========================================== */

/* 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;
    }
  }
}