/* ------------------------------------------------------------------
   Shared Dashboard Styles  – LeanPivot.ai / Xolopreneur.ai
   Consistent visual language for every dashboard-style page
   ------------------------------------------------------------------*/

/* ---------- 1. Design Tokens (CSS custom properties) ---------- */
:root {
  /* Palette */
  --primary:  #4361ee;
  --success:  #38b000;
  --warning:  #ffaa00;
  --danger:   #e74a3b;
  --info:     #4299e1;
  --secondary:#6c757d;
  --light:    #f3f4f6;
  --dark:     #111827;

  /* Sizing */
  --card-radius:         0.75rem;
  --section-spacing:     1.5rem;

  /* Shadows & Motion */
  --card-shadow:         0 0.125rem 0.25rem rgba(0,0,0,0.075);
  --card-shadow-hover:   0 0.5rem 1rem rgba(0,0,0,0.15);
  --lift-sm:             translateY(-3px);
  --lift-md:             translateY(-5px);
  --transition:          0.25s ease;
}

/* ---------- Dashboard Header Consistency Fix ---------- */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--section-spacing));
  padding: 0; /* Explicit padding to ensure consistency */
}

.dashboard-header h1,
.dashboard-header h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--dark);
}

.dashboard-header p {
  color: var(--secondary);
  margin-bottom: 0;
  font-size: 1rem;
}

/* Responsive header adjustments */
@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .dashboard-header .d-flex {
    width: 100%;
    justify-content: space-between;
  }
}

/* ---------- 2. Generic Card Shell ---------- */
.card {
  border: none;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  overflow: hidden;
}
.card:hover {
  transform: var(--lift-sm);
  box-shadow: var(--card-shadow-hover);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid #dee2e6;
  padding: 1rem 1.5rem;
  font-weight: 500;
}

/* ---------- 3. Dashboard-specific Cards ---------- */
.dashboard-card {      /* wrapper for groups of content */
  height: 100%;
  box-shadow: var(--card-shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.dashboard-card:hover {
  transform: var(--lift-md);
  box-shadow: var(--card-shadow-hover);
}

/* Goal & recommendation cards reuse .card rules but need extra lift */
.goal-card,
.recommendation-card {
  transition: transform var(--transition), box-shadow var(--transition);
}
.goal-card:hover,
.recommendation-card:hover {
  transform: var(--lift-md);
  box-shadow: var(--card-shadow-hover);
}

/* ---------- 4. Stats Tiles ---------- */
.stats-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 1.25rem;
  border-radius: var(--card-radius);
  height: 100%;
  transition: transform var(--transition), box-shadow var(--transition);
}
.stats-card:hover {
  transform: var(--lift-md);
  box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.12);
}
.stat-value  { font-size: 2.25rem; font-weight: 700; line-height: 1.2; }
.stat-label  { font-size: 0.9rem;  text-transform: uppercase; letter-spacing: .05rem; }

/* Color helpers for stats tiles */
.bg-primary-card { background: var(--primary) !important; }
.bg-success-card { background: var(--success) !important; }
.bg-warning-card { background: var(--warning) !important; }
.bg-danger-card  { background: var(--danger)  !important; }
.bg-info-card    { background: var(--info)    !important; }

/* ---------- 5. Nav Tabs (Goals dashboard) ---------- */
.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-link {
  border: none;
  color: var(--secondary);
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  border-radius: 0.5rem;
  margin-right: 0.5rem;
  position: relative;
  transition: background-color var(--transition), color var(--transition);
}
.nav-tabs .nav-link:hover:not(.active) {
  background: rgba(0,0,0,0.03);
}
.nav-tabs .nav-link.active {
  color: var(--primary);
  background: rgba(67,97,238,0.10);
}

/* ---------- 6. Badges & Status Pills ---------- */
.badge,
.status-badge {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.5rem;
}

.badge-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.25rem; margin-right: 1rem;
}
.badge-icon-primary  { background: rgba(67,97,238,0.1); color: var(--primary); }
.badge-icon-success  { background: rgba(56,176,0,0.1); color: var(--success); }
.badge-icon-warning  { background: rgba(255,170,0,0.1); color: var(--warning); }
.badge-icon-info     { background: rgba(13,202,240,0.1); color: #0dcaf0; }

.badge-completed,
.badge-validated           { background: var(--success);   color:#fff; }
.badge-in_progress,
.badge-validating          { background: var(--warning);   color:#212529; }
.badge-not_started,
.badge-not_validated       { background: var(--secondary); color:#fff; }
.badge-cancelled,
.badge-invalidated         { background: var(--danger);    color:#fff; }

/* ---------- 7. Progress Bars ---------- */
.progress          { height: 8px; background:#e9ecef; border-radius:4px; }
.progress-bar      { border-radius:4px; }

/* ---------- 8. List Groups & Quick-links ---------- */
.list-group-item {
  border: none;
  padding: 0.75rem 1.25rem;
  transition: background-color var(--transition);
}
.list-group-item:hover {
  background: rgba(67,97,238,0.05);
}

.quick-action-link {
  display: flex; align-items: center;
  padding: 0.75rem 1rem;
  color: var(--dark);
  border-radius: 0.25rem;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}
.quick-action-link i { margin-right: 0.75rem; color: var(--primary); }
.quick-action-link:hover {
  background: rgba(67,97,238,0.10);
  color: var(--primary);
}

/* ---------- 9. Alerts ---------- */
.dashboard-alert {
  display: flex; align-items: flex-start;
  padding: 1rem;
  border-radius: var(--card-radius);
  background: var(--light);
}
.dashboard-alert i { font-size:1.25rem; margin-right:0.75rem; }

/* ---------- 10. Utilities & Media Queries ---------- */
@media (max-width: 768px){
  .stats-card      { padding:1rem; }
  .stat-value      { font-size:1.75rem; }
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-unit) * 0.5;
}
.dropdown-menu {
  border: none;
  box-shadow: var(--card-hover-shadow);
  border-radius: calc(var(--border-radius) * 0.75);
  padding: calc(var(--spacing-unit) * 0.5) 0;
  min-width: 200px;
  animation: fadeIn 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.dropdown-item {
  padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.25);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-unit) * 0.75);
  color: #495057;
  border-radius: 0;
}
.dropdown-item:hover {
  background-color: rgba(67, 97, 238, 0.05);
  color: var(--primary-color);
}
.dropdown-item:active {
  background-color: rgba(67, 97, 238, 0.1);
}
.dropdown-item i {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
}


.navbar .nav-link, .navbar .dropdown-toggle {
  transition: transform 0.2s;
}
.navbar .nav-link:hover, .navbar .dropdown-toggle:hover {
  transform: translateY(-1px);
}


/* Vault Integration Buttons */
.vault-button-container {
    margin-top: 0.5rem;
}

.vault-generate-btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-color: #4361ee;
    color: #4361ee;
    background-color: transparent;
    transition: all 0.3s ease;
}

.vault-generate-btn:hover {
    background-color: #4361ee;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(67, 97, 238, 0.2);
}

.vault-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.vault-generate-btn i {
    font-size: 0.875rem;
}

/* Vault Messages */
.vault-message {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    border-radius: 4px;
    animation: fadeIn 0.3s ease-out;
}

.vault-message.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.vault-message.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

.vault-message.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Field Hover States with Vault Button */
.form-control:hover + .vault-button-container .vault-generate-btn,
.form-select:hover + .vault-button-container .vault-generate-btn {
    border-color: #3a56d4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .vault-generate-btn {
        width: 100%;
        margin-top: 0.5rem;
    }
}
EOF < /dev/null