/* ===== DARK-THEME-AWARE OVERRIDES ===== */
.job-list-header {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.job-row {
  background: var(--bg-primary);
  box-shadow: 0 4px 12px var(--shadow-color);
  color: var(--text-primary);
}
.job-title-link { color: #0056d2; } /* keep brand blue */
.job-location   { color: var(--text-secondary); }
.meta-label     { color: var(--text-tertiary); }

.dropdown-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px var(--shadow-color);
}
.dropdown-content a { color: var(--text-primary); }
.dropdown-content a:hover { background-color: var(--hover-bg); }

.paused-banner {
  background-color: rgba(255, 229, 229, 0.1); /* gentle in dark, same feel in light */
  color: #ffb4b4;
  border: 1px solid var(--border-color);
}

.page-title { color: var(--text-primary); }

.edit-job-form {
  background: var(--bg-primary);
  box-shadow: 0 4px 12px var(--shadow-color);
}
.edit-job-form input,
.edit-job-form textarea,
.edit-job-form select {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.edit-job-form input::placeholder,
.edit-job-form textarea::placeholder {
  color: var(--text-tertiary);
}

/* ---------- THEME VARIABLES- BASE.HTML PAGE ---------- */
  :root {
    /* Light (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f3f4f6;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --border-color: #e5e7eb;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --hover-bg: #f9fafb;
  }
  [data-theme="dark"] {
    /* Dark */
    --bg-primary: #1f2937;
    --bg-secondary: #111827;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --border-color: #4b5563;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --hover-bg: #374151;
  }

  /* ---------- GLOBAL ELEMENTS ---------- */
  html, body { background: var(--bg-secondary); color: var(--text-primary); }
  main       { background: var(--bg-secondary); }
  section, article { color: var(--text-primary); }

  /* Links adopt theme colors nicely */
  a { color: inherit; }
  a:hover { opacity: .9; }

  /* Borders + dividers */
  hr, .border, [class*="border-gray-"] { border-color: var(--border-color) !important; }

  /* Cards / panels (common patterns) */
  .card, .panel { background: var(--bg-primary); color: var(--text-primary); }

  /* Inputs / selects / textareas */
  input, select, textarea {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
  }
  input::placeholder, textarea::placeholder { color: var(--text-tertiary); opacity: 1; }

  /* Table defaults */
  table { color: var(--text-primary); }
  thead { background: var(--bg-tertiary); }
  tbody tr { background: var(--bg-primary); }

  /* Tailwind utility overrides under dark theme (safe, scoped) */
  [data-theme="dark"] .bg-white { background-color: var(--bg-tertiary) !important; }
  [data-theme="dark"] .text-gray-900,
  [data-theme="dark"] .text-gray-800,
  [data-theme="dark"] .text-gray-700 { color: var(--text-primary) !important; }
  [data-theme="dark"] .text-gray-600,
  [data-theme="dark"] .text-gray-500,
  [data-theme="dark"] .text-gray-400 { color: var(--text-secondary) !important; }
  [data-theme="dark"] .border-gray-200,
  [data-theme="dark"] .border-gray-300 { border-color: var(--border-color) !important; }
  [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--hover-bg) !important; }

  /* Shadow tuning in dark for Tailwind shadows */
  [data-theme="dark"] .shadow,
  [data-theme="dark"] .shadow-md,
  [data-theme="dark"] .shadow-lg {
    box-shadow: 0 10px 15px -3px var(--shadow-color),
                0 4px  6px -2px var(--shadow-color) !important;
  }

  /* Header (kept global so it always follows theme) */
  header {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
  }
  header .hover\:bg-gray-100:hover { background-color: var(--hover-bg) !important; }
  #profileDropdownMenu {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 15px -3px var(--shadow-color);
  }
  #profileDropdownMenu a { color: var(--text-primary) !important; }
  #profileDropdownMenu a:hover { background-color: var(--hover-bg) !important; }
  .theme-toggle-btn {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: all 0.3s ease;
  }
  .theme-toggle-btn:hover {
    background-color: var(--hover-bg);
    transform: scale(1.1);
    box-shadow: 0 4px 8px var(--shadow-color);
  }

  /* Smooth transitions site-wide */
  * { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }




   /* ------------------------CSS for Dark Mode Theme Variables - HEADER.HTML PAGE------------------ */

    /* Theme Variables */
    :root {
        /* Light theme (default) */
        --bg-primary: #ffffff;
        --bg-secondary: #f8f9fa;
        --bg-tertiary: #f3f4f6;
        --text-primary: #1f2937;
        --text-secondary: #6b7280;
        --text-tertiary: #9ca3af;
        --border-color: #e5e7eb;
        --shadow-color: rgba(0, 0, 0, 0.1);
        --hover-bg: #f9fafb;
    }

    [data-theme="dark"] {
        /* Dark theme */
        --bg-primary: #1f2937;
        --bg-secondary: #111827;
        --bg-tertiary: #374151;
        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
        --text-tertiary: #9ca3af;
        --border-color: #4b5563;
        --shadow-color: rgba(0, 0, 0, 0.3);
        --hover-bg: #374151;
    }

    /* Apply theme to existing elements */
    header {
        background-color: var(--bg-primary) !important;
        border-bottom: 1px solid var(--border-color);
        transition: all 0.3s ease;
    }

    header .text-gray-700 {
        color: var(--text-primary) !important;
    }

    header .text-gray-600 {
        color: var(--text-secondary) !important;
    }

    header .text-gray-500 {
        color: var(--text-tertiary) !important;
    }

    header .hover\:bg-gray-100:hover {
        background-color: var(--hover-bg) !important;
    }

    header svg {
        color: var(--text-primary);
    }

    #profileDropdownMenu {
        background-color: var(--bg-primary) !important;
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 15px -3px var(--shadow-color);
    }

    #profileDropdownMenu a {
        color: var(--text-primary) !important;
    }

    #profileDropdownMenu a:hover {
        background-color: var(--hover-bg) !important;
    }

    /* Theme toggle button styles */
    .theme-toggle-btn {
        background-color: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        transition: all 0.3s ease;
    }

    .theme-toggle-btn:hover {
        background-color: var(--hover-bg);
        transform: scale(1.1);
        box-shadow: 0 4px 8px var(--shadow-color);
    }

    /* Smooth transitions for all elements */
    * {
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

  /* --- Dark-mode patch for Job Posts grid --- */
  [data-theme="dark"] body { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }

  /* Table surface + text */
  [data-theme="dark"] #jobsTable thead { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; }
  [data-theme="dark"] #jobsTable tbody tr { background: var(--bg-primary) !important; }
  [data-theme="dark"] #jobsTable th,
  [data-theme="dark"] #jobsTable td { color: var(--text-primary) !important; }

  /* Dates (start/end) are plain <td> text – force contrast */
  [data-theme="dark"] #jobsTable td[data-order] { color: var(--text-primary) !important; }

  /* Icons (applied/new and repost) */
  [data-theme="dark"] #jobsTable i.bi { color: var(--text-primary) !important; }
  [data-theme="dark"] .fav-toggle { color: var(--text-tertiary) !important; }
  [data-theme="dark"] .fav-toggle.active { color: #f5b301 !important; } /* keep star color */
  [data-theme="dark"] a i.bi { color: var(--text-primary) !important; }
  [data-theme="dark"] #jobsTable a { color: var(--text-primary) !important; }
  [data-theme="dark"] #jobsTable a:hover { color: #4640DE !important; }

  /* Labels, badges, dropdown */
  [data-theme="dark"] .job-title { color: var(--text-primary) !important; }
  [data-theme="dark"] .meta-label { color: var(--text-secondary) !important; }
  [data-theme="dark"] .dropdown-toggle { color: var(--text-secondary) !important; }
  [data-theme="dark"] .dropdown-menu { background: var(--bg-primary) !important; box-shadow: 0 4px 12px var(--shadow-color) !important; }
  [data-theme="dark"] .dropdown-menu a { color: var(--text-primary) !important; }
  [data-theme="dark"] .dropdown-menu a:hover { background: var(--hover-bg) !important; }

  /* Status chips */
  [data-theme="dark"] .status-badge.open  { background: rgba(30,127,74,.18) !important; color: #86e6be !important; }
  [data-theme="dark"] .status-badge.paused{ background: rgba(255,216,119,.18) !important; color: #ffd877 !important; }
  [data-theme="dark"] .screen  { background: #111827 !important;  }

/* Dark mode: make all labels white */
[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .col-form-label,
[data-theme="dark"] .control-label,
[data-theme="dark"] .label {        /* keep in case you actually use .label somewhere */
  color: #fff !important;
}



[data-theme="dark"] div.editor-container {
  background: transparent !important;              /* remove fill */
  border: 1px solid var(--border-color) !important;/* keep subtle border */
  box-shadow: none !important;                      /* optional: no shadows */
}

  /* Datatables controls */
  [data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
  [data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
  }

  /* Paused note box */
  [data-theme="dark"] .paused-note {
    background: rgba(15,43,107,.15) !important;
    color: #cdd8ff !important;
    border-color: var(--border-color) !important;
  }


  /* Make native controls (date pickers, etc.) flip too */
  /* --------------EDIT_JOB.HTML PAGE CSS-------------------------- */
  :root { color-scheme: light; }
  [data-theme="dark"] { color-scheme: dark; }

  /* Page surface + text (in case style2.css sets body) */
  body { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }

  /* Card & sections (force override any white backgrounds) */
  .card { 
    background: var(--bg-primary) !important; 
    color: var(--text-primary) !important; 
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 15px -3px var(--shadow-color) !important;
  }
  .card-header { 
    background: var(--bg-primary) !important; 
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
  }
  .card-content { 
    background: var(--bg-primary) !important; 
    color: var(--text-primary) !important; 
  }

  /* Row layout (labels + values) */
  .row { border-bottom: 1px dashed var(--border-color); }
  .row > span { color: var(--text-secondary); }
  .display-value { color: var(--text-primary); }

  /* Description box (your JD) */
  .description-box {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    padding: .75rem 1rem;
    border-radius: 8px;
  }
  /* If JD has its own tags with inline colors, neutralize common ones */
  .description-box p, 
  .description-box li, 
  .description-box span, 
  .description-box div { color: var(--text-primary) !important; }

  /* Inputs/selects/textarea (edit mode) */
  .edit-input,
  .edit-se
  .edit-input input,
  .edit-input select,
  .edit-input textarea,
  input[type="text"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
  }
  input::placeholder, textarea::placeholder { color: var(--text-tertiary) !important; opacity: 1; }

  /* Buttons area */
  .button-wrapper { 
    background: var(--bg-primary) !important; 
    border-top: 1px solid var(--border-color) !important;
  }
  .btn-back, .btn-continue {
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
  }
  .btn-continue { 
    background: #4640DE; 
    color: #fff; 
    border-color: transparent; 
  }
  [data-theme="dark"] .btn-continue { filter: brightness(1.1); }

  /* Autocomplete + dropdowns */
  .autocomplete-box {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 8px 20px var(--shadow-color) !important;
  }
  .autocomplete-box div:hover { background: var(--hover-bg) !important; }

  /* Toggle switch */
  .switch .slider { background-color: var(--border-color) !important; }
  .switch .slider:before { background: var(--bg-primary) !important; }
  input:checked + .slider { background: #0d6efd !important; }
  [data-theme="dark"] input:checked + .slider { filter: brightness(1.1); }

  /* Icons */
  .bi { color: var(--text-primary); }
  .edit-icon .bi, .save-icon .bi { color: var(--text-secondary); }
  .edit-icon:hover .bi, .save-icon:hover .bi { color: var(--text-primary); }

  /* Choices.js (multi-select) */
  .choices__inner {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
  }
  .choices__list--dropdown {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
  }
  .choices__list--dropdown .choices__item--selectable { color: var(--text-primary) !important; }
  .choices__input { background: var(--bg-primary) !important; color: var(--text-primary) !important; }
  .choices__item--selectable.is-highlighted { background: var(--hover-bg) !important; }


    [data-theme="dark"] .card .row span,
  [data-theme="dark"] .card .row p, [data-theme="dark"] .h1 {
    color: inherit !important; /* inherit from .card (which uses var(--text-primary)) */
  }
    [data-theme="dark"] .card .row {
    border-bottom: none !important;
  }
   [data-theme="dark"] h1 {
    color: inherit !important; /* follows parent, typically var(--text-primary) */
  }

/* Dark-mode: make step text black */
[data-theme="dark"] .step-tracker .step span {
  color: #000 !important;
}

/* Dark mode: remove top border on the button bar */
[data-theme="dark"] .button-wrapper {
  border-top: 0 !important;          /* kill any explicit top border */
}


/* Dark mode: Tagify without background */
[data-theme="dark"] .tagify,
[data-theme="dark"] .tagify.tagify--noTags.tagify--empty {
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  /* Tagify CSS vars for consistency */
  --input-bg: transparent;
  --tag-bg: transparent;
  --tags-border-color: var(--border-color);
  --input-color: #fff;
  --placeholder-color: rgba(255,255,255,.7);
}

/* Ensure the inner input matches */
[data-theme="dark"] .tagify__input {
  background: transparent !important;
  color: #fff !important;
}
[data-theme="dark"] .tagify__input::placeholder {
  color: rgba(255,255,255,.7) !important;
}

/* If any tags exist, make them transparent too (outline only) */
[data-theme="dark"] .tagify__tag > div {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid var(--border-color) !important;
}

/* Neutralize utility classes forcing a bg (e.g., .bg-white) */
[data-theme="dark"] .tagify.bg-white,
[data-theme="dark"] .tagify[class*="bg-"] {
  background: transparent !important;
}

/* Dark mode: Tagify tag text should be BLACK */
[data-theme="dark"] .tagify .tagify__tag .tagify__tag-text,
[data-theme="dark"] .tagify .tagify__tag--active .tagify__tag-text,
[data-theme="dark"] .tagify .tagify__tag--editable .tagify__tag-text {
  color: #000 !important;
}

/* ---------------PREVIEW PAGE-------------------- */
/* ===== Job Post Preview — Dark mode fixes ===== */
[data-theme="dark"] body {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Card surface + text */
[data-theme="dark"] .preview-container {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 10px 15px -3px var(--shadow-color),
              0 4px  6px -2px var(--shadow-color) !important;
}

/* Header divider & text */
[data-theme="dark"] .job-header {
  border-bottom: 1px solid var(--border-color) !important;
}
[data-theme="dark"] .job-header h2,
[data-theme="dark"] .job-meta {
  color: var(--text-primary) !important;
}

/* Section headings & content */
[data-theme="dark"] .section h4,
[data-theme="dark"] .section p,
[data-theme="dark"] .info-item,
[data-theme="dark"] .info-item i {
  color: var(--text-primary) !important;
}

/* Grid borders (if any from global styles) */
[data-theme="dark"] .info-grid,
[data-theme="dark"] .info-item {
  border-color: var(--border-color) !important;
}

/* “Apply” button keeps brand; ensure contrast */
[data-theme="dark"] .apply-btn {
  background: #4e5de4 !important;
  color: #fff !important;
  border: 1px solid transparent;
}
[data-theme="dark"] .apply-btn:hover {
  filter: brightness(1.08);
}

/* If JD HTML brings its own colors, neutralize common tags */
[data-theme="dark"] .preview-container .section p,
[data-theme="dark"] .preview-container .section li,
[data-theme="dark"] .preview-container .section span,
[data-theme="dark"] .preview-container .section div {
  color: var(--text-primary) !important;
}


/* ---------------REQUEST OTP PAGE-------------------- */
[data-theme="dark"] .subtitle,
[data-theme="dark"] .terms,
[data-theme="dark"] h2 {
  color: #fff !important;
}

/* (Optional) if there are links inside .terms, keep them white too */
[data-theme="dark"] .terms a {
  color: #fff !important;
}


/* ------------------CREATE PROFILE.HTML PAGE CSS--------------------------  */
/* Dark mode: email, URL, phone, selects (Bootstrap form controls) */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] .form-select {
  background: #374152 !important;                 
  color: #ffffff !important;
  border: 1px solid var(--border-color) !important;
}

/* Input-group addon (e.g., country code chip) */
[data-theme="dark"] .input-group-text {
  background: #374152 !important;
  color: #ffffff !important;
  border: 1px solid var(--border-color) !important;
}

/* --------------PROFILE UPDATE - COMPANY DASHBOARD------------------ */
[data-theme="dark"] .profile-header  { background: #1f2937 !important; }
[data-theme="dark"] .profile-form  { background: #1f2937 !important; }



[data-theme="dark"] .font-sans.bg-gray-50.min-h-screen {
   background-color: transparent !important;
}

[data-theme="dark"] header.mb-8.border-0.bg-transparent{
  background: none !important;
  background-color: transparent !important;
}
[data-theme="dark"] thead {
  background-color: #1f2a38 !important;
  color: #ffffff !important;
}

[data-theme="dark"] div.flex.flex-col.sm\:flex-row.items-center.justify-between.gap-4.px-6.py-4.bg-gray-50.border-t.border-gray-200 {
  background-color: #1f2a38 !important;
  color: #ffffff !important;
}
[data-theme="dark"] tr.hover\:bg-gray-50:hover {
  background-color: #1b2029 !important;
}

/* [data-theme="dark"] li.bg-gray-50.p-4.rounded-lg.shadow-sm.border-l-4.border-blue-500,
[data-theme="dark"] li.bg-gray-50.p-4.rounded-lg.shadow-sm.border-l-4.border-indigo-500,
[data-theme="dark"] li.bg-gray-50.p-4.rounded-lg.shadow-sm.border-l-4.border-green-500 {
  background: none !important;
  background-color: transparent !important;
} */

[data-theme="dark"] .flex.flex-col.md\:flex-row.items-center.md\:items-start.gap-6 {
  background-image: none !important;
  color: #ffffff !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-blue-50 {
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: #1f2a38; /* optional end color in dark mode */
  background-image: none !important;
}

[data-theme="dark"] .ml-2.px-3.py-2.bg-gray-200.rounded {
  background: none !important;
  background-color: #ffff !important;
  color: #000000 !important;
}
[data-theme="dark"] .pill,
[data-theme="dark"] .candidates-table,
[data-theme="dark"] .table-header{
  background-color: #1f2a38 !important;
  color: #ffffff !important;
}
[data-theme="dark"] .candidate-row:hover {
  background-color: #2d3b4f !important;
}

[data-theme="dark"] .bg-green-50 {
  background-color: transparent !important;
}

[data-theme="dark"] .bg-gray-50 {
  background-color: #1f2a387e !important;
}

[data-theme="dark"] .clear-btn {
  color: #fff !important; /* or use 'inherit' if you want it to match parent text */
 background-color: #374151 !important;
}

[data-theme="dark"] .clear-btn.dark\:text-black {
  color: #fff !important;
}
[data-theme="dark"] .skills-more-badge {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: #60a5fa !important;
}

 [data-theme="dark"] .alert-info-custom {
      background: linear-gradient(135deg, #1f2a38 0%, #2a3b4e 100%) !important;
      border-left: 4px solid #3b82f6;
      color: #e2e8f0 !important;
    }

[data-theme="dark"] .flex.items-center.text-sm.font-medium.text-gray-700.bg-blue-50 {
  color: #29282886 !important; /* white text in dark mode */
}
[data-theme="dark"] .flex.items-center.justify-between.p-3.bg-white {
  background-color: #1f2937 !important; /* Tailwind’s gray-800 */
}
[data-theme="dark"] .ml-2.text-xs.text-gray-500.px-2.py-0\.5.bg-gray-100.rounded-full {
  color: #29282886 !important; /* gray-200 */
}
[data-theme="dark"] .px-4.py-2.rounded-md.bg-gray-100.text-gray-700 {
  color: #29282886 !important; /* gray-200 */
}