/* Server Insight - Growth Page Styles */
:root {
	/* 卡片與文字顏色：預設為淺色主題，深色主題由全域變數覆蓋 */
	--card-bg: var(--bg-darker, #ffffff);
	--card-border: var(--border-subtle, #e5e7eb);
	--accent: var(--primary-color, #4e79ff);
	--danger: #ff5f56;
	--ok: #3fb950;
	--text-primary: var(--text-main, #111827);
	--text-secondary: var(--text-muted, #6b7280);
	--radius: 10px;
	--shadow: 0 4px 12px -2px rgba(15,23,42,.12);
}

.insight-grid {display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-bottom:1.5rem;}

.insight-card {background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:1rem 1.1rem; position:relative; box-shadow:var(--shadow);}
.insight-card h3 {margin:0 0 .75rem; font-size:1rem; letter-spacing:.5px; color:var(--text-secondary); font-weight:600; text-transform:uppercase;}

.summary-metrics {display:flex; flex-wrap:wrap; gap:.75rem;}
.summary-metrics .metric {flex:1 1 110px; background:var(--bg-darker, #f9fafb); padding:.65rem .7rem; border-radius:8px; border:1px solid var(--border-subtle, #e5e7eb); min-width:110px;}
.summary-metrics .metric .label {display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.6px; color:var(--text-secondary); margin-bottom:.25rem;}
.summary-metrics .metric .value {font-size:1.1rem; font-weight:600; color:var(--text-primary);}

.quick-metrics {display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem; margin-top:.8rem;}
.quick-metrics .qm {background:var(--bg-darker, #f9fafb); border:1px solid var(--border-subtle, #e5e7eb); padding:.55rem .6rem .65rem; border-radius:8px; position:relative;}
.quick-metrics .qm .title {font-size:.6rem; text-transform:uppercase; color:var(--text-secondary); letter-spacing:.5px;}
.quick-metrics .qm .val {font-size:1.05rem; font-weight:600; margin-top:.15rem;}
.quick-metrics .qm.up .val {color:var(--ok);} 
.quick-metrics .qm.down .val {color:var(--danger);} 

canvas {max-width:100%; height:auto;}

.range-controls {display:flex; gap:.5rem; margin:.5rem 0 .2rem;}
.range-controls button {background:var(--bg-darker, #ffffff); color:var(--text-main, #111827); border:1px solid var(--border-subtle, #d1d5db); border-radius:6px; padding:.4rem .75rem; font-size:.7rem; cursor:pointer; transition:.17s;}
.range-controls button:hover {background:var(--bg-lighter, #e5e7eb);}
.range-controls button.active {background:var(--accent); color:#fff; border-color:var(--accent);}

.loading-skel {background:linear-gradient(90deg,#2a2d31 0%,#34373c 50%,#2a2d31 100%); background-size:200% 100%; animation:shimmer 1.2s ease-in-out infinite; border-radius:6px; min-height:48px;}
@keyframes shimmer {0%{background-position:0 0}100%{background-position:-200% 0}}

@media (max-width:680px){
	.summary-metrics .metric {flex:1 1 calc(50% - .75rem);}  
	.insight-grid {grid-template-columns:1fr;}  
}