/* chat-bootstrap.css - Clean layout for dedicated chat interface */

/* Import your existing base.css variables - this file should be loaded AFTER base.css */

/* Chat layout - no need for complex overrides since we use dedicated layout */
body.d-flex.flex-column {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

/* Clean header styling */
header#top {
  flex-shrink: 0 !important; /* Never shrink the header */
  padding: 0 !important; /* Remove extra padding from header */
}

header#top .navbar {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.sticky-bottom {
  flex-shrink: 0 !important; /* Never shrink the sticky footer */
}

/* Main content area - let Bootstrap handle sizing */
main.flex-grow-1 {
  /* Let Bootstrap flex-grow-1 handle sizing completely */
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important; /* Allow flex children to shrink properly */
  overflow: hidden !important;
}

/* Ensure the row fills the main area */
main > .row {
  flex: 1 1 auto;
  min-height: 0; /* Allow proper flex shrinking */
}

/* Chat-specific enhancements using your existing color system */
.chat-message {
  word-wrap: break-word;
  overflow-wrap: break-word;
  border-left: 3px solid transparent;
  transition: border-left-color 0.2s ease;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

.chat-message:hover {
  border-left-color: var(--color-rosie-pink);
}

/* Console styling that complements your theme system */
.console {
  font-family: "Courier New", monospace;
  background-color: var(--color-bg-light);
  color: var(--kpi-health-primary);
  line-height: 1.4;
  /* border-radius: 0.25rem; */
  border-radius: 0.375rem;
  padding: 0.5rem;
  display: block !important; /* Force console logs to be visible */
}

/* Hide events log by default until it has content */
.events-log {
  display: none !important;
}

.events-log:not(:empty) {
  display: block !important;
}

[data-bs-theme="dark"] .console {
  background-color: #1a1a1a;
  color: var(--kpi-health-primary);
}

/* Dashboard widget styling using your KPI variables - updated for Bootstrap cards */
.dashboard-widget {
  /* Remove fixed min-height to allow content-based sizing */
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  margin-bottom: 1rem;
  /* Bootstrap card handles padding, border-radius, and borders */
  height: auto !important; /* Override h-100 class for responsive sizing */
  display: flex;
  flex-direction: column;
}

.dashboard-widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: var(--color-rosie-pink, #e75480) !important;
}

.dashboard-widget.secondary-widget {
  border-left: 4px solid var(--bs-secondary);
  background: var(--bs-secondary-bg);
}

/* Responsive chat adjustments that complement your base responsive rules */
@media (max-width: 992px) {
  .btn-group-sm .btn {
    padding: 0.125rem 0.25rem;
    font-size: 0.875rem;
  }

  /* Stack columns on tablets - ensure full width */
  .col-lg-6 {
    margin-bottom: 1rem;
    flex: 0 0 100% !important; /* Force full width on smaller screens */
    max-width: 100% !important;
  }

  /* Adjust body height for mobile */
  body.d-flex.flex-column.min-vh-100 {
    height: 100vh;
    overflow-x: auto; /* Allow horizontal scroll if needed */
  }

  /* Reduce header padding on smaller screens */
  header.bg-white.shadow-sm {
    padding: 0.25rem 0 !important;
  }

  .njk-heading {
    font-size: 1.1rem !important;
  }
}

@media (max-width: 576px) {
  .btn-group-sm .btn {
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
  }

  /* Smaller padding on mobile */
  .card-body {
    padding: 0.75rem;
  }

  /* Ensure message input row doesn't break on small screens */
  .col-auto {
    flex: 0 0 auto;
    max-width: none;
  }

  /* Make input buttons stack properly on very small screens */
  .btn-group {
    flex-wrap: wrap;
  }

  /* Ensure form row doesn't overflow */
  .row.g-2.align-items-center {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
}

/* Smooth animations for tab transitions */
.tab-pane {
  transition: opacity 0.15s ease-in-out;
}

/* Focus states that enhance your existing focus system */
/* #message-input:focus {
  border-color: var(--color-rosie-pink);
  box-shadow: 0 0 0 0.25rem rgba(231, 84, 128, 0.25);
} */

/* Container properties for chat interface - minimal overrides, let Bootstrap work */
#chat-container,
#dashboard-container,
#events-container {
  /* Let Bootstrap overflow-auto and flex-grow-1 classes handle sizing */
  scroll-behavior: smooth;
  scrollbar-width: thin; /* Thin scrollbars on Firefox */
}

/* Webkit scrollbar styling for containers */
#chat-container::-webkit-scrollbar,
#dashboard-container::-webkit-scrollbar,
#events-container::-webkit-scrollbar {
  width: 8px;
}

#chat-container::-webkit-scrollbar-track,
#dashboard-container::-webkit-scrollbar-track,
#events-container::-webkit-scrollbar-track {
  background: transparent;
}

#chat-container::-webkit-scrollbar-thumb,
#dashboard-container::-webkit-scrollbar-thumb,
#events-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

#chat-container::-webkit-scrollbar-thumb:hover,
#dashboard-container::-webkit-scrollbar-thumb:hover,
#events-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Ensure cards fill their container height */
.card.h-100 {
  height: 100% !important;
}

/* Make sure card bodies grow properly */
.card-body.d-flex.flex-column {
  flex: 1 1 auto;
}

/* Dashboard widget content responsive sizing */
.dashboard-widget .card-body {
  /* Remove max-height constraints to allow content growth */
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  flex: 1 1 auto;

  /* Remove forced scrolling */
  overflow-y: visible;
}

/* Specific styling for sources table widget */
.dashboard-widget .sources-table {
  /* Remove height constraints from tables */
  height: auto;
}

/* Widget content containers should be responsive */
.widget-content {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  flex: 1 1 auto;
}

/* Chartjs containers in widgets should be responsive */
.dashboard-widget .chartjs-holder {
  /* Let chart determine its own height based on content */
  height: auto !important;
  min-height: 200px; /* Reasonable minimum for readability */
}

/* Table containers should expand to fit content */
.dashboard-widget .table-responsive,
.dashboard-widget .events-sources {
  max-height: none !important;
  overflow-x: auto; /* Horizontal scroll for wide tables */
  overflow-y: visible; /* No vertical scroll constraint */
}

/* Sources table widget responsive width expansion */
#widget-sources-table {
  /* Allow sources table to expand wider when content needs it */
  flex: 1 1 calc(60% - 0.5rem); /* Take more space by default */
  min-width: 350px; /* Wider minimum for table content */
}

/* If table has many/long sources, expand to full width */
#widget-sources-table:has(.sources-table tbody tr:nth-child(5)) {
  flex: 1 1 100%; /* Take full width when 5+ sources */
}

/* Alternative: Expand based on content width detection */
@container (min-width: 600px) {
  #widget-sources-table {
    flex: 1 1 70%;
  }
}

@container (min-width: 800px) {
  #widget-sources-table {
    flex: 1 1 80%;
  }
}

/* Server-controlled widget sizing classes */
.dashboard-widget.widget-size-full {
  flex: 1 1 100% !important;
}

.dashboard-widget.widget-size-large {
  flex: 1 1 calc(70% - 0.5rem) !important;
}

.dashboard-widget.widget-size-small {
  flex: 1 1 calc(30% - 0.5rem) !important;
  min-width: 250px;
}

/* Let Bootstrap handle row flexbox behavior naturally */

.h-100 {
  max-height: 100%;
}

/* Only hide overflow on containers that shouldn't scroll */
.h-100:not(#chat-container):not(#dashboard-container):not(#events-container) {
  overflow: hidden;
}

.card.h-100 {
  display: flex;
  flex-direction: column;
}

.card-body.d-flex.flex-column {
  flex: 1 1 auto;
}

/* Hide overflow on card bodies by default, but override for specific containers */
.card-body.d-flex.flex-column {
  overflow: hidden;
}

/* Let Bootstrap handle container sizing with h-100 and flex classes */
/* Remove hardcoded overrides and trust Bootstrap */

/* Copy button styling using your button system */
.copyBtn {
  /* color: var(--color-rosie-pink); */
  transition: color 0.2s ease;
  background: none;
  border: none;
  padding: 0.25rem;
}

.copyBtn:hover {
  color: var(--color-rosie-pink-hover);
}

/* Dark mode enhancements for existing elements */
[data-bs-theme="dark"] .card {
  background-color: var(--color-bg-light);
  border-color: var(--color-border);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--color-bg-light);
  border-color: var(--color-border);
  /* color: var(--color-rosie-pink); */
}

/* Fixed bars styling */
#console-bar,
#input-bar {
  backdrop-filter: blur(10px);
  background-color: rgba(var(--bs-body-bg-rgb), 0.95);
}

#chat-console {
  background: transparent;
}

[data-bs-theme="dark"] #chat-console {
  background: transparent;
  color: var(--color-text-primary);
}

/* Ensure proper tab content behavior with consistent height */
.tab-content {
  position: relative;
  height: 100%;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  height: 100%;
}

/* Ensure both tab panes have the same height */
.tab-pane.h-100 {
  min-height: 100%;
}

/* Ensure consistent container heights when active */
#pane-dashboard.active,
#pane-logs.active {
  height: calc(100% - 20px); /* Account for glow margin */
  overflow: visible;
  display: flex;
  flex-direction: column;
}

#chat-container,
#dashboard-container,
#events-container {
  height: auto;
  min-height: 400px; /* Set reasonable minimum height */
  max-height: none; /* Remove height constraint */
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  /* Ensure scroll bars are visible when content overflows */
  scrollbar-width: thin;
}

/* Apply containment only to dashboard and events containers to prevent widget overflow */
#dashboard-container,
#events-container {
  contain: layout;
}

/* Let Bootstrap handle viewport sizing */
@media (min-width: 992px) {
  /* Bootstrap responsive classes handle layout */

  /* Keep offcanvas and modal positioning */
  .offcanvas {
    position: fixed;
  }

  .modal {
    position: fixed;
  }
}

/* Responsive scrolling adjustments */
@media (max-height: 600px) {
  body.d-flex.flex-column {
    min-height: 100vh;
    height: auto;
  }

  main {
    min-height: calc(100vh - 140px); /* Account for header and footer */
  }
}

/* On mobile, ensure page can scroll when content exceeds viewport */
@media (max-width: 768px) {
  body.d-flex.flex-column {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
  }

  .sticky-bottom {
    position: relative !important; /* Remove sticky positioning on mobile */
  }
}

/* Ensure consistent header heights between chat and dashboard/logs */
.card-header {
  min-height: 60px;
  display: flex;
  align-items: center;
}

/* Match the session key header height with dashboard/logs tabs */
#chat-container-col .card-header {
  min-height: 60px;
}

#dashboard-container-col .card-header {
  min-height: 60px;
}

/* Remove custom border styling - will use Bootstrap utility classes in HTML */

/* #chat-container-col .card .card-body {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
} */

/* [data-bs-theme="dark"] #chat-container-col .card {
  background-color: var(--color-bg-light);
  border-color: var(--color-border);
  border-left-color: var(--color-rosie-pink);
} */

/* Settings strip styling that integrates with your card system */
.chat-settings-strip,
.events-tabs-header {
  /* Use Bootstrap card styling instead of custom borders */
  background: var(--navbar-bg-color);
  border: 1px solid var(--color-border);
}

[data-bs-theme="dark"] .chat-settings-strip,
[data-bs-theme="dark"] .events-tabs-header {
  background: var(--navbar-bg-color);
  border-color: var(--color-border);
}

/* Heartbeat glow animation for dashboard/logs container */
.glow {
  animation: heartbeat-glow-shadow 2s ease-in-out infinite;
  border-radius: 0.5rem !important; /* rounded-2 equivalent */
  /* Box-shadow based glow - no layout disruption */
  box-shadow: 0 0 20px rgba(231, 84, 128, 0.6),
              0 0 40px rgba(231, 84, 128, 0.3),
              inset 0 0 0 2px var(--color-rosie-pink, #e75480);
}

/* Prevent glow clipping on specific parent containers - but allow content scrolling */
.container-fluid,
.tab-content {
  overflow: visible !important;
}

/* Allow dashboard containers to scroll while preserving glow visibility */
#dashboard-container-col,
.dashboard-container-col {
  overflow: visible; /* Don't use !important to allow content scrolling when needed */
}

/* Box-shadow glow applied directly to tab-pane - no layout disruption */

/* Ensure parent containers don't clip the tab-pane glow - more compatible approach */
#dashboard-container .tab-content {
  overflow: visible !important;
  /* Add padding when glow is active - will be controlled by JS */
}

/* Dashboard container itself should still allow scrolling */
#dashboard-container {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#dashboard-container .card-body {
  overflow-y: auto !important;
  overflow-x: visible; /* Allow glow to extend horizontally */
}

/* Box-shadow glow doesn't require parent container modifications */

/* Ensure tab panes can accommodate larger responsive content */
.tab-pane {
  overflow-y: auto;
  overflow-x: visible; /* Allow glow to extend horizontally */
  /* Remove restrictive max-height - let content determine height */
  flex: 1 1 auto;
  min-height: 0;
}

@keyframes heartbeat-glow-shadow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(231, 84, 128, 0.3),
                0 0 16px rgba(231, 84, 128, 0.15),
                inset 0 0 0 2px rgba(231, 84, 128, 0.6);
  }
  50% {
    box-shadow: 0 0 16px rgba(231, 84, 128, 0.5),
                0 0 32px rgba(231, 84, 128, 0.3),
                inset 0 0 0 2px var(--color-rosie-pink, #e75480);
  }
}

/* Enhanced input validation states */
.border-warning {
  border-color: #ffc107 !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

.border-danger {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.border-success {
  border-color: #198754 !important;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

/* Smooth container visibility transitions */
.container-transition {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.container-hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.container-expanded {
  flex: 1 1 100% !important;
}

/* Dashboard widget responsive stacking */
.dashboard-widgets {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  /* Remove min-height constraint to allow content-based sizing */
  width: 100%;
  align-items: flex-start; /* Prevent widgets from stretching to match tallest */
}

.dashboard-widget {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 250px;
  /* Remove min-height constraint for content-responsive sizing */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 1rem;
  height: auto !important; /* Allow content to determine height */
  align-self: flex-start; /* Prevent stretching to match tallest widget */
}

@media (max-width: 768px) {
  .dashboard-widget {
    flex: 1 1 100%;
  }
}

@media (max-width: 576px) {
  .dashboard-widgets {
    gap: 0.5rem;
  }

  /* Dashboard widgets use Bootstrap card styling on small screens */
}

/* Session key navigation styling */
.session-key-nav {
  position: relative;
}

.session-key-nav .nav-arrows {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
}

.session-key-nav .nav-arrow {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 10px;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.15s ease;
}

.session-key-nav .nav-arrow:hover {
  background-color: var(--color-bg-light);
  color: var(--color-rosie-pink);
}

.session-key-nav .nav-arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Chat input styling - let Bootstrap handle positioning naturally */
.sticky-bottom {
  background: var(--navbar-bg-color);
  border-top: 1px solid var(--color-border);
}

[data-bs-theme="dark"] .sticky-bottom {
  background: var(--navbar-bg-color);
  border-color: var(--color-border);
}

/* Confidence widget styling - Base agnostic styles */
.confidence-display {
  /* Base styles that work in any context - using flex layout */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.confidence-value {
  font-weight: bold;
  text-align: center;
  display: block;
}

.confidence-progress {
  margin: 0 auto;
  display: block;
  width: 85%; /* Default width for progress container */
  height: 8px; /* Ensure minimum height */
  background-color: rgba(0, 0, 0, 0.15); /* Darker track for light theme */
  border-radius: 0.375rem;
  overflow: hidden; /* Ensure smooth edges */
}

.confidence-progress .progress-bar {
  border-radius: 0.375rem;
  transition: width 0.6s ease;
  height: 100%; /* Fill the full height */
  display: flex;
  align-items: center;
}

/* Dark theme adjustments */
[data-bs-theme="dark"] .confidence-progress {
  background-color: rgba(
    255,
    255,
    255,
    0.15
  ); /* Lighter track for dark theme */
}

/* Dashboard context - wider progress bar */
.dashboard-widget .confidence-progress {
  width: 90%;
  margin-bottom: 1.25rem; /* Better spacing */
}

/* Events context - slightly narrower */
.events-answer-confidence-wrapper .confidence-progress {
  width: 80%;
}

/* Dashboard-specific improvements for better KPI design */
.dashboard-widget .confidence-display {
  padding: 0.5rem 0;
}

.dashboard-widget .confidence-value {
  font-size: 2.5rem; /* Slightly larger for impact */
  margin-bottom: 0.75rem;
  font-weight: 700; /* Bolder */
}

.dashboard-widget .confidence-details {
  margin-top: 1.5rem; /* More breathing room */
  font-size: 0.875rem; /* Slightly larger supporting text */
  gap: 1rem; /* Better spacing between items */
}

.dashboard-widget .confidence-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  opacity: 0.8; /* Subtle supporting text */
}

/* Ensure badge has proper spacing */
.confidence-display .badge {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem; /* Better padding */
}

.confidence-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.confidence-level,
.confidence-sources {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.confidence-note {
  margin-top: 0.5rem;
}

/* ========== LOGS TAB STANDARDIZED COMPONENTS ========== */

/* Base styling for all logs components */
.events-answer-confidence-wrapper,
.events-chart-wrapper,
.events-table-wrapper {
  margin: 1rem 0;
  display: flex;
  justify-content: center;
}

/* Standardized card styling for all logs components */
.confidence-card,
.events-chart-card,
.events-table-card {
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
  background: var(--bs-card-bg, #fff);
  width: 100%;
  max-width: 600px; /* Consistent max width */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Standardized card headers */
.confidence-card .card-header,
.events-chart-card .card-header,
.events-table-card .card-header {
  background: var(--bs-card-cap-bg, rgba(0, 0, 0, 0.03));
  border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Standardized card bodies */
.confidence-card .card-body,
.events-chart-card .card-body,
.events-table-card .card-body {
  background: transparent;
  border: none;
  padding: 1rem;
}

/* Dark theme adjustments for all events cards */
[data-bs-theme="dark"] .confidence-card,
[data-bs-theme="dark"] .events-chart-card,
[data-bs-theme="dark"] .events-table-card {
  background: var(--bs-dark, #212529);
  border-color: var(--bs-border-color-translucent, rgba(255, 255, 255, 0.125));
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .confidence-card .card-header,
[data-bs-theme="dark"] .events-chart-card .card-header,
[data-bs-theme="dark"] .events-table-card .card-header {
  background: rgba(255, 255, 255, 0.05);
  border-bottom-color: var(
    --bs-border-color-translucent,
    rgba(255, 255, 255, 0.125)
  );
}

/* Ensure consistent spacing for table content */
.events-table-card table {
  margin-bottom: 0;
}

.events-table-card .table th,
.events-table-card .table td {
  border-color: var(--bs-border-color, rgba(0, 0, 0, 0.125));
  padding: 0.5rem 0.75rem;
}

[data-bs-theme="dark"] .events-table-card .table th,
[data-bs-theme="dark"] .events-table-card .table td {
  border-color: var(--bs-border-color-translucent, rgba(255, 255, 255, 0.125));
}

/* Chart container styling */
.events-chart-card .chartjs-holder {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confidence-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Dashboard widget context */
.dashboard-widget .confidence-title {
  display: none; /* Title already in widget header */
}

.dashboard-widget .confidence-display {
  text-align: center;
}

/* Accent color styling */
.accent-success {
  color: #198754 !important;
}

.progress-bar.accent-success {
  background-color: #198754 !important;
}

.accent-warning {
  color: #ffc107 !important;
}

.progress-bar.accent-warning {
  background-color: #ffc107 !important;
}

.accent-danger {
  color: #dc3545 !important;
}

.progress-bar.accent-danger {
  background-color: #dc3545 !important;
}

.accent-success.badge,
.accent-warning.badge,
.accent-danger.badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  display: block;
  text-align: center;
  margin-top: 0.5rem;
}

.accent-success.badge {
  background-color: rgba(25, 135, 84, 0.15) !important;
  color: #198754 !important;
}

.accent-warning.badge {
  background-color: rgba(255, 193, 7, 0.15) !important;
  color: #ffc107 !important;
}

.accent-danger.badge {
  background-color: rgba(220, 53, 69, 0.15) !important;
  color: #dc3545 !important;
}

/* ========== STICKY BOTTOM LAYOUT FIXES ========== */

/* Calculate proper heights accounting for sticky-bottom */
:root {
  --sticky-bottom-height: 180px; /* Approximate height of sticky-bottom section */
}

/* Bootstrap handles all main layout sizing */

/* Let Bootstrap handle dashboard and events container heights */
#dashboard-container,
#events-container {
  /* Bootstrap flex classes handle sizing */
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Tab pane and card body sizing */
.tab-pane.h-100 {
  overflow-y: auto;
  overflow-x: visible; /* Preserve glow visibility */
}

.card-body.d-flex.flex-column .tab-content {
  overflow-y: auto;
}

/* Additional responsive adjustments as needed */

/* ========== KPI DRAWER STYLING ========== */

.kpi-drawer {
  border-top: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  transition: all 0.3s ease;
  min-height: 50px;
}

.kpi-section {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: rgba(var(--bs-body-color-rgb), 0.03);
  border: 1px solid rgba(var(--bs-border-color-rgb), 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  align-items: center;
}

.kpi-section:hover {
  background: rgba(231, 84, 128, 0.1);
  border-color: var(--color-rosie-pink, #e75480);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(231, 84, 128, 0.15);
}

.kpi-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-values {
  font-family: 'Courier New', monospace;
}

.kpi-chart-container {
  position: relative;
  overflow: hidden;
  border-radius: 0.25rem;
}

.kpi-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.kpi-bar-label {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Status icon colors */
.kpi-status .bi-circle-fill.text-success {
  color: #198754 !important;
}

.kpi-status .bi-circle-fill.text-warning {
  color: #ffc107 !important;
}

.kpi-status .bi-circle-fill.text-danger {
  color: #dc3545 !important;
}

.kpi-status .bi-circle-fill.text-secondary {
  color: #6c757d !important;
}

/* Dark theme adjustments */
[data-bs-theme="dark"] .kpi-drawer {
  background: var(--bs-dark);
  border-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .kpi-section {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .kpi-section:hover {
  background: rgba(231, 84, 128, 0.2);
  border-color: var(--color-rosie-pink, #e75480);
  box-shadow: 0 2px 8px rgba(231, 84, 128, 0.25);
}

/* Responsive adjustments for KPI drawer */
@media (max-width: 992px) {
  .kpi-drawer .col-lg-3,
  .kpi-drawer .col-lg-4,
  .kpi-drawer .col-lg-5 {
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 768px) {
  .kpi-drawer {
    padding: 0.25rem 0;
  }

  .kpi-section {
    padding: 0.25rem;
  }

  .kpi-chart-container {
    height: 30px !important;
  }

  .kpi-chart-container canvas {
    height: 30px !important;
  }
}

/* ========== ANIMATION CLASSES ========== */

/* Spin animation for Bootstrap icons */
@keyframes fa-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.fa-spin {
  animation: fa-spin 1s infinite linear;
}

/* ========== IMPROVED STICKY BOTTOM STYLING ========== */

/* Enhanced sticky bottom with unified background and shadow */
.sticky-bottom {
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color-translucent);
}

/* Subtle separator for console section */
.border-opacity-25 {
  border-color: var(--bs-border-color) !important;
  border-opacity: 0.25 !important;
}

/* ========== MINIMAL KPI STATUS LINE ========== */

.kpi-minimal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 0.875rem;
}

.kpi-duration span {
  font-weight: 600;
}

.kpi-separator {
  color: var(--bs-secondary);
  font-weight: 300;
  opacity: 0.6;
}

.kpi-status-inline {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.kpi-status-inline i {
  font-size: 0.6rem;
  flex-shrink: 0;
}

.kpi-status-inline span {
  font-weight: 500;
}

/* ========== KPI SOURCES HORIZONTAL BAR CHART ========== */

.kpi-sources-bars {
  padding: 0.5rem;
}

.sources-bars-container {
  display: flex;
  flex-direction: row;
  gap: 1px;
  height: 20px;
  overflow: hidden;
  background: var(--bs-border-color-translucent);
  border-radius: 2px;
}

.sources-bar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.75rem;
}

.sources-bar {
  height: 100%;
  border-radius: 2px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 4px;
  min-width: 8px;
}

.sources-bar:hover {
  transform: scaleY(1.1);
  filter: brightness(1.1);
  z-index: 1;
}

.sources-bar-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Default colors for sources - based on common source types */
.sources-bar[data-source-index="0"] { background: hsl(0, 70%, 60%); }
.sources-bar[data-source-index="1"] { background: hsl(120, 70%, 60%); }
.sources-bar[data-source-index="2"] { background: hsl(240, 70%, 60%); }
.sources-bar[data-source-index="3"] { background: hsl(60, 70%, 60%); }
.sources-bar[data-source-index="4"] { background: hsl(300, 70%, 60%); }
.sources-bar[data-source-index="5"] { background: hsl(180, 70%, 60%); }

/* ========== KPI QUERY TOTALS ========== */

.kpi-query-totals {
  padding: 0.5rem;
}

.query-totals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

.query-total-item {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.query-total-item:hover {
  transform: translateY(-1px);
}

.query-total-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--bs-secondary);
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 0.125rem;
}

.query-total-value {
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bs-body-color);
}

.query-total-value.roc {
  color: hsl(140, 70%, 45%);
}

.query-total-value.ipr {
  color: hsl(210, 70%, 45%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .query-totals-grid {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .query-total-value {
    font-size: 0.7rem;
  }
}

/* ========== ROSIE THEME POPOVERS ========== */
.popover {
  --bs-popover-border-color: #0d6efd;
}

/* ========== WAITING PLACEHOLDER STYLES ========== */
.waiting-placeholder {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.waiting-placeholder i {
  opacity: 0.5;
}

/* ========== SOURCE CARDS STYLING ========== */
.source-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border-left: 3px solid var(--bs-secondary);
}

.source-card:hover {
  transform: translateX(4px);
  border-left-color: var(--color-rosie-pink, #e75480);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.source-card .source-link {
  color: var(--bs-link-color);
  text-decoration: none;
}

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

.source-card .contributor-badge {
  color: var(--bs-secondary);
}

.source-card .source-rank {
  font-weight: 600;
  color: var(--bs-secondary);
}

/* Source relevance progress bar */
.source-card .relevance-bar {
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}

.source-card .relevance-bar .progress-bar {
  transition: width 0.4s ease;
}

/* Dublin Core metadata styling */
.source-card .dublin-core-meta {
  font-size: 0.75rem;
  color: var(--bs-secondary);
}

.source-card .dublin-core-meta dt {
  font-weight: 600;
}

.source-card .dublin-core-meta dd {
  margin-bottom: 0.25rem;
}

/* Dark theme adjustments for source cards */
[data-bs-theme="dark"] .source-card {
  border-left-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .source-card:hover {
  border-left-color: var(--color-rosie-pink, #e75480);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ========== TRANSACTION WIDGET STYLING ========== */
.transaction-summary {
  font-size: 0.875rem;
}

.transaction-summary .transaction-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.transaction-summary .transaction-row:last-child {
  border-bottom: none;
  font-weight: 600;
}

.transaction-summary .transaction-label {
  color: var(--bs-secondary);
}

.transaction-summary .transaction-value {
  font-family: 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
}

.transaction-summary .transaction-value.cost {
  color: var(--bs-success);
}

.transaction-summary .transaction-value.tokens {
  color: var(--bs-info);
}

/* ========== SOURCES CONTAINER STYLING ========== */
#sources-container {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

#sources-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}