/* ============================================================================
   DevPortal — devportal.css
   Version : 1.2.0

   Styles spécifiques au dashboard DevPortal.
   Dépend de vnct-design-system.css (chargé avant).
   ============================================================================ */

/* --- Écran de login --- */
.devportal-login {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  z-index: 9999;
  padding: var(--space-4);
}

.devportal-login__card {
  width: 100%;
  max-width: 380px;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  text-align: center;
}

.devportal-login__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.devportal-login__logo {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--accent);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.devportal-login__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0;
}

.devportal-login__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

.devportal-login__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}

.devportal-login__form .vnct-input {
  height: 44px;
  font-size: var(--text-base);
}

.devportal-login__btn {
  width: 100%;
  height: 44px;
  font-size: var(--text-base);
}

.devportal-login__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.devportal-login__error {
  font-size: var(--text-sm);
  color: var(--danger);
  margin: var(--space-1) 0 0;
}

.devportal-login__footer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
}

/* --- Boutons d'action nav --- */
.devportal-action-btn {
  background: none;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) ease;
}

.devportal-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.devportal-action-btn--spinning svg {
  animation: devportal-spin 0.8s linear infinite;
}

.devportal-action-btn--active {
  border-color: var(--accent);
  color: var(--accent);
  background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
}

@keyframes devportal-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Masquer le FAB VNCT — DevPortal n'a pas besoin du bouton + */
.vnct-fab,
.vnct-fab-menu,
.vnct-fab-overlay {
  display: none !important;
}

/* --- Container principal --- */
.devportal-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

/* --- Recherche --- */
.devportal-search-wrapper {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.devportal-search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.devportal-search {
  padding-left: calc(var(--space-3) + 16px + var(--space-2)) !important;
  font-size: var(--text-sm) !important;
  height: 36px;
}

.devportal-search-mobile {
  position: relative;
  display: none;
  margin-bottom: var(--space-4);
}

.devportal-search-mobile .devportal-search {
  height: 44px;
  font-size: var(--text-base) !important;
}

@media (max-width: 768px) {
  .devportal-search-mobile {
    display: block;
  }
}

/* --- Filtres --- */
.devportal-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.devportal-filters__tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.devportal-filters__tabs::-webkit-scrollbar {
  display: none;
}

.devportal-filters__tab {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast) ease;
}

.devportal-filters__tab:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.devportal-filters__tab--active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

.devportal-filters__dropdowns {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.devportal-filters__select {
  width: auto;
  min-width: 180px;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
}

/* --- Grille de cartes --- */
.devportal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

/* --- Carte de report --- */
.devportal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: calc(var(--space-6) + 4px);
  cursor: pointer;
  overflow: hidden;
}

/* Barre latérale de type */
.devportal-card__type-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.devportal-card[data-type="bug"] .devportal-card__type-bar {
  background: var(--danger);
  box-shadow: 0 0 8px hsla(355, 80%, 55%, 0.3);
}

.devportal-card[data-type="suggestion"] .devportal-card__type-bar {
  background: var(--success);
  box-shadow: 0 0 8px hsla(140, 60%, 45%, 0.3);
}

/* Type moderation (v1.1.0) : signalement forward depuis un autre service (ex. Ostra) */
.devportal-card[data-type="moderation"] .devportal-card__type-bar {
  background: var(--warning, #f59e0b);
  box-shadow: 0 0 8px hsla(38, 92%, 50%, 0.35);
}

/* Section contexte dans la vue detail (reports moderation) */
.devportal-detail__section--context {
  background: color-mix(in srgb, var(--warning, #f59e0b) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 30%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* Header : service + badge statut */
.devportal-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.devportal-card__service {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.devportal-card__type-icon {
  font-size: var(--text-base);
  flex-shrink: 0;
}

.devportal-card__service-name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.devportal-card__service-version {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Badge statut */
.devportal-card__status {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.devportal-card__status[data-status="nouveau"] {
  background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
  color: var(--accent);
}

.devportal-card__status[data-status="en-cours"] {
  background: hsla(35, 90%, 50%, 0.1);
  color: var(--warning);
}

.devportal-card__status[data-status="resolu"] {
  background: hsla(140, 60%, 45%, 0.1);
  color: var(--success);
}

.devportal-card__status[data-status="rejete"] {
  background: hsla(0, 0%, 50%, 0.1);
  color: var(--text-muted);
}

/* Description tronquée */
.devportal-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer : screenshots + date */
.devportal-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.devportal-card__screenshots {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.devportal-card__date {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Reports rejetés : opacité réduite */
.devportal-card[data-status="rejete"] {
  opacity: 0.5;
}

/* --- Modal de détail --- */
.devportal-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.devportal-detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.devportal-detail__type-service {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.devportal-detail__type-icon {
  font-size: var(--text-xl);
}

.devportal-detail__service {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0;
}

.devportal-detail__version {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.devportal-detail__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.devportal-detail__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.devportal-detail__text {
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.devportal-detail__text--steps {
  white-space: pre-line;
  font-family: var(--font-family);
}

/* Gallery screenshots */
.devportal-detail__gallery {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.devportal-detail__screenshot {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: transform var(--duration-fast) ease;
}

.devportal-detail__screenshot:hover {
  transform: scale(1.05);
  border-color: var(--accent);
}

/* Lightbox (fullscreen screenshot) */
.devportal-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: pointer;
  padding: var(--space-4);
}

.devportal-lightbox img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* Infos techniques */
.devportal-detail__section--tech {
  padding: var(--space-4);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.devportal-detail__tech-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.devportal-detail__tech-label {
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.devportal-detail__tech-value {
  color: var(--text-secondary);
  word-break: break-all;
}

/* Actions */
.devportal-detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

.devportal-detail__status-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 140px;
}

.devportal-detail__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-left: auto;
}

/* Dates */
.devportal-detail__dates {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --- Stats widget (desktop only) --- */
.devportal-stats {
  position: fixed;
  bottom: calc(var(--space-8) + var(--space-4));
  right: var(--space-6);
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  z-index: 50;
}

.devportal-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.devportal-stats__value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--accent);
}

.devportal-stats__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --- État vide --- */
.devportal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-16, 4rem) var(--space-4);
  text-align: center;
}

.devportal-empty__icon {
  font-size: 3rem;
  opacity: 0.5;
}

.devportal-empty__title {
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin: 0;
}

.devportal-empty__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 400px;
  margin: 0;
}

/* --- Responsive mobile --- */
@media (max-width: 768px) {
  .devportal-stats { display: none; }

  .devportal-filters__dropdowns {
    flex-direction: column;
  }

  .devportal-filters__select {
    width: 100%;
    min-width: unset;
  }

  .devportal-grid {
    grid-template-columns: 1fr;
  }

  .devportal-detail__actions {
    flex-direction: column;
    gap: var(--space-3);
  }

  .devportal-detail__buttons {
    width: 100%;
    justify-content: flex-end;
  }

  .devportal-detail__dates {
    flex-direction: column;
    gap: var(--space-1);
  }

  .devportal-detail__gallery {
    flex-direction: column;
  }

  .devportal-detail__screenshot {
    width: 100%;
    height: auto;
    max-height: 250px;
  }

  .devportal-detail__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================================
   v1.2.0 — Pilotage moderation cross-services
   Bloc d'actions Suspendre/Reactiver dans le modal detail des reports moderation
   ============================================================================ */

.devportal-mod-actions {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-3) 0;
}

.devportal-mod-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  flex-wrap: wrap;
}
.devportal-mod-status__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.devportal-mod-status__dot[data-status="active"] { background: var(--success); box-shadow: 0 0 6px var(--success); }
.devportal-mod-status__dot[data-status="suspended"] { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.devportal-mod-status__dot[data-status="loading"] {
  background: var(--text-muted);
  animation: devportal-mod-pulse 1s ease-in-out infinite;
}
.devportal-mod-status__dot[data-status="error"] { background: var(--warning); }
.devportal-mod-status__dot[data-status="unknown"] { background: var(--text-muted); }
@keyframes devportal-mod-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.devportal-mod-status__label {
  letter-spacing: 0.05em;
}
.devportal-mod-status__detail {
  color: var(--text-muted);
  font-weight: var(--font-normal);
  font-size: var(--text-xs);
  margin-left: var(--space-2);
}

.devportal-mod-note {
  width: 100%;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.devportal-mod-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  cursor: pointer;
  user-select: none;
}
.devportal-mod-checkbox input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--danger);
  cursor: pointer;
}

.devportal-mod-buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.devportal-mod-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--border-default);
  border-top-color: var(--text-muted);
  border-radius: 50%;
  animation: devportal-mod-spin 0.7s linear infinite;
  margin-right: var(--space-2);
  vertical-align: middle;
}
@keyframes devportal-mod-spin { to { transform: rotate(360deg); } }

.devportal-mod-feedback {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}
.devportal-mod-feedback__err {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-tertiary);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  color: var(--danger);
}