/* =========================================================
WONDER APP — VENDOR APPLICATION
cards.css
Multi-Vendor Reusable Card System
========================================================= */

/* ---------------------------------------------------------

1. CSS VARIABLES / FALLBACKS
   --------------------------------------------------------- */

:root {
--card-bg: #ffffff;
--card-border: #e5e7eb;
--card-radius: 14px;
--card-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
--card-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.10);

--text-primary: #111827;
--text-secondary: #6b7280;
--text-muted: #9ca3af;

--primary: #2563eb;
--primary-light: #eff6ff;

--success: #16a34a;
--success-light: #f0fdf4;

--warning: #d97706;
--warning-light: #fffbeb;

--danger: #dc2626;
--danger-light: #fef2f2;

--info: #0891b2;
--info-light: #ecfeff;

--purple: #7c3aed;
--purple-light: #f5f3ff;

--orange: #ea580c;
--orange-light: #fff7ed;

--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;

}

/* ---------------------------------------------------------
2. BASE CARD
--------------------------------------------------------- */

.card {
position: relative;
display: block;
width: 100%;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
}

.card--hover {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}

.card--hover:hover {
transform: translateY(-2px);
box-shadow: var(--card-shadow-hover);
}

.card--clickable {
cursor: pointer;
}

.card--clickable:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.25);
outline-offset: 2px;
}

/* ---------------------------------------------------------
3. CARD HEADER
--------------------------------------------------------- */

.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
padding: var(--spacing-lg);
border-bottom: 1px solid var(--card-border);
}

.card-header-left {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.card-header-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

.card-title {
margin: 0;
color: var(--text-primary);
font-size: 17px;
line-height: 1.4;
font-weight: 700;
}

.card-subtitle {
margin: 3px 0 0;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.5;
}

/* ---------------------------------------------------------
4. CARD BODY
--------------------------------------------------------- */

.card-body {
padding: var(--spacing-lg);
}

.card-body--sm {
padding: var(--spacing-md);
}

.card-body--lg {
padding: var(--spacing-xl);
}

.card-body--flush {
padding: 0;
}

/* ---------------------------------------------------------
5. CARD FOOTER
--------------------------------------------------------- */

.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
padding: var(--spacing-md) var(--spacing-lg);
border-top: 1px solid var(--card-border);
background: #fafafa;
}

.card-footer-left,
.card-footer-right {
display: flex;
align-items: center;
gap: 8px;
}

/* ---------------------------------------------------------
6. STAT / KPI CARD
--------------------------------------------------------- */

.stat-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 150px;
padding: var(--spacing-lg);
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}

.stat-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}

.stat-card-label {
margin: 0;
color: var(--text-secondary);
font-size: 13px;
font-weight: 600;
}

.stat-card-value {
margin-top: 8px;
color: var(--text-primary);
font-size: 28px;
line-height: 1.15;
font-weight: 800;
letter-spacing: -0.5px;
}

.stat-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 12px;
background: var(--primary-light);
color: var(--primary);
font-size: 20px;
}

.stat-card-footer {
display: flex;
align-items: center;
gap: 7px;
margin-top: auto;
padding-top: 16px;
color: var(--text-secondary);
font-size: 12px;
}

.stat-card-trend {
font-weight: 700;
}

.stat-card-trend.up {
color: var(--success);
}

.stat-card-trend.down {
color: var(--danger);
}

.stat-card-trend.neutral {
color: var(--text-secondary);
}

/* ---------------------------------------------------------
7. STAT CARD COLOR VARIANTS
--------------------------------------------------------- */

.stat-card--primary .stat-card-icon {
background: var(--primary-light);
color: var(--primary);
}

.stat-card--success .stat-card-icon {
background: var(--success-light);
color: var(--success);
}

.stat-card--warning .stat-card-icon {
background: var(--warning-light);
color: var(--warning);
}

.stat-card--danger .stat-card-icon {
background: var(--danger-light);
color: var(--danger);
}

.stat-card--info .stat-card-icon {
background: var(--info-light);
color: var(--info);
}

.stat-card--purple .stat-card-icon {
background: var(--purple-light);
color: var(--purple);
}

.stat-card--orange .stat-card-icon {
background: var(--orange-light);
color: var(--orange);
}

/* ---------------------------------------------------------
8. DASHBOARD SUMMARY CARD
--------------------------------------------------------- */

.summary-card {
padding: var(--spacing-lg);
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}

.summary-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.summary-card-title {
margin: 0;
color: var(--text-secondary);
font-size: 13px;
font-weight: 600;
}

.summary-card-value {
margin: 8px 0 0;
color: var(--text-primary);
font-size: 24px;
font-weight: 800;
}

.summary-card-description {
margin: 8px 0 0;
color: var(--text-muted);
font-size: 12px;
}

/* ---------------------------------------------------------
9. LEAD CARD
--------------------------------------------------------- */

.lead-card {
padding: var(--spacing-lg);
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}

.lead-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}

.lead-card-title {
margin: 0;
color: var(--text-primary);
font-size: 16px;
font-weight: 700;
}

.lead-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 10px;
color: var(--text-secondary);
font-size: 12px;
}

.lead-card-body {
margin-top: 16px;
}

.lead-card-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--card-border);
}

/* ---------------------------------------------------------
10. ENQUIRY CARD
--------------------------------------------------------- */

.enquiry-card {
padding: var(--spacing-lg);
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}

.enquiry-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}

.enquiry-card-title {
margin: 0;
color: var(--text-primary);
font-size: 15px;
font-weight: 700;
}

.enquiry-card-message {
margin: 12px 0 0;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.6;
}

.enquiry-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 14px;
color: var(--text-muted);
font-size: 12px;
}

/* ---------------------------------------------------------
11. QUOTE CARD
--------------------------------------------------------- */

.quote-card {
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
}

.quote-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding: var(--spacing-lg);
}

.quote-card-number {
color: var(--text-primary);
font-size: 15px;
font-weight: 700;
}

.quote-card-customer {
margin-top: 4px;
color: var(--text-secondary);
font-size: 13px;
}

.quote-card-amount {
padding: 0 var(--spacing-lg) var(--spacing-lg);
color: var(--text-primary);
font-size: 24px;
font-weight: 800;
}

.quote-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px var(--spacing-lg);
background: #fafafa;
border-top: 1px solid var(--card-border);
}

/* ---------------------------------------------------------
12. ORDER CARD
--------------------------------------------------------- */

.order-card {
padding: var(--spacing-lg);
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}

.order-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}

.order-card-number {
color: var(--text-primary);
font-size: 15px;
font-weight: 700;
}

.order-card-date {
margin-top: 4px;
color: var(--text-muted);
font-size: 12px;
}

.order-card-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}

.order-card-detail {
padding: 12px;
background: #f9fafb;
border-radius: 10px;
}

.order-card-detail-label {
color: var(--text-muted);
font-size: 11px;
}

.order-card-detail-value {
margin-top: 4px;
color: var(--text-primary);
font-size: 13px;
font-weight: 600;
}

.order-card-total {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 18px;
padding-top: 15px;
border-top: 1px solid var(--card-border);
}

.order-card-total-label {
color: var(--text-secondary);
font-size: 13px;
}

.order-card-total-value {
color: var(--text-primary);
font-size: 18px;
font-weight: 800;
}

/* ---------------------------------------------------------
13. CUSTOMER CARD
--------------------------------------------------------- */

.customer-card {
padding: var(--spacing-lg);
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}

.customer-card-header {
display: flex;
align-items: center;
gap: 12px;
}

.customer-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 50%;
background: var(--primary-light);
color: var(--primary);
font-size: 16px;
font-weight: 800;
overflow: hidden;
}

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

.customer-name {
margin: 0;
color: var(--text-primary);
font-size: 15px;
font-weight: 700;
}

.customer-contact {
margin-top: 3px;
color: var(--text-secondary);
font-size: 12px;
}

.customer-card-info {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
}

/* ---------------------------------------------------------
14. BUSINESS / COMPANY CARD
--------------------------------------------------------- */

.business-card {
padding: var(--spacing-lg);
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}

.business-card-header {
display: flex;
align-items: center;
gap: 14px;
}

.business-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex: 0 0 56px;
background: #f3f4f6;
border-radius: 12px;
overflow: hidden;
}

.business-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}

.business-name {
margin: 0;
color: var(--text-primary);
font-size: 17px;
font-weight: 800;
}

.business-type {
margin-top: 4px;
color: var(--text-secondary);
font-size: 12px;
}

.business-card-status {
margin-top: 16px;
}

.business-card-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}

/* ---------------------------------------------------------
15. SERVICE CARD
--------------------------------------------------------- */

.service-card {
position: relative;
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
}

.service-card-image {
width: 100%;
height: 170px;
background: #f3f4f6;
overflow: hidden;
}

.service-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.service-card-body {
padding: var(--spacing-lg);
}

.service-card-title {
margin: 0;
color: var(--text-primary);
font-size: 16px;
font-weight: 700;
}

.service-card-description {
margin-top: 8px;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.55;
}

.service-card-price {
margin-top: 14px;
color: var(--primary);
font-size: 18px;
font-weight: 800;
}

.service-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px var(--spacing-lg);
border-top: 1px solid var(--card-border);
}

/* ---------------------------------------------------------
16. PRODUCT CARD
--------------------------------------------------------- */

.product-card {
position: relative;
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
}

.product-card-image {
position: relative;
width: 100%;
height: 180px;
background: #f3f4f6;
overflow: hidden;
}

.product-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.product-card-body {
padding: var(--spacing-lg);
}

.product-card-title {
margin: 0;
color: var(--text-primary);
font-size: 16px;
font-weight: 700;
}

.product-card-sku {
margin-top: 5px;
color: var(--text-muted);
font-size: 11px;
}

.product-card-price {
margin-top: 12px;
color: var(--text-primary);
font-size: 19px;
font-weight: 800;
}

.product-card-stock {
margin-top: 10px;
font-size: 12px;
font-weight: 600;
}

.product-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px var(--spacing-lg);
border-top: 1px solid var(--card-border);
}

/* ---------------------------------------------------------
17. REVIEW CARD
--------------------------------------------------------- */

.review-card {
padding: var(--spacing-lg);
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}

.review-card-header {
display: flex;
align-items: center;
gap: 12px;
}

.review-card-rating {
margin-left: auto;
color: #b45309;
font-size: 14px;
font-weight: 700;
}

.review-stars {
letter-spacing: 1px;
}

.review-card-text {
margin-top: 15px;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.65;
}

.review-card-date {
margin-top: 12px;
color: var(--text-muted);
font-size: 11px;
}

/* ---------------------------------------------------------
18. MESSAGE / CONVERSATION CARD
--------------------------------------------------------- */

.message-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: #fff;
border-bottom: 1px solid var(--card-border);
transition: background 0.15s ease;
}

.message-card:hover {
background: #f9fafb;
}

.message-card.unread {
background: #eff6ff;
}

.message-card-content {
min-width: 0;
flex: 1;
}

.message-card-name {
color: var(--text-primary);
font-size: 13px;
font-weight: 700;
}

.message-card-preview {
margin-top: 4px;
color: var(--text-secondary);
font-size: 12px;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.message-card-time {
flex-shrink: 0;
color: var(--text-muted);
font-size: 11px;
}

/* ---------------------------------------------------------
19. NOTIFICATION CARD
--------------------------------------------------------- */

.notification-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 15px 16px;
background: #fff;
border: 1px solid var(--card-border);
border-radius: 12px;
}

.notification-card.unread {
border-left: 3px solid var(--primary);
background: #f8fbff;
}

.notification-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 10px;
background: var(--primary-light);
color: var(--primary);
}

.notification-content {
flex: 1;
min-width: 0;
}

.notification-title {
color: var(--text-primary);
font-size: 13px;
font-weight: 700;
}

.notification-message {
margin-top: 4px;
color: var(--text-secondary);
font-size: 12px;
line-height: 1.5;
}

.notification-time {
margin-top: 6px;
color: var(--text-muted);
font-size: 11px;
}

/* ---------------------------------------------------------
20. BILLING / REVENUE CARD
--------------------------------------------------------- */

.revenue-card {
padding: var(--spacing-lg);
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}

.revenue-card-label {
color: var(--text-secondary);
font-size: 13px;
font-weight: 600;
}

.revenue-card-value {
margin-top: 8px;
color: var(--text-primary);
font-size: 26px;
font-weight: 800;
}

.revenue-card-period {
margin-top: 5px;
color: var(--text-muted);
font-size: 11px;
}

.revenue-card-chart {
margin-top: 20px;
min-height: 100px;
}

/* ---------------------------------------------------------
21. ANALYTICS CARD
--------------------------------------------------------- */

.analytics-card {
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
}

.analytics-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: var(--spacing-lg);
}

.analytics-card-body {
padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.analytics-card-value {
color: var(--text-primary);
font-size: 26px;
font-weight: 800;
}

.analytics-card-change {
margin-top: 5px;
font-size: 12px;
font-weight: 700;
}

/* ---------------------------------------------------------
22. QUICK ACTION CARD
--------------------------------------------------------- */

.quick-action-card {
display: flex;
align-items: center;
gap: 14px;
min-height: 82px;
padding: 15px 16px;
background: #fff;
border: 1px solid var(--card-border);
border-radius: 12px;
box-shadow: var(--card-shadow);
text-decoration: none;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}

.quick-action-card:hover {
transform: translateY(-2px);
border-color: #bfdbfe;
box-shadow: var(--card-shadow-hover);
}

.quick-action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 10px;
background: var(--primary-light);
color: var(--primary);
}

.quick-action-content {
min-width: 0;
}

.quick-action-title {
color: var(--text-primary);
font-size: 13px;
font-weight: 700;
}

.quick-action-description {
margin-top: 3px;
color: var(--text-muted);
font-size: 11px;
}

/* ---------------------------------------------------------
23. PROFILE CARD
--------------------------------------------------------- */

.profile-card {
padding: var(--spacing-xl);
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
text-align: center;
}

.profile-card-avatar {
width: 86px;
height: 86px;
margin: 0 auto;
border-radius: 50%;
background: #f3f4f6;
overflow: hidden;
}

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

.profile-card-name {
margin-top: 14px;
color: var(--text-primary);
font-size: 18px;
font-weight: 800;
}

.profile-card-role {
margin-top: 4px;
color: var(--text-secondary);
font-size: 12px;
}

/* ---------------------------------------------------------
24. TEAM MEMBER CARD
--------------------------------------------------------- */

.team-member-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
background: #fff;
border: 1px solid var(--card-border);
border-radius: 12px;
}

.team-member-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 50%;
background: var(--primary-light);
color: var(--primary);
font-size: 14px;
font-weight: 800;
}

.team-member-info {
flex: 1;
min-width: 0;
}

.team-member-name {
color: var(--text-primary);
font-size: 14px;
font-weight: 700;
}

.team-member-role {
margin-top: 3px;
color: var(--text-secondary);
font-size: 11px;
}

/* ---------------------------------------------------------
25. EMPTY STATE CARD
--------------------------------------------------------- */

.empty-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 240px;
padding: var(--spacing-xl);
text-align: center;
background: #fff;
border: 1px dashed #d1d5db;
border-radius: var(--card-radius);
}

.empty-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: #f3f4f6;
color: var(--text-secondary);
font-size: 22px;
}

.empty-card-title {
margin-top: 14px;
color: var(--text-primary);
font-size: 15px;
font-weight: 700;
}

.empty-card-text {
max-width: 420px;
margin-top: 6px;
color: var(--text-secondary);
font-size: 12px;
line-height: 1.6;
}

/* ---------------------------------------------------------
26. LOADING CARD
--------------------------------------------------------- */

.loading-card {
padding: var(--spacing-lg);
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
}

.skeleton {
position: relative;
overflow: hidden;
background: #e5e7eb;
border-radius: 6px;
}

.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.55),
transparent
);
animation: skeleton-loading 1.4s infinite;
}

.skeleton-line {
height: 12px;
margin-bottom: 10px;
}

.skeleton-line.short {
width: 45%;
}

.skeleton-line.medium {
width: 70%;
}

.skeleton-line.full {
width: 100%;
}

.skeleton-box {
width: 100%;
height: 120px;
margin-bottom: 15px;
}

@keyframes skeleton-loading {
100% {
transform: translateX(100%);
}
}

/* ---------------------------------------------------------
27. CARD GRID
--------------------------------------------------------- */

.card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing-lg);
}

.card-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card-grid--5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* ---------------------------------------------------------
28. STAT GRID
--------------------------------------------------------- */

.stat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--spacing-lg);
}

/* ---------------------------------------------------------
29. CARD DIVIDER
--------------------------------------------------------- */

.card-divider {
width: 100%;
height: 1px;
margin: 16px 0;
background: var(--card-border);
}

/* ---------------------------------------------------------
30. CARD LIST
--------------------------------------------------------- */

.card-list {
display: flex;
flex-direction: column;
gap: 12px;
}

.card-list--compact {
gap: 8px;
}

/* ---------------------------------------------------------
31. CARD BADGES
--------------------------------------------------------- */

.card-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 4px 9px;
border-radius: 999px;
font-size: 11px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
}

.card-badge--primary {
background: var(--primary-light);
color: var(--primary);
}

.card-badge--success {
background: var(--success-light);
color: var(--success);
}

.card-badge--warning {
background: var(--warning-light);
color: var(--warning);
}

.card-badge--danger {
background: var(--danger-light);
color: var(--danger);
}

.card-badge--info {
background: var(--info-light);
color: var(--info);
}

.card-badge--purple {
background: var(--purple-light);
color: var(--purple);
}

/* ---------------------------------------------------------
32. CARD STATUS DOT
--------------------------------------------------------- */

.status-dot {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-secondary);
font-size: 12px;
}

.status-dot::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--text-muted);
}

.status-dot--active::before {
background: var(--success);
}

.status-dot--pending::before {
background: var(--warning);
}

.status-dot--danger::before {
background: var(--danger);
}

.status-dot--info::before {
background: var(--info);
}

/* ---------------------------------------------------------
33. CARD ACTIONS
--------------------------------------------------------- */

.card-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}

.card-actions--right {
justify-content: flex-end;
}

.card-actions--center {
justify-content: center;
}

.card-actions--between {
justify-content: space-between;
}

/* ---------------------------------------------------------
34. CARD LINK
--------------------------------------------------------- */

.card-link {
color: var(--primary);
font-size: 12px;
font-weight: 700;
text-decoration: none;
}

.card-link:hover {
text-decoration: underline;
}

/* ---------------------------------------------------------
35. CARD IMAGE
--------------------------------------------------------- */

.card-image {
width: 100%;
height: 200px;
background: #f3f4f6;
overflow: hidden;
}

.card-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* ---------------------------------------------------------
36. HORIZONTAL CARD
--------------------------------------------------------- */

.card-horizontal {
display: flex;
width: 100%;
background: #fff;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
}

.card-horizontal-image {
width: 190px;
min-width: 190px;
background: #f3f4f6;
}

.card-horizontal-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.card-horizontal-content {
flex: 1;
padding: var(--spacing-lg);
}

/* ---------------------------------------------------------
37. FEATURE CARD
--------------------------------------------------------- */

.feature-card {
padding: var(--spacing-xl);
background: linear-gradient(135deg, #ffffff, #f8fafc);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}

.feature-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--primary-light);
color: var(--primary);
}

.feature-card-title {
margin-top: 16px;
color: var(--text-primary);
font-size: 17px;
font-weight: 800;
}

.feature-card-text {
margin-top: 7px;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.6;
}

/* ---------------------------------------------------------
38. RESPONSIVE — TABLET
--------------------------------------------------------- */

@media (max-width: 1100px) {

.stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid--4,
.card-grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

}

/* ---------------------------------------------------------
39. RESPONSIVE — MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

.card-header {
    align-items: flex-start;
    flex-direction: column;
}

.card-header-right {
    width: 100%;
}

.card-body,
.card-header {
    padding: 16px;
}

.card-footer {
    align-items: flex-start;
    flex-direction: column;
}

.stat-grid,
.card-grid,
.card-grid--2,
.card-grid--4,
.card-grid--5 {
    grid-template-columns: 1fr;
}

.stat-card-value {
    font-size: 24px;
}

.order-card-details,
.customer-card-info,
.business-card-details {
    grid-template-columns: 1fr;
}

.card-horizontal {
    flex-direction: column;
}

.card-horizontal-image {
    width: 100%;
    min-width: 0;
    height: 180px;
}

.quick-action-card {
    min-height: 72px;
}

}

/* ---------------------------------------------------------
40. REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

.card--hover,
.quick-action-card,
.message-card {
    transition: none;
}

.card--hover:hover,
.quick-action-card:hover {
    transform: none;
}

.skeleton::after {
    animation: none;
}

}