/* ═══════════════════════════════════════════════════════════════
   CARD SYSTEM — Unified Surfaces + Content Typography
   Applies to: event-card, lead-card, vendor-card, task-card,
               stat-card, quot-mobile-card, client mobile cards
   NOTE: No backdrop-filter — disabled globally for performance.
═══════════════════════════════════════════════════════════════ */

:root {
  --cs-bg:           rgba(255, 255, 255, 0.97);
  --cs-bg-inner:     rgba(248, 249, 253, 0.97);
  --cs-border-top:   rgba(255, 255, 255, 0.90);
  --cs-border-main:  rgba(0, 0, 0, 0.07);
  --cs-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 2px 8px rgba(15,17,35,0.055),
    0 1px 3px rgba(15,17,35,0.035);
  --cs-shadow-hover:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 8px 24px rgba(15,17,35,0.09),
    0 3px 8px rgba(15,17,35,0.05);
  --cs-border-hover: rgba(91,108,248,0.22);
  --cs-radius:       10px;
}

body.dark-mode {
  --cs-bg:           rgba(22, 32, 68, 0.98);
  --cs-bg-inner:     rgba(255,255,255,0.03);
  --cs-border-top:   rgba(255,255,255,0.07);
  --cs-border-main:  rgba(255,255,255,0.07);
  --cs-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 2px 12px rgba(0,0,0,0.28),
    0 1px 4px rgba(0,0,0,0.18);
  --cs-shadow-hover:
    0 1px 0 rgba(255,255,255,0.09) inset,
    0 8px 28px rgba(0,0,0,0.38),
    0 4px 12px rgba(0,0,0,0.22);
  --cs-border-hover: rgba(91,108,248,0.38);
}

/* Card surfaces */
.card, .stat-card, .vendor-card, .event-card, .task-card,
.lead-card, .lead-card-v2, .client-card, .quot-mobile-card {
  background: var(--cs-bg) !important;
  border: 1px solid var(--cs-border-main) !important;
  box-shadow: var(--cs-shadow) !important;
  border-radius: var(--cs-radius) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.14s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.2s ease, border-color 0.18s ease !important;
}

/* Glass highlight top rim */
.vendor-card::before, .event-card::before, .lead-card::before,
.lead-card-v2::before, .client-card::before, .quot-mobile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--cs-border-top);
  z-index: 1;
  pointer-events: none;
  border-radius: var(--cs-radius) var(--cs-radius) 0 0;
}

/* Hover — desktop only */
@media (hover: hover) {
  .card:hover, .stat-card:hover, .vendor-card:hover, .event-card:hover,
  .task-card:hover, .lead-card:hover, .lead-card-v2:hover, .client-card:hover {
    box-shadow: var(--cs-shadow-hover) !important;
    border-color: var(--cs-border-hover) !important;
    transform: translateY(-2px) !important;
  }
}

/* Press */
.card:active, .stat-card:active, .vendor-card:active, .event-card:active,
.task-card:active, .lead-card:active, .lead-card-v2:active, .client-card:active {
  transform: scale(0.98) !important;
  box-shadow: var(--cs-shadow) !important;
  transition-duration: 0.07s !important;
}

/* Internal dividers */
.vendor-card > div[style*="border-bottom"],
.event-card > div[style*="border-bottom"],
.lead-card > div[style*="border-bottom"],
.lead-card-v2 > div[style*="border-bottom"],
.client-card > div[style*="border-bottom"] {
  border-bottom-color: var(--cs-border-main) !important;
}

/* Card action bars */
.lead-card > div:last-child, .lead-card-v2 > div:last-child,
.client-card > div:last-child, .quot-mobile-card .quot-card-actions {
  background: var(--cs-bg-inner) !important;
  border-top: 1px solid var(--cs-border-main) !important;
}

.quot-mobile-card { display: flex !important; overflow: hidden !important; margin-bottom: 10px !important; }
.quot-mobile-card .quot-card-body { background: transparent !important; }

/* ── Content typography (cc-* semantic classes) ── */
.cc-name   { font-size: var(--text-base,13.5px) !important; font-weight: 700 !important; color: var(--text-primary) !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-meta   { font-size: var(--text-sm,12.5px) !important; font-weight: 500 !important; color: var(--text-muted) !important; line-height: 1.4 !important; }
.cc-tiny   { font-size: var(--text-xs,11px) !important; font-weight: 600 !important; color: var(--text-muted) !important; line-height: 1.3 !important; }
.cc-amount { font-size: var(--text-md,15px) !important; font-weight: 800 !important; color: var(--text-primary) !important; letter-spacing: -0.03em !important; font-variant-numeric: tabular-nums; line-height: 1.2 !important; }

.cc-badge {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  padding: 3px 9px !important; border-radius: 12px !important;
  font-size: var(--text-xs,11px) !important; font-weight: 700 !important;
  letter-spacing: 0.01em !important; white-space: nowrap !important;
  line-height: 1.2 !important; flex-shrink: 0 !important;
}

.cc-chip {
  display: inline-flex !important; align-items: center !important; gap: 3px !important;
  padding: 2px 7px !important; border-radius: 5px !important;
  font-size: var(--text-xs,11px) !important; font-weight: 600 !important;
  color: var(--text-muted) !important; background: rgba(0,0,0,0.04) !important;
  border: 1px solid var(--border-light) !important; white-space: nowrap !important;
}
body.dark-mode .cc-chip { background: rgba(255,255,255,0.06) !important; border-color: var(--cs-border-main) !important; }

.cc-avatar { border-radius: 8px !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 800 !important; flex-shrink: 0 !important; }
.cc-avatar--sm { width: 32px !important; height: 32px !important; border-radius: 6px !important; font-size: 11px !important; }
.cc-avatar--md { width: 40px !important; height: 40px !important; border-radius: 8px !important; font-size: 13px !important; }
.cc-avatar--lg { width: 44px !important; height: 44px !important; border-radius: 9px !important; font-size: 15px !important; }

.cc-meta-block       { font-size: var(--text-sm,12.5px) !important; color: var(--text-muted) !important; line-height: 1.8 !important; }
.cc-meta-block > div { color: var(--text-muted) !important; font-size: var(--text-sm,12.5px) !important; }

/* ── Stat / KPI cards ── */
.stat-card::before  { z-index: 2 !important; }
.crm-kpi-head > span { font-size: var(--text-xs,11px) !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: var(--text-muted) !important; }
.crm-kpi-value { font-size: 1.4rem !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: var(--text-primary) !important; font-variant-numeric: tabular-nums; }
.crm-kpi-sub   { font-size: var(--text-xs,11px) !important; color: var(--text-muted) !important; font-weight: 500 !important; }

/* ── Task card accent bar ── */
.task-card::before { z-index: 2 !important; border-radius: 3px 0 0 3px !important; }
.task-card-title   { font-size: var(--text-base,13.5px) !important; font-weight: 700 !important; }
.task-card-desc    { font-size: var(--text-sm,12.5px) !important; }
.task-priority     { font-size: var(--text-xs,11px) !important; font-weight: 800 !important; }
.task-due          { font-size: var(--text-xs,11px) !important; }
.task-assignee     { font-size: var(--text-xs,11px) !important; }

/* ── Quotation card typography ── */
.quot-card-qno    { font-size: var(--text-xs,11px) !important; font-weight: 700 !important; }
.quot-card-client { font-size: var(--text-base,13.5px) !important; font-weight: 700 !important; }
.quot-card-meta   { font-size: var(--text-xs,11px) !important; }
.quot-card-amount { font-size: var(--text-sm,12.5px) !important; font-weight: 800 !important; }