/* Container */
.joblisttab-header-container {
  background-color: white;
  border-bottom: 1px solid #e5e7eb; /* Tailwind gray-200 */
  padding: 1.5rem 2rem; /* px-8 py-6 */
}

/* Flex container */
.joblisttab-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Left text section */
.joblisttab-header-text h1 {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 700; /* font-bold */
  color: #111827; /* gray-900 */
  margin: 0;
  letter-spacing: 0.01em;
}

.joblisttab-header-text p {
  color: #4b5563; /* gray-600 */
  margin-top: 0.25rem; /* mt-1 */
  margin-bottom: 0;
}

.joblisttab-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.joblisttab-btn-info {
  background-color: #2CA6A4; /* brand-blue */
  color: #ffffff;
  padding: 0.6rem 1.25rem;
  border-radius: 0.5rem; /* slightly more rounded */
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4); /* subtle shadow */
  border: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.joblisttab-btn-info:hover,
.joblisttab-btn-info:focus {
  background-color: #A5C42F; /* corrected hex color */
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.6);
  outline: none;
}

   .joblisting-btn.btn-green {
        background-color: transparent; /* Make background see-through */
        color: #16a34a;              /* Set the text color to green */
        
        transition: all 0.2s ease-in-out; /* Smooth hover effect */
    }

    .joblisting-btn.btn-green:hover {
        
        color: white;              /* On hover, make the text white */
    }


.container-joblisting {
  margin: 30px;
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden; 
}

.joblisting-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0px;
}

.joblisting-table th,
.joblisting-table td {
  padding: 1rem 1.5rem;
  font-size: 12px;
  text-align: left;
 
}


.joblisting-table thead {
  background-color: #f3f4f6;
  border-bottom: 1px solid #e5e7eb; /* gray horizontal line under the header */
}


.joblisting-table tbody tr {
  border-bottom: 1px solid #e5e7eb; /* gray horizontal lines between rows */
}


.joblisting-table tbody tr:last-child {
  border-bottom: none; /* optional: remove line after last row */
}

.joblisting-table,
.joblisting-table th,
.joblisting-table td {
  border: none;
  outline: none;
}
.joblisting-table th,
.joblisting-table td {
  padding: 0.8rem 1.5rem; /* reduce top/bottom padding */
}

.joblisting-table tbody tr:hover {
  background-color: #f1f5f9;
}

.joblisting-font-semibold {
  color: #000;
  font-weight: 600;
  font-size: 13px;
}

.joblisting-text-gray-500 {
  color: #6b7280;
}

.joblisting-text-black {
  color: #000;
}

.joblisting-rounded-full {
  border-radius: 9999px;
}

.joblisting-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 12px;
  font-weight: 500;
  border-radius: 9999px;
}

.joblisting-joblisting-bg-blue-100 {
  background-color: #dbeafe;
  color: #1e40af;
  padding: 0.5rem 1.25rem;  /* increase padding (top-bottom, left-right) */
  min-width: 60px;          /* optional: minimum width */
  display: inline-flex;     /* ensure it sizes properly */
  justify-content: center;  /* center content horizontally */
  align-items: center;      /* center content vertically */
  font-size: 14px;          /* optionally increase font size */
  border-radius: 9999px;    /* keep pill shape */
}


.joblisting-bg-green-100 {
  background-color: #d1fae5;
  color: #065f46;
}

.joblisting-bg-orange-100 {
  background-color: #ffedd5;
  color: #9a3412;
}

.joblisting-btn {
  font-size: 14px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.15s;
}

.joblisting-text-brand-blue {
  color: #2563eb;
}

.joblisting-text-brand-blue:hover {
  color: #1d4ed8;
}

.joblisting-text-gray-600 {
  color: #4b5563;
}

.joblisting-text-gray-600:hover {
  color: #1f2937;
}

.joblisting-space-x-3 > *:not(:last-child) {
  margin-right: 0.75rem;
}



/* Modal overlay background */
.addjob-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  overflow-y: auto; /* lets you scroll if modal is taller than viewport */
}

/* Modal box */
.addjob-modal-content {
  background: white;
  padding: 2.5rem 3rem;
  border-radius: 0.75rem;
  width: 600px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  max-width: 90%;       
}

/* Input style */
#addjob-jobTitleInput {
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  outline: none;
  box-sizing: border-box;
  text-align: left;
}

#addjob-jobTitleInput:focus {
  border-color: #38b6ff;
  box-shadow: 0 0 5px #38b6ff;
}

/* Buttons container */
.addjob-modal-buttons {
  display: flex;
  justify-content: space-between;
}

/* Buttons */
.addjob-joblisttab-btn-info {
  background-color: #38b6ff; /* brand-blue */
  color: #ffffff;
  padding: 0.75rem 1.5rem; /* slightly bigger padding */
  border-radius: 0.5rem;
  font-weight: 700;       /* bolder */
  font-size: 1.25rem;     /* larger font size */
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
  border: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.addjob-joblisttab-btn-info:hover,
.addjob-joblisttab-btn-info:focus {
  background-color: #B6CE50; /* darker blue */
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.6);
  outline: none;
}

/* Cancel button override */
#addjob-cancelJobBtn {
  background-color: #ccc;
  color: #333;
}

#addjob-cancelJobBtn:hover,
#addjob-cancelJobBtn:focus {
  background-color: #999;
  color: #111;
}
/* Modal label */
.addjob-modal-content h2 {
  display: block;
  font-size: 2rem;
  font-weight: 600;
  color: #111827; /* dark gray */
  margin-bottom: 0.5rem;
  text-align: left;
}

.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

 .hidden-addjob {
  display: none !important;
}

/* Toast container */
#addjob-toast-notification {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Success toast - soft teal/green */
.toast-success {
  background-color: #2dd4bf; /* teal-400 */
  color: #064e3b; /* teal-900 text */
  box-shadow: 0 4px 15px rgba(45, 212, 191, 0.6);
}

/* Error toast - warm coral/red */
.toast-error {
  background-color: #ef4444; /* red-500 */
  color: #b91c1c; /* red-700 text */
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.6);
}


.toast-success {
  background-color: #059669; /* emerald-600 */
  color: white;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.6);
}

.toast-error {
  background-color: #dc2626; /* red-600 */
  color: white;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.6);
}
/*
========================================
=====   DARK MODE OVERRIDES (Part 3) =====
=====     (Job List, Table, Modal)   =====
========================================
*/

/* --- 1. Job List Header --- */
body.dark-mode .joblisttab-header-container {
  background-color: #1f2937; /* gray-800 */
  border-bottom: 1px solid #374151; /* gray-700 */
}

body.dark-mode .joblisttab-header-text h1 {
  color: #e5e7eb; /* Softer gray-200 */
}

body.dark-mode .joblisttab-header-text p {
  color: #9ca3af; /* Softer gray-400 */
}

/* Fix: Unprofessional green hover on header button */
body.dark-mode .joblisttab-btn-info:hover,
body.dark-mode .joblisttab-btn-info:focus {
  background-color: #20807e; /* Darker professional teal */
  box-shadow: 0 4px 10px rgba(44, 166, 164, 0.5); /* Teal shadow */
}

/* --- 2. Job List Table Container --- */
body.dark-mode .container-joblisting {
  background-color: #1f2937; /* gray-800 */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
  /* Add a border for consistency */
  border: 1px solid #374151; 
}

/* --- 3. Job List Table --- */
body.dark-mode .joblisting-table thead {
  background-color: #374151; /* gray-700 */
  border-bottom: 1px solid #4b5563; /* gray-600 */
}

body.dark-mode .joblisting-table tbody tr {
  border-bottom: 1px solid #374151; /* gray-700 */
}

body.dark-mode .joblisting-table tbody tr:hover {
  background-color: #374151; /* gray-700 */
}

/* --- 4. Table Text & Badges --- */
body.dark-mode .joblisting-font-semibold,
body.dark-mode .joblisting-text-black {
  color: #e5e7eb; /* Softer gray-200 */
}

body.dark-mode .joblisting-text-gray-500 {
  color: #9ca3af; /* Softer gray-400 */
}

/* Invert all badges */
body.dark-mode .joblisting-joblisting-bg-blue-100 {
  background-color: #1e40af;
  color: #dbeafe;
}

body.dark-mode .joblisting-bg-green-100 {
  background-color: #065f46;
  color: #d1fae5;
}

body.dark-mode .joblisting-bg-orange-100 {
  background-color: #9a3412;
  color: #ffedd5;
}

/* --- 5. Table Link Buttons --- */
body.dark-mode .joblisting-text-brand-blue {
  color: #60a5fa; /* Lighter blue */
}

body.dark-mode .joblisting-text-brand-blue:hover {
  color: #93c5fd; /* Even lighter blue */
}

body.dark-mode .joblisting-text-gray-600 {
  color: #9ca3af;
}

body.dark-mode .joblisting-text-gray-600:hover {
  color: #e5e7eb;
}

body.dark-mode .joblisting-btn.btn-green {
  color: #22c55e; /* Brighter green text */
}

body.dark-mode .joblisting-btn.btn-green:hover {
  color: #4ade80; /* Even brighter green */
}

/* --- 6. Add Job Modal --- */
body.dark-mode .addjob-modal-content {
  background: #1f2937; /* gray-800 */
  border: 1px solid #374151;
}

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

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

body.dark-mode #addjob-jobTitleInput:focus {
  /* Keep the blue focus, it looks great! */
  border-color: #38b6ff;
  box-shadow: 0 0 5px #38b6ff;
}

/* Fix: Unprofessional green hover on modal button */
body.dark-mode .addjob-joblisttab-btn-info:hover,
body.dark-mode .addjob-joblisttab-btn-info:focus {
  background-color: #2596d9; /* Standard pro-blue hover */
}

body.dark-mode #addjob-cancelJobBtn {
  background-color: #4b5563; /* gray-600 */
  color: #e5e7eb;
}

body.dark-mode #addjob-cancelJobBtn:hover,
body.dark-mode #addjob-cancelJobBtn:focus {
  background-color: #6b7280; /* gray-500 */
  color: #ffffff;
}