/* Shared page styles for modular pages (cards, tables, lists, headings, buttons)
   Improves spacing, typography and overall consistency across pages.
*/

.page-panel {
  background: var(--surface);
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px -12px var(--shadow);
  color: var(--text);
}

.page-title {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: var(--text);
  font-weight: 700;
}

.card { background: var(--card-bg); padding: 0.7rem 0.9rem; border-radius: 10px; margin-bottom: 0.6rem; }
.card .card-title { font-size: 0.85rem; color: var(--text-secondary); }
.card .card-value { font-size: 1.1rem; font-weight: 700; margin-top: 0.3rem; }

.action-btn { display:inline-block; padding: 0.45rem 0.7rem; border-radius: 8px; border: none; cursor: pointer; background: var(--primary); color: #fff; font-weight: 600; }
.action-btn.secondary { background: var(--surface-light); color: var(--text); border: 1px solid var(--border); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6rem 0.75rem; text-align: right; border-bottom: 1px solid var(--muted-border); font-size: 0.95rem; }
thead th { color: var(--text-secondary); font-weight: 700; font-size: 0.85rem; }
tbody tr:hover { background: var(--row-hover); }

input[type="text"], input[type="search"], input[type="email"], select { padding: 0.45rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); width: 100%; }

ul { list-style: none; padding-left: 0; margin: 0; }
li { padding: 0.45rem 0; border-bottom: 1px dashed var(--muted-border); }

.small-muted { color: var(--text-secondary); font-size: 0.85rem; }

.controls-row { display:flex; gap:0.5rem; align-items:center; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .page-panel { padding: 0.75rem; }
  .metrics-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Enhanced visual styles for attractive pages */
.page-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.hero-left { display:flex; flex-direction: column; gap:0.25rem; }
.hero-title { font-size: 1.4rem; font-weight: 800; }
.hero-sub { color: var(--text-secondary); font-size: 0.95rem; }
.hero-actions { display:flex; gap:0.5rem; }

.card-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:0.8rem; margin-bottom: 0.8rem; }
.card-grid .card { padding: 0.85rem; display:flex; flex-direction:column; gap:0.45rem; }

/* Page-specific overrides: 4 cards per row for Virtual Desktop and Cloud Functions */
.vdesktop-page .card-grid,
.functions-page .card-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Also apply 4-column layout to Virtual Machines and Organization pages */
.vms-page .card-grid,
.org-page .card-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* 4-column layout for Workflows page as requested */
.workflows-page .card-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Metrics cards should be static — no entrance/hover animations to avoid jump on refresh */
.metrics-cards .card {
  transition: none !important;
  transform: none !important;
  will-change: auto !important;
  box-shadow: 0 6px 12px -8px var(--shadow);
}

.status-badge { display:inline-block; padding:0.25rem 0.5rem; border-radius:12px; font-weight:700; font-size:0.8rem; color:white; }
.status-badge.healthy { background: linear-gradient(90deg,#06d6a0,#059669); }
.status-badge.degraded { background: linear-gradient(90deg,#ffd166,#f59e0b); color:#2b2b2b; }
.status-badge.critical { background: linear-gradient(90deg,#ef476f,#d6336c); }

.stat-row { display:flex; gap:0.8rem; align-items:center; }
.stat { display:flex; flex-direction:column; padding:0.6rem; background:var(--card-bg); border-radius:10px; min-width:120px; }
.stat .value { font-weight:800; font-size:1.05rem; }
.stat .label { color:var(--text-secondary); font-size:0.85rem; }

.avatar-sm { width:36px; height:36px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:var(--primary); color:white; font-weight:700; }

.vm-card, .cluster-card, .fn-card, .dataset-card, .report-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.vm-card:hover, .cluster-card:hover, .fn-card:hover, .dataset-card:hover, .report-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px var(--shadow); }

.progress-bar { height:8px; background: var(--progress-bg); border-radius:6px; overflow:hidden; }
.progress-bar > i { display:block; height:100%; background: linear-gradient(90deg,var(--primary),var(--primary-light)); width:40%; }

.mini-legend { display:flex; gap:0.5rem; align-items:center; font-size:0.85rem; color:var(--text-secondary); }
.mini-legend .dot { width:10px; height:10px; border-radius:50%; }
.legend-blue { background:#4361ee; }
.legend-green { background:#06d6a0; }

@media (max-width:1000px) {
  .card-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:700px) {
  .card-grid { grid-template-columns: 1fr; }
  .page-hero { flex-direction:column; align-items:flex-start; }
}

/* Modal (invite) */
.modal { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; z-index:2000; background: rgba(0,0,0,0.45); }
.modal-content { width: 420px; max-width: calc(100% - 32px); }

.chip { display:inline-block; padding:0.25rem 0.5rem; border-radius:999px; background:var(--surface-light); color:var(--text); font-weight:600; }