/* Guiadeo Dashboard - Custom Styles */
/* Tailwind is loaded via CDN in index.html */

/* ------------------------------------------------------------------ */
/* Tab buttons                                                        */
/* ------------------------------------------------------------------ */

.tab-btn,
.nav-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #9ca3af;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.tab-btn:hover,
.nav-tab:hover {
  color: #d1d5db;
}

.tab-btn.active,
.nav-tab.active {
  color: var(--primary-400, #59b0ff);
  border-bottom-color: var(--primary-400, #59b0ff);
}

/* ------------------------------------------------------------------ */
/* Metric cards                                                       */
/* ------------------------------------------------------------------ */

.card {
  background: #161822;     /* surface-800 */
  border: 1px solid #272b3d; /* surface-600 */
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.card-icon {
  margin-bottom: 0.25rem;
}

.card-label {
  font-size: 0.75rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f3f4f6;
}

/* ------------------------------------------------------------------ */
/* Status badges                                                      */
/* ------------------------------------------------------------------ */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.status-badge.connected {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.status-badge.disconnected {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.status-badge.running {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.status-badge.loading {
  background: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
}

/* ------------------------------------------------------------------ */
/* Plan distribution bars                                             */
/* ------------------------------------------------------------------ */

.plan-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.plan-name {
  flex-shrink: 0;
  width: 40%;
  font-size: 0.8125rem;
  color: #d1d5db;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-bar-bg {
  flex-grow: 1;
  height: 0.5rem;
  background: #272b3d;
  border-radius: 9999px;
  overflow: hidden;
}

.plan-bar-fill {
  height: 100%;
  background: var(--primary-500, #338dff);
  border-radius: 9999px;
  transition: width 0.5s ease;
}

.plan-count {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: #9ca3af;
  min-width: 2rem;
  text-align: right;
}

/* ------------------------------------------------------------------ */
/* Lead status badges                                                 */
/* ------------------------------------------------------------------ */

.lead-status {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.lead-status.new        { background: rgba(59,130,246,0.15); color: #60a5fa; }
.lead-status.contacted  { background: rgba(234,179,8,0.15);  color: #facc15; }
.lead-status.responded  { background: rgba(34,197,94,0.15);  color: #4ade80; }
.lead-status.converted  { background: rgba(168,85,247,0.15); color: #c084fc; }
.lead-status.rejected   { background: rgba(239,68,68,0.15);  color: #f87171; }

/* ------------------------------------------------------------------ */
/* Error banner                                                       */
/* ------------------------------------------------------------------ */

.error-banner {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  color: #fca5a5;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Skeleton loading pulse                                             */
/* ------------------------------------------------------------------ */

@keyframes pulse-dim {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

.skeleton {
  animation: pulse-dim 1.5s ease-in-out infinite;
}

/* ------------------------------------------------------------------ */
/* Light theme                                                        */
/* ------------------------------------------------------------------ */

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

html:not(.dark) body {
  background-color: #f8fafc;
  color: #111827;
}

html:not(.dark) .bg-surface-900 { background-color: #f8fafc; }
html:not(.dark) .bg-surface-800 { background-color: #f1f5f9; }
html:not(.dark) .bg-surface-700 { background-color: #e2e8f0; }
html:not(.dark) .bg-surface-600 { background-color: #cbd5e1; }
html:not(.dark) .bg-surface-500 { background-color: #94a3b8; }
html:not(.dark) .text-gray-100 { color: #111827; }
html:not(.dark) .text-gray-300 { color: #6b7280; }
html:not(.dark) .text-gray-400 { color: #9ca3af; }
html:not(.dark) .text-gray-500 { color: #6b7280; }

html:not(.dark) .border-surface-600 { border-color: #cbd5e1; }
html:not(.dark) .border-surface-500 { border-color: #94a3b8; }

html:not(.dark) .tab-btn,
html:not(.dark) .nav-tab {
  color: #6b7280;
}

html:not(.dark) .tab-btn:hover,
html:not(.dark) .nav-tab:hover {
  color: #111827;
}

html:not(.dark) ::-webkit-scrollbar-track { background: #f1f5f9; }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #cbd5e1; }

html:not(.dark) .card {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

html:not(.dark) .autocomplete-dropdown {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

html:not(.dark) .autocomplete-item {
  border-color: rgba(203, 213, 225, 0.5);
}

html:not(.dark) .autocomplete-item:hover,
html:not(.dark) .autocomplete-item.active {
  background: #e2e8f0;
}

html:not(.dark) .kanban-column {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

html:not(.dark) .kanban-column-header {
  border-color: #cbd5e1;
  color: #111827;
}

html:not(.dark) .kanban-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

html:not(.dark) .status-badge.connected {
  background: rgba(34, 197, 94, 0.15);
  color: #059669;
}

html:not(.dark) .status-badge.disconnected {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

/* ------------------------------------------------------------------ */
/* Sidebar layout                                                     */
/* ------------------------------------------------------------------ */

nav.sidebar-left {
  position: fixed;
  left: 0;
  top: 0;
  width: 24rem;
  height: 100vh;
  flex-direction: column;
  z-index: 40;
  overflow-y: auto;
  padding-top: 3.5rem;
}

nav.sidebar-left .max-w-7xl {
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

nav.sidebar-left .nav-tab {
  padding: 0.75rem 1.25rem;
  justify-content: flex-start;
  border-bottom: none;
  border-left: 2px solid transparent;
  width: 100%;
}

nav.sidebar-left .nav-tab.active {
  border-left-color: var(--primary-400, #59b0ff);
  border-bottom-color: transparent;
}

nav.sidebar-right {
  position: fixed;
  right: 0;
  top: 0;
  width: 24rem;
  height: 100vh;
  flex-direction: column;
  z-index: 40;
  overflow-y: auto;
  padding-top: 3.5rem;
}

nav.sidebar-right .max-w-7xl {
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

nav.sidebar-right .nav-tab {
  padding: 0.75rem 1.25rem;
  justify-content: flex-start;
  border-bottom: none;
  border-right: 2px solid transparent;
  width: 100%;
}

nav.sidebar-right .nav-tab.active {
  border-right-color: var(--primary-400, #59b0ff);
  border-bottom-color: transparent;
}

/* ------------------------------------------------------------------ */
/* CSS Variables for colors                                           */
/* ------------------------------------------------------------------ */

:root {
  --primary-400: #59b0ff;
  --primary-500: #338dff;
  --primary-600: #1a6df5;
}

/* ------------------------------------------------------------------ */
/* Preferences Panel                                                  */
/* ------------------------------------------------------------------ */

#prefs-panel {
  box-shadow: -4px 0 6px rgba(0, 0, 0, 0.3);
}

html:not(.dark) #prefs-panel {
  background: #f1f5f9;
  border-color: #e2e8f0;
  box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1);
}

#prefs-panel input[type="radio"],
#prefs-panel input[type="checkbox"] {
  accent-color: var(--primary-500, #338dff);
}

html:not(.dark) #prefs-panel input[type="radio"],
html:not(.dark) #prefs-panel input[type="checkbox"] {
  accent-color: var(--primary-500, #338dff);
}

#prefs-panel select,
#prefs-panel input[type="text"] {
  accent-color: var(--primary-500, #338dff);
}

html:not(.dark) #prefs-panel select,
html:not(.dark) #prefs-panel input[type="text"] {
  background-color: #ffffff;
  border-color: #e2e8f0;
  color: #111827;
}

html:not(.dark) #prefs-panel h2,
html:not(.dark) #prefs-panel h3 {
  color: #111827;
}

html:not(.dark) #prefs-panel label span {
  color: #6b7280;
}

html:not(.dark) #prefs-overlay {
  background: rgba(0, 0, 0, 0.3);
}

.pref-color-btn {
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pref-color-btn:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ------------------------------------------------------------------ */
/* Responsive tweaks                                                  */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
  .card-value {
    font-size: 1.25rem;
  }
  .card {
    padding: 1rem;
  }
  nav.sidebar-left,
  nav.sidebar-right {
    width: 16rem;
    z-index: 40;
  }
  main.ml-96 { margin-left: 0; }
  main.mr-96 { margin-right: 0; }
  #prefs-panel {
    width: 20rem;
  }
}