/* candidatesview.css */

.candidatesTab-container {
  font-family: 'Segoe UI', sans-serif;
  
  background-color: #f7f9fc;
}

.candidatesTab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px 1px 32px 0;
  padding: 50px 20px 30px 20px; /* increased top and bottom padding */
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 0 0 8px 8px; /* rounded only at bottom corners */
}

.candidatesTab-title {
  font-size: 24px;
  color: #222;
  margin: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  height: 100%;
}


.candidatesTab-filter label {
  margin-right: 10px;
  font-weight: 500;
}

.candidatesTab-dropdown {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.candidatesTab-table-wrapper {
   width: 100%;
  margin: 0 auto;     /* center horizontally */
  padding: 0 30px;    /* horizontal padding */
  overflow-x: auto;   /* horizontal scroll on small screens */
  box-sizing: border-box;
}

.candidatesTab-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  font-size: 13px;
  color: #4a4a4a; /* medium gray text */
}

/* Table Header Row */
.candidatesTab-table thead tr {
  background-color: #f9fafb; /* much lighter gray */
  color: #4a4a4a; /* medium gray */
  font-weight: 700;
  font-size: 13px;
  /* Removed border-bottom */
}

/* Header cells */
.candidatesTab-table th {
  padding: 14px 20px;
  text-align: left;
  background-color: #f3f4f6; /* lighter gray than before */
  color: #3a3a3a; /* softer dark gray */
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important; /* removed bottom border */
}

/* Table body rows: very subtle alternating colors */
.candidatesTab-table tbody tr:nth-child(4n + 1) {
  background-color: #ffffff; /* white */
}

.candidatesTab-table tbody tr:nth-child(4n + 2),
.candidatesTab-table tbody tr:nth-child(4n + 4) {
  background-color: #fafafa; /* very very light gray */
}

.candidatesTab-table tbody tr:nth-child(4n + 3) {
  background-color: #f5f5f5; /* very light gray */
}

/* Body cells */
.candidatesTab-table td {
  border-bottom: 1px solid #e6e6e6; /* very subtle horizontal line */
  border-left: none !important;
  border-right: none !important;
  color: #4a4a4a;
}

/* Remove vertical borders */
.candidatesTab-table th,
.candidatesTab-table td {
  border-left: none !important;
  border-right: none !important;
}

/* Row hover effect */
.candidatesTab-table tbody tr:hover {
  background-color: #e8f0fe; /* subtle light blue hover */
  cursor: pointer;
}

/* Status badges */
.candidatesTab-status-applied {
    background-color: #e0f2fe; /* Light blue */
    color: #0369a1;            /* Dark blue */
    border: 1px solid #7dd3fc;
}

/* Hired (Green) */
.candidatesTab-status-hired {
    background-color: #dcfce7; /* Light green */
    color: #15803d;            /* Dark green */
    border: 1px solid #86efac;
}

/* Rejected (Red) */
.candidatesTab-status-rejected {
    background-color: #fee2e2; /* Light red */
    color: #b91c1c;            /* Dark red */
    border: 1px solid #fca5a5;
}

/* Declined (Orange/Yellow) */
.candidatesTab-status-candidate-declined {
    background-color: #fef3c7; /* Light yellow */
    color: #a16207;            /* Dark yellow */
    border: 1px solid #fde047;
}

/* Interview Scheduled (Purple) */
.candidatesTab-status-interview-scheduled {
    background-color: #f3e8ff; /* Light purple */
    color: #7e22ce;            /* Dark purple */
    border: 1px solid #d8b4fe;
}
/* On Hold (Gray) */
.candidatesTab-status-on-hold {
    background-color: #e5e7eb; /* Light gray */
    color: #4b5563;            /* Dark gray */
    border: 1px solid #d1d5db;
}
/* A general style for all status badges to make them look nice */
.candidatesTab-status {
    padding: 0px 20px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.85em;
    text-transform: capitalize;
    display: inline-block;
}

/* Buttons */
.candidatesTab-btn {
  padding: 15px 12px;
  border: none;
  background-color: #38b6ff;
  color: #fff;
  border-radius: 4px;
  margin-right: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.candidatesTab-btn:hover {
  background-color: #259bdc;
}

.candidatesTab-btn-secondary {
  background-color: #2CA6A4;
}

.candidatesTab-btn-secondary:hover {
  background-color: #8ca91a;
}

.candidatesTab-btn-outline {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
}

.candidatesTab-btn-outline:hover {
  background-color: #f1f1f1;
}
/* The Modal (background) */
/* The Modal (background) */
/* The Modal (background) */
/* The Modal (background) */
/* Modal Container (Overlay) */
.modal {
  display: none; /* Initially hidden */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Lighter overlay for a friendlier feel */
  
 
  align-items: center;
  justify-content: center;
}

/* Class to show the modal */
.modal.is-active {
  display: flex;
}

/* Modal Content Box */
.modal-content {
  background-color: #ffffff;
  padding: 0; /* Remove padding from the content wrapper */
  border-radius: 8px; /* Match the table/header radius */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Match the header shadow style */
  width: 90%;
  max-width: 650px;
  position: relative;
  font-family: 'Segoe UI', sans-serif;
  color: #4a4a4a;
  overflow: hidden; /* Ensures rounded corners on the whole modal */
}

/* Modal Header */
.modal-header {
  background-color: #f3f4f6; /* Use the table header color */
  padding: 20px 30px;
  border-bottom: 1px solid #e6e6e6; /* Match the table border color */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-size: 20px;
  color: #3a3a3a; /* Match the table header text color */
  margin: 0;
  font-weight: 700;
}

/* Modal Body */
.modal-body {
  padding: 30px;
  line-height: 1.6;
}

.modal-body p {
  margin-bottom: 15px;
}

.modal-body p strong {
  color: #333;
  font-weight: 600;
}

/* Close Button in the header */
/* Close Button in the header */
.close-btn {
  /* ... other styles remain the same ... */
  font-size: 2rem;
  line-height: 1;
  color: #a5a5a5;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.2s, background-color 0.2s; /* Added background-color for the hover effect */
  padding: 10px; /* Increased padding to expand the clickable area */
  margin-left: 10px; /* Adjusted margin to compensate for padding */
  border-radius: 4px; /* Added slight rounding for a softer look */
}

.close-btn:hover {
  background-color: #f0f0f0; /* Lighter background color on hover */
  color: #555; /* Softened text color on hover */
}

/* Optional Footer for Buttons (you can add this to your HTML) */
.modal-footer {
  padding: 20px 30px;
  border-top: 1px solid #e6e6e6;
  text-align: right;
  background-color: #f7f9fc; /* Match the container background */
}



/* Loading overlay and spinner */
/* Positioning for the modal content */
/* Positioning for the modal content */
.modal-body {
    position: relative;
    z-index: 1; /* Ensure modal body is a valid stacking context */
}

/* Positioning for the main table container */
.candidatesTab-table-wrapper {
    position: relative;
    overflow-x: auto;
    box-sizing: border-box;
    z-index: 1;
}

/* The loading overlay that covers the content */
.candidatesTabloading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Make sure it's on top */
}

.candidatesTabloading-overlay.is-loading-visible {
    display: flex;
}

/* The spinning animation */
.candidatesTab-spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Modal Overlay */
.candidatesSidebar-modal {
  display: none;
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.35);
  z-index: 2000;
  justify-content: flex-end;
  align-items: stretch;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Show modal */
.candidatesSidebar-modal.is-active {
  display: flex;
}

/* Sidebar Content */
.candidatesSidebar-modal-content {
  background-color: #fff;
  width: 500px;
  max-width: 100%;
  height: 100%;
  padding: 20px 30px;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
  border-left: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  animation: slideIn 0.3s ease forwards;
  color: #2c3e50;
  padding-top: 65px;
}

/* Slide-in animation */
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Header */
.candidatesSidebar-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 14px;
  margin-bottom: 24px;
}

.candidatesSidebar-modal-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  letter-spacing: 0.05em;
}

/* Close Button */
.candidatesSidebar-close-btn {
  background: transparent;
  border: none;
  font-size: 26px;
  color: #999;
  cursor: pointer;
  transition: color 0.25s ease;
  user-select: none;
  padding: 8px; /* Increase clickable area */
  line-height: 1;
}

.candidatesSidebar-close-btn:hover {
  background-color: rgba(56, 182, 255, 0.15);
  color: #38B6FF; /* keep icon color */
  border-radius: 4px; /* optional for rounded background */
}


/* Modal Body */
.candidatesSidebar-modal-body {
  flex-grow: 1;
  font-size: 16px;
  color: #444;
  line-height: 1.6;
  overflow-y: auto;
}

/* Candidate Details Group */
.candidate-detail-group {
  background-color: #fafafa;
  padding: 22px 26px;
  border-radius: 8px;
  box-shadow: inset 0 0 8px #e6e6e6;
  display: flex;
  flex-direction: column;
  gap: 18px;
  user-select: text;
}

/* Each detail row */
.candidate-detail-group > div {
  display: flex;
  flex-wrap: nowrap; /* prevent wrapping */
  gap: 12px;
  align-items: center;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  cursor: default;
  white-space: nowrap; /* keep all content on one line */
  overflow: hidden;    /* hide overflow if too long */
  text-overflow: ellipsis; /* add ... if too long */
}


.candidate-detail-group > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Labels */
.detail-label {
  min-width: 140px;
  color: #38B6FF;
  font-weight: 600;
  user-select: none;
  text-transform: capitalize;
}

/* Values */
.candidate-detail-group > div span:not(.detail-label) {
  font-weight: 500;
  color: #444;
  user-select: text;
  white-space: nowrap; /* prevent breaking inside value */
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Scrollbar styling */
.candidatesSidebar-modal-body::-webkit-scrollbar {
  width: 6px;
}
.candidatesSidebar-modal-body::-webkit-scrollbar-thumb {
  background-color: #38B6FF88;
  border-radius: 3px;
}

/* Responsive */
@media (max-width: 480px) {
  .candidatesSidebar-modal-content {
    width: 100%;
    border-left: none;
    border-radius: 0;
    padding: 20px 20px 30px;
  }

  .detail-label {
    min-width: 110px;
  }
}


/* Sidebar cards */
/* Sidebar itself */
.candidate-sidebar.manage-sidebar {
    position: fixed;
    top: 0;
    right: -700px;
    width: 700px;
    height: 100%;
    background: linear-gradient(135deg, #F8FFFF, #E9F9FF); /* fallback gradient */
	background-image: url('../employer-images/healthcare-bg.png'); 
    background-size: cover;        /* cover whole sidebar */
    background-repeat: no-repeat;  /* don’t repeat */
    background-position: top right; /* position watermark */
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    z-index: 10000;
    transition: right 0.3s ease;
    overflow-y: auto;
    padding-bottom: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.candidate-sidebar.manage-sidebar.is-active {
    right: 0;
}

.sidebar-headercandidatemanage{
	padding-top: 80px; /* moves all cards down */
    padding-left: 67px;
    padding-right: 16px;
	padding-bottom:10px;
	position: relative;        /* for close button positioning */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 10px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.card-row {
  display: flex;             /* Arrange children in a row */
  gap: 20px;                 /* Space between job-card and candidate-card */
  flex-wrap: wrap;           /* Wrap cards on smaller screens */
  margin: 20px;
}

.card {
  flex: 1;                   /* Each card takes equal width */
  min-width: 300px;          /* Prevent shrinking too much */
  padding: 15px;
  border: 1px solid #ffff;
  border-radius: 8px;
  background-color: #fff;
}

.interview-card {
   width: 93%;          /* Separate from the first row */
}

.candidate-name { font-weight: bold; font-size: 44; }
.job-name { font-size: 30px; color: #555; }



.sidebar-headercandidatemanage:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    transform: translateY(-1px); /* subtle lift */
}

.manage-title{
  
    color: #000000;
    font-size: 33px;

}

.manage-body {
    padding-top: 0px; /* moves all cards down */
    padding-left: 16px;
    padding-right: 16px;
}


/* Cards inside sidebar */
.manage-body .card {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 16px;
    margin: 16px auto;   /* centers horizontally */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
   max-width: 100%;     /* optional: limit width so it doesn’t stretch */
}

.manage-body .card h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 16px;
    color: #333;
}

.manage-body .card p {
    margin: 4px 0;
    font-size: 14px;
    color: #555;
}

.manage-body .manage-actions {
    display: flex;
    gap: 10px;
    margin-top: 32px;
}

.manage-body .manage-actions .candidatesTab-btn {
    flex: 1;
}



.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2); /* semi-transparent dark overlay */
    backdrop-filter: blur(2px); /* slight blur effect */
    opacity: 0;                /* hidden by default */
    pointer-events: none;      /* ignore clicks when hidden */
    transition: opacity 0.3s ease;
    z-index: 9999;             /* behind sidebar (sidebar is 10000) */
}

.sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;      /* allow clicking to close if needed */
}



/* Close button */
.manage-close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 28px;
    font-weight: bold;
    background: rgba(0,0,0,0.08);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.manage-close:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}



/*
========================================
=====   DARK MODE OVERRIDES (Part 5) =====
=====     (Candidates View & Modals) =====
========================================
*/

/* --- 1. Main Page & Header --- */
body.dark-mode .candidatesTab-container {
  background-color: #111827; /* gray-900 */
}

body.dark-mode .candidatesTab-header {
  background-color: #1f2937; /* gray-800 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  /* The light mode has rounded bottom corners, so a border would look weird */
}

body.dark-mode .candidatesTab-title {
  color: #e5e7eb; /* gray-200 */
}

body.dark-mode .candidatesTab-dropdown {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

/* --- 2. Candidates Table --- */
body.dark-mode .candidatesTab-table {
  background: #1f2937; /* gray-800 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  color: #d1d5db;
}

body.dark-mode .candidatesTab-table th {
  background-color: #374151; /* gray-700 */
  color: #e5e7eb;
}

/* Override alternating row colors for a cleaner dark look */
body.dark-mode .candidatesTab-table tbody tr:nth-child(4n + 1),
body.dark-mode .candidatesTab-table tbody tr:nth-child(4n + 2),
body.dark-mode .candidatesTab-table tbody tr:nth-child(4n + 4),
body.dark-mode .candidatesTab-table tbody tr:nth-child(4n + 3) {
  background-color: transparent; /* Use the table's base bg */
}

body.dark-mode .candidatesTab-table td {
  border-bottom: 1px solid #374151; /* gray-700 */
  color: #d1d5db;
}

body.dark-mode .candidatesTab-table tbody tr:hover {
  background-color: #111827; /* gray-900 */
}

/* --- 3. Status Badges --- */
body.dark-mode .candidatesTab-status {
  border: 1px solid transparent; /* Remove light-mode borders */
  padding: 1px 20px; /* Adjust padding slightly */
}

body.dark-mode .candidatesTab-status-applied {
  background-color: #1e40af;
  color: #dbeafe;
}
body.dark-mode .candidatesTab-status-hired {
  background-color: #065f46;
  color: #d1fae5;
}
body.dark-mode .candidatesTab-status-rejected {
  background-color: #991b1b;
  color: #fee2e2;
}
body.dark-mode .candidatesTab-status-candidate-declined {
  background-color: #b45309;
  color: #fef3c7;
}
body.dark-mode .candidatesTab-status-interview-scheduled {
  background-color: #581c87;
  color: #f3e8ff;
}
body.dark-mode .candidatesTab-status-on-hold {
  background-color: #4b5563;
  color: #e5e7eb;
}

/* --- 4. Buttons --- */

/* Fix: Unprofessional green hover */
body.dark-mode .candidatesTab-btn-secondary:hover {
  background-color: #20807e; /* Darker professional teal */
}

body.dark-mode .candidatesTab-btn-outline {
  background-color: #374151;
  color: #e5e7eb;
  border: 1px solid #4b5563;
}

body.dark-mode .candidatesTab-btn-outline:hover {
  background-color: #4b5563;
}

/* --- 5. Center Modal --- */
body.dark-mode .modal-content {
  background-color: #1f2937;
  border: 1px solid #374151;
  color: #d1d5db;
}

body.dark-mode .modal-header {
  background-color: #374151;
  border-bottom: 1px solid #4b5563;
}

body.dark-mode .modal-header h2 {
  color: #e5e7eb;
}

body.dark-mode .modal-body {
  color: #d1d5db;
}

body.dark-mode .modal-body p strong {
  color: #e5e7eb;
}

body.dark-mode .close-btn {
  color: #9ca3af;
}

body.dark-mode .close-btn:hover {
  background-color: #374151;
  color: #e5e7eb;
}

body.dark-mode .modal-footer {
  border-top: 1px solid #374151;
  background-color: #111827;
}

/* --- 6. Loading Spinner --- */
body.dark-mode .candidatesTabloading-overlay {
  background-color: rgba(31, 41, 55, 0.9); /* gray-800 at 90% */
}

body.dark-mode .candidatesTab-spinner {
  border: 6px solid #374151;
  border-top: 6px solid #38b6ff; /* Keep brand blue */
}

/* --- 7. Slide-Out Sidebar (View Details) --- */
body.dark-mode .candidatesSidebar-modal-content {
  background-color: #1f2937;
  border-left: 1px solid #374151;
  color: #d1d5db;
}

body.dark-mode .candidatesSidebar-modal-header {
  border-bottom: 1px solid #374151;
}

body.dark-mode .candidatesSidebar-modal-header h2 {
  color: #e5e7eb;
}

body.dark-mode .candidatesSidebar-close-btn {
  color: #9ca3af;
}

body.dark-mode .candidatesSidebar-close-btn:hover {
  color: #60a5fa; /* Lighter blue */
}

body.dark-mode .candidatesSidebar-modal-body {
  color: #d1d5db;
}

body.dark-mode .candidate-detail-group {
  background-color: #111827; /* gray-900 */
  box-shadow: inset 0 0 8px #000;
}

body.dark-mode .candidate-detail-group > div {
  color: #d1d5db;
  border-bottom: 1px solid #374151;
}

body.dark-mode .candidate-detail-group > div span:not(.detail-label) {
  color: #d1d5db;
}

/* --- 8. Slide-Out Sidebar (Manage Candidate) --- */

/* This sidebar has a background image.
   We'll assume the image is light and just darken the gradient. */
body.dark-mode .candidate-sidebar.manage-sidebar {
  background: linear-gradient(135deg, #111827, #1f2937);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.5);
  /* The original 'background-image' url() will still apply on top */
}

/* * * HERE IS THE REAL FIX! 
* We are targeting the PARENT container, not the span.
* */
body.dark-mode #manageCandidateSidebarTitle {
  text-align: left;
}

/* Fix for the main cards in the header */
body.dark-mode .candidate-sidebar.manage-sidebar .card {
  background-color: #374151; /* gray-700 */
  border: 1px solid #4b5563; /* gray-600 */
}


body.dark-mode .candidate-sidebar.manage-sidebar .card h3{
 color: #fff;
}



/* Fix for the text inside those cards */
body.dark-mode .candidate-sidebar.manage-sidebar .candidate-name {
  color: #e5e7eb;
}

body.dark-mode .candidate-sidebar.manage-sidebar .job-name {
  color: #d1d5db;
  font-size:20px;
}

body.dark-mode .manage-title {
  color: #e5e7eb;
}

/* This rule is for the *inner* cards in the body */
body.dark-mode .manage-body .card {
  background: #374151;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .manage-body .card h4 {
  color: #e5e7eb;
}

body.dark-mode .manage-body .card p {
  color: #d1d5db;
}

body.dark-mode .manage-close {
  background: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
}

body.dark-mode .manage-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Darker overlay */
body.dark-mode .sidebar-overlay.active {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}


body.dark-mode #interviewDate {
  /* 1. The Modern Way: This tells the browser to use 
     its built-in DARK calendar and time picker pop-up. */
  color-scheme: dark;

  /* 2. Fallback Styles: This styles the text box part 
     that you see on the page. */
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}


/* --- Fix for Filter Dropdown --- */
body.dark-mode .candidatesTab-dropdown {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}