/* ================================================================
   AllJobsPH — Component styles (v4)
   Re-based on Quixly's structural patterns (audited from
   quixly/public/assets/css/style.css): a floating pill-shaped nav
   capsule sized to the content column, not the full viewport; flat
   16-24px card radii that never morph on hover (only shadow/lift
   change); bold Nunito headings throughout. Breakpoints stay at
   991 / 767 / 479 for layouts AllJobsPH has that Quixly doesn't
   (sidebar-filtered job listings, dashboard shells) — Quixly itself
   only collapses at one width (900px) since it has no such layouts.
   Sizes are in rem so they ride the fluid root scale set in
   ajp-base.css. Classes remain AllJobsPH's own ajp- prefixed names —
   no Quixly markup/classes are reused.
   ================================================================ */

/* ================================================================
   NAV — floating pill capsule, sized and proportioned after Quixly's
   `.nav` (width: min(900px, 92vw); padding: 10px 20px; border-radius:
   50px). AllJobsPH's nav carries more content than Quixly's (an inline
   search field, a mega-menu trigger, auth actions) so the cap is eased
   up slightly from Quixly's literal 900px to 960px rather than
   cramming everything into an identical width — but it now reads as
   the same compact floating capsule instead of a nearly-edge-to-edge
   bar. Quixly collapses its own nav-links at 900px; matched here.
   ================================================================ */
.ajp-nav {
  position: fixed; top: 0.875rem; left: 50%; transform: translateX(-50%); z-index: 1000;
  width: min(var(--ajp-container-max), 92vw);
}
.ajp-nav-inner {
  width: 100%;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem);
  border: 1px solid var(--ajp-border);
  border-radius: var(--ajp-radius-pill);
  box-shadow: var(--ajp-shadow-md);
  padding: 0.625rem 0.75rem 0.625rem 1.25rem;
  display: flex; align-items: center; justify-content: flex-start; gap: 1.25rem;
}
@media screen and (max-width: 479px) {
  .ajp-nav { top: 0.625rem; width: 94vw; }
  .ajp-nav-inner { padding: 0.5625rem 0.625rem 0.5625rem 1rem; gap: 0.75rem; }
}

.ajp-nav-logo {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-shrink: 1;
  font-family: var(--ajp-font-heading); font-size: 1.2rem; font-weight: 900;
  color: var(--ajp-text); white-space: nowrap;
}
/* height + width:auto only — never pair with max-width/max-height here,
   that clamps one axis while the other stays fixed and squishes the
   logo's aspect ratio. Scale it down via `height` alone instead. */
.ajp-nav-logo-img { height: 1.875rem; width: auto; display: block; }
.ajp-nav-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--ajp-radius-xs);
  background: var(--ajp-primary); color: #fff;
  font-size: 0.85rem; font-weight: 800;
}
.ajp-nav-logo-accent { color: var(--ajp-primary); }

.ajp-nav-links { display: flex; align-items: center; gap: 0.125rem; flex: 1; min-width: 0; }
.ajp-nav-links > li > a {
  display: flex; align-items: center; gap: 0.25rem;
  font-size: 0.875rem; font-weight: 600; color: var(--ajp-text-muted);
  padding: 0.4375rem 0.75rem; border-radius: var(--ajp-radius-pill);
  transition: color var(--ajp-transition), background var(--ajp-transition);
  white-space: nowrap;
}
.ajp-nav-links > li > a:hover,
.ajp-nav-links > li > a.is-active { color: var(--ajp-primary); background: var(--ajp-primary-100); }

/* margin-left:auto (not the container's old justify-content:space-between)
   pulls actions+hamburger to the right as one group. Below 991px, once
   .ajp-nav-links is hidden, space-between had nothing left in the middle
   to fill and stretched a dead gap between the buttons and the hamburger
   instead of keeping them together. */
.ajp-nav-actions { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; margin-left: auto; }

/* Fills the space between the logo and the "Job Openings" menu item. */
.ajp-nav-search { flex: 1; min-width: 0; margin-right: 0.375rem; }
.ajp-nav-search-form {
  display: flex; align-items: center; gap: 0.375rem; width: 100%;
  background: var(--ajp-gray-100); border-radius: var(--ajp-radius-pill);
  padding: 0.5rem 0.5rem 0.5rem 1rem; transition: background var(--ajp-transition);
}
.ajp-nav-search-form:focus-within { background: var(--ajp-primary-50); }
.ajp-nav-search-form input {
  border: none; background: transparent; font-size: 0.85rem; flex: 1; min-width: 0;
  color: var(--ajp-text); font-family: var(--ajp-font-body);
}
.ajp-nav-search-form input:focus { outline: none; }
.ajp-nav-search-form input::placeholder { color: var(--ajp-text-muted); }
.ajp-nav-search-form button {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.875rem; height: 1.875rem; border-radius: var(--ajp-radius-pill);
  background: var(--ajp-primary); color: #fff; border: none; cursor: pointer;
  font-size: 0.78rem; transition: background var(--ajp-transition);
}
.ajp-nav-search-form button:hover { background: var(--ajp-primary-dark); }

/* Dropdown / mega menu */
.ajp-nav-dropdown { position: relative; }
/* Invisible hover bridge: .ajp-nav-mega floats 0.625rem below its
   trigger, and CSS :hover only stays true while the cursor is over an
   element's own box — not the empty gap between two separately
   positioned boxes. Without this, moving the mouse from the trigger
   straight down into the gap drops :hover and closes the menu before
   the cursor ever reaches it. This pseudo-element exactly covers that
   gap (same width/offset as .ajp-nav-mega) so the hover chain never
   breaks, without changing anything visible. */
.ajp-nav-dropdown::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: min(47.5rem, 92vw); height: 0.625rem;
}
.ajp-nav-mega {
  position: absolute; top: calc(100% + 0.625rem); left: 50%; transform: translateX(-50%);
  width: min(47.5rem, 92vw);
  background: var(--ajp-card); border: 1px solid var(--ajp-border);
  border-radius: var(--ajp-radius-lg); box-shadow: var(--ajp-shadow-lg);
  padding: 1.125rem 0; display: none; grid-template-columns: repeat(3, 1fr); gap: 0;
  z-index: 999;
}
.ajp-nav-dropdown:hover .ajp-nav-mega,
.ajp-nav-dropdown:focus-within .ajp-nav-mega { display: grid; }
.ajp-nav-mega-col { padding: 0 0.875rem; border-right: 1px solid var(--ajp-border); }
.ajp-nav-mega-col:last-child { border-right: none; }
.ajp-nav-mega-heading {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ajp-gray-400); padding: 0.25rem 0.625rem 0.625rem; margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--ajp-border);
}
.ajp-nav-mega-list {
  max-height: min(20rem, 50vh); max-height: min(20rem, 50dvh);
  overflow-y: auto; display: flex; flex-direction: column; gap: 1px;
}
.ajp-nav-mega-list a {
  display: block; padding: 0.4375rem 0.625rem; border-radius: var(--ajp-radius-xs);
  font-size: 0.84rem; font-weight: 500; color: var(--ajp-text);
  transition: background var(--ajp-transition), color var(--ajp-transition);
}
.ajp-nav-mega-list a:hover { background: var(--ajp-primary-50); color: var(--ajp-primary); }

/* Hamburger + mobile menu */
.ajp-nav-hamburger {
  display: none; flex-direction: column; gap: 0.3125rem;
  background: none; border: none; cursor: pointer; padding: 0.375rem;
}
.ajp-nav-hamburger span { display: block; width: 1.25rem; height: 2px; background: var(--ajp-text); border-radius: 2px; transition: var(--ajp-transition); }
.ajp-nav-hamburger.is-active span:nth-child(1) { transform: rotate(45deg) translate(0.25rem, 0.25rem); }
.ajp-nav-hamburger.is-active span:nth-child(2) { opacity: 0; }
.ajp-nav-hamburger.is-active span:nth-child(3) { transform: rotate(-45deg) translate(0.25rem, -0.25rem); }

.ajp-mobile-menu {
  position: absolute; top: calc(100% + 0.625rem); left: 0; right: 0; z-index: 998;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(0.875rem); -webkit-backdrop-filter: blur(0.875rem);
  border: 1px solid var(--ajp-border);
  border-radius: var(--ajp-radius-lg);
  box-shadow: var(--ajp-shadow-lg);
  display: flex; flex-direction: column; padding: 0.5rem; gap: 0.125rem;
  max-height: min(26rem, 70vh); max-height: min(26rem, 70dvh); overflow-y: auto;
  transform: translateY(-0.5rem); opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ajp-mobile-menu.is-open { opacity: 1; pointer-events: all; transform: translateY(0); }
.ajp-mobile-menu a {
  font-size: 0.95rem; font-weight: 500; color: var(--ajp-text);
  padding: 0.75rem 0.875rem; border-radius: var(--ajp-radius-sm);
}
.ajp-mobile-menu a:hover { background: var(--ajp-primary-100); color: var(--ajp-primary); }
.ajp-mobile-menu .ajp-nav-search-form { padding: 0.625rem 0.625rem 0.625rem 0.875rem; }

/* Tiptap collapses its own navbar-menu at max-width: 991px — matched here. */
@media screen and (max-width: 991px) {
  .ajp-nav-links, .ajp-nav-actions .ajp-btn-outline { display: none; }
  .ajp-nav-hamburger { display: flex; }
}
@media screen and (max-width: 479px) {
  .ajp-nav-logo-img { height: 1.5rem; }
  /* Logo + two primary buttons (logged-out: Login + Sign Up) + hamburger
     don't fit on one line below ~420px since none of them can shrink
     below their content size. Keep exactly one CTA visible next to the
     hamburger — .ajp-nav-btn-secondary marks the redundant second button
     (already duplicated in .ajp-mobile-menu) so it can be dropped here
     instead of losing the CTA entirely. */
  .ajp-nav-actions .ajp-nav-btn-secondary { display: none; }
  .ajp-mobile-menu a { font-size: 0.9rem; padding: 0.625rem 0.75rem; }
}

/* ================================================================
   HERO BANNER — re-built on Quixly's own hero mechanics: a full-bleed
   photo background with a gradient scrim + blurred floating blobs, a
   two-column row (copy + search on the left, a floating phone
   slideshow on the right), and an SVG wave curve stitching the hero
   into the section below. AllJobsPH keeps its own content (the job
   search form stays the primary call-to-action, per product need)
   where Quixly runs app-store badges instead; a muted, non-linked
   app-badges row is kept alongside the search purely as a visual
   placeholder for a future mobile app.
   ================================================================ */
.ajp-hero {
  position: relative; overflow: hidden;
  padding: 9.5rem 1.5rem 6rem;
}
.ajp-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1770&auto=format&fit=crop') center/cover no-repeat;
  transform: scale(1.05);
  animation: ajpHeroBgPan 20s ease-in-out infinite alternate;
}
@keyframes ajpHeroBgPan {
  from { transform: scale(1.05) translateX(0); }
  to   { transform: scale(1.05) translateX(-2%); }
}
.ajp-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(8, 15, 48, 0.84) 0%, rgba(10, 22, 66, 0.7) 55%, rgba(12, 28, 82, 0.56) 100%);
}
.ajp-hero-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ajp-hero-blobs span { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.08); filter: blur(2.5rem); }
.ajp-hero-blobs span:nth-child(1) { width: 25rem; height: 25rem; top: -6rem; left: -5rem; }
.ajp-hero-blobs span:nth-child(2) { width: 31rem; height: 31rem; bottom: -9rem; right: -6rem; }
.ajp-hero-blobs span:nth-child(3) { width: 12rem; height: 12rem; top: 42%; left: 42%; }

.ajp-hero-inner {
  position: relative; z-index: 2;
  width: min(100% - 3rem, var(--ajp-container-max)); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 3rem;
}
.ajp-hero-text { flex: 1; min-width: 0; max-width: 36.5rem; }

.ajp-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 0.3125rem 0.875rem 0.3125rem 0.625rem; border-radius: var(--ajp-radius-pill); margin-bottom: 1.375rem;
}
.ajp-hero-eyebrow-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0;
  background: #4ade80; box-shadow: 0 0 0 0.1875rem rgba(74, 222, 128, 0.3);
  animation: ajpHeroDotPulse 2s infinite;
}
@keyframes ajpHeroDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.ajp-hero-title {
  font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 900; color: #fff;
  line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 1.125rem;
}
.ajp-hero-subtitle {
  font-size: clamp(0.92rem, 1.6vw, 1.05rem); color: rgba(255, 255, 255, 0.85);
  margin: 0 0 2rem; line-height: 1.7;
}
.ajp-hero-search {
  padding: 0.5rem; text-align: left;
  box-shadow: var(--ajp-shadow-lg);
  display: flex; align-items: stretch; gap: 0.375rem;
  border: 1px solid var(--ajp-border);
}
.ajp-hero-search-field {
  flex: 1; min-width: 0; display: flex; align-items: stretch; position: relative;
  border-right: 1px solid var(--ajp-border);
}
.ajp-hero-search-field:last-of-type { border-right: none; }
.ajp-hero-search-field .ajp-input,
.ajp-hero-search-field .ajp-select {
  /* background-color (not the `background` shorthand) — a shorthand
     reset here would also clear the chevron .ajp-select paints via
     background-image. */
  border: none; background-color: transparent; box-shadow: none; width: 100%;
}
.ajp-hero-search-field .ajp-input:focus,
.ajp-hero-search-field .ajp-select:focus { box-shadow: none; }
.ajp-hero-search-field-keyword { flex: 2; }
.ajp-hero-search > .ajp-btn { flex-shrink: 0; }
.ajp-hero-search > .ajp-btn:hover { border-radius: var(--ajp-radius-btn); transform: none; }

.ajp-search-suggestions {
  display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0;
  background: var(--ajp-card); border: 1px solid var(--ajp-border);
  border-radius: var(--ajp-radius-lg); box-shadow: var(--ajp-shadow-md);
  overflow: hidden; z-index: 40;
}
.ajp-search-suggestions.is-open { display: block; }
.ajp-search-suggestion {
  display: block; width: 100%; text-align: left; padding: 0.625rem 1.125rem;
  font-size: 0.88rem; color: var(--ajp-text); background: none; border: none; cursor: pointer;
}
.ajp-search-suggestion:hover { background: var(--ajp-primary-50); color: var(--ajp-primary); }

/* App-store-style badges — a muted, non-linked placeholder row (no
   mobile app exists yet) kept purely as a visual echo of Quixly's
   download CTA; the job search form above remains the real CTA. */
.ajp-hero-app-badges { margin-top: 1.75rem; }
.ajp-hero-app-badges-label {
  display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.625rem;
}
.ajp-hero-badges-row { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.ajp-hero-badge-link {
  display: block; flex-shrink: 0; opacity: 0.75; cursor: default;
  transition: opacity var(--ajp-transition), transform var(--ajp-transition);
}
.ajp-hero-badge-link:hover { opacity: 1; transform: translateY(-0.125rem); }
.ajp-hero-badge-link img { height: 2.75rem; width: auto; }

/* Floating phone slideshow */
.ajp-hero-phone { position: relative; z-index: 2; flex-shrink: 0; }
.ajp-hero-slideshow-wrapper {
  position: relative; width: 16rem;
  filter: drop-shadow(0 2rem 4rem rgba(0, 0, 0, 0.4));
  animation: ajpHeroPhoneFloat 6s ease-in-out infinite;
}
.ajp-hero-slideshow { position: relative; width: 16rem; height: 32rem; }
.ajp-hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--ajp-radius-lg); border: 1px solid rgba(255, 255, 255, 0.25);
  opacity: 0; transition: opacity 1.5s ease;
}
.ajp-hero-slide.is-active { opacity: 1; }
@keyframes ajpHeroPhoneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.875rem); } }

.ajp-hero-wave { position: absolute; bottom: -1px; left: 0; right: 0; line-height: 0; z-index: 1; }
.ajp-hero-wave svg { display: block; width: 100%; }

@media screen and (max-width: 991px) {
  .ajp-hero { padding: 8rem 1.5rem 4.5rem; }
  .ajp-hero-slideshow-wrapper { width: 13.5rem; }
  .ajp-hero-slideshow { width: 13.5rem; height: 27rem; }
}
@media screen and (max-width: 767px) {
  .ajp-hero { padding: 7.25rem 1.25rem 3.5rem; text-align: center; }
  .ajp-hero-inner { flex-direction: column; gap: 2.25rem; }
  .ajp-hero-text { max-width: 32rem; }
  .ajp-hero-app-badges { display: flex; flex-direction: column; align-items: center; }
  .ajp-hero-badges-row { justify-content: center; }
  .ajp-hero-search { flex-direction: column; }
  .ajp-hero-search-field { border-right: none; border-bottom: 1px solid var(--ajp-border); }
  .ajp-hero-search-field:last-of-type { border-bottom: none; }
}
@media screen and (max-width: 479px) {
  .ajp-hero { padding: 6.5rem 1rem 3rem; }
  .ajp-hero-eyebrow { font-size: 0.68rem; padding: 0.25rem 0.75rem; }
  .ajp-hero-slideshow-wrapper { width: 11rem; }
  .ajp-hero-slideshow { width: 11rem; height: 22rem; }
  .ajp-hero-badge-link img { height: 2.375rem; }
}

/* ================================================================
   STATS BAND — a few big figures side by side on a light panel,
   e.g. right under the hero. Distinct from .ajp-hero-eyebrow/-title
   (which are styled for the dark hero background).
   ================================================================ */
.ajp-stats-band {
  display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; text-align: center;
}
.ajp-stats-band-item strong {
  display: block; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700;
  font-family: var(--ajp-font-heading); letter-spacing: -0.02em; color: var(--ajp-text);
}
.ajp-stats-band-item span {
  font-size: 0.78rem; color: var(--ajp-text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}
@media screen and (max-width: 479px) {
  .ajp-stats-band { gap: 1.75rem 2rem; }
}

/* ================================================================
   LOGO CLOUD — row of partner/employer logos, muted until hovered.
   ================================================================ */
.ajp-logo-cloud {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.25rem;
}
.ajp-logo-cloud-item {
  display: flex; align-items: center; justify-content: center;
  filter: grayscale(1); opacity: 0.55;
  transition: filter var(--ajp-transition), opacity var(--ajp-transition), transform var(--ajp-transition);
}
.ajp-logo-cloud-item:hover { filter: grayscale(0); opacity: 1; transform: translateY(-0.125rem); }
.ajp-logo-cloud-item img { height: 2rem; width: auto; max-width: 7.5rem; object-fit: contain; }
@media screen and (max-width: 479px) {
  .ajp-logo-cloud { gap: 1.5rem; }
  .ajp-logo-cloud-item img { height: 1.625rem; max-width: 6rem; }
}

/* ================================================================
   FEATURE CARD — icon + heading + short description, used on the
   homepage "Why AllJobsPH" grid. Extends the base .ajp-card shape.
   ================================================================ */
.ajp-feature-card { padding: 2rem; transition: border-color var(--ajp-transition), box-shadow var(--ajp-transition), transform var(--ajp-transition); }
.ajp-feature-card:hover { border-color: var(--ajp-primary-light); box-shadow: var(--ajp-shadow-md); transform: translateY(-0.375rem); }
.ajp-feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--ajp-radius-md);
  background: var(--ajp-primary-50); color: var(--ajp-primary);
  font-size: 1.4rem; margin-bottom: 1.25rem;
}
.ajp-feature-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.625rem; }
.ajp-feature-card p { font-size: 0.95rem; color: var(--ajp-text-muted); line-height: 1.7; }

/* ================================================================
   BREADCRUMB
   ================================================================ */
.ajp-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem;
  font-size: 0.82rem; padding: 0.875rem 0;
}
.ajp-breadcrumb a { color: var(--ajp-text-muted); font-weight: 500; }
.ajp-breadcrumb a:hover { color: var(--ajp-primary); }
.ajp-breadcrumb-sep { color: var(--ajp-gray-400); }
.ajp-breadcrumb-current { color: var(--ajp-text); font-weight: 600; }

/* ================================================================
   JOBS LISTING (filter sidebar + results) — Tiptap collapses its own
   sidebar-style layouts at 991px, matched here.
   ================================================================ */
.ajp-jobs-layout { display: flex; align-items: flex-start; gap: 1.75rem; }
.ajp-filter-sidebar { width: 16.25rem; flex-shrink: 0; position: sticky; top: 8rem; }
.ajp-filter-sidebar-body { display: flex; flex-direction: column; gap: 1.125rem; }
.ajp-filter-group {
  background: var(--ajp-card); border: 1px solid var(--ajp-border);
  border-radius: var(--ajp-radius-card); padding: 1rem;
}
.ajp-filter-group h3 {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ajp-text-muted); margin-bottom: 0.625rem;
}
.ajp-filter-option {
  display: block; padding: 0.5rem 0.625rem; border-radius: var(--ajp-radius-sm);
  font-size: 0.86rem; font-weight: 500; color: var(--ajp-text);
  transition: background var(--ajp-transition), color var(--ajp-transition);
}
.ajp-filter-option:hover { background: var(--ajp-primary-50); color: var(--ajp-primary); }
.ajp-filter-option.is-active { background: var(--ajp-primary); color: #fff; font-weight: 600; }
.ajp-jobs-results { flex: 1; min-width: 0; }

/* Mobile-only "Refined Search" disclosure toggle — hidden on desktop,
   where the sidebar is always fully visible. */
.ajp-filter-sidebar-toggle {
  display: none; width: 100%; align-items: center; justify-content: space-between;
  padding: 0.875rem 1.125rem; background: var(--ajp-card); border: 1px solid var(--ajp-border);
  border-radius: var(--ajp-radius-card); font-weight: 600; font-size: 0.9rem;
  color: var(--ajp-text); cursor: pointer; margin-bottom: 0.875rem;
}
.ajp-filter-sidebar-toggle span { display: flex; align-items: center; gap: 0.5rem; }
.ajp-filter-sidebar-toggle i.fa-chevron-down { transition: transform var(--ajp-transition); }
.ajp-filter-sidebar-toggle.is-open i.fa-chevron-down { transform: rotate(180deg); }

@media screen and (max-width: 991px) {
  .ajp-jobs-layout { flex-direction: column; gap: 1.25rem; }
  .ajp-filter-sidebar { width: 100%; position: static; }
  .ajp-filter-sidebar-toggle { display: flex; }
  .ajp-filter-sidebar-body { display: none; }
  .ajp-filter-sidebar-body.is-open { display: flex; }
}
@media screen and (max-width: 479px) {
  .ajp-filter-group { padding: 0.875rem; }
}

/* ================================================================
   LIST ROW (job/applicant/company management cards) — keeps every row
   the same shape regardless of title length; the title truncates with
   an ellipsis instead of wrapping and pushing the action buttons down.
   Stacks at Tiptap's "mobile landscape" cutoff (767px).
   ================================================================ */
.ajp-list-row { display: flex; align-items: center; gap: 1rem; }
.ajp-list-row-info { flex: 1; min-width: 0; }
.ajp-list-row-title {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ajp-list-row-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex-shrink: 0; }

@media screen and (max-width: 767px) {
  .ajp-list-row { flex-direction: column; align-items: flex-start; }
  .ajp-list-row-title { white-space: normal; }
  .ajp-list-row-actions { width: 100%; }
}

/* ================================================================
   DROPDOWN (generic action menu — "Actions ▾" buttons, etc.)
   Toggled by JS in ajp-app.js via [data-dropdown-toggle]; not tied to
   any specific page, reusable anywhere a compact overflow menu is
   needed.
   ================================================================ */
.ajp-dropdown { position: relative; display: inline-block; }
.ajp-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 0.375rem); right: 0; min-width: 11.25rem;
  background: var(--ajp-card); border: 1px solid var(--ajp-border);
  border-radius: var(--ajp-radius-md); box-shadow: var(--ajp-shadow-md);
  padding: 0.375rem; z-index: 60;
}
.ajp-dropdown.is-open .ajp-dropdown-menu { display: block; }
.ajp-dropdown-menu a, .ajp-dropdown-menu button {
  display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem;
  border-radius: var(--ajp-radius-xs); font-size: 0.86rem; font-weight: 500;
  color: var(--ajp-text); background: none; border: none; cursor: pointer;
  white-space: nowrap;
}
.ajp-dropdown-menu a:hover, .ajp-dropdown-menu button:hover { background: var(--ajp-primary-50); color: var(--ajp-primary); }
.ajp-dropdown-menu .ajp-dropdown-danger { color: var(--ajp-danger); }
.ajp-dropdown-menu .ajp-dropdown-danger:hover { background: #fef2f2; color: var(--ajp-danger); }

/* ================================================================
   DASHBOARD SHELL (left sidebar nav — job seeker / employer / admin)
   Collapses to a top disclosure at 991px, matching the rest of the
   sidebar-style layouts above.
   ================================================================ */
.ajp-dash-shell {
  width: min(100% - 3rem, var(--ajp-container-max)); margin: 0 auto; padding: 2rem 0 4rem;
  display: flex; align-items: flex-start; gap: 2rem;
}
.ajp-dash-sidebar { width: 15rem; flex-shrink: 0; position: sticky; top: 8rem; }
.ajp-dash-nav {
  display: flex; flex-direction: column; gap: 0.125rem;
  background: var(--ajp-card); border: 1px solid var(--ajp-border);
  border-radius: var(--ajp-radius-card); padding: 0.625rem;
}
.ajp-dash-nav-link {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem;
  border-radius: var(--ajp-radius-sm); font-size: 0.88rem; font-weight: 600;
  color: var(--ajp-text-muted); transition: background var(--ajp-transition), color var(--ajp-transition);
}
.ajp-dash-nav-link i { width: 1.125rem; text-align: center; font-size: 0.85rem; }
.ajp-dash-nav-link:hover { background: var(--ajp-primary-50); color: var(--ajp-primary); }
.ajp-dash-nav-link.is-active { background: var(--ajp-primary); color: #fff; }
.ajp-dash-nav-badge {
  margin-left: auto; background: var(--ajp-danger); color: #fff;
  font-size: 0.68rem; font-weight: 700; padding: 0.125rem 0.4375rem; border-radius: var(--ajp-radius-pill);
}
.ajp-dash-nav-link.is-active .ajp-dash-nav-badge { background: rgba(255, 255, 255, 0.3); }
.ajp-dash-nav-toggle { display: none; }
.ajp-dash-main { flex: 1; min-width: 0; }

/* The page's own .ajp-section/.ajp-container wrapper is neutralized here
   since .ajp-dash-shell already centers and pads the whole sidebar+content
   row — this lets every existing dashboard-area view keep its markup as-is
   instead of needing per-page edits. */
.ajp-dash-main .ajp-container { width: auto; max-width: none; }
.ajp-dash-main .ajp-section { padding: 0 0 0.5rem; }

/* Consistent page header used by every dashboard-area screen (title +
   optional subtitle on the left, one primary action on the right). */
.ajp-dash-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.ajp-dash-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 0.25rem; overflow-wrap: anywhere; letter-spacing: -0.02em; }
.ajp-dash-page-header > div:first-child { min-width: 0; }
.ajp-dash-subtitle { font-size: 0.9rem; color: var(--ajp-text-muted); margin: 0; }

/* Consistent stat tile used on the job seeker / employer / admin
   dashboard home pages (replaces ad-hoc inline-styled variants). */
.ajp-stat-card { padding: 1.5rem; }
.ajp-stat-card h3 { font-size: 0.82rem; font-weight: 600; color: var(--ajp-text-muted); margin-bottom: 0.5rem; }
.ajp-stat-card p { font-size: 1.6rem; font-weight: 900; font-family: var(--ajp-font-heading); }
.ajp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13.75rem, 100%), 1fr)); gap: 1rem; }

@media screen and (max-width: 991px) {
  .ajp-dash-shell { width: min(100% - 2.5rem, var(--ajp-container-max)); flex-direction: column; padding: 1.25rem 0 3rem; gap: 1.25rem; }
  .ajp-dash-sidebar { width: 100%; position: static; }
  /* .ajp-dash-shell's align-items:flex-start is meant for the desktop
     row layout (keeps the sticky sidebar from stretching to the main
     column's height) — but flex-direction:column here flips the cross
     axis to horizontal, so without an explicit width .ajp-dash-main
     shrinks to fit its content instead of filling the row, leaving a
     dead gap on the right. */
  .ajp-dash-main { width: 100%; }

  .ajp-dash-nav-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: var(--ajp-card); border: 1px solid var(--ajp-border);
    border-radius: var(--ajp-radius-card); padding: 0.75rem 1rem;
    font-size: 0.88rem; font-weight: 600; color: var(--ajp-text); cursor: pointer;
  }
  .ajp-dash-nav-toggle span { display: flex; align-items: center; gap: 0.625rem; }
  .ajp-dash-nav-toggle i.fa-chevron-down { font-size: 0.78rem; color: var(--ajp-text-muted); transition: transform var(--ajp-transition); }
  .ajp-dash-nav-toggle.is-open i.fa-chevron-down { transform: rotate(180deg); }

  .ajp-dash-nav { display: none; margin-top: 0.5rem; }
  .ajp-dash-nav.is-open { display: flex; }
  .ajp-dash-nav-link span { white-space: nowrap; }
}
@media screen and (max-width: 479px) {
  .ajp-dash-shell { width: min(100% - 2rem, var(--ajp-container-max)); padding: 1rem 0 2.5rem; }
  .ajp-dash-title { font-size: 1.2rem; }
}

/* ================================================================
   FOOTER — column count steps down across all three breakpoints
   instead of a single 2-col/1-col swap.
   ================================================================ */
.ajp-footer { background: var(--ajp-footer-bg); color: rgba(255,255,255,0.68); padding: 4.5rem 0 2.25rem; }
.ajp-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ajp-footer-brand { font-family: var(--ajp-font-heading); font-size: 1.4rem; font-weight: 900; color: #60a5fa; margin-bottom: 0.625rem; }
.ajp-footer-tagline { font-size: 0.86rem; line-height: 1.7; }
.ajp-footer-col h4 { font-size: 0.82rem; font-weight: 800; color: #60a5fa; text-transform: none; letter-spacing: normal; margin-bottom: 0.875rem; }
.ajp-footer-col ul li { padding: 0.25rem 0; font-size: 0.86rem; }
.ajp-footer-col ul li a { color: rgba(255,255,255,0.6); transition: color var(--ajp-transition); }
.ajp-footer-col ul li a:hover { color: #fff; }
.ajp-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 1.25rem 0; font-size: 0.8rem; }

@media screen and (max-width: 991px) {
  .ajp-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media screen and (max-width: 767px) {
  .ajp-footer { padding: 3.5rem 0 1.75rem; }
  .ajp-footer-grid { gap: 1.75rem; padding-bottom: 2rem; }
}
@media screen and (max-width: 479px) {
  .ajp-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ajp-footer-bottom { flex-direction: column; text-align: center; }
}

/* ================================================================
   JOB / COMPANY CARDS — resting shadow is barely-there; hover deepens
   the shadow, lifts the card, and grows the radius a touch (same
   morph used on .ajp-card / .ajp-btn).
   ================================================================ */
.ajp-job-card {
  background: var(--ajp-card); border: 1px solid var(--ajp-border);
  border-radius: var(--ajp-radius-card); padding: 1.375rem;
  box-shadow: var(--ajp-shadow-sm);
  transition: box-shadow var(--ajp-transition), border-color var(--ajp-transition),
    transform var(--ajp-transition), border-radius var(--ajp-transition);
}
.ajp-job-card:hover {
  box-shadow: var(--ajp-shadow-md); border-color: var(--ajp-primary-100);
  transform: translateY(-0.1875rem); border-radius: var(--ajp-radius-card-hover);
}
.ajp-job-card-header { display: flex; gap: 0.875rem; align-items: flex-start; margin-bottom: 0.75rem; }
.ajp-job-card-logo { width: 3rem; height: 3rem; border-radius: var(--ajp-radius-xs); object-fit: cover; background: var(--ajp-gray-100); flex-shrink: 0; }
.ajp-job-card-title { font-size: 1rem; font-weight: 800; margin-bottom: 0.125rem; font-family: var(--ajp-font-heading); }
.ajp-job-card-company { font-size: 0.86rem; color: var(--ajp-text-muted); }
.ajp-job-card-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.ajp-job-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--ajp-border); }
.ajp-job-card-salary { font-size: 0.88rem; font-weight: 600; color: var(--ajp-text); }
.ajp-job-card-blur { filter: blur(0.25rem); user-select: none; }
@media screen and (max-width: 479px) {
  .ajp-job-card { padding: 1.125rem; }
}

.ajp-company-card {
  background: var(--ajp-card); border: 1px solid var(--ajp-border);
  border-radius: var(--ajp-radius-card); padding: 1.625rem; text-align: center;
  box-shadow: var(--ajp-shadow-sm);
  transition: box-shadow var(--ajp-transition), transform var(--ajp-transition), border-radius var(--ajp-transition);
}
.ajp-company-card:hover { box-shadow: var(--ajp-shadow-md); transform: translateY(-0.1875rem); border-radius: var(--ajp-radius-card-hover); }
.ajp-company-card-logo { width: 3.5rem; height: 3.5rem; border-radius: var(--ajp-radius-sm); object-fit: cover; margin: 0 auto 0.75rem; background: var(--ajp-gray-100); }

/* ================================================================
   MODAL
   ================================================================ */
.ajp-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(15, 16, 20, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.ajp-modal-overlay.is-open { opacity: 1; pointer-events: all; }
.ajp-modal {
  background: var(--ajp-card); border-radius: var(--ajp-radius-xl);
  box-shadow: var(--ajp-shadow-lg); width: 100%; max-width: 26.25rem;
  padding: 1.75rem; transform: translateY(0.625rem); transition: transform 0.15s ease;
}
.ajp-modal-overlay.is-open .ajp-modal { transform: translateY(0); }
.ajp-modal-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.5rem; font-family: var(--ajp-font-heading); }
.ajp-modal-body { font-size: 0.9rem; color: var(--ajp-text-muted); line-height: 1.6; margin-bottom: 1.25rem; }
.ajp-modal-footer { display: flex; gap: 0.625rem; justify-content: flex-end; }
@media screen and (max-width: 479px) {
  .ajp-modal { padding: 1.375rem; }
  .ajp-modal-footer { flex-direction: column-reverse; }
  .ajp-modal-footer .ajp-btn { width: 100%; }
}

/* ================================================================
   TOAST
   ================================================================ */
.ajp-toast-stack {
  position: fixed; top: 6rem; right: 1.25rem; z-index: 9500;
  display: flex; flex-direction: column; gap: 0.625rem;
}
.ajp-toast {
  background: var(--ajp-text); color: #fff;
  padding: 0.75rem 1.125rem; border-radius: var(--ajp-radius-sm);
  font-size: 0.86rem; box-shadow: var(--ajp-shadow-lg);
  opacity: 0; transform: translateY(-0.5rem); transition: opacity 0.2s ease, transform 0.2s ease;
}
.ajp-toast.is-visible { opacity: 1; transform: translateY(0); }
@media screen and (max-width: 479px) {
  .ajp-toast-stack { left: 1rem; right: 1rem; }
  .ajp-toast { text-align: center; }
}

/* ================================================================
   PAGINATION
   ================================================================ */
.ajp-pagination { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-top: 2rem; flex-wrap: wrap; }
.ajp-pagination a, .ajp-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 0.625rem;
  border-radius: var(--ajp-radius-sm); font-size: 0.86rem; font-weight: 500;
  color: var(--ajp-text-muted); border: 1px solid var(--ajp-border);
}
.ajp-pagination a:hover { background: var(--ajp-primary-50); color: var(--ajp-primary); }
.ajp-pagination .is-active { background: var(--ajp-primary); color: #fff; border-color: var(--ajp-primary); }

/* ================================================================
   TABS — segmented pill switcher (e.g. Job Seeker / Employer)
   ================================================================ */
.ajp-tab-group {
  display: flex; gap: 0.25rem; background: var(--ajp-gray-100);
  border-radius: var(--ajp-radius-pill); padding: 0.25rem; margin-bottom: 1.75rem;
}
.ajp-tab {
  flex: 1; text-align: center; padding: 0.625rem 1.125rem; border: none; background: none;
  border-radius: var(--ajp-radius-pill); font-family: var(--ajp-font-body);
  font-size: 0.88rem; font-weight: 600; color: var(--ajp-text-muted);
  cursor: pointer; transition: background var(--ajp-transition), color var(--ajp-transition);
}
.ajp-tab.is-active { background: var(--ajp-card); color: var(--ajp-primary); box-shadow: var(--ajp-shadow-sm); }
@media screen and (max-width: 479px) {
  .ajp-tab { padding: 0.5625rem 0.75rem; font-size: 0.82rem; }
}

/* ================================================================
   CHIP PICKER — admin-managed "quick insert" buttons shown above the
   job form's Requirements/Benefits textareas. Clicking one appends its
   text as a new line in the paired textarea; the textarea itself stays
   fully free-text either way, this is a convenience only. Tightly
   coupled to that one workflow (not a generic input like
   .ajp-tag-input), so it lives here rather than in ajp-base.css.
   ================================================================ */
.ajp-chip-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.625rem; }
.ajp-chip-picker-item {
  padding: 0.375rem 0.875rem; border-radius: var(--ajp-radius-pill);
  border: 1.5px solid var(--ajp-primary-100); background: var(--ajp-primary-50); color: var(--ajp-primary);
  font-family: var(--ajp-font-body); font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: background var(--ajp-transition), border-color var(--ajp-transition), transform var(--ajp-transition);
}
.ajp-chip-picker-item:hover { background: var(--ajp-primary-100); transform: translateY(-0.0625rem); }
.ajp-chip-picker-item.is-added { opacity: 0.55; cursor: default; transform: none; }