/* ================================================================
   INSIGHTS ADMIN
   ================================================================ */

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

.insights-admin-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.insight-admin-card {
  display: grid;
  grid-template-columns:
    minmax(190px, .62fr)
    minmax(0, 1.38fr);

  overflow: hidden;

  background: #fff;

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

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

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

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

  border-color: #d2dfe4;

  box-shadow:
    0 30px 60px -46px
    rgba(3, 46, 77, .68);
}

.insight-admin-cover {
  position: relative;

  min-height: 100%;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #e8eef1,
      #dce6ea
    );
}

.insight-admin-cover > img {
  width: 100%;
  height: 100%;

  min-height: 320px;

  display: block;

  object-fit: cover;
}

.insight-admin-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  height: 100%;

  min-height: 320px;

  gap: 8px;

  color: #69808b;
}

.insight-admin-cover-placeholder span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  color: #fff;
  background: #054d7f;

  border-radius: 15px;

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

.insight-admin-cover-placeholder small {
  font:
    500 .64rem
    "Work Sans",
    sans-serif;
}

.insight-admin-cover-overlay {
  position: absolute;

  top: 12px;
  left: 12px;
}

.insight-format-pill {
  display: inline-flex;
  align-items: center;

  min-height: 25px;
  padding: 4px 9px;

  color: #fff;

  border-radius: 999px;

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

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

.insight-format-pill.is-podcast {
  background: #1db954;
}

.insight-admin-content {
  min-width: 0;

  padding: 20px;
}

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

  gap: 12px;
}

.insight-admin-category-list {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}

.insight-category-pill {
  display: inline-flex;
  align-items: center;

  min-height: 23px;
  padding: 4px 9px;

  color: #054d7f;
  background: #edf4f7;

  border-radius: 999px;

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

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

.insight-category-pill.is-empty {
  color: #7d8d94;
  background: #f0f3f4;
}

.insight-status-pill {
  display: inline-flex;
  align-items: center;

  min-height: 27px;
  padding: 5px 10px;

  border-radius: 999px;

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

  white-space: nowrap;
}

.insight-status-pill.is-scheduled {
  color: #8a5a00;
  background: #fff2d6;
}

.insight-admin-title {
  margin: 16px 0 4px;

  color: #032e4d;

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

.insight-admin-german-title {
  margin: 0 0 5px;

  color: #6f838c;

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

.insight-admin-path {
  overflow: hidden;

  color: #82949b;

  font:
    500 .61rem
    ui-monospace,
    monospace;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-admin-excerpt {
  margin: 14px 0 0;

  color: #61767f;

  font:
    400 .74rem/1.55
    "Work Sans",
    sans-serif;
}

.insight-admin-metrics {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 8px;

  margin-top: 17px;
}

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

  padding: 10px 11px;

  background: #f6f8f9;

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

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

  margin-bottom: 4px;

  color: #8c9ba1;

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

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

.insight-admin-metric strong {
  display: block;

  overflow: hidden;

  color: #415f6b;

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

  text-overflow: ellipsis;
  white-space: nowrap;
}

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

  gap: 8px 15px;

  margin-top: 15px;
}

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

  gap: 5px;

  color: #748890;

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

.insight-admin-health-item > span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #a1afb4;
}

.insight-admin-health-item strong {
  color: #536d77;
}

.insight-admin-health-item.is-ready > span {
  background: #39a96b;
}

.insight-admin-health-item.is-missing > span {
  background: #f28d01;
}

.insight-admin-health-item.is-spotify > span {
  background: #1db954;
}

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

  gap: 14px;

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

  border-top: 1px solid #edf1f3;
}

.insight-admin-updated {
  color: #94a1a6;

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

.insight-admin-updated strong {
  color: #687d85;
}

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

  gap: 6px;
}

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

.insight-editor {
  display: flex;
  flex-direction: column;

  gap: 18px;
}

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

  gap: 20px;

  padding: 22px 24px;

  color: #fff;

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

  border-radius: 16px;
}

.insight-editor-header h2 {
  margin: 4px 0 6px;

  color: #fff;

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

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

  margin: 0;

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

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

.insight-editor-status {
  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 .62rem
    "Work Sans",
    sans-serif;
}

.insight-editor-status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;
}

.insight-editor-status-dot.is-visible {
  background: #6fe0a0;
}

.insight-editor-status-dot.is-hidden {
  background: #f4b759;
}

.insight-configuration-grid {
  display: grid;

  grid-template-columns:
    1.7fr 1.1fr .55fr .8fr;

  gap: 18px;

  margin-top: 22px;
}

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

.insight-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 .67rem
    ui-monospace,
    monospace;
}

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

/* ---------------------------------------------------------------
   CATEGORY SELECTOR
   --------------------------------------------------------------- */

.insight-category-selector {
  display: grid;

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

  gap: 10px;
}

.insight-category-option {
  position: relative;

  cursor: pointer;
}

.insight-category-option > input {
  position: absolute;

  opacity: 0;
  pointer-events: none;
}

.insight-category-option-box {
  display: flex;
  align-items: center;

  min-height: 66px;
  padding: 12px 14px;

  gap: 10px;

  background: #f8fafb;

  border: 1px solid #dfe8eb;
  border-radius: 11px;

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

.insight-category-option:hover
.insight-category-option-box {
  border-color: #bdd1da;
}

.insight-category-option
> input:checked
+ .insight-category-option-box {
  background: #edf5f8;

  border-color: #054d7f;

  box-shadow:
    inset 0 0 0 1px #054d7f;
}

.insight-category-option-check {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  flex: 0 0 24px;

  color: transparent;
  background: #fff;

  border: 1px solid #cad8de;
  border-radius: 7px;

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

.insight-category-option
> input:checked
+ .insight-category-option-box
.insight-category-option-check {
  color: #fff;
  background: #054d7f;

  border-color: #054d7f;
}

.insight-category-option-box strong {
  display: block;

  color: #032e4d;

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

.insight-category-option-box small {
  display: block;

  margin-top: 2px;

  color: #82939a;

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

.insight-category-empty {
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 18px;

  background: #f7f9fa;

  border: 1px dashed #ccd9de;
  border-radius: 11px;
}

.insight-category-empty strong {
  color: #032e4d;
}

.insight-category-empty p {
  margin: 3px 0 0;

  color: #778a92;

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

.insight-section-secondary-action {
  margin-top: 13px;
}

/* ---------------------------------------------------------------
   MEDIA / SPOTIFY
   --------------------------------------------------------------- */

.insight-media-grid {
  display: grid;

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

  gap: 20px;
}

.insight-current-cover {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-top: 12px;
  padding: 11px;

  background: #f7f9fa;

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

.insight-current-cover img {
  width: 90px;
  height: 64px;

  object-fit: cover;

  border-radius: 7px;
}

.insight-current-cover strong {
  display: block;

  color: #032e4d;

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

.insight-current-cover span {
  color: #809198;

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

.insight-spotify-editor {
  padding: 17px;

  background: #f7faf8;

  border: 1px solid #dce8df;
  border-radius: 13px;
}

.insight-spotify-heading {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 15px;
}

.insight-spotify-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  color: #fff;
  background: #1db954;

  border-radius: 50%;

  font-size: 1rem;
}

.insight-spotify-heading strong {
  display: block;

  color: #173e29;

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

.insight-spotify-heading span {
  display: block;

  margin-top: 2px;

  color: #6d8475;

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

.insight-spotify-preview {
  margin-top: 13px;

  overflow: hidden;

  background: #fff;

  border: 1px solid #dde8e0;
  border-radius: 11px;
}

.insight-spotify-preview iframe {
  display: block;

  border: 0;
}

.insight-spotify-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100px;

  padding: 20px;

  color: #82948a;

  text-align: center;

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

.insight-spotify-preview-empty[hidden],
.insight-spotify-preview iframe[hidden],
.insight-spotify-preview[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------
   OVERVIEW
   --------------------------------------------------------------- */

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

  gap: 10px;
}

.insight-overview-grid {
  display: grid;

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

  gap: 14px;

  margin-bottom: 16px;
}

.insight-overview-card {
  padding: 18px 19px;

  background: #fff;

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

.insight-overview-card > span {
  display: block;

  margin-bottom: 7px;

  color: #054d7f;

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

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

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

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

.insight-overview-health {
  display: grid;

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

  gap: 10px;

  margin-bottom: 18px;
}

.insight-overview-health-item {
  display: flex;
  align-items: center;

  gap: 9px;

  padding: 11px 13px;

  background: #fff;

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

.insight-overview-health-item > span {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;
}

.insight-overview-health-item.is-ready > span {
  background: #39a96b;
}

.insight-overview-health-item.is-warning > span {
  background: #f28d01;
}

.insight-overview-health-item.is-spotify > span {
  background: #1db954;
}

.insight-overview-health-item strong {
  display: block;

  color: #425e69;

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

.insight-overview-health-item small {
  display: block;

  margin-top: 1px;

  color: #88989e;

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

.insight-overview-main-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(260px, .65fr);

  gap: 18px;
}

.insight-overview-section,
.insight-overview-side-card {
  margin-bottom: 18px;
  padding: 21px;

  background: #fff;

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

.insight-overview-section-heading {
  margin-bottom: 16px;
  padding-bottom: 14px;

  border-bottom: 1px solid #e9eef0;
}

.insight-overview-section-heading h3,
.insight-overview-side-card h3 {
  margin: 3px 0 0;

  color: #032e4d;

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

.insight-overview-excerpt {
  margin-bottom: 18px;
  padding: 13px 14px;

  background: #f7f9fa;

  border-left: 3px solid #054d7f;
  border-radius: 0 8px 8px 0;
}

.insight-overview-excerpt strong {
  display: block;

  margin-bottom: 4px;

  color: #054d7f;

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

  text-transform: uppercase;
}

.insight-overview-excerpt p {
  margin: 0;

  color: #60747c;

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

.insight-overview-content {
  color: #4f6871;

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

.insight-overview-muted {
  color: #92a0a5;
}

.insight-overview-cover {
  display: block;

  width: 100%;

  margin-top: 12px;

  border-radius: 10px;
}

.insight-overview-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 150px;

  margin-top: 12px;

  color: #87979e;
  background: #f5f7f8;

  border: 1px dashed #cfdadd;
  border-radius: 10px;
}

.insight-spotify-open-button {
  margin-top: 10px;
}

.insight-overview-details {
  margin: 12px 0 0;
}

.insight-overview-details > div {
  display: grid;
  grid-template-columns:
    90px minmax(0, 1fr);

  gap: 10px;

  padding: 8px 0;

  border-bottom: 1px solid #edf1f3;
}

.insight-overview-details > div:last-child {
  border-bottom: 0;
}

.insight-overview-details dt {
  color: #88989e;

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

.insight-overview-details dd {
  margin: 0;

  color: #445f69;

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

.insight-overview-url {
  overflow-wrap: anywhere;
}

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

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

  width: 56px;
  height: 56px;

  margin-bottom: 14px;

  color: #054d7f;
  background: #edf5f8;

  border-radius: 15px;

  font-size: 1.4rem;
}

.insight-admin-empty h3 {
  margin: 3px 0 6px;

  color: #032e4d;

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

.insight-admin-empty > p:not(.admin-section-kicker) {
  margin: 0 0 18px;

  color: #74878f;
}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */

@media screen and (max-width: 1200px) {
  .insights-admin-grid {
    grid-template-columns: 1fr;
  }

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

@media screen and (max-width: 950px) {
  .insight-overview-grid,
  .insight-overview-health {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .insight-overview-main-grid {
    grid-template-columns: 1fr;
  }

  .insight-category-selector {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 760px) {
  .insight-admin-card {
    grid-template-columns: 1fr;
  }

  .insight-admin-cover > img,
  .insight-admin-cover-placeholder {
    min-height: 210px;
    max-height: 260px;
  }

  .insight-media-grid {
    grid-template-columns: 1fr;
  }

  .insight-editor-header {
    flex-direction: column;
  }
}

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

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

  .insight-admin-actions {
    display: grid;

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

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

/* ================================================================
   INSIGHT — CURRENT COVER
   ================================================================ */

.insight-cover-current {
  display: grid;
  grid-template-columns: minmax(190px, 250px) 1fr;
  gap: 18px;

  margin-top: 16px;
  padding: 14px;

  background: #f8fafb;

  border: 1px solid #dce5e9;
  border-radius: 14px;
}

.insight-cover-current-image {
  position: relative;

  overflow: hidden;

  min-height: 150px;

  background: #e9eff2;

  border-radius: 10px;
}

.insight-cover-current-image img {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 150px;

  object-fit: cover;
}

.insight-cover-current-badge {
  position: absolute;

  top: 10px;
  left: 10px;

  padding: 5px 8px;

  color: #fff;
  background: rgba(3, 46, 77, .88);

  border-radius: 999px;

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

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

.insight-cover-current-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-width: 0;

  padding: 4px 2px;
}

.insight-cover-current-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;
}

.insight-cover-current-heading strong {
  display: block;

  color: #032e4d;

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

.insight-cover-current-heading p {
  max-width: 520px;

  margin: 5px 0 0;

  color: #78909a;

  font:
    400 .65rem/1.55
    "Work Sans",
    sans-serif;
}

.insight-cover-current-status {
  flex: 0 0 auto;

  padding: 5px 9px;

  color: #26734d;
  background: #eaf7ef;

  border: 1px solid #d2eadc;
  border-radius: 999px;

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

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

.insight-cover-remove {
  display: block;

  margin-top: 18px;

  cursor: pointer;
}

.insight-cover-remove > input {
  position: absolute;

  opacity: 0;
  pointer-events: none;
}

.insight-cover-remove-control {
  display: flex;
  align-items: center;

  gap: 10px;

  padding: 11px 12px;

  background: #fff;

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

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.insight-cover-remove:hover
.insight-cover-remove-control {
  background: #fffafa;
  border-color: #ddbcbc;
}

.insight-cover-remove-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  color: #a64c4c;
  background: #faeeee;

  border-radius: 7px;

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

.insight-cover-remove-control strong,
.insight-cover-remove-control small {
  display: block;
}

.insight-cover-remove-control strong {
  color: #843d3d;

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

.insight-cover-remove-control small {
  margin-top: 2px;

  color: #987474;

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

.insight-cover-remove > input:checked
+ .insight-cover-remove-control {
  background: #fff4f4;

  border-color: #c96c6c;

  box-shadow:
    0 0 0 3px
    rgba(201, 108, 108, .10);
}

.insight-cover-remove > input:checked
+ .insight-cover-remove-control
.insight-cover-remove-icon {
  color: #fff;
  background: #b94f4f;
}

@media screen and (max-width: 760px) {
  .insight-cover-current {
    grid-template-columns: 1fr;
  }

  .insight-cover-current-image {
    max-height: 230px;
  }

  .insight-cover-current-heading {
    flex-direction: column;
  }
}