/* ==========================================================================
   CERTIVOX - application styles
   --------------------------------------------------------------------------
   Loaded AFTER style.css. style.css is a compiled Tailwind build and is left
   untouched, so this file only adds the few components the original design did
   not include (OTP boxes, toasts, inline field errors, progress rings).

   Everything here is namespaced (cvx-* / otp-*) or targets our own data
   attributes, so no existing page can be affected.
   ========================================================================== */

:root {
  --cvx-orange: hsl(12 100% 64%);
  --cvx-dark: #111827;
  --cvx-slate: #64748b;
  --cvx-border: #e5e7eb;
  --cvx-section: #f8fafc;
  --cvx-radius: 0.75rem;
}

/* --------------------------------------------------------------------------
   OTP input boxes
   Six single-character inputs styled to match the design's form controls.
   -------------------------------------------------------------------------- */
.otp-group {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.otp-input {
  width: 3rem;
  height: 3.5rem;
  padding: 0;
  text-align: center;
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cvx-dark);
  background: #fff;
  border: 1px solid var(--cvx-border);
  border-radius: var(--cvx-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;

  /* Hide the number spinners without losing the numeric keypad on mobile. */
  -moz-appearance: textfield;
  appearance: textfield;
}

.otp-input::-webkit-outer-spin-button,
.otp-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.otp-input:hover {
  border-color: rgba(101, 120, 157, 0.4);
}

.otp-input:focus {
  outline: none;
  border-color: var(--cvx-orange);
  box-shadow: 0 0 0 3px hsl(12 100% 64% / 0.18);
}

.otp-input.is-filled {
  border-color: var(--cvx-orange);
  background: #fff7f4;
}

.otp-group.is-invalid .otp-input {
  border-color: #ef4444;
  background: #fef2f2;
}

.otp-group.is-invalid {
  animation: cvx-shake 0.4s ease;
}

@media (max-width: 420px) {
  .otp-input {
    width: 2.5rem;
    height: 3rem;
    font-size: 1.25rem;
  }
}

@keyframes cvx-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .otp-group.is-invalid { animation: none; }
}

/* --------------------------------------------------------------------------
   Inline validation feedback
   -------------------------------------------------------------------------- */
.cvx-error {
  display: none;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #dc2626;
}

.cvx-error.is-visible {
  display: block;
}

/* Placeholders that only exist to receive a message must not take up space
   while they are empty, so an untouched form matches the original spacing. */
[data-newsletter-message]:empty,
[data-resend-label]:empty,
.cvx-strength-label:empty {
  display: none;
}

/* Applied to an input whose field-level validation failed. */
.cvx-invalid {
  border-color: #ef4444 !important;
}

.cvx-valid {
  border-color: #22c55e !important;
}

/* --------------------------------------------------------------------------
   Password strength meter
   -------------------------------------------------------------------------- */
.cvx-strength {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

/* Hidden until the user starts typing, so an untouched form looks exactly like
   the original design. */
.cvx-strength[data-score="0"] {
  display: none;
}

.cvx-strength span {
  height: 0.25rem;
  flex: 1 1 0;
  border-radius: 9999px;
  background: #e5e7eb;
  transition: background-color 0.2s ease;
}

.cvx-strength[data-score="1"] span:nth-child(-n+1) { background: #ef4444; }
.cvx-strength[data-score="2"] span:nth-child(-n+2) { background: #f59e0b; }
.cvx-strength[data-score="3"] span:nth-child(-n+3) { background: #eab308; }
.cvx-strength[data-score="4"] span:nth-child(-n+4) { background: #22c55e; }

.cvx-strength-label {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--cvx-slate);
}

/* --------------------------------------------------------------------------
   Toast notifications
   -------------------------------------------------------------------------- */
.cvx-toasts {
  position: fixed;
  z-index: 200;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: min(24rem, calc(100vw - 2.5rem));
  pointer-events: none;
}

.cvx-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: var(--cvx-radius);
  border: 1px solid var(--cvx-border);
  background: #fff;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.12);
  font-size: 0.875rem;
  color: var(--cvx-dark);
  pointer-events: auto;
  animation: cvx-toast-in 0.25s ease;
}

.cvx-toast.is-leaving {
  animation: cvx-toast-out 0.2s ease forwards;
}

.cvx-toast::before {
  content: "";
  flex: 0 0 auto;
  width: 0.25rem;
  align-self: stretch;
  margin: -0.875rem 0.25rem -0.875rem -1rem;
  border-radius: var(--cvx-radius) 0 0 var(--cvx-radius);
  background: var(--cvx-orange);
}

.cvx-toast--success::before { background: #22c55e; }
.cvx-toast--error::before   { background: #ef4444; }
.cvx-toast--warning::before { background: #f59e0b; }
.cvx-toast--info::before    { background: #3b82f6; }

.cvx-toast-close {
  margin-left: auto;
  border: 0;
  background: none;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  font-size: 1.125rem;
}

.cvx-toast-close:hover { color: var(--cvx-dark); }

@keyframes cvx-toast-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cvx-toast-out {
  to { opacity: 0; transform: translateX(1rem); }
}

/* --------------------------------------------------------------------------
   Button loading state
   Keeps the button's own size so the layout does not jump mid-request.
   -------------------------------------------------------------------------- */
.cvx-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.cvx-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.05rem;
  height: 1.05rem;
  margin: -0.525rem 0 0 -0.525rem;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cvx-spin 0.65s linear infinite;
}

/* Light buttons need a dark spinner to stay visible. */
.cvx-loading.cvx-loading--dark::after {
  border-color: rgba(17, 24, 39, 0.25);
  border-top-color: var(--cvx-dark);
}

@keyframes cvx-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Profile completion ring (candidate dashboard)
   -------------------------------------------------------------------------- */
.cvx-ring {
  --size: 6.5rem;
  --thickness: 0.5rem;
  --value: 0;

  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;

  /* conic-gradient draws the arc without needing SVG or JS. */
  background:
    conic-gradient(var(--cvx-orange) calc(var(--value) * 1%), #e2e8f0 0),
    #fff;
}

.cvx-ring::before {
  content: "";
  position: absolute;
  inset: var(--thickness);
  background: #fff;
  border-radius: 50%;
}

.cvx-ring > * {
  position: relative;
}

/* --------------------------------------------------------------------------
   Candidate portal shell + sidebar

   Two-column layout on desktop. On narrow screens the sidebar is a slide-in
   drawer opened from the portal menu button (see app.js).
   -------------------------------------------------------------------------- */
.cvx-portal-shell {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .cvx-portal-shell {
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }

  .cvx-portal-menu-toggle,
  .cvx-portal-overlay {
    display: none !important;
  }
}

.cvx-portal-menu-toggle {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  background: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cvx-portal-menu-toggle:hover {
  border-color: rgba(255, 106, 69, 0.35);
}

.cvx-portal-menu-toggle[aria-expanded="true"] {
  border-color: var(--cvx-orange);
  box-shadow: 0 0 0 3px rgba(255, 106, 69, 0.12);
}

.cvx-portal-menu-toggle[aria-expanded="true"] .cvx-portal-menu-chevron {
  transform: rotate(180deg);
}

.cvx-portal-menu-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.cvx-portal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(17, 24, 39, 0.45);
}

.cvx-sidebar {
  min-width: 0;
}

.cvx-sidebar-card {
  background: var(--cvx-dark);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(17, 24, 39, 0.1);
}

.cvx-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  gap: 0.125rem;
}

.cvx-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.875rem;
  border: 0;
  border-radius: 0.625rem;
  background: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: #cbd5e1;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cvx-sidebar-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.cvx-sidebar-link.is-active {
  background: var(--cvx-orange);
  color: #fff;
  font-weight: 600;
}

.cvx-sidebar-link--logout {
  margin-top: 0.375rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  padding-top: 0.875rem;
  color: #94a3b8;
}

.cvx-sidebar-link--logout:hover {
  background: none;
  color: var(--cvx-orange);
}

.cvx-sidebar-badge {
  margin-left: auto;
  min-width: 1.375rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: var(--cvx-orange);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.375rem;
  text-align: center;
  color: #fff;
}

.cvx-sidebar-link.is-active .cvx-sidebar-badge {
  background: rgba(0, 0, 0, 0.25);
}

@media (min-width: 1024px) {
  .cvx-sidebar-card {
    position: sticky;
    /* Clears the fixed site header. */
    top: 5.5rem;
  }
}

@media (max-width: 1023px) {
  .cvx-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1050;
    width: min(18rem, calc(100vw - 3rem));
    height: 100%;
    max-height: 100dvh;
    padding: 1rem;
    transform: translateX(calc(-100% - 1rem));
    transition: transform 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cvx-sidebar.is-open {
    transform: translateX(0);
  }

  .cvx-sidebar-card {
    min-height: calc(100% - 0.5rem);
  }

  .cvx-sidebar-nav {
    flex-direction: column;
  }

  .cvx-sidebar-link--logout {
    margin-top: 0.375rem;
    margin-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 0;
    padding-top: 0.875rem;
    padding-left: 0.875rem;
  }

  body.cvx-portal-menu-open {
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   Portal cards and tables
   -------------------------------------------------------------------------- */
.cvx-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 1rem;
  box-shadow: 0 4px 32px rgba(17, 24, 39, 0.06);
}

/* Tables scroll horizontally rather than squashing columns on a phone. */
.cvx-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cvx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.cvx-table th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cvx-border);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cvx-slate);
  text-align: left;
  white-space: nowrap;
}

.cvx-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  color: var(--cvx-dark);
  vertical-align: middle;
}

.cvx-table tbody tr:last-child td {
  border-bottom: 0;
}

.cvx-table tbody tr:hover {
  background: #fafbfc;
}

/* --------------------------------------------------------------------------
   Repeatable form rows (education, experience, skills)
   -------------------------------------------------------------------------- */
.cvx-repeat-item {
  position: relative;
  padding: 1.25rem;
  border: 1px solid var(--cvx-border);
  border-radius: 0.75rem;
  background: #fff;
}

.cvx-repeat-item + .cvx-repeat-item {
  margin-top: 0.75rem;
}

.cvx-repeat-empty {
  padding: 2rem 1.25rem;
  border: 1px dashed #cbd5e1;
  border-radius: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--cvx-slate);
}

/* --------------------------------------------------------------------------
   Photo upload with live preview
   -------------------------------------------------------------------------- */
.cvx-avatar-upload {
  position: relative;
  width: 7rem;
  height: 7rem;
}

.cvx-avatar-upload img,
.cvx-avatar-upload .cvx-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.cvx-avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--cvx-dark);
  color: #fff;
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.cvx-avatar-button {
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--cvx-orange);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.cvx-avatar-button:hover {
  background: var(--cvx-dark);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.cvx-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.cvx-page-link {
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.625rem;
  border: 1px solid var(--cvx-border);
  border-radius: 0.5rem;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cvx-dark);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cvx-page-link:hover {
  border-color: var(--cvx-orange);
  color: var(--cvx-orange);
}

.cvx-page-link.is-active {
  background: var(--cvx-orange);
  border-color: var(--cvx-orange);
  color: #fff;
}

.cvx-page-link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Notification list
   -------------------------------------------------------------------------- */
.cvx-notification {
  display: flex;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s ease;
}

.cvx-notification:last-child {
  border-bottom: 0;
}

.cvx-notification.is-unread {
  background: #fff8f5;
}

.cvx-notification-dot {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--cvx-border);
}

.cvx-notification.is-unread .cvx-notification-dot {
  background: var(--cvx-orange);
}

/* --------------------------------------------------------------------------
   Header notification bell dropdown
   -------------------------------------------------------------------------- */
.cvx-bell {
  position: relative;
}

.cvx-bell-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: #64748b;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cvx-bell-toggle:hover {
  background: var(--cvx-section);
  color: var(--cvx-orange);
}

.cvx-bell-badge {
  position: absolute;
  right: 0.2rem;
  top: 0.2rem;
  display: grid;
  min-width: 1.05rem;
  place-items: center;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: var(--cvx-orange);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.05rem;
  color: #fff;
}

.cvx-bell-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 60;
  width: min(22.5rem, calc(100vw - 1.5rem));
  overflow: hidden;
  border: 1px solid #f1f5f9;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 48px rgba(17, 24, 39, 0.14);
}

.cvx-bell-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}

.cvx-bell-panel__title {
  margin: 0;
  font-family: var(--cvx-font-display, 'Sora', system-ui, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

.cvx-bell-panel__mark-all {
  flex-shrink: 0;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cvx-orange);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}

.cvx-bell-panel__mark-all:hover {
  color: #111827;
}

.cvx-bell-panel__items {
  max-height: 20rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cvx-bell-panel__empty {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: #94a3b8;
}

.cvx-bell-panel__footer {
  display: block;
  border-top: 1px solid #f1f5f9;
  padding: 0.875rem 1rem;
  background: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cvx-orange);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cvx-bell-panel__footer:hover {
  background: var(--cvx-section);
  color: #111827;
}

.cvx-bell-panel .cvx-notification {
  align-items: flex-start;
  padding: 0.875rem 1rem;
}

.cvx-bell-panel .cvx-notification:hover {
  background: #f8fafc;
}

.cvx-bell-panel .cvx-notification.is-unread {
  background: #fff8f5;
}

.cvx-bell-panel .cvx-notification.is-unread:hover {
  background: #fff1eb;
}

.cvx-notification__title {
  margin: 0;
  font-family: var(--cvx-font-display, 'Sora', system-ui, sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  color: #111827;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cvx-notification__message {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #64748b;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cvx-notification__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

.cvx-notification__time {
  font-size: 0.75rem;
  color: #94a3b8;
}

.cvx-notification__link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cvx-orange);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cvx-notification__link:hover {
  color: #111827;
}

@media (max-width: 639px) {
  .cvx-bell-panel {
    right: -0.25rem;
    width: min(22.5rem, calc(100vw - 1rem));
  }
}

/* --------------------------------------------------------------------------
   Mobile navigation (extends the behaviour in main.js)
   -------------------------------------------------------------------------- */
.mobile-nav.is-open {
  display: flex !important;
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */
.cvx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Give keyboard users a visible focus ring on our own interactive elements. */
[data-portal-tab]:focus-visible,
[data-portal-switch]:focus-visible,
.cvx-toast-close:focus-visible {
  outline: 2px solid var(--cvx-orange);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   CMS rich text (admin-authored HTML on public pages)
   -------------------------------------------------------------------------- */
.cvx-prose {
  color: #374151;
  line-height: 1.7;
}

.cvx-prose h2,
.cvx-prose h3 {
  color: #111827;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.cvx-prose p {
  margin-bottom: 1em;
}

.cvx-prose ul,
.cvx-prose ol {
  margin: 0 0 1em 1.25em;
}

.cvx-prose a {
  color: #f97316;
  text-decoration: underline;
}