/* ─── WPStudio Custom Styles ─────────────────── */

:root {
  --wps-primary: #6366f1;
  --wps-sidebar-width: 240px;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* ─── Sidebar ────────────────────────────────── */
#sidebar {
  transition: width 0.2s ease;
}

#sidebar .nav-link:hover {
  background: rgba(99, 102, 241, 0.15);
}

#sidebar .nav-link.active {
  background: var(--wps-primary) !important;
}

/* ─── Cards ──────────────────────────────────── */
.card {
  transition: border-color 0.2s ease;
}

.card:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
}

/* ─── Service status indicators ──────────────── */
.btn-service-start,
.btn-service-stop {
  transition: all 0.15s ease;
}

.btn-service-start:disabled,
.btn-service-stop:disabled {
  cursor: wait;
}

/* ─── Table improvements ─────────────────────── */
.table-dark {
  --bs-table-bg: transparent;
}

.table-dark td,
.table-dark th {
  border-color: rgba(255, 255, 255, 0.05);
}

/* ─── Code blocks ────────────────────────────── */
code {
  font-size: 0.85em;
}

/* ─── Hosts modal ────────────────────────────── */
#hostsModal .bg-black {
  font-family: 'Fira Code', 'Cascadia Code', monospace;
}

/* ─── Alert auto-dismiss animation ───────────── */
.alert {
  animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Loading spinner ────────────────────────── */
.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  #sidebar {
    width: 60px !important;
    overflow: hidden;
  }

  #sidebar .nav-link span,
  #sidebar .bg-body-tertiary {
    display: none;
  }

  #sidebar .nav-link {
    text-align: center;
    padding: 0.75rem !important;
  }

  #sidebar .nav-link i {
    margin: 0 !important;
  }
}