/* ── Login ──────────────────────────────────────────────────────── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--pico-background-color);
}
.login-card {
  max-width: 400px;
  width: 100%;
}

/* ── Alerts ─────────────────────────────────────────────────────── */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert-error { background: #fee; color: #c33; border: 1px solid #fcc; }
.alert-success { background: #efe; color: #363; border: 1px solid #cfc; }

/* ── Role badges ────────────────────────────────────────────────── */
.role-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.role-admin { background: #e74c3c; color: #fff; }
.role-developer { background: #3498db; color: #fff; }
.role-user { background: #95a5a6; color: #fff; }

/* ── Visibility badges ──────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}
.badge-private { background: #e74c3c22; color: #c0392b; }
.badge-shared { background: #f39c1222; color: #e67e22; }
.badge-public { background: #27ae6022; color: #27ae60; }

/* ── Layout helpers ─────────────────────────────────────────────── */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.btn-sm {
  font-size: 0.85rem !important;
  padding: 0.3rem 0.7rem !important;
}
.inline-form { display: inline; margin: 0; }
.overflow-auto { overflow-x: auto; }

/* ── Dashboard stats ────────────────────────────────────────────── */
.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin: 0.5rem 0;
}

/* ── Module cards ───────────────────────────────────────────────── */
.module-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.module-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.module-card p {
  font-size: 0.9rem;
  color: var(--pico-muted-color);
  min-height: 2.5rem;
}

/* ── Module preview ─────────────────────────────────────────────── */
.preview-frame {
  width: 100%;
  min-height: 500px;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: #fff;
}
.module-preview { padding: 0; }

/* ── Editor layout ──────────────────────────────────────────────── */
.editor-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  min-height: calc(100vh - 200px);
}
.file-sidebar {
  background: var(--pico-card-background-color);
  border-radius: var(--pico-border-radius);
  padding: 1rem;
  border: 1px solid var(--pico-muted-border-color);
}
.file-sidebar h4 { margin-bottom: 0.5rem; }
.file-sidebar ul { list-style: none; padding: 0; margin: 0; }
.file-sidebar li { margin-bottom: 0.2rem; }
.file-tab {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: var(--pico-border-radius);
  text-decoration: none;
  font-size: 0.85rem;
  color: var(--pico-color);
  transition: background 0.15s;
}
.file-tab:hover { background: var(--pico-primary-focus); }
.file-tab.active {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}
.file-icon { margin-right: 0.3rem; }

.editor-main {
  display: grid;
  grid-template-rows: 1fr 300px;
  gap: 0.5rem;
}
#editor-container {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  min-height: 400px;
}
.preview-pane {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  overflow: hidden;
}
.preview-frame-editor {
  width: 100%;
  height: calc(100% - 35px);
  border: none;
  background: #fff;
}

/* ── Nav ────────────────────────────────────────────────────────── */
nav .user-info {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .editor-layout {
    grid-template-columns: 1fr;
  }
  .editor-main {
    grid-template-rows: 400px 250px;
  }
}