/* ==========================================================================
   BallesDev — estilos custom para Forgejo
   NO modifica la paleta del tema: solo layout de componentes propios y
   reordenamiento del dashboard. Usa las variables CSS del tema activo,
   así funciona en dark y light.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout del dashboard estilo GitHub
   Desktop: sidebar de repos a la IZQUIERDA, feed a la DERECHA.
   Mobile (<=767px): queda el comportamiento original de Forgejo
   (columna con repos arriba).
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.page-content.dashboard .flex-container-main {
		order: 2;
	}
	.page-content.dashboard #dashboard-repo-list {
		order: 1;
	}
}

/* Sin la tab de Organizations (reemplazada por la grid), la barra de tabs
   del repo list queda redundante: se oculta completa. */
#dashboard-repo-list .tabs-with-labels {
	display: none;
}

/* --------------------------------------------------------------------------
   2. Grid de organizaciones (debajo del header, centrada)
   auto-fit + justify-content: center => las cards quedan siempre centradas
   sin importar la cantidad de orgs, y nunca se estiran de más.
   -------------------------------------------------------------------------- */
.bd-orgs {
	margin-top: 1.25rem;
}

.bd-orgs-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--color-text);
	font-size: 17px;
	margin: 0 0 1rem;
}

.bd-orgs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 280px));
	justify-content: center;
	gap: 16px;
}

.bd-org-card,
.bd-org-card:hover {
	text-decoration: none;
}

.bd-org-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 22px 16px 18px;
	background: var(--color-box-body);
	border: 1px solid var(--color-secondary);
	border-radius: 10px;
	text-align: center;
	transition:
		border-color 0.15s ease,
		transform 0.15s ease,
		background 0.15s ease;
}

.bd-org-card:hover {
	border-color: var(--color-primary);
	background: var(--color-box-body-highlight);
	transform: translateY(-2px);
}

.bd-org-avatar {
	width: 48px;
	height: 48px;
	border-radius: 10px;
}

.bd-org-name {
	color: var(--color-text);
	font-weight: 600;
	font-size: 15px;
	word-break: break-word;
}

.bd-org-desc {
	color: var(--color-text-light-2);
	font-size: 12.5px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}