/* JobTracker Custom Styles */

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Navbar */
.navbar-brand {
  font-size: 1.4rem;
  letter-spacing: 0.5px;
}

/* Cards */
.job-card {
  transition: box-shadow 0.2s ease, transform 0.1s ease;
  border-left: 4px solid var(--bs-border-color);
}
.job-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}
.job-card.status-applied        { border-left-color: #0d6efd; }
.job-card.status-phone_screen   { border-left-color: #ffc107; }
.job-card.status-first_interview  { border-left-color: #fd7e14; }
.job-card.status-second_interview { border-left-color: #fd7e14; }
.job-card.status-third_interview  { border-left-color: #fd7e14; }
.job-card.status-offer_received   { border-left-color: #198754; }
.job-card.status-offer_accepted   { border-left-color: #198754; }
.job-card.status-rejected         { border-left-color: #dc3545; }
.job-card.status-no_response      { border-left-color: #6c757d; }
.job-card.status-withdrawn        { border-left-color: #6c757d; }

/* Stats bar */
.stat-card {
  border-radius: 0.75rem;
  border: none;
}

/* Job description textarea */
textarea.job-desc {
  font-family: monospace;
  font-size: 0.875rem;
  width: 75% !important;
  min-height: 400px;
}

/* Timeline for status updates */
.timeline {
  position: relative;
  padding-left: 1.5rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bs-border-color);
}
.timeline-item {
  position: relative;
  margin-bottom: 1rem;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.1rem;
  top: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0d6efd;
  border: 2px solid var(--bs-body-bg);
  box-shadow: 0 0 0 2px #0d6efd;
}

/* Auth pages — animated gradient background */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.auth-bg {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(-45deg, #0d1b2a, #1d3557, #023e8a, #0077b6, #1b4332, #0d1b2a);
  background-size: 400% 400%;
  animation: gradientShift 18s ease infinite;
}

body.auth-bg .container-fluid {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2rem 1rem;
}

body.auth-bg .flex-grow-1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Frosted glass card over the gradient */
.auth-card {
  max-width: 520px;
  width: 100%;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="light"] body.auth-bg .auth-card,
body.auth-bg .auth-card {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}

[data-bs-theme="dark"] body.auth-bg .auth-card {
  background: rgba(14, 22, 38, 0.72) !important;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-color: rgba(100, 140, 220, 0.3);
}

/* Inputs inside the auth card — soft tinted to match frosted glass */
body.auth-bg .auth-card .form-control,
body.auth-bg .auth-card .form-select {
  background-color: rgba(255, 255, 255, 0.60) !important;
  border-color: rgba(100, 130, 200, 0.4) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.auth-bg .auth-card .form-control:focus,
body.auth-bg .auth-card .form-select:focus {
  background-color: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(13, 110, 253, 0.7) !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2) !important;
}
body.auth-bg .auth-card .form-control::placeholder {
  color: rgba(60, 80, 120, 0.6);
}

/* Subtle floating orbs for depth */
body.auth-bg::before,
body.auth-bg::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
body.auth-bg::before {
  width: 500px;
  height: 500px;
  background: #4fc3f7;
  top: -100px;
  right: -100px;
  animation: orbFloat 20s ease-in-out infinite alternate;
}
body.auth-bg::after {
  width: 400px;
  height: 400px;
  background: #7c4dff;
  bottom: -80px;
  left: -80px;
  animation: orbFloat 25s ease-in-out infinite alternate-reverse;
}
body.auth-bg .container-fluid {
  position: relative;
  z-index: 1;
}

@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.1); }
}

/* ── Page animations ─────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-up    { animation: fadeInUp   0.45s ease both; }
.animate-down  { animation: fadeInDown 0.40s ease both; }
.animate-left  { animation: fadeInLeft  0.65s ease both; }
.animate-right { animation: fadeInRight 0.65s ease both; }
.animate-fade  { animation: fadeIn     0.40s ease both; }

/* JS sets --stagger-delay on each .animate-stagger element */
.animate-stagger {
  animation: fadeInUp 0.42s ease both;
  animation-delay: var(--stagger-delay, 0ms);
}

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.4) translateY(-10px); }
  60%  { opacity: 1; transform: scale(1.15); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%       { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
}

.animate-bounce { animation: bounceIn 0.65s ease both; }
.status-pulse   { animation: statusPulse 1s ease-in-out 3; }

/* Page-leave fade */
body { transition: opacity 0.2s ease; }
body.page-leaving { opacity: 0; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-up, .animate-down, .animate-left,
  .animate-right, .animate-fade, .animate-stagger,
  .animate-bounce, body { animation: none !important; transition: none !important; }
}

/* Badge pill fix */
.badge {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Review Board cards */
.review-card {
  transition: box-shadow 0.2s ease, transform 0.1s ease;
  border-left: 4px solid #ffc107;
}
.review-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}
.review-body-preview {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Resume cards */
.resume-card {
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.resume-card:hover {
  transform: translateY(-1px);
}

[data-bs-theme="light"] .resume-card {
  background-color: #f0f4ff;
  box-shadow: 0 0 0 1px #b8c8e8, 0 3px 10px rgba(0,0,0,0.10) !important;
}
[data-bs-theme="light"] .resume-card:hover {
  background-color: #e8eeff;
  box-shadow: 0 0 0 1px #93aad8, 0 5px 16px rgba(0,0,0,0.14) !important;
}
[data-bs-theme="light"] .resume-card.border-success {
  box-shadow: 0 0 0 2px #198754, 0 3px 10px rgba(0,0,0,0.10) !important;
}

[data-bs-theme="dark"] .resume-card {
  background-color: #1e2738;
  box-shadow: 0 0 0 1px rgba(100,130,200,0.3), 0 3px 10px rgba(0,0,0,0.4) !important;
}
[data-bs-theme="dark"] .resume-card:hover {
  background-color: #253047;
  box-shadow: 0 0 0 1px rgba(100,140,220,0.5), 0 6px 18px rgba(0,0,0,0.5) !important;
}
[data-bs-theme="dark"] .resume-card.border-success {
  box-shadow: 0 0 0 2px #198754, 0 3px 10px rgba(0,0,0,0.4) !important;
}

/* Dark mode theme toggle button */
[data-bs-theme="dark"] #theme-toggle {
  border-color: rgba(255,255,255,0.25);
  color: #ffc107;
}
[data-bs-theme="light"] #theme-toggle {
  border-color: rgba(255,255,255,0.25);
  color: #cfe2ff;
}

/* ── Light mode: navy theme for "dark" elements ── */
/* Replace sharp black navbar/buttons with a deep navy that matches the blue card theme */

[data-bs-theme="light"] .navbar.bg-dark {
  background-color: #2e5fa8 !important;
}

[data-bs-theme="light"] .btn-dark {
  background-color: #2e5fa8;
  border-color: #2e5fa8;
  color: #fff;
}
[data-bs-theme="light"] .btn-dark:hover,
[data-bs-theme="light"] .btn-dark:focus {
  background-color: #244d8f;
  border-color: #244d8f;
  color: #fff;
}

[data-bs-theme="light"] .text-dark {
  color: #2e5fa8 !important;
}

/* ── Dark mode: navbar standout ── */
[data-bs-theme="dark"] .navbar.bg-dark {
  background-color: #243554 !important;
  border-top: 3px solid #4a7fd4;
  border-bottom: 2px solid #4a7fd4;
  box-shadow: 0 3px 16px rgba(0,0,0,0.7) !important;
}

/* ── Dark mode depth — list pages ── */

/* Filter / search bar: slightly recessed, darker than cards */
[data-bs-theme="dark"] .filter-card {
  background-color: #181e2a;
  box-shadow: 0 0 0 1px rgba(80,110,180,0.25), 0 2px 8px rgba(0,0,0,0.4) !important;
}
[data-bs-theme="dark"] .filter-card .form-control,
[data-bs-theme="dark"] .filter-card .form-select {
  background-color: #232d42 !important;
  border-color: rgba(100,130,200,0.35);
  color: #c8d4f0;
}
[data-bs-theme="dark"] .filter-card .form-control:focus,
[data-bs-theme="dark"] .filter-card .form-select:focus {
  background-color: #2a3550 !important;
  border-color: #6699ff;
  box-shadow: 0 0 0 0.2rem rgba(80,120,255,0.25);
}

/* Stat count pills: lifted above the filter bar */
[data-bs-theme="dark"] .stat-card {
  background-color: #232d42 !important;
  box-shadow: 0 0 0 1px rgba(100,130,200,0.3), 0 2px 6px rgba(0,0,0,0.35) !important;
}

/* Job cards: clearly lifted off the page, left colour stripe preserved */
[data-bs-theme="dark"] .job-card {
  background-color: #1e2738;
  box-shadow: 0 0 0 1px rgba(100,130,200,0.3), 0 3px 10px rgba(0,0,0,0.4) !important;
}
[data-bs-theme="dark"] .job-card:hover {
  background-color: #253047;
  box-shadow: 0 0 0 1px rgba(100,140,220,0.5), 0 6px 18px rgba(0,0,0,0.5) !important;
}

/* Review cards: warm dark tint to complement the yellow left stripe */
[data-bs-theme="dark"] .review-card {
  background-color: #342e48;
  box-shadow: 0 0 0 1px rgba(180,150,60,0.45), 0 3px 10px rgba(0,0,0,0.4) !important;
}
[data-bs-theme="dark"] .review-card:hover {
  background-color: #3c3554;
  box-shadow: 0 0 0 1px rgba(200,170,80,0.65), 0 6px 18px rgba(0,0,0,0.5) !important;
}

/* ── Dark mode depth — detail page ── */

/* Main job details card */
[data-bs-theme="dark"] .detail-main-card {
  background-color: #1e2738;
  box-shadow: 0 0 0 1px rgba(100,130,200,0.3), 0 4px 16px rgba(0,0,0,0.45) !important;
}
/* Notes and job description blocks sit recessed inside the main card */
[data-bs-theme="dark"] .detail-main-card .bg-body-secondary {
  background-color: #151c2a !important;
  border: 1px solid rgba(100,130,200,0.2);
}

/* Sidebar cards (Add Status Update + Status History) */
[data-bs-theme="dark"] .detail-side-card {
  background-color: #1e2738;
  box-shadow: 0 0 0 1px rgba(100,130,200,0.3), 0 3px 12px rgba(0,0,0,0.4) !important;
}
[data-bs-theme="dark"] .detail-side-card .card-header {
  background-color: #141b28;
  border-bottom-color: rgba(100,130,200,0.25);
}
/* Status form fields lifted above the card */
[data-bs-theme="dark"] .detail-side-card .form-control,
[data-bs-theme="dark"] .detail-side-card .form-select {
  background-color: #2a3650 !important;
  border-color: rgba(100,130,200,0.35);
  color: #c8d4f0;
}
[data-bs-theme="dark"] .detail-side-card .form-control:focus,
[data-bs-theme="dark"] .detail-side-card .form-select:focus {
  background-color: #2f3d5a !important;
  border-color: #6699ff;
  box-shadow: 0 0 0 0.2rem rgba(80,120,255,0.25);
}

/* ── Light mode enhancements ── */

/* Detail page — light mode */
[data-bs-theme="light"] .detail-main-card {
  background-color: #f0f4ff;
  box-shadow: 0 0 0 1px #b8c8e8, 0 3px 12px rgba(0,0,0,0.10) !important;
}
[data-bs-theme="light"] .detail-main-card .bg-body-secondary {
  background-color: #dce6f7 !important;
  border: 1px solid #b8c8e8;
}
[data-bs-theme="light"] .detail-side-card {
  background-color: #eef2fc;
  box-shadow: 0 0 0 1px #b8c8e8, 0 3px 12px rgba(0,0,0,0.10) !important;
}
[data-bs-theme="light"] .detail-side-card .card-header {
  background-color: #dce6f7;
  border-bottom-color: #b8c8e8;
}
[data-bs-theme="light"] .detail-side-card .form-control,
[data-bs-theme="light"] .detail-side-card .form-select {
  background-color: #ffffff !important;
  border-color: #93a3c0;
}


/* Job cards: tinted background + outer ring via box-shadow (preserves colored left border) */
[data-bs-theme="light"] .job-card {
  background-color: #f0f4ff;
  box-shadow: 0 0 0 1px #b8c8e8, 0 2px 8px rgba(0,0,0,0.10) !important;
}
[data-bs-theme="light"] .job-card:hover {
  background-color: #e8eeff;
  box-shadow: 0 0 0 1px #93aad8, 0 4px 14px rgba(0,0,0,0.15) !important;
}

/* Review cards: warm tint + shadow outline */
[data-bs-theme="light"] .review-card {
  background-color: #fffdf0;
  box-shadow: 0 0 0 1px #ddd090, 0 3px 10px rgba(0,0,0,0.10) !important;
}
[data-bs-theme="light"] .review-card:hover {
  background-color: #fffbe0;
  box-shadow: 0 0 0 1px #c8b860, 0 5px 16px rgba(0,0,0,0.14) !important;
}

/* Application form card: faint blue tint with shadow outline */
[data-bs-theme="light"] .form-card {
  background-color: #eef2fc;
  box-shadow: 0 0 0 1px #b8c8e8, 0 3px 12px rgba(0,0,0,0.10) !important;
}
[data-bs-theme="light"] .form-card .card-header {
  background-color: #dce6f7;
  border-bottom-color: #b8c8e8;
}
/* Keep input fields white so they lift off the blue card */
[data-bs-theme="light"] .form-card .form-control,
[data-bs-theme="light"] .form-card .form-select {
  background-color: #ffffff !important;
}

/* ── Dark mode depth layering ── */

/* Form card: lifted off the page with blue-tinted dark layers */
[data-bs-theme="dark"] .form-card {
  background-color: #1e2738;
  box-shadow: 0 0 0 1px rgba(100,140,220,0.35), 0 4px 20px rgba(0,0,0,0.45) !important;
}
[data-bs-theme="dark"] .form-card .card-header {
  background-color: #161e2e;
  border-bottom-color: rgba(100,140,220,0.25);
}
/* Fields slightly lighter than the card so they pop */
[data-bs-theme="dark"] .form-card .form-control,
[data-bs-theme="dark"] .form-card .form-select {
  background-color: #2a3650 !important;
  border-color: rgba(100,140,220,0.35);
  color: #d0daf0;
}
[data-bs-theme="dark"] .form-card .form-control:focus,
[data-bs-theme="dark"] .form-card .form-select:focus {
  background-color: #2f3d5a !important;
  border-color: #6699ff;
  box-shadow: 0 0 0 0.2rem rgba(80,120,255,0.25);
}
[data-bs-theme="dark"] .form-card .form-control::placeholder {
  color: #6878a0;
}

/* Form controls: stronger borders in light mode */
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
  border-color: #93a3c0;
  background-color: #fff;
}
[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.2);
}
[data-bs-theme="light"] .form-control::placeholder {
  color: #8a97a8;
}