.main-container {
  max-width: 1700px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  padding: var(--space-3);
}
@media (min-width: 640px) {
  .main-container {
    padding: var(--space-4);
  }
}
@media (min-width: 768px) {
  .main-container {
    padding: var(--space-6);
  }
}

.morph {
  transition:
    flex 800ms cubic-bezier(0.22, 1, 0.36, 1),
    flex-basis 800ms cubic-bezier(0.22, 1, 0.36, 1),
    flex-grow 800ms cubic-bezier(0.22, 1, 0.36, 1),
    flex-shrink 800ms cubic-bezier(0.22, 1, 0.36, 1),
    width 800ms cubic-bezier(0.22, 1, 0.36, 1),
    max-width 800ms cubic-bezier(0.22, 1, 0.36, 1),
    min-width 800ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 800ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 800ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 800ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 800ms cubic-bezier(0.22, 1, 0.36, 1),
    background 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.content-swap {
  transition:
    opacity 350ms ease,
    transform 350ms ease;
}

#morph-layout {
  display: flex;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
}

@media (min-width: 640px) {
  #morph-layout {
    gap: var(--space-4);
  }
}

#col-design {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  #col-design {
    gap: var(--space-4);
  }
}

main[data-view="dashboard"] #col-design .company-settings-card {
  flex: 1 1 0%;
  min-height: 0;
}

main[data-view="dashboard"] #col-design .search-candidates-card {
  flex: 0 0 auto;
  min-height: 0;
}

.search-candidates-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

#col-middle {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  #col-middle {
    gap: var(--space-4);
  }
}

main[data-view="dashboard"] #hero-card-wrap {
  flex: 1 1 0%;
  min-height: 0;
}

.messages-card-wrap {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: all 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

main:not([data-view="dashboard"]) .messages-card-wrap {
  flex: 0 0 0px;
  height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
}

#col-right-dash {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  #col-right-dash {
    gap: var(--space-4);
  }
}

#col-right-panel {
  flex: 0 0 0px;
  width: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#hero-dash-content,
#hero-jobs-content,
#hero-detail-content,
#hero-candidate-detail-content,
#hero-admins-content,
#hero-analytics-content {
  transition:
    opacity 350ms ease,
    transform 350ms ease;
}

.hero-card-wrap {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hero-content {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (min-width: 640px) {
  .hero-content {
    padding: var(--space-4);
  }
}
@media (min-width: 1024px) {
  .hero-content {
    padding: var(--space-5);
  }
}

.hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2);
}
@media (min-width: 640px) {
  .hero-header {
    margin-bottom: var(--space-3);
  }
}
@media (min-width: 1024px) {
  .hero-header {
    margin-bottom: var(--space-4);
  }
}

.hero-cal-footer {
  margin-top: auto;
  padding-top: var(--space-2);
  position: relative;
  z-index: 10;
  pointer-events: none;
}
@media (min-width: 640px) {
  .hero-cal-footer {
    padding-top: var(--space-3);
  }
}
@media (min-width: 1024px) {
  .hero-cal-footer {
    padding-top: var(--space-4);
  }
}

.cal-grid-header {
  margin-bottom: 4px;
  padding: 0 1px;
}

.analytics-card-min {
  min-height: 180px;
  height: 100%;
}

.col-right-dash-inner-flex {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}

@media (min-width: 640px) {
  .col-right-dash-inner-flex {
    gap: var(--space-4);
  }
}

.settings-card-flex {
  flex: 1 1 0%;
  min-height: 0;
}

@media (min-width: 1024px) {
  .col-right-dash-inner-flex {
    display: grid;
    grid-template-rows: 1fr 1fr;
  }

  .col-right-dash-inner-flex > * {
    min-height: 0;
  }

  main[data-view="dashboard"] #col-middle {
    display: grid;
    grid-template-rows: 1fr 1fr;
  }

  main[data-view="dashboard"] #col-middle > * {
    min-height: 0;
  }
}

.right-panel-search-wrap {
  padding-bottom: 1rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--black-color-rgb), 0.05);
  flex-shrink: 0;
}

.search-input-wrap {
  position: relative;
  width: 100%;
}

.search-input-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--color-neutral-border-light);
}

.search-input {
  background: rgba(var(--black-color-rgb), 0.03);
  border: 1px solid rgba(var(--black-color-rgb), 0.08);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  font-size: 0.8rem;
  color: var(--text-color);
  font-family: "Outfit", sans-serif;
  transition: all 0.2s ease;
  width: 100%;
  outline: none;
}

.search-input:focus {
  border-color: rgba(var(--primary-color-rgb), 0.3);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.06);
}

.search-input::placeholder {
  color: var(--color-neutral-border-light);
}

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  overflow-y: auto;
  /* Inner padding so the cards' large hover shadow isn't clipped to a
     rectangle by the scroll container (overflow-y:auto implies x-clip). */
  padding: 0.5rem 0.5rem 3rem;
  flex: 1;
  min-height: 0;
  align-content: start;
}

.right-detail-scroll {
  padding-right: 0.25rem;
  padding-bottom: 3rem;
}

.right-panel-min {
  min-height: 0;
}

@media (max-width: 1023px) {
  #morph-layout {
    flex-wrap: wrap;
  }

  #col-design,
  #col-middle,
  #col-right-dash {
    flex: unset !important;
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  main[data-view="dashboard"] #col-design .company-settings-card,
  main[data-view="dashboard"] #col-design .search-candidates-card {
    flex: unset !important;
  }

  main[data-view="dashboard"] #col-design .company-settings-card {
    min-height: 260px;
  }

  main[data-view="dashboard"] #col-design .search-candidates-card {
    min-height: 220px;
  }

  .messages-card-wrap {
    flex: unset !important;
    width: 100%;
    min-height: 240px;
  }

  main[data-view="dashboard"] #hero-card-wrap {
    flex: unset !important;
    width: 100%;
    min-height: 180px;
  }

  #col-middle {
    order: -1;
  }

  #col-right-panel {
    display: none !important;
  }
  main[data-view="dashboard"] #hero-card {
    cursor: pointer !important;
    background: transparent !important;
    border-color: transparent !important;
  }

  main[data-view="dashboard"] #hero-card .hero-glow-wrap {
    opacity: 1 !important;
  }

  #hero-dash-content {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    position: relative !important;
  }

  #hero-jobs-content,
  #hero-detail-content,
  #hero-candidate-detail-content,
  #hero-create-content,
  #hero-admins-content,
  #hero-admin-detail-content,
  #hero-analytics-content {
    display: none !important;
  }

  #col-design {
    min-height: 320px;
  }
  #col-right-dash {
    gap: 0.75rem;
  }

  #hero-card-wrap {
    width: 100%;
    min-height: 180px;
  }

  .col-right-dash-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: 100%;
  }

  .col-right-dash-inner .dash-card {
    min-height: 180px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  #morph-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  #col-middle {
    grid-column: span 2;
    order: -1;
  }
  #col-design {
    grid-column: span 1;
    min-height: 380px;
  }
  #col-right-dash {
    grid-column: span 1;
  }

  #hero-card-wrap {
    min-height: 220px;
  }

  .col-right-dash-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
  }

  .col-right-dash-inner .dash-card {
    flex: 1;
    min-height: 0;
  }
}

@media (min-width: 1024px) {
  #morph-layout {
    flex-wrap: nowrap;
  }

  main[data-view="dashboard"] #col-design {
    min-width: 0;
  }
  main[data-view="dashboard"] #col-middle {
    min-width: 0;
  }
  main[data-view="dashboard"] #col-right-dash {
    min-width: 0;
  }

  main[data-view="dashboard"] #col-right-panel {
    margin-left: -1rem;
  }

  #hero-card-wrap {
    flex: 1 1 0%;
    min-height: 0;
  }
}

#right-jobs-content,
#right-detail-content,
#right-candidate-detail-content,
#right-admins-content {
  transition:
    opacity 350ms ease,
    transform 350ms ease;
}

#right-create-content {
  transition:
    opacity 350ms ease,
    transform 350ms ease;
}
#hero-create-content {
  transition:
    opacity 350ms ease,
    transform 350ms ease;
}
#hero-admin-detail-content,
#right-admin-detail-content {
  transition:
    opacity 350ms ease,
    transform 350ms ease;
}
#hero-analytics-content,
#right-analytics-content {
  transition:
    opacity 350ms ease,
    transform 350ms ease;
}
#right-design-content {
  transition:
    opacity 400ms ease,
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Dashboard responsive layout — tablet (640–1023px)
   Two cards per row across three stacked rows:
     Row 1: Manage Jobs   | Explore Talents
     Row 2: Company Set.. | Manage Admins
     Row 3: Messages      | Analytics
   ========================================================================== */
@media (min-width: 640px) and (max-width: 1023px) {
  #morph-layout {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: var(--space-4);
  }

  main[data-view="dashboard"] #col-middle,
  main[data-view="dashboard"] #col-design {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: var(--space-4) !important;
    width: 100% !important;
    grid-column: auto !important;
    order: 0 !important;
    min-height: 0 !important;
  }

  main[data-view="dashboard"] #col-middle {
    order: -1 !important;
  }

  main[data-view="dashboard"] #col-right-dash {
    width: 100% !important;
    flex: unset !important;
  }

  main[data-view="dashboard"] .col-right-dash-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-4) !important;
    height: auto !important;
  }

  /* Equalize heights for card rows that still show visuals / content.
     col-design (Company Settings + Manage Admins) has no visuals at this
     size, so those cards hug their header content instead. */
  main[data-view="dashboard"] #hero-card-wrap,
  main[data-view="dashboard"] #explore-talents-card-wrap,
  main[data-view="dashboard"] .messages-card-wrap,
  main[data-view="dashboard"] .col-right-dash-inner .dash-card {
    min-height: 240px !important;
    height: 100% !important;
    flex: 1 1 auto !important;
  }

  main[data-view="dashboard"] #col-design .company-settings-card,
  main[data-view="dashboard"] #col-design .search-candidates-card {
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }

  /* Manage Admins card — hug content, don't stretch */
  main[data-view="dashboard"] #manage-admins-card.hero-content {
    flex: 0 0 auto !important;
    padding: var(--space-4) !important;
  }

  main[data-view="dashboard"] #manage-admins-card .hero-header {
    margin-bottom: var(--space-2);
  }
}

/* ==========================================================================
   Dashboard responsive layout — mobile (<=639px)
   Single-column stack with compact gaps; card heights collapse to content.
   ========================================================================== */
@media (max-width: 639px) {
  #morph-layout {
    gap: var(--space-2);
  }

  #col-design,
  #col-middle,
  #col-right-dash {
    gap: var(--space-2) !important;
  }

  main[data-view="dashboard"] #col-design .company-settings-card,
  main[data-view="dashboard"] #col-design .search-candidates-card,
  main[data-view="dashboard"] .messages-card-wrap,
  main[data-view="dashboard"] #hero-card-wrap,
  main[data-view="dashboard"] .col-right-dash-inner .dash-card,
  main[data-view="dashboard"] #explore-talents-card-wrap {
    min-height: 0 !important;
    flex: unset !important;
  }

  main[data-view="dashboard"] #hero-card,
  main[data-view="dashboard"] .dash-card {
    min-height: 0;
  }

  /* Stack the right-dash cards into a single column */
  .col-right-dash-inner {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Manage Admins card — tight padding, no flex-grow */
  main[data-view="dashboard"] #manage-admins-card.hero-content {
    flex: 0 0 auto !important;
    padding: var(--space-3) var(--space-4) !important;
  }

  main[data-view="dashboard"] #manage-admins-card .hero-header {
    margin-bottom: var(--space-1);
  }

  /* Manage Jobs preview — less bottom whitespace */
  main[data-view="dashboard"] #hero-dash-content.hero-content {
    padding: var(--space-3) var(--space-4) !important;
  }
}