/* Customer 360 Admin -- small CSS additions on top of the Tailwind CDN build.
 * Kept separate from index.html so styling tweaks don't require touching markup. */

:root {
  --c360-bg: #f8fafc;
  --c360-text: #1e293b;
  --c360-muted: #64748b;
  --c360-card: #ffffff;
  --c360-border: #e2e8f0;
  --c360-scroll-thumb: #cbd5e1;
}

html.dark {
  --c360-bg: #0f172a;
  --c360-text: #e2e8f0;
  --c360-muted: #94a3b8;
  --c360-card: #111827;
  --c360-border: #334155;
  --c360-scroll-thumb: #475569;
  color-scheme: dark;
}

html:not(.dark) {
  color-scheme: light;
}

html,
body {
  background: var(--c360-bg);
  color: var(--c360-text);
}

#app {
  background: linear-gradient(180deg, var(--c360-bg) 0%, color-mix(in srgb, var(--c360-bg) 88%, #ffffff 12%) 100%);
}

/*
 * Dark-theme compatibility layer:
 * most templates currently use light-only Tailwind utility classes.
 * These overrides remap the shared utility palette when html.dark is active.
 */
html.dark .bg-white { background-color: var(--c360-card) !important; }
html.c360-theme-dark #identity-details-card {
  background-color: var(--c360-card) !important;
  border-color: var(--c360-border) !important;
}
html.c360-theme-dark #identity-details-card .bg-cyan-50 {
  background-color: rgb(8 47 73 / 0.65) !important;
}
html.c360-theme-dark #identity-details-card .text-cyan-600 {
  color: rgb(125 211 252) !important;
}
html.c360-theme-dark #identity-details-card .border-cyan-100 {
  border-color: rgb(14 116 144 / 0.55) !important;
}
html.c360-theme-dark #identity-details-card .border-cyan-100\/70 {
  border-color: rgb(14 116 144 / 0.45) !important;
}
html.c360-theme-dark #identity-details-card .bg-cyan-50\/60 {
  background-color: rgb(8 47 73 / 0.35) !important;
}
html.c360-theme-dark #identity-details-card .bg-white {
  background-color: rgb(15 23 42) !important;
}
html.c360-theme-dark #identity-details-card .bg-slate-50 {
  background-color: rgb(30 41 59) !important;
}
html.c360-theme-dark #identity-details-card .text-slate-900 {
  color: #f8fafc !important;
}
html.c360-theme-dark #identity-details-card .text-slate-700 {
  color: #e2e8f0 !important;
}
html.c360-theme-dark #identity-details-card .text-slate-500 {
  color: #94a3b8 !important;
}
html.c360-theme-dark #identity-details-card .text-cyan-700 {
  color: rgb(125 211 252) !important;
}
html.c360-theme-dark #identity-details-card .bg-cyan-100 {
  background-color: rgb(22 78 99) !important;
}
html.c360-theme-dark #identity-details-card .group:hover .group-hover\:bg-cyan-50 {
  background-color: rgb(8 47 73 / 0.35) !important;
}
html.c360-theme-dark #identity-details-card .group:hover .group-hover\:bg-cyan-900\/40 {
  background-color: rgb(8 47 73 / 0.7) !important;
}
html.c360-theme-dark #identity-details-card .divide-slate-100\/80 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(51 65 85 / 0.85) !important;
}
html.c360-theme-dark #next-best-action-card {
  background-color: rgb(76 29 149 / 0.25) !important;
  border-color: rgb(139 92 246 / 0.35) !important;
}
html.c360-theme-dark #next-best-action-card .text-violet-700 {
  color: rgb(196 181 253) !important;
}
html.c360-theme-dark #next-best-action-card .border-violet-100\/70 {
  border-color: rgb(139 92 246 / 0.3) !important;
}
html.c360-theme-dark #next-best-action-card .bg-white {
  background-color: rgb(15 23 42) !important;
}
html.c360-theme-dark #next-best-action-card .text-slate-900 {
  color: #f8fafc !important;
}
html.dark .bg-white\/90 { background-color: rgb(17 24 39 / 0.9) !important; }
html.dark .bg-slate-50,
html.dark .bg-slate-50\/30,
html.dark .bg-slate-50\/40,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/80,
html.dark .bg-slate-100 { background-color: #1f2937 !important; }

html.dark .text-slate-900 { color: #f8fafc !important; }
html.dark .text-slate-800,
html.dark .text-slate-700 { color: #e2e8f0 !important; }
html.dark .text-slate-600,
html.dark .text-slate-500 { color: #cbd5e1 !important; }
html.dark .text-slate-400,
html.dark .text-slate-300 { color: #94a3b8 !important; }

html.dark .border-slate-50,
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/60,
html.dark .border-slate-200\/80,
html.dark .border-slate-300 { border-color: var(--c360-border) !important; }

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--c360-border) !important;
}

html.dark .divide-slate-100\/80 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(51 65 85 / 0.85) !important;
}

html.dark .ring-white { --tw-ring-color: rgb(51 65 85 / 0.6) !important; }

html.dark .dtv-cell-link,
html.dark .dtv-cell-link:hover,
html.dark .dtv-action-label,
html.dark .dtv-action-label:hover,
html.dark .dtv-edit-btn,
html.dark .dtv-edit-btn:hover {
  color: #cbd5e1 !important;
}

html.dark .dtv-cell-link:hover,
html.dark .dtv-action-label:hover,
html.dark .dtv-edit-btn:hover {
  color: #f8fafc !important;
}
html.dark .ring-slate-100,
html.dark .ring-indigo-50 { --tw-ring-color: rgb(51 65 85 / 0.55) !important; }

html.dark .hover\:bg-white:hover,
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-50\/60:hover {
  background-color: #334155 !important;
}

html.dark .hover\:border-slate-300:hover {
  border-color: #475569 !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  color: #e2e8f0;
  background-color: #111827;
  border-color: #334155;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8;
}

html.dark code {
  color: #cbd5e1;
  background-color: rgb(15 23 42 / 0.75);
  border-radius: 0.25rem;
  padding: 0.05rem 0.25rem;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--c360-scroll-thumb); border-radius: 9999px; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.spinner {
  border: 3px solid var(--c360-border);
  border-top-color: #4f46e5;
  border-radius: 9999px;
  width: 1.5rem;
  height: 1.5rem;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.tab-btn:hover { color: #4338ca; border-color: #e329ba; cursor: pointer; }

.tab-btn.active { color: #4338ca; border-color: #4338ca; }

html.c360-theme-dark .tab-btn.active { border-color: #f8fafc; }
html.c360-theme-dark .tab-btn:hover { color: #00d32a; border-color: #00d32a; }

/* Left-tab rail on the Profiles list card (Master Profiles / Duplicate
   Profiles) -- static/templates/profile/profiles-list.html. */
.profile-tab-btn { color: #64748b; }
.profile-tab-btn:hover { color: #4338ca; background-color: #eef2ff; cursor: pointer; }
.profile-tab-btn.active { color: #4338ca; background-color: #eef2ff; }
html.c360-theme-dark .profile-tab-btn.active { color: #a5b4fc; background-color: rgba(99, 102, 241, 0.15); }
html.c360-theme-dark .profile-tab-btn:hover { color: #a5b4fc; background-color: rgba(99, 102, 241, 0.15); }

html.c360-theme-dark #btn-back-to-profiles { color: #f8fafc; cursor: pointer; }
html.c360-theme-dark #btn-back-to-profiles:hover { color: #00d32a; }

/* Persona detail sub-view (static/templates/persona/persona-details.html):
   back link + Prev/Next pager still use the light-only indigo palette. */
html.dark #persona-view-category-detail .text-indigo-600 { color: #a5b4fc !important; }
html.dark #persona-view-category-detail .hover\:text-indigo-800:hover { color: #f8fafc !important; }

html.c360-theme-dark .dtv-action-label { color: #00d32a; }
html.c360-theme-dark tr.group:hover .dtv-action-label { color: #00d32a; }

html.c360-theme-dark .dtv-edit-btn,
html.c360-theme-dark .dtv-edit-btn:hover { color: #00d32a; }

.bar-track { background: var(--c360-border); border-radius: 9999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 9999px; }

/* 
 * Matrix heatmap Wrapper
 */
.matrix-heatmap-wrapper { 
    width: 100%; 
    height: 250px; /* Explicit height is mandatory to stop infinite growth */
    position: relative; /* Keeps the canvas bounded strictly within this container */
    margin: 0 auto; 
}