/*
 * Page — outer shell, sidebar/main composition, and the content heading.
 *
 * Includes the page heading row used by content actions:
 *   .page-heading                         <- heading bar above content
 *   .page-heading__title
 *   .page-heading__actions
 *
 * BEM elements:
 *   .page                                 <- outer flex container, full viewport
 *   .page__sidebar                        <- desktop sidebar column (≥ lg)
 *   .page__sidebar-inner                  <- column inside the sidebar
 *   .page__sidebar-mobile                 <- mobile overlay wrapper
 *   .page__sidebar-mobile-pane            <- the panel inside the overlay
 *   .page__sidebar-close                  <- close button (mobile)
 *   .page__brand                          <- logo wrapper
 *   .page__nav                            <- nav element holding side links
 *   .page__main                           <- right side: top bar + scroll area
 *   .page__main-scroll                    <- the scrollable <main>
 *   .page__content                        <- inner content with main padding
 *   .page__drawer                         <- right-side AI drawer
 *
 * The mobile sidebar's outermost element keeps `hidden` as its hidden state;
 * the sidebar Stimulus controller swaps it with `.page-state--shown`.
 */

/* ------------------------------------------------------------------ */
/* Shell                                                              */
/* ------------------------------------------------------------------ */

.page {
  display: flex;
  block-size: 100vh;
  block-size: 100dvh;
  overflow: hidden;
}

.page-state--shown {
  display: block;
}

/* ------------------------------------------------------------------ */
/* Sidebar — desktop                                                  */
/* ------------------------------------------------------------------ */

.page__sidebar {
  display: none;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .page__sidebar {
    display: flex;
  }
}

/* Hide the desktop sidebar inside the Hotwire native shell. */
html[data-hotwire-native-app] .page__sidebar {
  display: none;
}

.page__sidebar-inner {
  display: flex;
  flex-direction: column;
  inline-size: 16rem;
  block-size: 100%;
  padding-block: 1.25rem 1rem;
  overflow-y: auto;
}

/* ------------------------------------------------------------------ */
/* Sidebar — mobile overlay                                           */
/* ------------------------------------------------------------------ */

.page__sidebar-mobile {
  position: fixed;
  inset: 0;
  display: flex;
  z-index: 40;
}

.page__sidebar-mobile-pane {
  position: fixed;
  inset: 0;
  overflow: auto;
  background-color: var(--color-border);
  opacity: 0.9;
  padding-block-start: 1.25rem;
  padding-block-end: 1rem;
}

.page__sidebar-close {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 2.5rem;
  inline-size: 2.5rem;
  margin-inline-start: 0.25rem;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.page__sidebar-close:focus {
  outline: var(--focus-ring-size) solid var(--color-surface);
  outline-offset: -2px;
}

.page__sidebar-close-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--color-ink);
}

/* Spacer used to pad the mobile overlay panel. */
.page__sidebar-mobile-spacer {
  flex-shrink: 0;
  inline-size: 3.5rem;
}

/* ------------------------------------------------------------------ */
/* Brand / logo wrapper                                               */
/* ------------------------------------------------------------------ */

.page__brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
}

.page__brand--mobile {
  inline-size: 50%;
}

.page__brand-logo--fill {
  object-fit: fill;
}

.page__brand-logo--cover {
  object-fit: cover;
}

.top-menu-external__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Nav                                                                */
/* ------------------------------------------------------------------ */

.page__nav {
  flex: 1 1 auto;
  padding-inline: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Variant for the mobile sidebar where it doesn't need to flex-1.      */
.page__nav--mobile {
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/* Main column                                                        */
/* ------------------------------------------------------------------ */

.page__main {
  flex: 1 1 auto;
  display: flex;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.page__main-scroll {
  flex: 1 1 auto;
  position: relative;
  z-index: 0;
  overflow-y: auto;
}

.page__main-scroll:focus {
  outline: none;
}

.page__content {
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block: 1.5rem;
}

@media (min-width: 640px) {
  .page__content {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .page__content {
    padding-inline: 2rem;
  }
}

/* ------------------------------------------------------------------ */
/* Right-side AI drawer                                               */
/* ------------------------------------------------------------------ */

.page__drawer {
  flex-shrink: 0;
  inline-size: 0;
  max-inline-size: 100vw;
  overflow: hidden;
  transition: inline-size 300ms ease, max-inline-size 300ms ease;
}

.page__drawer--open {
  inline-size: min(28rem, 100vw);
}

@media (min-width: 1024px) {
  .page__drawer--open {
    inline-size: min(36rem, 100vw);
  }
}

.page__drawer-panel {
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
}

.page-drawer-toggle {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-ink);
  color: var(--color-ink-inverted);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}

.page-drawer-toggle:hover {
  background-color: var(--color-ink-light);
}

.page-drawer-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow:
    var(--shadow-surface-outline),
    0 0 0 4px var(--color-ink),
    var(--shadow-lg);
}

.page-drawer-toggle__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.page-drawer-panel {
  display: flex;
  flex-direction: column;
  border-inline-start: 1px solid var(--color-border);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  outline: none;
}

.page-drawer-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--color-border);
}

.page-drawer-panel__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 600;
}

.page-drawer-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: inherit;
  cursor: pointer;
}

.page-drawer-panel__close:hover {
  background-color: var(--color-surface-subtle);
}

.page-drawer-panel__close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--shadow-surface-outline);
}

.page-drawer-panel__close-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.page-drawer-panel__body,
.page-drawer-panel__frame {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  min-block-size: 0;
}

.page-drawer-panel__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 100%;
}

.page-drawer-panel__loading-text {
  color: var(--color-ink-lighter);
}

/* Floating portal element used by popup menus (Stimulus / Turbo) to
 * render layered content above the page. Sits above everything else.
 *
.page__menu-portal {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* ------------------------------------------------------------------ */
/* Page box / main-with-side layout                                   */
/* ------------------------------------------------------------------ */

.page-box {
  position: relative; /* relative */
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin-block-end: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-2xl);
  background-color: color-mix(in srgb, var(--color-surface) 60%, transparent);
  padding: 1rem;
  box-shadow: var(--shadow-lg);
}

.page-box__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-block-end: 1px solid var(--color-border);
  padding: 1rem;
}

.page-box__title {
  margin: 0;
  color: rgb(var(--palette-hq-slate-800));
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5rem; /* leading-6 */
}

.page-box__body {
  flex: 1 1 auto;
  padding-block: 1.25rem;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .page-box__body {
    padding: 1.5rem;
  }
}

@media (min-width: 768px) {
  .page-box__title {
    font-size: 1.25rem;
  }
}

.page-main-side {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
  grid-template-rows: repeat(1, minmax(0, 1fr)); /* grid-rows-1 */
  align-items: flex-start;
  row-gap: 2rem;
  column-gap: 2rem;
  margin-inline: auto;
  max-inline-size: 42rem;
}

.page-main-side__side,
.page-main-side__main {
  min-inline-size: 0;
}

@media (min-width: 640px) {
  .page-main-side__main {
    padding-inline: 2rem;
  }
}

@media (min-width: 1024px) {
  .page-main-side {
    margin-inline: 0;
    max-inline-size: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-main-side__side {
    grid-column-start: 3;
    grid-row-end: 1;
  }

  .page-main-side__main {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-row-end: 2;
  }
}

@media (min-width: 1280px) {
  .page-main-side__main {
    padding-inline: 4rem;
  }
}

/* ------------------------------------------------------------------ */
/* Page search                                                        */
/* ------------------------------------------------------------------ */

.page-search {
  padding: 1rem 2.5rem;
}

.page-search--admin {
  padding-block: 1.5rem;
  padding-inline: 1rem;
}

.page-search__fieldset,
.page-search__filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 0;
  margin: 0;
  padding: 0;
}

.page-search__fieldset {
  align-items: stretch;
  justify-content: space-between;
}

.page-search__filters {
  align-items: flex-start;
}

.page-search__field,
.page-search__filter,
.page-search__actions {
  inline-size: 100%;
}

.page-search__name-field {
  margin-block-end: 1rem;
}

.page-search__input-with-icon {
  position: relative;
  inline-size: 100%;
  color: var(--color-ink-lighter);
}

.page-search__input-with-icon:focus-within {
  color: var(--color-ink-light);
}

.page-search__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.page-search__submit {
  justify-content: center;
  inline-size: 100%;
}

.page-search__submit-icon {
  margin-inline-end: 0.5rem;
}

.main-search-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.main-search-row__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 1rem;
  inline-size: 100%;
}

.main-search-row__group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  inline-size: 100%;
}

.main-search-row__field {
  inline-size: 100%;
}

.main-search-row__actions {
  inline-size: auto;
  text-align: end;
}

.main-search-row__submit {
  justify-content: center;
  inline-size: 100%;
  white-space: nowrap;
}


.main-search-row__icon--tight {
  margin-inline-end: 0.25rem;
}

@media (min-width: 768px) {
  .main-search-row {
    flex-direction: row;
    align-items: center;
  }

  .main-search-row__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main-search-row__group {
    flex-direction: row;
  }

  .main-search-row__group > .main-search-row__field {
    inline-size: 50%;
  }

  .main-search-row__submit {
    inline-size: auto;
  }
}

@media (min-width: 1280px) {
  .main-search-row__fields--wide {
    display: flex;
  }

  .main-search-row__field--wide {
    flex: 2 1 0;
  }

  .main-search-row__field--fill {
    flex: 1 1 0;
  }
}

@media (min-width: 640px) {
  .page-search--admin {
    padding-block: 1rem;
    padding-inline: 2.5rem;
  }

  .page-search__filters {
    flex-direction: row;
    align-items: flex-end;
    column-gap: 1rem;
    row-gap: 0;
  }

  .page-search__filter,
  .page-search__actions {
    inline-size: auto;
  }

  .page-search__submit {
    inline-size: auto;
  }
}

@media (min-width: 768px) {
  .page-search__fieldset {
    flex-direction: row;
    align-items: center;
  }

  .page-search__field {
    inline-size: auto;
    margin-inline-end: 1rem;
  }
}

/* ------------------------------------------------------------------ */
/* Page heading                                                       */
/* ------------------------------------------------------------------ */

/*
 * Heading row used at the top of pages — title on the left, action
 * buttons on the right. Stacks on small screens.
 */
.page-heading {
  border-block-end: 1px solid var(--color-ink-medium);
  padding-block: 1rem;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .page-heading {
    padding-inline: 2rem;
  }
}

.page-heading__title {
  flex: 1 1 0;
  min-inline-size: 0;
  font-size: var(--text-large);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-heading__actions {
  display: flex;
  margin-block-start: 1rem;
}

@media (min-width: 640px) {
  .page-heading__actions {
    margin-block-start: 0;
    margin-inline-start: 1rem;
  }
}

.main-panel {
  margin-block-start: 1.5rem;
}

.main-panel-title--offset {
  margin-block-start: 1rem;
}

.main-panel-body {
  margin-block-start: 2rem;
}

.main-content-offset {
  margin-block-start: 2rem;
}

.main-form-layout__aside,
.main-form-layout__body {
  min-inline-size: 0;
}

.main-form-layout__body {
  margin-block-start: 1.25rem;
}

@media (min-width: 768px) {
  .main-form-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .main-form-layout__aside {
    grid-column: span 1 / span 1;
  }

  .main-form-layout__body {
    grid-column: span 2 / span 2;
    margin-block-start: 0;
  }
}

.main-record-list {
  display: flex;
  flex-direction: column;
  margin-block-start: 2rem;
}

.main-record-section {
  margin-block-start: 2rem;
}

.main-record-section--first {
  margin-block-start: 0;
  margin-block-end: 2rem;
}

.main-record-empty {
  text-align: center;
}

.main-record-heading {
  margin: 0 0 1rem;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 600;
}

.main-record-heading--with-icon {
  display: flex;
  align-items: center;
}

.main-record-heading__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline-end: 0.5rem;
  color: var(--color-warning);
}

.main-record-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-record-cards--compact {
  gap: 1rem;
}

@media (min-width: 640px) {
  .main-record-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .main-record-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .main-record-cards--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.main-notice-action {
  margin-block-start: 1rem;
}


.main-notice-action__link {
  border-radius: var(--radius-md);
  padding-block: 0.375rem;
  padding-inline: 0.5rem;
  color: rgb(var(--palette-blue-800));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.main-notice-action__link--offset {
  margin-inline-start: 0.75rem;
}

.main-notice-action__link:hover,
.main-notice-action__link:focus {
  background-color: rgb(var(--palette-blue-100));
}

.main-notice-action__link:focus {
  outline: none;
}

.main-description {
  display: flex;
  justify-content: center;
  margin-block-start: 2rem;
  padding-inline: 0.5rem;
  color: var(--color-ink-light);
}

.main-table-scroll {
  overflow-x: auto;
}

@media (min-width: 768px) {
  .main-table-scroll {
    overflow-x: visible;
  }
}

/* ------------------------------------------------------------------ */
/* Page section                                                       */
/* ------------------------------------------------------------------ */

/*
 * Section divider row used inside page bodies — heading text on the
 * left, optional actions on the right, with a bottom border.
 */
.page-section {
  border-block-end: 1px solid var(--color-border);
  padding-block-end: 1.25rem;
}


.page-section__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.75rem; /* leading-7 */
  color: rgb(var(--palette-orange-900));
  margin: 0;
}

@media (min-width: 640px) {
  .page-section__title {
    line-height: 2.25rem;
  }
}

.page-section__actions {
  margin-block-start: 0.75rem;
  display: flex;
}

@media (min-width: 640px) {
  .page-section__actions {
    margin-block-start: 0;
    margin-inline-start: 1rem;
  }
}

/* ------------------------------------------------------------------ */
/* Record tabs                                                        */
/* ------------------------------------------------------------------ */

.page-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}

@media (max-width: 639px) {
  .page-tabs {
    align-items: stretch;
    gap: 1rem;
    flex-direction: column;
  }
}

.page-tabs__select-wrap {
  display: block;
}

@media (min-width: 640px) {
  .page-tabs__select-wrap {
    display: none;
  }
}

.page-tabs__select {
  display: block;
  inline-size: 100%;
  border-radius: var(--radius-md);
  border-color: var(--color-border-medium);
  padding-block: 0.5rem;
  padding-inline: 0.75rem 2.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.page-tabs__select:focus {
  border-color: var(--focus-ring-color);
  outline: 2px solid transparent;
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 1px var(--focus-ring-color);
}

@media (min-width: 640px) {
  .page-tabs__select {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.page-tabs__nav-wrap {
  display: none;
}

@media (min-width: 640px) {
  .page-tabs__nav-wrap {
    display: block;
    inline-size: 100%;
  }
}

.page-tabs__rule {
  border-block-end: 1px solid var(--color-border);
}

.page-tabs__nav {
  display: flex;
  margin-block-end: -1px;
  gap: 2rem;
}

.page-tabs__link {
  display: inline-flex;
  align-items: center;
  padding-block: 1rem;
  padding-inline: 0.25rem;
  border-block-end: 2px solid transparent;
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
}

.page-tabs__link:hover {
  border-block-end-color: var(--color-border-medium);
  color: var(--color-ink-light);
}

.page-tabs__link--active {
  border-block-end-color: var(--color-brand);
  color: var(--color-brand-strong);
}

.page-tabs__actions {
  display: flex;
  justify-content: flex-end;
  min-inline-size: 15rem;
}

@media (max-width: 639px) {
  .page-tabs__actions {
    justify-content: flex-start;
    min-inline-size: 0;
  }
}

.record-tabs {
  margin-block-start: 1.5rem;
}

.record-tabs--panel {
  margin-block-start: 1.5rem;
}

.record-tabs__switcher {
  margin-block-end: 1rem;
}

.record-tabs__content {
  margin-block-start: 1.5rem;
}

.record-tabs__pad {
  padding-inline: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Legacy ViewComponent page wrappers                                 */
/* ------------------------------------------------------------------ */

.page-card-header {
  position: relative;
  overflow: hidden;
  margin-block-end: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.page-card-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--color-border);
}

.page-card-header__title {
  margin: 0;
  color: rgb(var(--palette-hq-slate-800));
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  .page-card-header__title {
    font-size: 1.25rem;
  }
}

.page-title {
  display: block;
}


.page-title__main {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-inline-size: 0;
}

.page-title__heading {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--color-ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.75rem;
}

@media (min-width: 640px) {
  .page-title__heading {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.page-title__subtitle {
  margin-inline-start: 1rem;
}

.page-title__actions {
  display: flex;
  align-items: center;
  margin-block-start: 1rem;
}

@media (min-width: 768px) {
  .page-title__actions {
    margin-block-start: 0;
    margin-inline-start: 1rem;
  }
}

.page-filter-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-filter-summary__count {
  color: var(--color-ink);
  font-size: 1.25rem;
  font-weight: 600;
}

.page-filter-summary__filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.page-filter-summary__icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.page-filter-summary__clear-link {
  color: rgb(var(--palette-indigo-700));
  font-size: 0.875rem;
}

.page-filter-summary__clear-link:hover {
  border-block-end: 1px solid var(--color-brand);
  color: var(--color-brand);
}

.empty-content {
  margin-block-start: 2.5rem;
  padding-block: 3rem;
  background-color: var(--color-surface);
}

.empty-content__inner {
  max-inline-size: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 1024px) {
  .empty-content__inner {
    padding-inline: 2rem;
  }
}

.empty-content__copy {
  max-inline-size: 42rem;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .empty-content__copy {
    text-align: center;
  }
}

.empty-content__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.25rem;
}

@media (min-width: 640px) {
  .empty-content__title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.empty-content__description {
  margin-block: 1.5rem 0;
  color: var(--color-ink-light);
  font-size: 1.125rem;
  line-height: 2rem;
}

.empty-content__link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-indigo-50));
  padding-block: 0.625rem;
  padding-inline: 0.875rem;
  color: var(--color-brand-strong);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.empty-content__link:hover {
  background-color: rgb(var(--palette-indigo-100));
}

.empty-content__slot {
  display: flex;
  justify-content: center;
  margin-block-start: 2rem;
}

.top-menu-action {
  margin-inline-end: 1rem;
}

.project-show-header,
.task-show-header {
  margin-block-end: 1.5rem;
}

.empty-content__image-wrap {
  position: relative;
  overflow: hidden;
  padding-block-start: 4rem;
}

.empty-content__image {
  margin-block-end: -12%;
  border-radius: var(--radius-xl);
  box-shadow:
    var(--shadow-2xl),
    0 0 0 1px oklch(var(--lch-black) / 10%);
}