.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;
}

body.app-enter .navbar {
  animation: appNavIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.app-enter #main-container {
  animation: appViewIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes appNavIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes appViewIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-enter .navbar,
  body.app-enter #main-container {
    animation: none;
  }
}

#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"]):not([data-view="user-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);
  }
}

.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;
  }
}

.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;

  padding: 0.5rem 0.5rem 3rem;
  flex: 1;
  min-height: 0;
  align-content: start;
}

.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,
  main[data-view="user-dashboard"] #user-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);
}

@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;
  }

  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;
  }

  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);
  }
}

@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;
  }

  .col-right-dash-inner {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }

  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);
  }

  main[data-view="dashboard"] #hero-dash-content.hero-content {
    padding: var(--space-3) var(--space-4) !important;
  }
}