/* --- 1. Root & Variables --- */
/* We define a custom color palette to move away from the "default Bootstrap" look. */
:root {
  --primary-brand: #0a58ca; /* A strong, professional blue */
  --primary-brand-light: #e7f0ff; /* A very light version for hovers/backgrounds */
/*  --body-bg: #f8f9fc; /* A very subtle gray, makes cards "pop" */
  --body-bg: #f0f7ff; /* A very subtle blue, makes cards "pop" */
  --text-dark: #212529;
  --text-body: #495057;
  --text-muted: #6c757d;
  --border-color: #dee2e6; /* A slightly more defined border */
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  --card-border-radius: 0.5rem; /* Softer corners */
}

/* --- 2. Global & Typography --- */
/* Set the base font and background for the whole app. */
body {
  background-color: var(--body-bg);
  color: var(--text-body);
  /* Using a modern, clean system font stack */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Improve heading clarity */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark);
  font-weight: 600;
}

/* Make default links use our brand color */
a {
  color: var(--primary-brand);
}
a:hover {
  color: var(--text-dark);
}

/* --- 3. Main Navigation (Navbar) --- */
/* Give the navbar a more defined, "app-like" feel */
.navbar.bg-light {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--border-color);
  /* A slightly stronger shadow than 'shadow-sm' */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Style the navbar search */
#navbar_search_form .form-control {
  background-color: var(--body-bg);
  border: 1px solid var(--border-color);
}
#navbar_search_form .form-control:focus {
  background-color: #fff;
  border-color: var(--primary-brand);
  box-shadow: 0 0 0 0.25rem rgba(10, 88, 202, 0.25);
}

/* --- 3a. Navbar Search Polish --- */
/* Add this to the end of your custom-style.css */

/* This overrides our previous rule and makes the navbar search BG white */
#navbar_search_form .form-control {
  background-color: #ffffff !important;
}

#navbar_search_form .form-control:focus {
  background-color: #ffffff !important; /* Keep it white on focus */
}

/* Polish the new icon button */
#navbar_search_form #navbar_search_button {
  border-color: var(--border-color);
  color: var(--text-muted); /* Makes the icon gray, not black */
  transition: all 0.2s ease-in-out;
}

/* Add a nice hover effect */
#navbar_search_form #navbar_search_button:hover {
  background-color: var(--primary-brand-light);
  color: var(--primary-brand);
}

/* --- 4. Cards (The core of your UI) --- */
/* This is a key change. We soften the cards, remove the default border, and add a subtle shadow. */
.card {
  border: none; /* The shadow provides separation */
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  margin-bottom: 1.5rem; /* Ensure consistent spacing */
}

/* Style the card header for clear hierarchy */
.card-header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--text-dark);
  /* Match the card's border-radius */
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}

/* Refine the small "update" buttons in card headers */
.card-header .btn-outline-secondary {
  font-size: 0.75rem; /* A legible small size */
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
}
.card-header .btn-outline-secondary:hover {
  background-color: var(--primary-brand);
  color: #fff;
  border-color: var(--primary-brand);
}

/* --- 5. Activity Tabs (A major refinement) --- */
/* Default Bootstrap tabs are dated. This makes them look modern and clean. */
.card-header .nav-tabs {
  border-bottom: none; /* Remove the default tab border */
  margin-bottom: -1rem; /* Pulls the tabs down to sit on the line */
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font-weight: 500;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.nav-tabs .nav-link:hover {
  border-bottom-color: var(--border-color);
  color: var(--text-dark);
}

/* The active tab is the key indicator */
.nav-tabs .nav-link.active {
  background-color: transparent;
  color: var(--primary-brand);
  border-bottom-color: var(--primary-brand);
  font-weight: 600;
}

/* --- 6. Data & Lists --- */

/* Refine tables used in the activity feed */
.table {
  color: var(--text-body);
}

.table thead th {
  color: var(--text-dark);
  font-weight: 600;
  border-bottom-width: 2px;
  border-color: var(--border-color);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.table tbody tr:hover {
  background-color: var(--primary-brand-light);
  cursor: pointer;
}

/* Refine list groups (used in your left column) */
.list-group-item {
  border-color: var(--border-color);
  padding: 1rem 1.25rem;
}

/* Remove the top border from the first item in a flush list */
.list-group-flush:first-child .list-group-item:first-child {
  border-top: 0;
}
.list-group-flush:last-child .list-group-item:last-child {
  border-bottom: 0;
}

/* --- 7. Badges (for status, etc.) --- */
/* Give badges a modern "soft" look instead of solid colors */
.badge {
  font-weight: 600;
  padding: 0.4em 0.65em;
  font-size: 0.75rem;
}

/* Primary "soft" badge */
.badge.bg-primary {
  background-color: var(--primary-brand-light) !important;
  color: var(--primary-brand) !important;
}

/* Success "soft" badge (for your "Primary" tag) */
.badge.bg-success {
  background-color: #e6f7f0 !important;
  color: #0b6c42 !important;
}

/* Secondary "soft" badge */
.badge.bg-secondary {
  background-color: #f8f9fa !important;
  color: #495057 !important;
  border: 1px solid #dee2e6;
}

/* --- 8. Modals --- */
/* Soften the modal corners to match the cards */
.modal-content {
  border-radius: var(--card-border-radius);
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.modal-header {
  background-color: #fff;
  border-bottom: 1px solid var(--border-color);
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}