static/css/style.css

/* ======= Global Styles ======= */
:root {
    --primary-color: #0d6efd; /* Bootstrap Blue */
    --primary-dark: #0a58ca;
    --secondary-color: #6c757d; /* Bootstrap Gray */
    --success-color: #198754; /* Bootstrap Green */
    --info-color: #0dcaf0; /* Bootstrap Cyan */
    --warning-color: #ffc107; /* Bootstrap Yellow */
    --danger-color: #dc3545; /* Bootstrap Red */
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --border-radius: 0.375rem;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }

  body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f0f2f5; /* Slightly different background */
    color: #333;
    font-size: 0.95rem; /* Slightly smaller base font */
  }

  /* ======= Typography ======= */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--dark-color);
  }

  /* ======= Layout Components ======= */
  .main-container {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  .card {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 1.5rem;
    border: none; /* Remove default border */
  }

  .card-header {
    background-color: #fff; /* White header */
    border-bottom: 1px solid #e9ecef;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
  }

  .card-header.bg-primary,
  .card-header.bg-secondary { /* Keep colored headers */
    color: white !important;
  }
  .card-header.bg-primary { background-color: var(--primary-color) !important; }
  .card-header.bg-secondary { background-color: var(--secondary-color) !important; }


  .card-body {
    padding: 1.25rem;
  }

  .card-footer {
    padding: 0.75rem 1.25rem;
    background-color: var(--light-color);
    border-top: 1px solid #e9ecef;
  }

  /* ======= Navigation ======= */
  .navbar {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    box-shadow: var(--box-shadow);
  }

  .navbar-brand {
    font-weight: 600;
    font-size: 1.15rem;
  }

  .nav-link {
    padding: 0.4rem 0.8rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    border-radius: var(--border-radius);
  }

  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .nav-link.active {
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.15);
  }
  .navbar-dark .navbar-nav .nav-link {
      color: rgba(255, 255, 255, 0.85);
  }
  .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .nav-link:focus {
      color: #fff;
  }
  .navbar-dark .navbar-nav .nav-link.active {
      color: #fff;
  }

  /* ======= Forms ======= */
  .form-control, .form-select {
    border-radius: var(--border-radius);
    padding: 0.4rem 0.8rem;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-size: 0.9rem;
  }
  .form-control-sm, .form-select-sm {
      padding: 0.3rem 0.6rem;
      font-size: 0.8rem;
  }

  .form-control:focus, .form-select:focus {
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); /* Use BS variable */
  }

  .form-label {
    margin-bottom: 0.4rem;
    font-weight: 500;
    font-size: 0.9rem;
  }

  .form-text {
    color: var(--secondary-color);
    margin-top: 0.25rem;
    font-size: 0.8rem;
  }
  .form-check-label {
      font-size: 0.9rem;
  }

  /* ======= Login Page ======= */
  .login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, var(--primary-color), var(--primary-dark)); /* Gradient background */
  }

  .login-card {
    width: 100%;
    max-width: 420px; /* Slightly wider */
    box-shadow: var(--box-shadow-lg);
    border-radius: 0.5rem; /* More rounded */
  }
  .login-card .card-header {
      background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent */
      border-bottom: none;
      text-align: center;
  }
  .login-card .card-body {
      padding: 2rem; /* More padding */
  }

  .demo-credentials {
    background-color: var(--light-color);
    padding: 0.75rem;
    border-radius: var(--border-radius);
    margin-top: 1rem;
    font-size: 0.85rem;
    border: 1px solid #e9ecef;
  }

  /* ======= Dashboard/Filter Section ======= */
  .filter-section .card-body {
      max-height: calc(100vh - 200px); /* Limit height */
      overflow-y: auto;
  }
  .filter-heading {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
    text-transform: uppercase;
  }
  .filter-group {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
  }
  .filter-group:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
  }

  .filter-section .filter-group {
    padding-bottom: 1rem; /* Ensure consistent padding below groups */
    margin-bottom: 1rem; /* Ensure consistent margin below groups */
    border-bottom: 1px solid #eee; /* Keep visual separation */
  }
  .filter-section .row > div:last-child .filter-group:last-child, /* Target last group in last div of row */
  .filter-section .row > .col-12:last-child .filter-group:last-of-type { /* More specific for last group in last col */
       border-bottom: none; /* Remove border from very last group */
       margin-bottom: 0;
       padding-bottom: 0;
  }

  /* ======= Tables ======= */
  .table {
    margin-bottom: 0;
    font-size: 0.9rem;
  }
  .table th, .table td {
      vertical-align: middle;
      padding: 0.6rem 0.75rem; /* Adjust padding */
  }
  .table th {
    font-weight: 600;
    border-top: none;
    background-color: #f8f9fa; /* Light header */
  }
  .table-hover tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
  }
  .table-responsive {
      border: 1px solid #dee2e6;
      border-radius: var(--border-radius);
  }

  /* ======= Badges ======= */
  .badge {
    padding: 0.3em 0.55em;
    font-weight: 500;
    border-radius: 0.25rem;
    margin: 0 0.1rem; /* Add slight margin */
    font-size: 0.75em; /* Relative size */
  }

  /* ======= Visualization Section ======= */
  .visualization-card {
    height: 100%;
  }
  .chart-container {
      position: relative;
      height: 280px; /* Adjust height */
      width: 100%;
  }
  canvas {
      display: block;
  }

  /* ======= Job Listings ======= */
  .job-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    height: 100%;
  }
  .job-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-lg);
  }
  .job-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
  }
  .job-location {
    color: var(--secondary-color);
    font-size: 0.875rem;
  }
  .job-skills .badge {
      margin-bottom: 0.25rem;
  }

  /* ======= AI Insights ======= */
  #insights-content {
    white-space: pre-wrap;
    max-height: 450px;
    overflow-y: auto;
    padding: 1rem;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    line-height: 1.6;
  }
  #insights-content h6 {
      font-size: 1rem;
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      border-bottom: 1px solid #eee;
      padding-bottom: 0.25rem;
  }
  #insights-content ul {
      padding-left: 1.5rem;
      margin-bottom: 1rem;
  }
  #insights-content strong {
      color: var(--primary-dark);
  }

  /* ======= Button Styles ======= */
  .btn {
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    font-size: 0.9rem;
    display: inline-flex; /* Align icons nicely */
    align-items: center;
    gap: 0.35rem; /* Space between icon and text */
  }
  .btn i {
      margin-right: 0.1rem; /* Adjust if gap isn't used */
      font-size: 1em; /* Make icon size relative to button text */
  }

  .btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }

  /* ======= Modals ======= */
  .modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
  }
  .modal-body {
    padding: 1.5rem;
  }
  .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
  }

  /* ======= Alerts ======= */
  .alert {
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
  }

  /* ======= Spinner ======= */
  .spinner-border {
    width: 2rem;
    height: 2rem;
  }

  /* ======= Responsive Adjustments ======= */
  @media (max-width: 992px) { /* Use lg breakpoint */
    .filter-section .card-body {
        max-height: none; /* Remove height limit on smaller screens */
        overflow-y: visible;
    }
  }
  @media (max-width: 768px) {
    body { font-size: 0.9rem; }
    .card-body { padding: 1rem; }
    .navbar-brand { font-size: 1rem; }
    .btn { font-size: 0.85rem; padding: 0.35rem 0.7rem; }
    .table { font-size: 0.85rem; }
    .table th, .table td { padding: 0.5rem 0.6rem; }
    .chart-container { height: 250px; }
  }