@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

:root {
  --background: #f3f3f9;
  --foreground: #212529;

  /* Velzon-style design tokens */
  --vz-primary: #405189;      /* indigo brand */
  --vz-primary-hover: #364574;
  --vz-secondary: #3577f1;    /* info blue */
  --vz-success: #0ab39c;      /* teal */
  --vz-warning: #f7b84b;
  --vz-danger: #f06548;
  --vz-body-bg: #f3f3f9;
  --vz-card-bg: #ffffff;
  --vz-border: #e9ebec;
  --vz-text: #212529;
  --vz-text-muted: #878a99;
  --vz-heading: #495057;
  --vz-sidebar-bg: #405189;   /* dark indigo sidebar */
  --vz-radius: 0;      /* flat corners */
}

.dark {
  --background: #1a1d21;
  --foreground: #ced4da;
  --vz-body-bg: #1a1d21;
  --vz-card-bg: #212529;
  --vz-border: #32383e;
  --vz-text: #ced4da;
  --vz-text-muted: #a0a3a8;
  --vz-heading: #ced4da;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-vz-primary: var(--vz-primary);
  --color-vz-secondary: var(--vz-secondary);
  --color-vz-success: var(--vz-success);
  --color-vz-warning: var(--vz-warning);
  --color-vz-danger: var(--vz-danger);
  --color-vz-border: var(--vz-border);
  --color-vz-muted: var(--vz-text-muted);
  --font-sans: var(--font-poppins);
  --font-mono: var(--font-poppins);
}

body {
  background: var(--vz-body-bg);
  color: var(--vz-text);
  font-family: var(--font-poppins), "Poppins", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
}

/* This is to make the text visible in the input fields @SS -29-6-26 */
input,
select,
optgroup,
textarea {
  color: #1d1313cf;
}

/* Custom scrollbar utility class */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.35);
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.6);
}

.bg-slate-100 {
  background-color: #FDFDFE !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-none {
  -ms-overflow-style: none !important;  /* IE and Edge */
  scrollbar-width: none !important;  /* Firefox */
}

/* Explicit Select horizontal layout override */
.select-value-container-horizontal {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  align-items: center !important;
}

.select-value-container-horizontal > div {
  flex-shrink: 0 !important;
}

/* ==========================================================================
   Prominent Dropdown & Select Focus Styling
   ========================================================================== */

select {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* Prominent focus ring & border for all select dropdowns */
select:focus,
select:focus-visible,
select:focus-within {
  border-color: #405189 !important;
  outline: none !important;
  box-shadow: 0 0 0 3.5px rgba(64, 81, 137, 0.25), 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

.dark select:focus,
.dark select:focus-visible,
.dark select:focus-within {
  border-color: #6366f1 !important;
  outline: none !important;
  box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.35), 0 1px 3px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Prominent focus state for custom select controls & react-select containers */
.react-select__control--is-focused,
[class*="-control"]:focus-within {
  border-color: #405189 !important;
  box-shadow: 0 0 0 3.5px rgba(64, 81, 137, 0.25) !important;
}

.dark .react-select__control--is-focused,
.dark [class*="-control"]:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.35) !important;
}

/* ==========================================================================
   Rich-text (TinyMCE) content rendering
   Tailwind's preflight strips default margin/padding/list-style from every
   element, so HTML produced by the Job Description editor (p, ul, ol, li,
   headings, tables, links, etc.) needs its formatting restored explicitly
   wherever it's rendered via dangerouslySetInnerHTML. Used together with
   the `prose` utility class (e.g. `className="prose ..."`).
   ========================================================================== */
.prose {
  line-height: 1.6;
}

.prose p {
  margin: 0 0 0.75em;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0 0 0.75em;
}

.prose ol {
  list-style: decimal;
  padding-left: 1.5em;
  margin: 0 0 0.75em;
}

.prose ul ul {
  list-style: circle;
}

.prose ol ol,
.prose ul ol {
  list-style: lower-alpha;
}

.prose li {
  margin: 0.25em 0;
}

.prose li > ul,
.prose li > ol {
  margin: 0.25em 0 0;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-weight: 700;
  margin: 1em 0 0.5em;
  line-height: 1.3;
}

.prose h1:first-child, .prose h2:first-child, .prose h3:first-child,
.prose h4:first-child, .prose h5:first-child, .prose h6:first-child {
  margin-top: 0;
}

.prose h1 { font-size: 1.4em; }
.prose h2 { font-size: 1.25em; }
.prose h3 { font-size: 1.1em; }

.prose strong, .prose b { font-weight: 700; }
.prose em, .prose i { font-style: italic; }
.prose u { text-decoration: underline; }

.prose a {
  color: #405189;
  text-decoration: underline;
}
.dark .prose a {
  color: #8b93f0;
}

.prose blockquote {
  margin: 0.75em 0;
  padding-left: 1em;
  border-left: 3px solid currentColor;
  opacity: 0.85;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75em 0;
}

.prose th, .prose td {
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 0.4em 0.6em;
}

.prose hr {
  margin: 1em 0;
  border: none;
  border-top: 1px solid rgba(148, 163, 184, 0.4);
}