/* ================================================================
   PAGES ADMIN
   ================================================================ */

.pages-admin-header {
  margin-bottom: 24px;
}


/* ---------------------------------------------------------------
   PAGE INDEX
   --------------------------------------------------------------- */

.pages-admin-grid {
  display: grid;
  gap: 18px;
}

.page-admin-card {
  overflow: hidden;

  padding: 22px;

  background: #fff;

  border: 1px solid #e3eaed;
  border-radius: 16px;

  box-shadow:
    0 22px 50px -44px
    rgba(3, 46, 77, .55);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.page-admin-card:hover {
  transform: translateY(-2px);

  border-color: #d2dfe4;

  box-shadow:
    0 28px 58px -44px
    rgba(3, 46, 77, .65);
}

.page-admin-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;
}

.page-admin-card-identity {
  display: flex;
  align-items: center;

  min-width: 0;

  gap: 14px;
}

.page-admin-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  color: #fff;
  background: #054d7f;

  border-radius: 13px;

  font:
    700 .78rem
    "Work Sans",
    sans-serif;
}

.page-admin-type-icon.is-home {
  background:
    linear-gradient(
      135deg,
      #032e4d,
      #054d7f
    );
}

.page-admin-type-icon.is-contact {
  background: #04a0dd;
}

.page-admin-type-icon.is-about {
  background: #447b8f;
}

.page-admin-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;
}

.page-admin-title-row h3 {
  margin: 0;

  color: #032e4d;

  font:
    500 1.18rem/1.25
    "Barlow",
    sans-serif;
}

.page-admin-special-pill {
  display: inline-flex;
  align-items: center;

  min-height: 22px;
  padding: 3px 8px;

  color: #fff;
  background: #032e4d;

  border-radius: 999px;

  font:
    700 .55rem
    "Work Sans",
    sans-serif;

  letter-spacing: .06em;
  text-transform: uppercase;
}

.page-admin-path {
  margin-top: 3px;

  color: #7c8f97;

  font:
    500 .68rem
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}

.page-admin-card-description {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  margin: 18px 0;
  padding-bottom: 18px;

  border-bottom: 1px solid #edf1f3;
}

.page-admin-card-description strong,
.page-admin-card-description > span:not(.admin-soft-pill) {
  color: #647982;

  font:
    400 .76rem
    "Work Sans",
    sans-serif;
}

.page-admin-metrics {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;
}

.page-admin-metric {
  min-width: 0;

  padding: 13px 14px;

  background: #f6f8f9;

  border: 1px solid #edf1f3;
  border-radius: 10px;
}

.page-admin-metric span {
  display: block;

  margin-bottom: 4px;

  color: #82939a;

  font:
    600 .57rem
    "Work Sans",
    sans-serif;

  letter-spacing: .06em;
  text-transform: uppercase;
}

.page-admin-metric strong {
  color: #032e4d;

  font:
    600 1.15rem
    "Barlow",
    sans-serif;
}

.page-admin-metric.has-attention {
  background: #fff8e8;
  border-color: #efdcae;
}

.page-admin-metric.has-attention strong {
  color: #956200;
}

.page-admin-health {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 9px 18px;

  margin-top: 18px;
}

.page-admin-health-item {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: #778b93;

  font:
    500 .65rem
    "Work Sans",
    sans-serif;
}

.page-admin-health-item strong {
  color: #536b74;
}

.page-admin-health-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #9aa9af;
}

.page-admin-health-item.is-ready
.page-admin-health-dot {
  background: #39a96b;
}

.page-admin-health-item.is-missing
.page-admin-health-dot {
  background: #f28d01;
}

.page-admin-draft-notice {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-top: 16px;
  padding: 10px 12px;

  color: #825b13;
  background: #fff8e8;

  border: 1px solid #efdcae;
  border-radius: 9px;

  font:
    500 .68rem
    "Work Sans",
    sans-serif;
}

.page-admin-draft-dot {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  background: #f28d01;

  border-radius: 50%;
}

.page-admin-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-top: 18px;
  padding-top: 18px;

  border-top: 1px solid #edf1f3;
}

.page-admin-updated {
  color: #93a1a6;

  font:
    500 .62rem
    "Work Sans",
    sans-serif;
}

.page-admin-updated strong {
  color: #697d85;
}

.page-admin-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;
}

/* ---------------------------------------------------------------
   PAGE EDITOR
   --------------------------------------------------------------- */

.page-admin-editor {
  display: flex;
  flex-direction: column;

  gap: 18px;
}

.page-admin-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  padding: 22px 24px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #032e4d,
      #054d7f
    );

  border-radius: 16px;
}

.page-admin-editor-header h2 {
  margin: 3px 0 6px;

  color: #fff;

  font:
    500 1.55rem/1.2
    "Barlow",
    sans-serif;
}

.page-admin-editor-header p:not(.admin-section-kicker) {
  max-width: 680px;

  margin: 0;

  color: rgba(255, 255, 255, .75);

  font:
    400 .76rem/1.5
    "Work Sans",
    sans-serif;
}

.page-admin-editor-state {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 7px 10px;

  color: #fff;
  background: rgba(255, 255, 255, .1);

  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;

  font:
    600 .64rem
    "Work Sans",
    sans-serif;

  white-space: nowrap;
}

.page-admin-state-dot {
  width: 7px;
  height: 7px;

  background: #a1adb2;

  border-radius: 50%;
}

.page-admin-state-dot.is-visible {
  background: #6fe0a0;
}

.page-admin-state-dot.is-hidden {
  background: #f4b759;
}

.page-admin-configuration-grid {
  display: grid;

  grid-template-columns:
    2fr 1fr 1fr 1.4fr;

  gap: 18px;

  margin-top: 22px;
}

.page-admin-slug-field {
  display: flex;
  align-items: stretch;
}

.page-admin-slug-field > span {
  display: flex;
  align-items: center;

  padding: 0 12px;

  color: #819199;
  background: #f4f7f8;

  border:
    1px solid #dce5e9;
  border-right: 0;

  border-radius:
    8px 0 0 8px;

  font:
    500 .68rem
    ui-monospace,
    monospace;
}

.page-admin-slug-field input {
  border-radius:
    0 8px 8px 0 !important;
}

.page-builder-summary {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.page-builder-summary-metric {
  padding: 18px;

  text-align: center;

  background: #f6f8f9;

  border: 1px solid #e8edef;
  border-radius: 12px;
}

.page-builder-summary-metric strong {
  display: block;

  margin-bottom: 4px;

  color: #032e4d;

  font:
    600 1.55rem
    "Barlow",
    sans-serif;
}

.page-builder-summary-metric span {
  color: #71858d;

  font:
    500 .66rem
    "Work Sans",
    sans-serif;
}

.page-builder-summary-metric.has-attention {
  background: #fff8e8;
  border-color: #efdcae;
}

.page-builder-summary-metric.has-attention strong {
  color: #956200;
}

.page-builder-actions {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-top: 16px;
}

.page-builder-locked {
  display: flex;
  align-items: center;

  gap: 15px;

  padding: 20px;

  background: #f6f8f9;

  border: 1px dashed #cedbe0;
  border-radius: 12px;
}

.page-builder-locked-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  color: #054d7f;
  background: #eaf3f7;

  border-radius: 11px;

  font-size: 1.35rem;
}

.page-builder-locked strong {
  color: #032e4d;

  font:
    600 .82rem
    "Work Sans",
    sans-serif;
}

.page-builder-locked p {
  margin: 3px 0 0;

  color: #71858d;

  font:
    400 .72rem/1.45
    "Work Sans",
    sans-serif;
}

/* ---------------------------------------------------------------
   SEO INSIDE PAGE EDITOR
   --------------------------------------------------------------- */

.page-admin-seo-panel
.page-seo-editor {
  margin-top: 4px;
}

.page-seo-editor .seo-language-panel {
  height: 100%;

  padding: 20px;

  background: #f8fafb;

  border: 1px solid #e4ebee;
  border-radius: 12px;
}

.page-seo-editor .title {
  color: #032e4d;
}

.page-seo-editor details {
  padding: 13px 15px;

  background: #fff;

  border: 1px solid #e1e8eb;
  border-radius: 9px;
}

.page-seo-editor summary {
  color: #054d7f;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   PAGE OVERVIEW / SHOW
   --------------------------------------------------------------- */

.page-overview-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;
}

.page-overview-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;

  margin-bottom: 20px;
}

.page-overview-card {
  padding: 19px 20px;

  background: #fff;

  border: 1px solid #e3eaed;
  border-radius: 14px;

  box-shadow:
    0 18px 42px -38px
    rgba(3, 46, 77, .5);
}

.page-overview-label {
  display: block;

  margin-bottom: 8px;

  color: #054d7f;

  font:
    700 .59rem
    "Work Sans",
    sans-serif;

  letter-spacing: .09em;
  text-transform: uppercase;
}

.page-overview-card > strong {
  color: #032e4d;

  font:
    500 1.25rem
    "Barlow",
    sans-serif;
}

.page-overview-card > strong small {
  color: #6f848c;

  font:
    500 .68rem
    "Work Sans",
    sans-serif;
}

.page-overview-divider {
  color: #a6b2b7;
}

.page-overview-card p {
  margin: 5px 0 0;

  color: #7d9098;

  font:
    400 .68rem
    "Work Sans",
    sans-serif;
}

.page-overview-attention {
  display: grid;

  grid-template-columns:
    auto minmax(0, 1fr) auto;

  align-items: center;

  gap: 13px;

  margin-bottom: 20px;
  padding: 14px 16px;

  background: #fff8e8;

  border: 1px solid #efdcae;
  border-radius: 12px;
}

.page-overview-attention-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  color: #fff;
  background: #f28d01;

  border-radius: 9px;

  font:
    700 .82rem
    "Work Sans",
    sans-serif;
}

.page-overview-attention strong {
  color: #75500e;

  font:
    600 .75rem
    "Work Sans",
    sans-serif;
}

.page-overview-attention p {
  margin: 2px 0 0;

  color: #876d38;

  font:
    400 .67rem/1.4
    "Work Sans",
    sans-serif;
}

.page-overview-section {
  margin-bottom: 20px;
  padding: 22px;

  background: #fff;

  border: 1px solid #e3eaed;
  border-radius: 15px;
}

.page-overview-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 17px;
  padding-bottom: 16px;

  border-bottom: 1px solid #e9eef0;
}

.page-overview-section-heading h3 {
  margin: 3px 0 0;

  color: #032e4d;

  font:
    500 1.15rem
    "Barlow",
    sans-serif;
}

.page-overview-sections-list {
  display: flex;
  flex-direction: column;
}

.page-overview-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding: 12px 0;

  border-bottom: 1px solid #edf1f3;
}

.page-overview-section-row:last-child {
  border-bottom: 0;
}

.page-overview-section-row > div:first-child {
  display: flex;
  align-items: center;

  min-width: 0;

  gap: 11px;
}

.page-overview-section-position {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  color: #054d7f;
  background: #eef4f7;

  border-radius: 8px;

  font:
    700 .62rem
    "Work Sans",
    sans-serif;
}

.page-overview-section-row strong {
  display: block;

  color: #032e4d;

  font:
    600 .74rem
    "Work Sans",
    sans-serif;
}

.page-overview-section-row
> div:first-child
> div
> span {
  display: block;

  margin-top: 2px;

  color: #85969d;

  font:
    400 .63rem
    "Work Sans",
    sans-serif;
}

.page-overview-section-status {
  display: flex;
  align-items: center;

  gap: 8px;
}

.page-overview-content-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;
}

.page-overview-rich-content {
  color: #506871;

  font:
    400 .8rem/1.65
    "Work Sans",
    sans-serif;
}

.page-overview-muted {
  color: #93a2a8;
}

.page-overview-empty,
.page-admin-empty {
  display: flex;
  align-items: center;
  flex-direction: column;

  padding:
    clamp(50px, 8vw, 86px)
    24px;

  text-align: center;

  background: #fff;

  border: 1px solid #e3eaed;
  border-radius: 16px;
}

.page-admin-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  margin-bottom: 15px;

  color: #054d7f;
  background: #edf5f8;

  border-radius: 15px;

  font-size: 1.4rem;
}

.page-admin-empty h3,
.page-overview-empty strong {
  color: #032e4d;
}

.page-admin-empty p,
.page-overview-empty p {
  max-width: 480px;

  color: #74878f;
}

/* ---------------------------------------------------------------
   MOBILE
   --------------------------------------------------------------- */

@media screen and (max-width: 1100px) {
  .page-admin-configuration-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .page-overview-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 800px) {
  .page-admin-metrics,
  .page-builder-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .page-admin-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .page-admin-actions {
    width: 100%;
  }

  .page-admin-editor-header {
    flex-direction: column;
  }

  .page-overview-content-grid {
    grid-template-columns: 1fr;
  }

  .page-overview-attention {
    grid-template-columns:
      auto minmax(0, 1fr);
  }

  .page-overview-attention .button {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 600px) {
  .page-admin-configuration-grid,
  .page-overview-grid {
    grid-template-columns: 1fr;
  }

  .page-admin-card {
    padding: 17px;
  }

  .page-admin-card-top {
    align-items: flex-start;
  }

  .page-admin-actions {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .page-admin-actions .button,
  .page-admin-actions form,
  .page-admin-actions form .button {
    width: 100%;
  }

  .page-builder-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .page-overview-section-row {
    align-items: stretch;
    flex-direction: column;
  }

  .page-overview-section-status {
    justify-content: space-between;
  }
}