/* HiveMind Resourcing & Growth Dashboard Styles */

/* Color Palette */
:root {
  --hivemind-grd-indigo: #6366F1;
  --hivemind-grd-fuchsia: #F472B6;
  --hivemind-grd-emerald: #22C55E;
  --hivemind-grd-amber: #F59E0B;
  --hivemind-grd-cyan: #06B6D4;
  --hivemind-grd-rose: #EF4444;
  --hivemind-grd-violet: #A78BFA;
  --hivemind-grd-green: #10B981;
  --hivemind-grd-pink: #F472B6;
}

/* Gradient Header */
.hivemind-grd-header {
  background: linear-gradient(135deg, #4F46E5 0%, #D946EF 50%, #FBBF24 100%);
  width: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  display: block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Header Title and Subtitle - matching React specs */
.hivemind-grd-header-title {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 700; /* font-bold */
  margin: 0;
  color: white;
}

@media (min-width: 768px) {
  .hivemind-grd-header-title {
    font-size: 1.875rem; /* text-3xl */
  }
}

.hivemind-grd-header-subtitle {
  font-size: 0.875rem; /* text-sm */
  color: rgba(255, 255, 255, 0.8); /* text-white/80 */
  margin: 0;
}

.hivemind-grd-header .container-fluid {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}

/* Header Stats - using Bootstrap grid with exact spacing */
.hivemind-grd-header .row.mt-4 {
  margin-top: 1rem !important;
  --bs-gutter-x: 1rem; /* gap-4 = 1rem */
  --bs-gutter-y: 0;
}

/* Form input spacing - ensure gap-3 (0.75rem) works */
.hivemind-grd-header .d-flex.gap-3 {
  gap: 0.75rem !important;
}

/* Form input padding - match design specs */
.hivemind-grd-header .form-select-sm {
  padding: 0.375rem 0.75rem !important; /* Match Bootstrap form-select-sm but ensure consistency */
}

/* Auto-refresh container padding */
.hivemind-grd-header .bg-white.bg-opacity-20.rounded-3 {
  padding: 0.5rem 0.75rem !important; /* px-3 py-2 = 0.75rem horizontal, 0.5rem vertical */
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* gap-2 = 0.5rem */
}

/* Ensure form-switch is vertically aligned */
.hivemind-grd-header .bg-white.bg-opacity-20 .form-check {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}

/* Style the switch to be blue when checked */
.hivemind-grd-header .bg-white.bg-opacity-20 .form-check-input:checked {
  background-color: #4338ca !important; /* indigo-700 */
  border-color: #4338ca !important;
}

.hivemind-grd-header .bg-white.bg-opacity-20 .form-check-input {
  border-color: rgba(67, 56, 202, 0.3) !important; /* indigo-700 with opacity */
}

/* Refresh button styling - white background, indigo-700 text, vertical center alignment */
#hivemind-grd-refresh-btn {
  background-color: white !important;
  color: #4338ca !important; /* indigo-700 */
  border-color: white !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

#hivemind-grd-refresh-btn:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #4338ca !important;
}

#hivemind-grd-refresh-btn svg {
  stroke: #4338ca !important; /* indigo-700 */
  fill: none !important;
  margin-right: 0.5rem !important; /* mr-2 = 0.5rem */
  vertical-align: middle !important;
}

/* Rounded-xl utility class */
.hivemind-grd-rounded-xl {
  border-radius: 0.75rem !important; /* rounded-xl = 12px */
}

/* Header Stat Styling */
.hivemind-grd-header-stat {
  color: white;
}

/* Ensure vertical alignment and gap between icon and text */
.hivemind-grd-header-stat > div {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important; /* gap-3 = 0.75rem */
}

.hivemind-grd-header-stat .small {
  font-size: 0.875rem;
  font-weight: 500;
  color: #525252; /* text-neutral-600 */
}

.hivemind-grd-header-stat-value {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  color: white;
  margin: 0;
}

/* Header SVG icons - only apply white stroke to header icon (LayoutGrid), not stat icons */
.hivemind-grd-header {
  color: white;
}

/* Header icon container (LayoutGrid) - rounded-2xl = 1rem */
.hivemind-grd-header-icon-container {
  border-radius: 1rem; /* rounded-2xl */
  background-color: rgba(255, 255, 255, 0.2); /* bg-white/20 */
}

/* Header icon (LayoutGrid) should be white */
.hivemind-grd-header .hivemind-grd-header-icon-container svg {
  stroke: white !important;
  fill: none !important;
  color: white !important;
  display: block;
}

/* Stat icons use tone colors (defined inline in HTML) */
.hivemind-grd-header-stat svg {
  fill: none !important;
  display: block;
  /* Inline stroke colors from HTML should take precedence - no CSS override */
  /* Ensure stroke colors are not overridden by any parent rules */
}

/* Explicitly preserve inline stroke colors for stat icons - override any parent white stroke rules */
.hivemind-grd-header-stat svg[stroke] {
  /* Let inline stroke attribute take precedence - don't override */
}

/* Keep bg-white for form elements (selects, auto-refresh container) */
.hivemind-grd-header .bg-white.bg-opacity-20,
.hivemind-grd-header [class*="bg-white"][class*="opacity"] {
  color: white !important;
}

/* Auto-refresh text should be blue (indigo-700) */
.hivemind-grd-header .bg-white.bg-opacity-20 .small {
  color: #4338ca !important; /* indigo-700 */
}

.hivemind-grd-header .bg-white.bg-opacity-20 svg,
.hivemind-grd-header [class*="bg-white"][class*="opacity"] svg {
  stroke: white !important;
  fill: none !important;
  color: white !important;
  display: block;
}

/* Cards */
.hivemind-grd-card {
  background: rgba(255, 255, 255, 0.9);
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
  .hivemind-grd-card {
    background: rgba(255, 255, 255, 0.95);
  }
}

.hivemind-grd-card-content {
  padding: 1rem;
}

/* Stat Cards */
.hivemind-grd-stat-card {
  background: rgba(255, 255, 255, 0.9);
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 1;
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
  .hivemind-grd-stat-card {
    background: rgba(255, 255, 255, 0.95);
  }
}

.hivemind-grd-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hivemind-grd-stat-card-content {
  padding: 1rem;
}

/* Stat Card Border Colors Based on Status */
.hivemind-grd-stat-card[data-tone="indigo"] {
  border-left: 4px solid var(--hivemind-grd-indigo);
}

.hivemind-grd-stat-card[data-tone="emerald"] {
  border-left: 4px solid var(--hivemind-grd-emerald);
}

.hivemind-grd-stat-card[data-tone="amber"] {
  border-left: 4px solid var(--hivemind-grd-amber);
}

.hivemind-grd-stat-card[data-tone="fuchsia"] {
  border-left: 4px solid var(--hivemind-grd-fuchsia);
}

.hivemind-grd-stat-card[data-tone="rose"] {
  border-left: 4px solid var(--hivemind-grd-rose);
}

.hivemind-grd-stat-card[data-tone="violet"] {
  border-left: 4px solid var(--hivemind-grd-violet);
}

.hivemind-grd-stat-card[data-tone="cyan"] {
  border-left: 4px solid var(--hivemind-grd-cyan);
}

/* Status-based border colors */
.hivemind-grd-stat-card.status-on-track {
  border-left-color: var(--hivemind-grd-emerald) !important;
}

.hivemind-grd-stat-card.status-watch {
  border-left-color: var(--hivemind-grd-amber) !important;
}

.hivemind-grd-stat-card.status-off-track {
  border-left-color: var(--hivemind-grd-rose) !important;
}

/* Icon Background Colors - Matching Tailwind -50 colors */
.hivemind-grd-bg-indigo-50 {
  background-color: #eef2ff;
}

.hivemind-grd-bg-fuchsia-50 {
  background-color: #fdf4ff;
}

.hivemind-grd-bg-emerald-50 {
  background-color: #ecfdf5;
}

.hivemind-grd-bg-amber-50 {
  background-color: #fffbeb;
}

/* Icon Background Colors - Matching Tailwind -100 colors for header stats */
.hivemind-grd-bg-indigo-100 {
  background-color: #eef2ff !important;
  background: #eef2ff !important; /* Ensure no white background */
}

.hivemind-grd-bg-fuchsia-100 {
  background-color: #fdf4ff !important;
  background: #fdf4ff !important; /* Ensure no white background */
}

.hivemind-grd-bg-emerald-100 {
  background-color: #d1fae5 !important;
  background: #d1fae5 !important; /* Ensure no white background */
}

.hivemind-grd-bg-amber-100 {
  background-color: #fef3c7 !important;
  background: #fef3c7 !important; /* Ensure no white background */
}

/* Ensure stat icon containers don't have white backgrounds */
.hivemind-grd-header-stat > div > div:first-child {
  background-color: inherit !important;
  background: inherit !important;
}

/* Text color utilities */
.text-neutral-600 {
  color: #525252;
}

.hivemind-grd-bg-cyan-50 {
  background-color: #ecfeff;
}

.hivemind-grd-bg-rose-50 {
  background-color: #fff1f2;
}

.hivemind-grd-bg-violet-50 {
  background-color: #f5f3ff;
}

/* Progress Bars */
.hivemind-grd-progress-container .progress {
  height: 8px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.05);
}

.hivemind-grd-progress-container .progress-bar {
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Badges */
.hivemind-grd-card .badge,
.hivemind-grd-stat-card .badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

/* Section Titles */
.hivemind-grd-section-title {
  margin-bottom: 1.5rem;
}

.hivemind-grd-section-title .bg-white.bg-opacity-60 {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

.hivemind-grd-section {
  margin-bottom: 3rem;
}

/* Table Styling */
.hivemind-grd-card .table {
  font-size: 0.875rem;
}

.hivemind-grd-card .table thead th {
  font-weight: 500;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.5rem;
  padding-right: 0.75rem;
}

.hivemind-grd-card .table tbody td {
  padding: 0.5rem;
  padding-right: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

.hivemind-grd-card .table tbody tr:last-child td {
  border-bottom: 0;
}

/* Role Type Badges */
.badge-role-external {
  background-color: rgba(239, 68, 68, 0.1);
  color: #991b1b;
}

.badge-role-internal {
  background-color: rgba(167, 139, 250, 0.1);
  color: #6b21a8;
}

/* Form Controls in Header */
.hivemind-grd-header .form-select {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.hivemind-grd-header .form-select:focus {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25) !important;
}

.hivemind-grd-header .form-select option {
  color: #1f2937;
  background-color: white;
}

.hivemind-grd-header .form-check-input {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.hivemind-grd-header .form-check-input:checked {
  background-color: white;
  border-color: white;
}

.hivemind-grd-header .form-check-input:focus {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

/* Button Styling */
.hivemind-grd-header .btn-light {
  background-color: white !important;
  color: #4F46E5 !important;
  border: 0 !important;
  font-weight: 500;
}

.hivemind-grd-header .btn-light:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #4F46E5 !important;
}

.hivemind-grd-header .btn-light:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25) !important;
}

/* Filter Buttons */
.hivemind-grd-filter-btn.active {
  background-color: var(--hivemind-grd-indigo);
  border-color: var(--hivemind-grd-indigo);
  color: white;
}

/* Tabs */
.nav-tabs {
  border-bottom: 1px solid #e5e7eb;
}

.nav-tabs .nav-link {
  color: #6b7280;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 1rem;
}

.nav-tabs .nav-link:hover {
  border-color: transparent;
  color: var(--hivemind-grd-indigo);
}

.nav-tabs .nav-link.active {
  color: var(--hivemind-grd-indigo);
  border-bottom-color: var(--hivemind-grd-indigo);
  background-color: transparent;
}

/* Search Input */
#hivemind-grd-roles-search {
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

#hivemind-grd-roles-search:focus {
  border-color: var(--hivemind-grd-indigo);
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .hivemind-grd-header .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
  }
  
  .hivemind-grd-header .form-select,
  .hivemind-grd-header .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .hivemind-grd-stat-card {
    margin-bottom: 1rem;
  }
}

/* Chart Container */
.hivemind-grd-card canvas {
  max-height: 100%;
}

/* Status Badge Colors */
.status-badge-on-track {
  background-color: rgba(34, 197, 94, 0.1);
  color: #166534;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
}

.status-badge-watch {
  background-color: rgba(245, 158, 11, 0.1);
  color: #92400e;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
}

.status-badge-off-track {
  background-color: rgba(239, 68, 68, 0.1);
  color: #991b1b;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
}

/* Footer Text */
.hivemind-grd-dashboard .small code {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

/* Smooth Transitions */
.hivemind-grd-stat-card,
.hivemind-grd-card {
  transition: all 0.2s ease;
}

/* Ensure proper spacing */
.hivemind-grd-dashboard {
  background-color: #f9fafb;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.hivemind-grd-dashboard > .hivemind-grd-header {
  margin: 0;
  padding: 0;
}

.hivemind-grd-dashboard .container-fluid {
  background-color: transparent;
}

/* Main content area - max-width and centering */
.hivemind-grd-dashboard .hivemind-grd-main-content {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
  background-color: #f9fafb;
  margin-top: 0;
}

/* Additional refinements for exact React match */
.hivemind-grd-card h3,
.hivemind-grd-card h6 {
  font-weight: 500;
  margin-bottom: 0;
}

.hivemind-grd-stat-card .h3 {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.hivemind-grd-stat-card .small {
  font-size: 0.875rem;
  color: #6b7280;
}

/* Better spacing for stat cards */
.hivemind-grd-stat-card-content {
  min-height: 120px;
}

/* Chart container improvements */
.hivemind-grd-card > div[style*="height"] {
  position: relative;
}

/* Form select styling improvements */
.hivemind-grd-header select.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 16px 12px;
  padding-right: 2rem;
}

/* Button improvements */
.hivemind-grd-header .btn {
  font-weight: 500;
  border-radius: 0.5rem;
}

/* Table improvements */
.hivemind-grd-card .table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Badge improvements */
.badge-role-external,
.badge-role-internal {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

/* Section spacing */
.hivemind-grd-section {
  margin-top: 0;
  margin-bottom: 0;
}

.hivemind-grd-section:first-of-type {
  margin-top: 0;
}

/* Ensure proper gap spacing matches React (gap-4 = 1rem, gap-6 = 1.5rem) */
.hivemind-grd-main-content .row.g-3 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.hivemind-grd-main-content .row.g-4 {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}