/* Launchpad tile dashboard */

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.app-tile {
  display: block;
  padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid #26a69a;
  background: var(--pico-card-background-color);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}

.app-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.tile-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.tile-name {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.tile-desc {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Flash messages */
.flash-msg {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

/* Admin nav tabs */
.admin-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding-bottom: 0.5rem;
}
.admin-nav a {
  padding: 0.4rem 1rem;
  border-radius: 6px 6px 0 0;
  text-decoration: none;
  color: var(--pico-muted-color);
}
.admin-nav a.active {
  color: var(--pico-primary);
  border-bottom: 2px solid var(--pico-primary);
}

/* Admin header (title + button) */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.admin-header h2 {
  margin-bottom: 0;
}

/* Badges */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
}
.badge-admin { background: #7c4dff; color: #fff; }
.badge-active { background: #26a69a; color: #fff; }
.badge-inactive { background: #616161; color: #ccc; }

/* Access matrix */
.access-matrix { width: auto; }
.access-matrix .app-col {
  text-align: center;
  white-space: nowrap;
  font-size: 0.85rem;
}
.access-matrix .check-cell {
  text-align: center;
}
.overflow-auto {
  overflow-x: auto;
}
