@use "../abstracts/variables" as *;

/**
 * -----------------------------------------------------------------------------
 * Cache Observability Component
 * -----------------------------------------------------------------------------
 * Compact, analysis-focused layout for the cache dashboard tab.
 * -----------------------------------------------------------------------------
 */

.no-section-description {
  margin-bottom: $spacing-sm;
  color: $color-text-muted;
  font-size: $font-size-md;
  line-height: 1.5;
}

.no-cache-runtime-health {
  display: flex;
  flex-direction: column;
  gap: $spacing-md;
  min-width: 0;

  &__section-title {
    margin: 0;
    color: $color-text;
    font-size: $font-size-lg;
    font-weight: 700;
  }

  &__disabled-help {
    margin-top: $spacing-sm;
    color: $color-text-muted;
    font-size: $font-size-sm;
    line-height: 1.6;
  }

  &__main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 0.95fr);
    gap: $spacing-md;
    align-items: start;
  }

  &__main-column,
  &__side-column {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
    min-width: 0;
  }
}

.no-cache-environment-notice {
  display: flex;
  align-items: flex-start;
  gap: $spacing-md;
  padding: $spacing-md;
  border: 1px solid $color-status-warning-bg;
  border-radius: $radius-card;
  background: $color-status-warning-bg;

  &__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: $color-text;
    border-radius: 50%;
    background: $color-white;
    font-weight: 700;
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &__title {
    color: $color-text;
    font-size: $font-size-md;
    font-weight: 700;
  }

  &__message {
    color: $color-text-soft;
    font-size: $font-size-sm;
    line-height: 1.6;
  }
}

.no-cache-health {
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;
  min-width: 0;

  &__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: $spacing-sm;
    min-width: 0;
  }

  &__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 128px;
    padding: 14px 16px;
    border: 1px solid $color-border;
    border-radius: $radius-card;
    background: $color-card-bg;
    box-shadow: $shadow-soft;
    gap: 10px;

    &--ok {
      border-left: 4px solid $color-green;
    }

    &--warning {
      border-left: 4px solid $color-orange;
    }

    &--modules,
    &--signals {
      border-left: 4px solid $color-blue;
    }
  }

  &__label {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: $color-text-muted;
    font-size: $font-size-xs;
    font-weight: 700;
  }

  &__value {
    color: $color-text-strong;
    font-size: clamp(1.25rem, 2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  &__hint {
    color: $color-text-soft;
    font-size: $font-size-sm;
    line-height: 1.45;
  }

  &__modules,
  &__signals {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 8px;
  }

  &__module,
  &__signal {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  &__module-status,
  &__signal-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;

    &--enabled {
      color: $color-green;
      background: $color-green-fill;
    }

    &--disabled {
      color: $color-red;
      background: $color-red-fill;
    }
  }

  &__module-name,
  &__signal-label {
    min-width: 0;
    color: $color-text;
    font-size: $font-size-sm;
    font-weight: 600;
    line-height: 1.4;
  }

  &__module-value {
    margin-left: auto;
    padding-left: 6px;
    white-space: nowrap;
    color: $color-text-soft;
    font-size: $font-size-sm;
  }
}

.no-cache-activity-trend,
.no-cache-score,
.no-cache-behavior,
.no-cache-insights,
.no-cache-records {
  padding: $spacing-md;
  border: 1px solid $color-border;
  border-radius: $radius-card;
  background: $color-card-bg;
  box-shadow: $shadow-soft;
}

.no-cache-activity-trend {
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;
  min-width: 0;

  &__header {
    display: flex;
    justify-content: space-between;
    gap: $spacing-sm;
    min-width: 0;
  }

  &__copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  &__description {
    margin: 0;
    color: $color-text-muted;
    font-size: $font-size-sm;
    line-height: 1.5;
  }

  &__chart-surface {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 12px;
    border: 1px solid $color-border;
    border-radius: calc(#{$radius-card} - 4px);
    background: $color-white;
  }

  &__chart {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 250px;
  }

  &__summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: $spacing-sm;
    min-width: 0;
  }

  &__summary-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid $color-border;
    border-radius: calc(#{$radius-card} - 4px);
    background: $color-white;
    gap: 6px;
  }

  &__summary-label {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: $color-text-muted;
    font-size: $font-size-xs;
    font-weight: 700;
  }

  &__summary-value {
    color: $color-text-strong;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 800;
    line-height: 1;
  }

  &__summary-meta {
    color: $color-text-soft;
    font-size: $font-size-sm;
    line-height: 1.45;
  }
}

.no-cache-score {
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;

  &__gauge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
  }

  &__gauge-ring {
    --no-cache-score-percent: 0;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(
      $color-gauge-fill calc(var(--no-cache-score-percent) * 1%),
      $color-gauge-track 0
    );

    &::before {
      position: absolute;
      width: 108px;
      height: 108px;
      margin: auto;
      content: "";
      border-radius: 50%;
      background: $color-white;
      inset: 0;
    }
  }

  &__gauge-inner {
    position: relative;
    z-index: 1;
    text-align: center;
  }

  &__value {
    color: $color-text-strong;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
  }

  &__unit {
    margin-top: 4px;
    color: $color-text-soft;
    font-size: $font-size-sm;
  }

  &__breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  &__breakdown-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &__breakdown-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: $font-size-sm;
  }

  &__breakdown-label {
    color: $color-text;
    font-weight: 600;
  }

  &__breakdown-value {
    white-space: nowrap;
    color: $color-text-soft;
  }

  &__progress {
    overflow: hidden;
    height: 8px;
    border-radius: $radius-pill;
    background: $color-border-soft;
  }

  &__progress-bar {
    --no-cache-progress: 0;

    display: block;
    width: calc(var(--no-cache-progress) * 1%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
      90deg,
      $color-progress-start 0%,
      $color-progress-mid 70%,
      $color-progress-end 100%
    );
  }
}

.no-cache-behavior {
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;

  &__copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  &__description {
    margin: 0;
    color: $color-text-muted;
    font-size: $font-size-sm;
    line-height: 1.5;
  }

  &__status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid $color-green-fill;
    border-radius: calc(#{$radius-card} - 4px);
    background: $color-green-fill;

    &--warning {
      border-color: $color-orange-fill;
      background: $color-orange-fill;
    }
  }

  &__status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: $color-text;
    border-radius: 50%;
    background: $color-white;
    font-weight: 700;
  }

  &__status-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;

    strong {
      color: $color-text;
    }

    span {
      color: $color-text-soft;
      font-size: $font-size-sm;
      line-height: 1.45;
    }
  }

  &__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: $spacing-lg;
  }

  &__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid $color-border;
    border-radius: calc(#{$radius-card} - 4px);
    background: $color-white;
    gap: 10px;
  }

  &__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  &__card-title {
    color: $color-text;
    font-size: $font-size-lg;
    font-weight: 700;
  }

  &__card-state {
    padding: 4px 10px;
    white-space: nowrap;
    color: $color-text-soft;
    border-radius: $radius-pill;
    background: $color-surface-soft;
    font-size: $font-size-sm;
  }

  &__metric-value {
    color: $color-text-strong;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 800;
    line-height: 1;
  }

  &__metric-label {
    margin-top: 2px;
    color: $color-text-soft;
    font-size: $font-size-sm;
  }

  &__visual {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: $spacing-lg;
    align-items: center;
    min-width: 0;
    margin-top: $spacing-sm;
  }

  &__visual-chart {
    display: flex;
    overflow: visible;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: $spacing-sm;
  }

  &__tooltip {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 12px);
    left: 50%;
    visibility: hidden;
    width: min(240px, 90vw);
    padding: 10px 12px;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s ease;
    transform: translate(-50%, 0);
    pointer-events: none;
    opacity: 0;
    border: 1px solid $color-border;
    border-radius: 12px;
    background: $color-white;
    box-shadow: 0 16px 32px $color-modal-shadow;

    &::after {
      position: absolute;
      top: 100%;
      left: 50%;
      content: "";
      transform: translateX(-50%);
      border-width: 8px;
      border-style: solid;
      border-color: $color-white transparent transparent transparent;
    }
  }

  &__ring {
    --no-cache-hit: 0;
    --no-cache-miss: 0;
    --no-cache-uncacheable: 0;

    position: relative;
    display: flex;
    overflow: visible;
    flex: 0 0 160px;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    cursor: help;
    border-radius: 50%;
    background: conic-gradient(
      $color-chart-hit 0 calc(var(--no-cache-hit) * 1%),
      $color-chart-miss calc(var(--no-cache-hit) * 1%)
        calc((var(--no-cache-hit) + var(--no-cache-miss)) * 1%),
      $color-chart-uncacheable
        calc((var(--no-cache-hit) + var(--no-cache-miss)) * 1%)
        calc(
          (
              var(--no-cache-hit) + var(--no-cache-miss) +
                var(--no-cache-uncacheable)
            ) *
            1%
        ),
      $color-chart-empty
        calc(
          (
              var(--no-cache-hit) + var(--no-cache-miss) +
                var(--no-cache-uncacheable)
            ) *
            1%
        )
        100%
    );

    &::before {
      position: absolute;
      width: 112px;
      height: 112px;
      margin: auto;
      content: "";
      border-radius: 50%;
      background: $color-white;
      inset: 0;
    }

    span {
      position: relative;
      z-index: 1;
      color: $color-text-strong;
      font-size: 2rem;
      font-weight: 800;
    }

    &.is-empty {
      background: $color-chart-empty;
    }

    &:focus .no-cache-behavior__tooltip,
    &:focus-within .no-cache-behavior__tooltip,
    &:hover .no-cache-behavior__tooltip {
      visibility: visible;
      transform: translate(-50%, -8px);
      opacity: 1;
    }
  }

  &__tooltip-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid $color-border;
    border-radius: 12px;
    background: $color-white;
    gap: 8px;
  }

  &__tooltip-title {
    color: $color-text;
    font-size: $font-size-sm;
    font-weight: 700;
  }

  &__tooltip-text {
    color: $color-text-soft;
    font-size: $font-size-sm;
    line-height: 1.5;
  }

  &__tooltip-list {
    margin: 0;
    padding-left: 18px;

    li {
      color: $color-text;
      font-size: $font-size-sm;
      line-height: 1.5;
    }
  }

  &__legend {
    display: flex;
    flex-wrap: wrap;
    margin-top: $spacing-md;
    gap: 12px;
  }

  &__legend-item {
    display: flex;
    align-items: center;
    color: $color-text-soft;
    font-size: $font-size-sm;
    gap: 8px;
  }

  &__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;

    &--good {
      background: $color-chart-hit;
    }

    &--mid {
      background: $color-chart-miss;
    }

    &--warn {
      background: $color-chart-uncacheable;
    }
  }

  &__details {
    padding-top: $spacing-sm;
    border-top: 1px solid $color-border;

    summary {
      cursor: pointer;
      color: $color-text;
      font-weight: 600;
    }
  }

  &__details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: $spacing-sm;
    margin-top: $spacing-sm;
  }

  &__details-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid $color-border;
    border-radius: 12px;
    background: $color-white;

    span {
      color: $color-text-soft;
      font-size: $font-size-sm;
    }

    strong {
      color: $color-text-strong;
      font-size: $font-size-md;
      overflow-wrap: anywhere;
    }
  }
}

.no-cache-insights {
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;

  &__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid $color-border-soft;
  }

  &__bullet {
    color: $color-orange;
    font-size: 0.85rem;
    line-height: 1.5;
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  &__title {
    color: $color-text;
    font-size: $font-size-sm;
    font-weight: 700;
    line-height: 1.4;
  }

  &__text {
    color: $color-text;
    font-size: $font-size-sm;
    line-height: 1.5;
  }

  &__empty {
    color: $color-text-muted;
    font-size: $font-size-sm;
    line-height: 1.6;
  }
}

.no-cache-records {
  &__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: $spacing-sm;
    gap: $spacing-md;
  }

  &__copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  &__description {
    margin: 0;
    color: $color-text-muted;
    font-size: $font-size-sm;
    line-height: 1.5;
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
  }

  &__export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    text-decoration: none;
    color: $color-text;
    border: 1px solid $color-border;
    border-radius: $radius-pill;
    background: $color-white;
    font-size: $font-size-sm;
    font-weight: 700;

    &:hover,
    &:focus {
      text-decoration: none;
      background: $color-surface-soft;
    }
  }

  &__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: $spacing-md;
    margin-bottom: $spacing-sm;
  }

  &__search {
    width: 100%;
    max-width: 360px;
  }

  &__search-input {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    color: $color-text;
    border: 1px solid $color-border;
    border-radius: 12px;
    background: $color-white;
    font-size: $font-size-sm;

    &::placeholder {
      color: $color-text-muted;
    }
  }

  &__table-wrap {
    overflow-x: auto;
  }

  &__table {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
      padding: 12px 10px;
      text-align: left;
      vertical-align: top;
      color: $color-text;
      border-bottom: 1px solid $color-border-soft;
      font-size: $font-size-sm;
    }

    th {
      color: $color-text-soft;
      background: $color-surface-soft;
      font-weight: 700;
    }
  }

  &__details-button {
    min-height: 34px;
    padding: 0 12px;
    cursor: pointer;
    color: $color-text;
    border: 1px solid $color-border;
    border-radius: $radius-pill;
    background: $color-white;
    font-size: $font-size-sm;
    font-weight: 700;
  }

  &__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: $spacing-md;
    margin-top: $spacing-sm;
  }

  &__results,
  &__page-status {
    color: $color-text-soft;
    font-size: $font-size-sm;
  }

  &__pagination {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  &__page-button {
    min-height: 34px;
    padding: 0 12px;
    cursor: pointer;
    color: $color-text;
    border: 1px solid $color-border;
    border-radius: $radius-pill;
    background: $color-white;
    font-size: $font-size-sm;
    font-weight: 700;

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  &__modal {
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $spacing-lg;
    background: $color-modal-backdrop;
    inset: 0;
  }

  &__modal[hidden] {
    display: none !important;
  }

  &__modal-dialog {
    overflow: auto;
    width: min(960px, 100%);
    max-height: 90vh;
    border: 1px solid $color-border;
    border-radius: $radius-modal;
    background: $color-white;
    box-shadow: 0 24px 48px $color-modal-shadow;
  }

  &__modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: $spacing-md;
    padding: 16px 18px;
    border-bottom: 1px solid $color-border;
  }

  &__modal-title {
    margin: 0;
    color: $color-text;
    font-size: $font-size-lg;
    font-weight: 700;
  }

  &__modal-close {
    cursor: pointer;
    color: $color-text;
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
  }

  &__modal-body {
    display: flex;
    flex-direction: column;
    padding: 18px;
    gap: $spacing-md;
  }

  &__modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: $spacing-sm;

    > div {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 10px 12px;
      border: 1px solid $color-border;
      border-radius: 12px;
      background: $color-surface-soft;

      strong {
        color: $color-text-soft;
        font-size: $font-size-sm;
      }

      span {
        color: $color-text;
        font-size: $font-size-sm;
        overflow-wrap: anywhere;
      }
    }
  }

  &__payload {
    margin: 0;
    padding: 14px;
    white-space: pre-wrap;
    color: $color-text;
    border: 1px solid $color-border;
    border-radius: 12px;
    background: $color-surface-soft;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
}

.no-cache-records-modal-open {
  overflow: hidden;
}

@media (max-width: 1400px) {
  .no-cache-runtime-health {
    &__main-grid {
      grid-template-columns: 1fr;
    }
  }

  .no-cache-health {
    &__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

@media (max-width: 1200px) {
  .no-cache-health {
    &__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .no-cache-activity-trend {
    &__summary-grid {
      grid-template-columns: 1fr;
    }
  }

  .no-cache-behavior {
    &__grid,
    &__details-grid {
      grid-template-columns: 1fr;
    }

    &__visual {
      grid-template-columns: 1fr;
    }
  }
}

@media (max-width: 767px) {
  .no-cache-health {
    &__grid {
      grid-template-columns: 1fr;
    }
  }

  .no-cache-activity-trend {
    &__chart {
      height: 220px;
    }
  }

  .no-cache-score {
    &__gauge-ring {
      width: 132px;
      height: 132px;

      &::before {
        width: 94px;
        height: 94px;
      }
    }

    &__value {
      font-size: 2rem;
    }
  }

  .no-cache-records {
    &__modal-grid {
      grid-template-columns: 1fr;
    }
  }
}
