<template>
  <div class="permission-monitoring" :class="{ 'is-source-tab': activeTab === 'ip-locations' }">
    <el-tabs v-model="activeTab" class="soybean-monitoring-tabs" @tab-change="onTabChange">
      <el-tab-pane label="运行概览" name="overview">
        <template #label>
          <span class="soybean-tab-label">
            <component :is="IconCheck" />
            <span>运行概览</span>
          </span>
        </template>
        <div class="overview-pane">
        <section class="overview-hero-card">
          <div class="overview-title-group">
            <h2>运行概览</h2>
          </div>
          <div v-if="statsSummary" class="metric-strip" aria-label="运行指标">
            <div v-for="card in summaryCards" :key="card.label" class="metric-strip-item" :class="card.tone">
              <div class="metric-strip-icon">
                <component :is="card.icon" />
              </div>
              <div class="metric-strip-content">
                <span class="metric-strip-label">{{ card.label }}</span>
                <strong class="metric-strip-value">{{ card.value }}</strong>
                <small v-if="card.detail" class="metric-strip-detail">{{ card.detail }}</small>
              </div>
            </div>
          </div>
          <div class="overview-hero-actions">
            <div class="overview-actions-row">
              <TimeRangeSelector v-model="timeRangePreset" @change="loadOverviewData" />
              <el-button size="small" :loading="overviewLoading" @click="loadOverviewData">刷新</el-button>
            </div>
            <div class="overview-meta-row">
              <span v-if="lastUpdatedAt" class="ctms-updated-at" :title="`更新于 ${formatUpdatedAt(lastUpdatedAt)}`">
                更新 {{ formatUpdatedTime(lastUpdatedAt) }}
              </span>
            </div>
          </div>
        </section>
        <div v-if="overviewError" class="overview-alert-row">
          <el-alert
            :title="overviewError"
            type="warning"
            show-icon
            :closable="false"
          />
        </div>
        <section v-if="health || metrics || alerts || alertsError" class="operations-card">
          <div class="operations-card-header">
            <div>
              <h3>运行状态</h3>
              <span>近 1 小时运行信号</span>
            </div>
            <el-tag
              v-if="health"
              :type="getHealthType(healthDisplayStatus)"
              :effect="health.sample_sufficient ? 'dark' : 'plain'"
              round
            >
              {{ health.sample_sufficient ? getHealthLabel(health.status) : "待评估" }}
            </el-tag>
          </div>

          <div class="operations-grid">
            <section v-if="health" class="status-section health-section">
              <div class="section-heading">系统健康</div>
              <div class="health-summary">
                <el-progress
                  type="dashboard"
                  :percentage="health.sample_sufficient ? health.health_score : 0"
                  :color="health.sample_sufficient ? getScoreColor(health.health_score) : '#cbd5e1'"
                  :width="96"
                  :stroke-width="8"
                >
                  <template #default>
                    <div class="score-inner">
                      <strong>{{ health.sample_sufficient ? health.health_score : "--" }}</strong>
                      <span>{{ health.sample_sufficient ? "健康分" : "待评估" }}</span>
                    </div>
                  </template>
                </el-progress>
                <div class="health-summary-copy" :class="`is-${healthDisplayStatus}`">
                  <span class="health-summary-label">综合状态</span>
                  <strong>{{ health.sample_sufficient ? getHealthSummaryLabel(health.status) : "待评估" }}</strong>
                </div>
              </div>
              <div v-if="health.sample_sufficient" class="health-signal-list">
                <div v-for="item in healthScoreItems" :key="item.label" class="health-signal-item" :class="{ 'is-warning': item.deduction }">
                  <span>{{ item.label }}</span>
                  <strong>{{ item.deduction ? `-${item.deduction}` : "正常" }}</strong>
                </div>
              </div>
              <div v-else class="sample-warning">
                近 1 小时仅 {{ health.last_hour.total_checks }} 次权限检查，业务样本不足
              </div>
              <div v-if="health.issues.length > 0" class="health-issues">
                <div v-for="(issue, index) in health.issues" :key="index" class="issue-item">
                  <span class="issue-dot" />
                  <span>{{ issue }}</span>
                </div>
              </div>
            </section>

            <section v-if="metrics" class="status-section cache-section">
              <div class="section-heading">
                <span>缓存状态</span>
                <small>近 1 小时</small>
              </div>
              <div class="cache-stat primary">
                <div class="cache-stat-header">
                  <span class="stat-label">
                    综合命中率（{{ metrics.cache_metrics.cache_hits }}/{{ metrics.cache_metrics.total_accesses }}）
                  </span>
                  <strong class="stat-value" :style="{ color: cacheRateColor }">
                    {{ hasCacheSamples ? `${metrics.cache_metrics.hit_rate.toFixed(1)}%` : "--" }}
                  </strong>
                </div>
                <el-progress
                  :percentage="hasCacheSamples ? metrics.cache_metrics.hit_rate : 0"
                  :color="cacheRateColor"
                  :stroke-width="8"
                  :show-text="false"
                />
                <small v-if="!hasCacheSamples" class="no-sample-hint">暂无缓存访问样本</small>
              </div>
              <div class="cache-scope-details">
                <span>
                  项目权限
                  {{ formatSampleRate(metrics.cache_metrics.by_cache.project_permissions.total_accesses, metrics.cache_metrics.by_cache.project_permissions.hit_rate) }}
                  （{{ metrics.cache_metrics.by_cache.project_permissions.cache_hits }}/{{
                    metrics.cache_metrics.by_cache.project_permissions.total_accesses
                  }}）
                </span>
                <span>
                  成员角色
                  {{ formatSampleRate(metrics.cache_metrics.by_cache.member_roles.total_accesses, metrics.cache_metrics.by_cache.member_roles.hit_rate) }}
                  （{{ metrics.cache_metrics.by_cache.member_roles.cache_hits }}/{{
                    metrics.cache_metrics.by_cache.member_roles.total_accesses
                  }}）
                </span>
              </div>
              <div class="cache-stat-row">
                <div class="cache-stat-mini">
                  <span class="stat-label">缓存项目</span>
                  <strong>{{ health?.cache_stats?.cache_items.total_count || 0 }}</strong>
                </div>
                <div class="cache-stat-mini">
                  <span class="stat-label">失效次数</span>
                  <strong>{{ metrics.cache_metrics.cache_invalidations }}</strong>
                </div>
              </div>
            </section>

            <section v-if="runtimeComponentItems.length" class="status-section runtime-section">
              <div class="section-subtitle">组件状态</div>
              <div class="runtime-components">
                <div v-for="component in runtimeComponentItems" :key="component.label" class="runtime-component">
                  <div>
                    <strong>{{ component.label }}</strong>
                    <small>{{ component.detail }}</small>
                  </div>
                  <el-tag :type="getHealthType(component.status)" size="small" effect="plain">
                    {{ getComponentStatusLabel(component.status) }}
                  </el-tag>
                </div>
              </div>
              <div v-if="health?.storage" class="storage-summary">
                <span>监测日志 <strong>{{ monitoringLogCount.toLocaleString() }}</strong></span>
                <span>指标快照 <strong>{{ health.storage.permission_metric_snapshots.toLocaleString() }}</strong></span>
              </div>
            </section>
          </div>

          <section class="alerts-section">
            <div class="section-heading">
              <span>最近告警</span>
              <el-tag v-if="alerts && alerts.alerts.length > 0" effect="dark" size="small" type="warning" round>
                {{ alerts.alerts.length }} 条
              </el-tag>
            </div>
            <el-alert v-if="alertsError" :title="alertsError" type="warning" show-icon :closable="false" />
            <div v-else-if="alerts && alerts.alerts.length > 0" class="alerts-list">
              <div v-for="(alert, index) in alerts.alerts" :key="index" class="alert-row" :class="alert.level">
                <div class="alert-level">
                  <el-tag :type="getAlertType(alert.level)" size="small" effect="dark" round>{{ alert.level }}</el-tag>
                </div>
                <div class="alert-body">
                  <strong>{{ alert.type }}</strong>
                  <span>{{ alert.message }}</span>
                </div>
                <span class="alert-time">{{ formatTime(alert.timestamp) }}</span>
              </div>
            </div>
            <div v-else-if="alerts" class="empty-alert-state">
              <span class="empty-alert-icon">✓</span>
              <div>
                <strong>暂无活动告警</strong>
              </div>
            </div>
            <el-empty v-else description="告警数据尚未加载" :image-size="44" />
          </section>
        </section>

        <div v-if="topDenied && topDenied.length > 0" class="denied-card">
          <div class="card-header">
            <h3>异常拒绝排行</h3>
            <el-tag effect="plain" size="small" type="info">{{ currentDeniedPeriodLabel }}</el-tag>
          </div>
          <div class="denied-list">
            <div v-for="(item, index) in topDenied" :key="index" class="denied-row">
              <span class="denied-rank" :class="{ top: index < 3 }">{{ index + 1 }}</span>
              <div class="denied-info">
                <strong>{{ item.endpoint_key }}</strong>
                <small>{{ item.role }}</small>
              </div>
              <span class="denied-count">{{ item.denied_count }}</span>
            </div>
          </div>
        </div>

        </div>
      </el-tab-pane>

      <el-tab-pane label="运行趋势" name="trends" lazy>
        <template #label>
          <span class="soybean-tab-label">
            <component :is="IconActivity" />
            <span>运行趋势</span>
          </span>
        </template>
        <PermissionTrendCharts ref="trendChartsRef" @drilldown="openTrendDrilldown" />
      </el-tab-pane>

      <el-tab-pane v-if="props.isAdmin" label="安全中心" name="security" lazy>
        <template #label>
          <span class="soybean-tab-label">
            <component :is="IconShield" />
            <span>安全中心</span>
          </span>
        </template>
        <SecurityCenter v-if="props.isAdmin" ref="securityCenterRef" />
      </el-tab-pane>

      <el-tab-pane label="访问日志" name="logs" lazy>
        <template #label>
          <span class="soybean-tab-label">
            <component :is="IconDatabase" />
            <span>访问日志</span>
          </span>
        </template>
        <PermissionAccessLogs ref="accessLogsRef" />
      </el-tab-pane>

      <el-tab-pane label="来源分析" name="ip-locations" lazy>
        <template #label>
          <span class="soybean-tab-label">
            <component :is="IconPercent" />
            <span>来源分析</span>
          </span>
        </template>
        <div class="ip-locations-pane">
          <PermissionIpLocations ref="ipLocationsRef" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, h, nextTick, onMounted, onUnmounted } from "vue";
import type {
  PermissionMetricsResponse,
  AlertsResponse,
  HealthResponse,
  TopDeniedItem,
  StatsSummaryResponse,
} from "@/types/api";
import {
  fetchPermissionMetrics,
  fetchPermissionAlerts,
  fetchPermissionHealth,
  fetchTopDenied,
  fetchStatsSummary,
} from "@/api/projectPermissions";
import PermissionTrendCharts from "./PermissionTrendCharts.vue";
import PermissionAccessLogs from "./PermissionAccessLogs.vue";
import PermissionIpLocations from "./PermissionIpLocations.vue";
import SecurityCenter from "./SecurityCenter.vue";
import TimeRangeSelector from "./TimeRangeSelector.vue";

const IconCheck = () => h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, [
  h("polyline", { points: "20 6 9 17 4 12" }),
]);
const IconActivity = () => h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, [
  h("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }),
]);
const IconPercent = () => h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, [
  h("line", { x1: "19", y1: "5", x2: "5", y2: "19" }),
  h("circle", { cx: "6.5", cy: "6.5", r: "2.5" }),
  h("circle", { cx: "17.5", cy: "17.5", r: "2.5" }),
]);
const IconClock = () => h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, [
  h("circle", { cx: "12", cy: "12", r: "10" }),
  h("polyline", { points: "12 6 12 12 16 14" }),
]);
const IconDatabase = () => h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, [
  h("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
  h("path", { d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" }),
  h("path", { d: "M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" }),
]);
const IconShield = () => h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, [
  h("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }),
]);

const activeTab = ref("overview");
const props = withDefaults(defineProps<{ isAdmin?: boolean }>(), {
  isAdmin: false,
});
const metrics = ref<PermissionMetricsResponse | null>(null);
const health = ref<HealthResponse | null>(null);
const alerts = ref<AlertsResponse | null>(null);
const topDenied = ref<TopDeniedItem[]>([]);
const statsSummary = ref<StatsSummaryResponse | null>(null);
const overviewLoading = ref(false);
const overviewError = ref("");
const alertsError = ref("");
const lastUpdatedAt = ref<Date | null>(null);

type TimeRangePreset = "all" | "24h" | "7d" | "30d";
const timeRangePreset = ref<TimeRangePreset>("7d");
const timeRangeOptions = [
  { value: "all", label: "全部" },
  { value: "24h", label: "24小时" },
  { value: "7d", label: "7天" },
  { value: "30d", label: "30天" },
] as const;

const getTopDeniedDays = (preset: TimeRangePreset): number => {
  const map: Record<TimeRangePreset, number> = {
    all: 90,
    "24h": 1,
    "7d": 7,
    "30d": 30,
  };
  return map[preset];
};

const currentDeniedPeriodLabel = computed(() => {
  const map: Record<TimeRangePreset, string> = {
    all: "近 90 天",
    "24h": "近 24 小时",
    "7d": "近 7 天",
    "30d": "近 30 天",
  };
  return map[timeRangePreset.value];
});

const trendChartsRef = ref<InstanceType<typeof PermissionTrendCharts>>();
const accessLogsRef = ref<InstanceType<typeof PermissionAccessLogs>>();
type IpLocationsExpose = {
  refresh: () => void | Promise<void>;
  resize: () => void | Promise<void>;
};

const ipLocationsRef = ref<IpLocationsExpose>();

interface TrendDrilldownPayload {
  preset?: "24h" | "7d" | "30d";
  startAt?: string;
  endAt?: string;
  allowed?: boolean;
  role?: string;
  clientType?: string;
  keyword?: string;
}

const openTrendDrilldown = async (payload: TrendDrilldownPayload) => {
  activeTab.value = "logs";
  await nextTick();
  await accessLogsRef.value?.applyTrendFilter(payload);
};
const securityCenterRef = ref<InstanceType<typeof SecurityCenter>>();

const formatTime = (timestamp: number): string => {
  return new Date(timestamp * 1000).toLocaleString("zh-CN");
};

const formatUpdatedAt = (value: Date): string => value.toLocaleString("zh-CN", { hour12: false });

const formatUpdatedTime = (value: Date): string => value.toLocaleTimeString("zh-CN", { hour12: false });

const getHealthType = (status: string) => {
  const map: Record<string, string> = { healthy: "success", degraded: "warning", unhealthy: "danger" };
  return map[status] || "info";
};

const getHealthLabel = (status: string) => {
  const map: Record<string, string> = { healthy: "健康", degraded: "降级", unhealthy: "不健康" };
  return map[status] || status;
};

const getHealthSummaryLabel = (status: string) => {
  const map: Record<string, string> = { healthy: "正常", degraded: "需关注", unhealthy: "异常" };
  return map[status] || "待评估";
};

const getComponentStatusLabel = (status: string) => {
  const map: Record<string, string> = { healthy: "正常", degraded: "降级", unhealthy: "异常", unknown: "未知" };
  return map[status] || status;
};

const getAlertType = (level: string) => {
  const map: Record<string, string> = { info: "info", warning: "warning", error: "danger" };
  return map[level] || "info";
};

const getScoreColor = (score: number): string => {
  if (score >= 80) return "#10b981";
  if (score >= 60) return "#f59e0b";
  return "#ef4444";
};

const formatResponseTime = (elapsedMs: number): string => {
  if (elapsedMs <= 0) return "<0.1ms";
  if (elapsedMs < 10) return `${elapsedMs.toFixed(1)}ms`;
  return `${Math.round(elapsedMs)}ms`;
};

const summaryCards = computed(() => {
  if (!statsSummary.value) return [];
  const hasTodaySamples = statsSummary.value.today.total_checks > 0;
  return [
    {
      label: "今日监测事件",
      value: statsSummary.value.today.total_checks.toLocaleString(),
      detail: `历史 ${statsSummary.value.total_logs.toLocaleString()}`,
      tone: "blue",
      icon: IconCheck,
    },
    {
      label: "每分钟事件",
      value: statsSummary.value.last_hour.requests_per_minute,
      detail: "近 1 小时",
      tone: "cyan",
      icon: IconActivity,
    },
    {
      label: "今日通过率",
      value: hasTodaySamples ? `${statsSummary.value.today.allow_rate}%` : "--",
      detail: hasTodaySamples ? "今日监测" : "暂无样本",
      tone: hasTodaySamples
        ? statsSummary.value.today.allow_rate >= 80 ? "green" : "warning"
        : "neutral",
      icon: IconPercent,
    },
    {
      label: "平均响应时间",
      value: hasTodaySamples ? formatResponseTime(statsSummary.value.today.avg_elapsed_ms) : "--",
      detail: hasTodaySamples ? "今日平均值" : "暂无样本",
      tone: hasTodaySamples
        ? statsSummary.value.today.avg_elapsed_ms > 10 ? "danger" : "indigo"
        : "neutral",
      icon: IconClock,
    },
  ];
});

const healthDisplayStatus = computed(() =>
  health.value?.sample_sufficient ? health.value.status : "unknown"
);

const hasCacheSamples = computed(() =>
  Boolean(metrics.value && metrics.value.cache_metrics.total_accesses > 0)
);

const cacheRateColor = computed(() => {
  if (!hasCacheSamples.value) return "#cbd5e1";
  const hitRate = metrics.value?.cache_metrics.hit_rate || 0;
  if (hitRate >= 80) return "#10b981";
  if (hitRate >= 50) return "#f59e0b";
  return "#ef4444";
});

const formatSampleRate = (total: number, rate: number) => total > 0 ? `${rate.toFixed(1)}%` : "--";

const monitoringLogCount = computed(() => {
  const storage = health.value?.storage;
  if (!storage) return 0;
  return storage.permission_access_logs + storage.security_access_logs;
});

const healthScoreItems = computed(() => {
  if (!health.value) return [];
  return [
    { label: "性能", deduction: health.value.score_breakdown.performance.deduction },
    { label: "拒绝率", deduction: health.value.score_breakdown.deny_rate.deduction },
    { label: "缓存", deduction: health.value.score_breakdown.cache.deduction },
    { label: "告警", deduction: health.value.score_breakdown.alerts.deduction },
    { label: "运行组件", deduction: health.value.score_breakdown.runtime?.deduction || 0 },
  ];
});

const runtimeComponentItems = computed(() => {
  const components = health.value?.components;
  if (!components) return [];
  return [
    {
      label: "数据库",
      status: components.database.status,
      detail: components.database.latency_ms === undefined ? "延迟未知" : `${components.database.latency_ms.toFixed(1)}ms`,
    },
    {
      label: "权限日志写入",
      status: components.permission_log_writer.status,
      detail: `队列 ${components.permission_log_writer.queue_size || 0}/${components.permission_log_writer.queue_capacity || 0}，丢弃 ${components.permission_log_writer.dropped_entries || 0}`,
    },
    {
      label: "安全日志写入",
      status: components.security_log_writer.status,
      detail: `队列 ${components.security_log_writer.queue_size || 0}/${components.security_log_writer.queue_capacity || 0}，丢弃 ${components.security_log_writer.dropped_entries || 0}`,
    },
    {
      label: "留存清理",
      status: components.retention.status,
      detail: `访问日志 ${components.retention.access_log_retention_days || "-"} 天，指标 ${components.retention.metric_retention_days || "-"} 天`,
    },
  ];
});

const loadOverviewData = async () => {
  if (overviewLoading.value) return;
  overviewLoading.value = true;
  const [metricsRes, healthRes, alertsRes, deniedRes, summaryRes] = await Promise.allSettled([
    fetchPermissionMetrics(),
    fetchPermissionHealth(),
    fetchPermissionAlerts(undefined, 20),
    fetchTopDenied({ days: getTopDeniedDays(timeRangePreset.value), limit: 10 }),
    fetchStatsSummary(),
  ]);
  if (metricsRes.status === "fulfilled") metrics.value = metricsRes.value.data;
  if (healthRes.status === "fulfilled") health.value = healthRes.value.data;
  if (alertsRes.status === "fulfilled") {
    alerts.value = alertsRes.value.data;
    alertsError.value = "";
  } else {
    alertsError.value = "告警数据加载失败，不能据此判断系统正常";
  }
  if (deniedRes.status === "fulfilled") topDenied.value = deniedRes.value.data.items;
  if (summaryRes.status === "fulfilled") statsSummary.value = summaryRes.value.data;
  const results = [metricsRes, healthRes, alertsRes, deniedRes, summaryRes];
  const failedCount = results.filter((result) => result.status === "rejected").length;
  const successfulCount = results.length - failedCount;
  if (successfulCount > 0) lastUpdatedAt.value = new Date();
  overviewError.value = failedCount
    ? `部分监测数据加载失败（${failedCount}/${results.length}），当前页面可能包含上次成功结果`
    : "";
  overviewLoading.value = false;
};

const onTabChange = async (tab: string) => {
  if (tab === "overview") loadOverviewData();
  if (tab === "ip-locations") {
    await nextTick();
    await ipLocationsRef.value?.resize();
  }
};

const refresh = () => {
  if (activeTab.value === "overview") loadOverviewData();
  else if (activeTab.value === "trends") trendChartsRef.value?.refresh();
  else if (activeTab.value === "security") securityCenterRef.value?.refresh();
  else if (activeTab.value === "logs") accessLogsRef.value?.refresh();
  else if (activeTab.value === "ip-locations") ipLocationsRef.value?.refresh();
};

let overviewRefreshTimer: number | undefined;

onMounted(() => {
  loadOverviewData();
  overviewRefreshTimer = window.setInterval(() => {
    if (activeTab.value === "overview" && document.visibilityState === "visible") loadOverviewData();
  }, 60_000);
});

onUnmounted(() => {
  if (overviewRefreshTimer !== undefined) window.clearInterval(overviewRefreshTimer);
});

defineExpose({ refresh });
</script>

<style scoped>
.permission-monitoring {
  --mon-ink: #1a2332;
  --mon-muted: #64748b;
  --mon-border: #e2e8f0;
  --mon-tab-active: #6c63ff;
  --mon-tab-active-bg: #f0edff;
  --mon-radius: 14px;
  --mon-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.025);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
}

.soybean-monitoring-tabs {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.soybean-monitoring-tabs :deep(.el-tabs__header) {
  position: relative;
  z-index: 10;
  flex: 0 0 52px;
  height: 52px;
  margin: 0 0 10px;
  padding: 0 24px;
  background: #ffffff;
  border-top: 1px solid var(--mon-border);
  border-bottom: 1px solid var(--mon-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.soybean-monitoring-tabs :deep(.el-tabs__nav-wrap) {
  height: 52px;
}

.soybean-monitoring-tabs :deep(.el-tabs__nav-wrap::after),
.soybean-monitoring-tabs :deep(.el-tabs__active-bar) {
  display: none;
}

.soybean-monitoring-tabs :deep(.el-tabs__nav-scroll),
.soybean-monitoring-tabs :deep(.el-tabs__nav) {
  height: 100%;
}

.soybean-monitoring-tabs :deep(.el-tabs__nav) {
  display: flex;
  align-items: center;
}

.soybean-monitoring-tabs :deep(.el-tabs__item) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 36px;
  margin: 0 4px;
  padding: 0 18px;
  border-radius: 10px;
  color: #303133;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease;
}

:deep(.soybean-monitoring-tabs.el-tabs--top > .el-tabs__header .el-tabs__item:nth-child(2)) {
  padding-left: 18px;
}

:deep(.soybean-monitoring-tabs.el-tabs--top > .el-tabs__header .el-tabs__item:last-child) {
  padding-right: 18px;
}

.soybean-monitoring-tabs :deep(.el-tabs__item:hover) {
  color: var(--mon-tab-active);
}

.soybean-monitoring-tabs :deep(.el-tabs__item.is-active) {
  background: var(--mon-tab-active-bg);
  color: var(--mon-tab-active);
}

.soybean-monitoring-tabs :deep(.el-tabs__content) {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.permission-monitoring.is-source-tab .soybean-monitoring-tabs :deep(.el-tabs__content) {
  overflow: hidden;
}

.soybean-monitoring-tabs :deep(.el-tab-pane) {
  min-height: 100%;
}

.soybean-monitoring-tabs :deep(.el-tab-pane[aria-hidden="false"]) {
  height: auto;
  min-height: 100%;
}

.permission-monitoring.is-source-tab .soybean-monitoring-tabs :deep(.el-tab-pane[aria-hidden="false"]) {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.ip-locations-pane {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.overview-pane {
  width: min(100%, 1680px);
  margin: 0 auto;
  padding: 0 16px 20px;
  box-sizing: border-box;
}

.overview-hero-card {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 88px;
  margin: 0 0 14px;
  padding: 12px 18px;
  border: 1px solid var(--mon-border);
  border-radius: var(--mon-radius);
  background: #fff;
  box-shadow: var(--mon-shadow);
}

.overview-title-group {
  flex: 0 0 154px;
  min-width: 0;
}

.overview-title-group h2 {
  margin: 0;
  color: var(--mon-ink);
  font-size: 18px;
  font-weight: 650;
}

.overview-title-group p {
  margin: 3px 0 0;
  color: var(--mon-muted);
  font-size: 12px;
}

.overview-hero-actions {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  color: var(--mon-muted);
  font-size: 12px;
  white-space: nowrap;
}

.overview-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-total {
  padding: 5px 9px;
  border: 1px solid var(--mon-border);
  border-radius: 999px;
  background: #fff;
}

.history-total strong {
  color: var(--mon-ink);
  font-weight: 650;
}

.overview-alert-row {
  margin: 0 0 14px;
}

.overview-alert-row .el-alert {
  flex: 1;
}



.runtime-components {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.runtime-component {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: #f8fafc;
}

.runtime-component > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.runtime-component strong {
  color: var(--mon-ink);
  font-size: 12px;
}

.runtime-component small {
  overflow: hidden;
  color: var(--mon-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soybean-tab-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  line-height: 1;
}

.soybean-tab-label svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}

.metric-strip-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0 14px;
  border-left: 1px solid #edf1f6;
}

.metric-strip-item:first-child {
  border-left: 0;
}

.metric-strip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: 0 0 auto;
}

.metric-strip-icon svg {
  width: 15px;
  height: 15px;
}

.metric-strip-item.blue .metric-strip-icon { background: #eff6ff; color: #3b82f6; }
.metric-strip-item.cyan .metric-strip-icon { background: #ecfeff; color: #06b6d4; }
.metric-strip-item.green .metric-strip-icon { background: #ecfdf5; color: #10b981; }
.metric-strip-item.warning .metric-strip-icon { background: #fffbeb; color: #f59e0b; }
.metric-strip-item.indigo .metric-strip-icon { background: #eef2ff; color: #6366f1; }
.metric-strip-item.danger .metric-strip-icon { background: #fef2f2; color: #ef4444; }
.metric-strip-item.neutral .metric-strip-icon { background: #f1f5f9; color: #94a3b8; }

.metric-strip-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.metric-strip-label {
  overflow: hidden;
  color: var(--mon-muted);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-strip-value {
  color: var(--mon-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.metric-strip-item.danger .metric-strip-value { color: #dc2626; }
.metric-strip-item.warning .metric-strip-value { color: #b45309; }

.overview-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.cache-card {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.health-card {
  grid-column: 2;
  grid-row: 1;
}

.alerts-card {
  grid-column: 2;
  grid-row: 2;
}

.health-card,
.cache-card,
.denied-card,
.alerts-card {
  background: #fff;
  border: 1px solid var(--mon-border);
  border-radius: var(--mon-radius);
  padding: 20px;
  box-shadow: var(--mon-shadow);
}

.denied-card,
.alerts-card {
  margin-bottom: 16px;
}

.overview-grid .alerts-card {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--mon-ink);
}

.health-card h3,
.cache-card h3 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mon-ink);
}

.health-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.health-header h3 {
  margin: 0;
}

.health-score-ring {
  display: flex;
  justify-content: center;
  padding: 8px 0 16px;
}

.score-breakdown {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: -6px 0 12px;
}

.score-breakdown span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--mon-muted);
  font-size: 11px;
}

.sample-warning {
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fffbeb;
  color: #b45309;
  font-size: 12px;
  text-align: center;
}

.score-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-inner strong {
  font-size: 32px;
  font-weight: 700;
  color: var(--mon-ink);
  line-height: 1;
}

.score-inner span {
  font-size: 12px;
  color: var(--mon-muted);
  margin-top: 4px;
}

.health-issues {
  padding-top: 12px;
  border-top: 1px solid var(--mon-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.issue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #dc2626;
}

.issue-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}

.health-ok {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: #ecfdf5;
  color: #059669;
  font-size: 13px;
  font-weight: 500;
}

.ok-icon {
  font-size: 16px;
  font-weight: 700;
}

.cache-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cache-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cache-title h3 {
  margin: 0;
}

.cache-title span {
  color: var(--mon-muted);
  font-size: 12px;
}

.cache-scope-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cache-scope-details span {
  flex: 1 1 180px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--mon-muted);
  font-size: 12px;
}

.cache-stat.primary {
  padding: 14px;
  background: #f8fafc;
  border-radius: 12px;
}

.no-sample-hint {
  display: block;
  margin-top: 8px;
  color: #94a3b8;
  font-size: 11px;
}

.runtime-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--mon-border);
}

.section-subtitle {
  margin-bottom: 9px;
  color: var(--mon-muted);
  font-size: 12px;
  font-weight: 600;
}

.storage-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--mon-border);
  color: var(--mon-muted);
  font-size: 12px;
}

.storage-summary strong {
  margin-left: 4px;
  color: var(--mon-ink);
  font-size: 14px;
}

.cache-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cache-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cache-stat-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 10px;
}

.cache-stat-mini strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--mon-ink);
}

.stat-label {
  font-size: 12px;
  color: var(--mon-muted);
  font-weight: 500;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
}

/* Keep the overview focused on operations rather than a stack of oversized cards. */
.overview-pane {
  width: 100%;
  margin: 0;
  padding: 0 12px 12px;
}

.overview-hero-card {
  gap: 14px;
  min-height: 72px;
  margin-bottom: 8px;
  padding: 10px 14px;
}

.overview-title-group {
  flex-basis: 112px;
}

.overview-title-group h2 {
  font-size: 17px;
}

.overview-hero-actions {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.overview-actions-row {
  gap: 6px;
}

.metric-strip-item {
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
}

.metric-strip-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

.metric-strip-icon svg {
  width: 14px;
  height: 14px;
}

.metric-strip-content {
  gap: 1px;
}

.metric-strip-label,
.metric-strip-detail {
  font-size: 11px;
}

.metric-strip-detail {
  overflow: hidden;
  color: var(--mon-muted);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-strip-value {
  font-size: 20px;
}

.overview-alert-row {
  margin-bottom: 8px;
}

.operations-card,
.denied-card {
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--mon-border);
  border-radius: var(--mon-radius);
  background: #fff;
  box-shadow: var(--mon-shadow);
}

.operations-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  margin-bottom: 12px;
}

.operations-card-header > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.operations-card-header h3,
.section-heading {
  margin: 0;
  color: var(--mon-ink);
  font-size: 14px;
  font-weight: 650;
}

.operations-card-header span,
.section-heading small {
  color: var(--mon-muted);
  font-size: 11px;
  font-weight: 400;
}

.operations-grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.85fr) minmax(240px, 1fr) minmax(280px, 1.15fr);
  gap: 0;
}

.status-section {
  min-width: 0;
  padding: 0 14px;
  border-left: 1px solid var(--mon-border);
}

.status-section:first-child {
  padding-left: 0;
  border-left: 0;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  margin-bottom: 8px;
}

.health-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 96px;
}

.health-summary-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 92px;
  padding: 9px 11px;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  background: linear-gradient(145deg, #f0fdf4, #ecfdf5);
}

.health-summary-copy strong {
  color: #047857;
  font-size: 17px;
  line-height: 1.2;
}

.health-summary-copy .health-summary-label {
  color: var(--mon-muted);
  font-size: 10px;
}

.health-summary-copy.is-degraded {
  border-color: #fde68a;
  background: linear-gradient(145deg, #fffbeb, #fef3c7);
}

.health-summary-copy.is-degraded strong {
  color: #b45309;
}

.health-summary-copy.is-unhealthy {
  border-color: #fecaca;
  background: linear-gradient(145deg, #fef2f2, #fee2e2);
}

.health-summary-copy.is-unhealthy strong {
  color: #dc2626;
}

.health-summary-copy.is-unknown {
  border-color: #dbe3ef;
  background: #f8fafc;
}

.health-summary-copy.is-unknown strong {
  color: #64748b;
}

.score-inner strong {
  font-size: 24px;
}

.score-inner span {
  margin-top: 2px;
  font-size: 11px;
}

.health-signal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.health-signal-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid #d1fae5;
  border-radius: 999px;
  background: #f0fdf4;
  font-size: 10px;
  white-space: nowrap;
}

.health-signal-item span {
  color: var(--mon-muted);
}

.health-signal-item strong {
  color: #047857;
  font-size: 10px;
}

.health-signal-item.is-warning {
  border-color: #fde68a;
  background: #fffbeb;
}

.health-signal-item.is-warning strong {
  color: #b45309;
}

.sample-warning {
  margin: 6px 0 0;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
}

.health-issues {
  margin-top: 8px;
  padding-top: 8px;
  gap: 5px;
}

.issue-item {
  gap: 6px;
  font-size: 12px;
}

.cache-stat.primary {
  padding: 10px;
  border-radius: 10px;
}

.cache-stat-header {
  margin-bottom: 6px;
}

.cache-scope-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.cache-scope-details span {
  min-width: 0;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
}

.cache-stat-row {
  gap: 6px;
  margin-top: 6px;
}

.cache-stat-mini {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 8px;
}

.cache-stat-mini strong {
  font-size: 15px;
}

.stat-label,
.no-sample-hint {
  font-size: 11px;
}

.runtime-section {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.section-subtitle {
  margin-bottom: 8px;
  color: var(--mon-ink);
  font-size: 14px;
}

.runtime-components {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.runtime-component {
  gap: 6px;
  padding: 7px 8px;
  border-radius: 8px;
}

.runtime-component strong {
  font-size: 11px;
}

.runtime-component small {
  font-size: 10px;
}

.storage-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  font-size: 11px;
}

.storage-summary strong {
  display: block;
  margin: 2px 0 0;
  font-size: 13px;
}

.alerts-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--mon-border);
}

.alerts-list {
  gap: 6px;
}

.alert-row {
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
}

.empty-alert-state {
  justify-content: center;
  gap: 9px;
  min-height: 62px;
  border-radius: 10px;
}

.empty-alert-icon {
  width: 24px;
  height: 24px;
  font-size: 14px;
}

.empty-alert-state strong,
.alert-body strong {
  font-size: 12px;
}

.empty-alert-state small,
.alert-body span,
.alert-time {
  font-size: 11px;
}

.alerts-section :deep(.el-empty) {
  padding: 4px 0;
}

.denied-card .card-header {
  margin-bottom: 8px;
}

.denied-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.denied-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.denied-row:hover {
  background: #f8fafc;
}

.denied-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.denied-rank.top {
  background: linear-gradient(135deg, #ef4444, #f87171);
  color: #fff;
}

.denied-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.denied-info strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--mon-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.denied-info small {
  font-size: 11px;
  color: var(--mon-muted);
}

.denied-count {
  font-size: 16px;
  font-weight: 700;
  color: #ef4444;
}

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alert-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--mon-border);
  transition: background 0.15s ease;
}

.alert-row:hover {
  background: #f8fafc;
}

.alert-row.error {
  border-color: #fecaca;
  background: #fef2f2;
}

.alert-row.warning {
  border-color: #fed7aa;
  background: #fffbeb;
}

.alert-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.alert-body strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--mon-ink);
}

.alert-body span {
  font-size: 12px;
  color: var(--mon-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-time {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

.empty-alert-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 92px;
  border: 1px dashed #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  color: #166534;
}

.empty-alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #dcfce7;
  font-size: 16px;
  font-weight: 700;
}

.empty-alert-state div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.empty-alert-state strong {
  font-size: 13px;
}

.empty-alert-state small {
  color: #4d7c5f;
  font-size: 12px;
}

/* These states sit at the end of the cascade so alert rows stay compact too. */
.alerts-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--mon-border);
}

.alerts-list {
  gap: 6px;
}

.alert-row {
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
}

.empty-alert-state {
  gap: 9px;
  min-height: 62px;
  border-radius: 10px;
}

.empty-alert-icon {
  width: 24px;
  height: 24px;
  font-size: 14px;
}

.empty-alert-state strong,
.alert-body strong {
  font-size: 12px;
}

.empty-alert-state small,
.alert-body span,
.alert-time {
  font-size: 11px;
}

@media (max-width: 1200px) {
  .soybean-monitoring-tabs :deep(.el-tabs__header),
  .soybean-monitoring-tabs :deep(.el-tabs__nav-wrap) {
    height: 48px;
  }

  .soybean-monitoring-tabs :deep(.el-tabs__header) {
    flex-basis: 48px;
    margin-bottom: 8px;
    padding: 0 12px;
  }

  .soybean-monitoring-tabs :deep(.el-tabs__item) {
    height: 34px;
    padding: 0 14px;
  }

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

  .runtime-section {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 10px 0 0;
    border-top: 1px solid var(--mon-border);
    border-left: 0;
  }
}

@media (max-width: 900px) {
  .overview-hero-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .overview-title-group {
    flex: 1 1 auto;
  }

  .overview-hero-actions {
    flex: 0 1 auto;
    justify-content: flex-end;
  }

  .metric-strip {
    order: 3;
    flex-basis: 100%;
    padding-top: 6px;
    border-top: 1px solid #edf1f6;
  }
}

@media (max-width: 720px) {
  .overview-pane {
    padding: 0 8px 10px;
  }

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

  .metric-strip-item:nth-child(odd) {
    border-left: 0;
  }

  .operations-grid {
    grid-template-columns: 1fr;
  }

  .status-section,
  .status-section:first-child {
    margin-top: 10px;
    padding: 10px 0 0;
    border-top: 1px solid var(--mon-border);
    border-left: 0;
  }

  .status-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .runtime-section {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .overview-hero-actions {
    width: 100%;
    justify-content: space-between;
  }

  .metric-strip {
    grid-template-columns: 1fr;
  }

  .metric-strip-item {
    border-top: 1px solid #edf1f6;
    border-left: 0;
  }

  .metric-strip-item:first-child {
    border-top: 0;
  }

  .operations-card-header > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }

  .runtime-components,
  .cache-scope-details {
    grid-template-columns: 1fr;
  }
}
</style>
