/* ===== CLEAN PROFESSIONAL THEME - COMPLETE OVERHAUL ===== */

/* Reset and base styles */
* {
  box-sizing: border-box;
}

:root {
  /* Clean, professional color palette */
  --primary-color: #2563eb;      /* Clean blue */
  --primary-hover: #1d4ed8;      /* Darker blue */
  --secondary-color: #64748b;    /* Professional gray */
  --success-color: #059669;      /* Clean green */
  --warning-color: #d97706;      /* Clean orange */
  --danger-color: #dc2626;       /* Clean red */
  
  /* Text colors */
  --text-primary: #1f2937;       /* Dark gray for main text */
  --text-secondary: #4b5563;     /* Medium gray for secondary text */
  --text-muted: #6b7280;         /* Light gray for muted text */
  
  /* Background colors */
  --bg-primary: #ffffff;         /* Pure white */
  --bg-secondary: #f8fafc;       /* Very light gray */
  --bg-tertiary: #f1f5f9;        /* Light gray */
  
  /* Border colors */
  --border-light: #e2e8f0;       /* Light border */
  --border-medium: #cbd5e1;      /* Medium border */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Global text and background defaults */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
}

/* ===== NAVIGATION BAR ===== */
.navbar {
  background-color: var(--bg-primary) !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-sm) !important;
}

.navbar-brand {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}

.navbar-brand:hover {
  color: var(--primary-color) !important;
}

.navbar-nav .nav-link {
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.375rem !important;
  margin: 0 0.25rem !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--primary-color) !important;
  background-color: var(--bg-secondary) !important;
}

.navbar-nav .nav-link.active {
  color: var(--primary-color) !important;
  background-color: var(--bg-tertiary) !important;
}

/* ===== BUTTONS ===== */
.btn {
  font-weight: 500 !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid transparent !important;
}

.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: white !important;
}

.btn-secondary {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: white !important;
}

.btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

/* ===== FORMS ===== */
.form-control,
.form-select,
input,
textarea,
select {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 0.375rem !important;
  color: var(--text-primary) !important;
  padding: 0.5rem 0.75rem !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  background-color: var(--bg-primary) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

.form-label,
label {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
}

/* ===== CARDS ===== */
.card {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--shadow-sm) !important;
}

.card-header {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.card-body {
  color: var(--text-primary) !important;
}

/* ===== TABLES ===== */
.table {
  color: var(--text-primary) !important;
}

.table th {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--border-medium) !important;
}

.table td {
  border-bottom: 1px solid var(--border-light) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-secondary) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--bg-tertiary) !important;
}

/* ===== DROPDOWNS ===== */
.dropdown-menu {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--shadow-lg) !important;
}

.dropdown-item {
  color: var(--text-primary) !important;
  padding: 0.5rem 1rem !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* ===== ALERTS ===== */
.alert {
  border-radius: 0.5rem !important;
  border: 1px solid transparent !important;
}

.alert-success {
  background-color: #f0fdf4 !important;
  border-color: var(--success-color) !important;
  color: #166534 !important;
}

.alert-warning {
  background-color: #fffbeb !important;
  border-color: var(--warning-color) !important;
  color: #92400e !important;
}

.alert-danger {
  background-color: #fef2f2 !important;
  border-color: var(--danger-color) !important;
  color: #991b1b !important;
}

/* ===== BADGES ===== */
.badge {
  font-weight: 500 !important;
  border-radius: 0.25rem !important;
}

.badge.bg-primary {
  background-color: var(--primary-color) !important;
  color: white !important;
}

.badge.bg-success {
  background-color: var(--success-color) !important;
  color: white !important;
}

/* ===== LINKS ===== */
a {
  color: var(--primary-color) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--primary-hover) !important;
  text-decoration: underline !important;
}

/* ===== ICONS ===== */
.fas,
.fa,
i[class*="fa"] {
  color: var(--text-secondary) !important;
}

.fas:hover,
.fa:hover,
i[class*="fa"]:hover {
  color: var(--primary-color) !important;
}

/* ===== FOOTER ===== */
.footer,
footer {
  background-color: var(--bg-secondary) !important;
  border-top: 1px solid var(--border-light) !important;
  color: var(--text-secondary) !important;
  padding: 2rem 0 !important;
}

/* ===== HOMEPAGE SECTIONS ===== */
.bg-white {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.text-bg-dark,
.bg-dark {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-light) !important;
}

.bg-body-tertiary {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* ===== UTILITY OVERRIDES ===== */
.text-white {
  color: var(--text-primary) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .navbar-nav .nav-link {
    padding: 0.5rem 1rem !important;
    margin: 0.25rem 0 !important;
  }
}/* =====
 PROFILE PICTURE FIXES ===== */

/* Navigation bar profile pictures */
.navbar .nav-profile-pic,
.navbar img[alt*="profile"],
.navbar img[src*="profile_pics"],
.ww-profile-pic {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--border-light) !important;
  margin-right: 0.5rem !important;
}

/* Dropdown menu profile pictures */
.dropdown-menu .nav-profile-pic,
.dropdown-menu img[alt*="profile"],
.dropdown-menu img[src*="profile_pics"] {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid var(--border-light) !important;
  margin-right: 0.5rem !important;
}

/* General profile picture sizing for consistency */
img[src*="profile_pics"],
img[alt*="profile"],
.profile-pic,
.user-avatar {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Specific sizing for different contexts */
.profile-pic-sm {
  width: 24px !important;
  height: 24px !important;
}

.profile-pic-md {
  width: 32px !important;
  height: 32px !important;
}

.profile-pic-lg {
  width: 48px !important;
  height: 48px !important;
}

.profile-pic-xl {
  width: 64px !important;
  height: 64px !important;
}

/* Fix for default profile pictures that might be oversized */
img[src*="default.jpg"],
img[src*="default.png"] {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Navbar user dropdown styling */
.navbar .dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem !important;
  border-radius: 0.375rem !important;
}

.navbar .dropdown-toggle:hover {
  background-color: var(--bg-secondary) !important;
}

/* User info text in navbar */
.navbar .user-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.2 !important;
}

.navbar .user-name {
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: var(--text-primary) !important;
}

.navbar .user-role {
  font-size: 0.75rem !important;
  color: var(--text-secondary) !important;
}