38e9243bcd
Implements new drawer for creating customers with form inputs for contact details and notes Enhances customer management by providing a streamlined way to add new customer records directly from the customers index page
1470 lines
30 KiB
CSS
1470 lines
30 KiB
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 and quick-view button */
|
|
swp-card.customers-list swp-data-table-cell:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
/* 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 (last column) */
|
|
swp-card.customers-list swp-data-table-cell:last-child {
|
|
display: flex;
|
|
gap: var(--spacing-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Quick-view button */
|
|
swp-quick-view-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-text-tertiary);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
swp-quick-view-btn:hover {
|
|
background: var(--bg-teal-subtle);
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
swp-quick-view-btn i {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
/* ===========================================
|
|
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 {
|
|
font-family: var(--font-mono);
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
swp-giftcard-expires {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
/* Progress Bar */
|
|
swp-progress-bar {
|
|
height: 8px;
|
|
background: var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
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-md);
|
|
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);
|
|
}
|
|
|
|
/* ===========================================
|
|
CREATE CUSTOMER DRAWER
|
|
=========================================== */
|
|
|
|
/* Name field above card */
|
|
#create-customer-drawer swp-form-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
|
|
#create-customer-drawer swp-form-label {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
#create-customer-drawer swp-form-row input {
|
|
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);
|
|
}
|
|
|
|
#create-customer-drawer swp-form-row input:focus,
|
|
#create-customer-drawer swp-form-row textarea:focus {
|
|
outline: none;
|
|
border-color: var(--color-teal);
|
|
}
|
|
|
|
/* Textarea for note */
|
|
#create-customer-drawer swp-form-row textarea {
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
font-size: var(--font-size-base);
|
|
font-family: inherit;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
/* Card inside drawer */
|
|
#create-customer-drawer swp-card {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Note field after card */
|
|
#create-customer-drawer swp-form-row.note-field {
|
|
margin-top: var(--spacing-6);
|
|
margin-bottom: 0;
|
|
}
|