/**
 * reseller-network.css
 * Styles pour le module de gestion du réseau revendeurs
 */

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  /* Thème Cyan NautiSphere harmonisé */
  --network-primary: #00b9d1;
  --network-primary-dark: #0097a7;
  --network-secondary: #0e7490;
  --network-success: #10b981;
  --network-warning: #f59e0b;
  --network-danger: #ef4444;
  --network-info: #06b6d4;
}

/* ============================================================
   BASE STYLES
   ============================================================ */
.network-module {
  @apply min-h-screen;
}

/* ============================================================
   DIRECTORY MODULE
   ============================================================ */
.network-directory-module .reseller-card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700;
  @apply hover:shadow-lg hover:border-teal-300 dark:hover:border-teal-700;
  @apply transition-all duration-300 cursor-pointer;
}

.network-directory-module .reseller-card:hover {
  transform: translateY(-2px);
}

.network-directory-module .reseller-avatar {
  @apply w-14 h-14 rounded-xl flex items-center justify-center text-xl font-bold text-white;
  background: linear-gradient(135deg, var(--network-primary) 0%, #06b6d4 100%);
}

.network-directory-module .status-badge {
  @apply inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium;
}

.network-directory-module .status-badge.active {
  @apply bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400;
}

.network-directory-module .status-badge.inactive {
  @apply bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400;
}

.network-directory-module .status-badge.pending {
  @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400;
}

.network-directory-module .status-badge.suspended {
  @apply bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400;
}

/* ============================================================
   ACCESS MODULE
   ============================================================ */
.network-access-module .permission-card {
  @apply bg-gray-50 dark:bg-gray-700/50 rounded-xl p-5;
  @apply border border-transparent hover:border-teal-300 dark:hover:border-teal-700;
  @apply transition-colors duration-200;
}

.network-access-module .permission-level {
  @apply flex items-center gap-3 p-2 rounded-lg cursor-pointer;
  @apply hover:bg-white dark:hover:bg-gray-600 transition-colors;
}

.network-access-module .permission-level.selected {
  @apply bg-white dark:bg-gray-600 ring-2 ring-teal-500;
}

.network-access-module .access-badge {
  @apply inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium;
}

.network-access-module .access-badge.none {
  @apply bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400;
}

.network-access-module .access-badge.view {
  @apply bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400;
}

.network-access-module .access-badge.limited {
  @apply bg-yellow-100 text-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-400;
}

.network-access-module .access-badge.full {
  @apply bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400;
}

/* ============================================================
   LEADS MODULE
   ============================================================ */
.network-leads-module .lead-card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm;
  @apply border border-gray-200 dark:border-gray-700 border-l-4;
  @apply hover:shadow-md transition-shadow duration-200;
}

.network-leads-module .lead-card.priority-low {
  @apply border-l-gray-400;
}

.network-leads-module .lead-card.priority-medium {
  @apply border-l-yellow-400;
}

.network-leads-module .lead-card.priority-high {
  @apply border-l-orange-400;
}

.network-leads-module .lead-card.priority-urgent {
  @apply border-l-red-400;
}

.network-leads-module .lead-status-badge {
  @apply inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium;
}

.network-leads-module .kanban-column {
  @apply flex-shrink-0 w-72 bg-gray-50 dark:bg-gray-900/50 rounded-xl;
  @apply border-t-4;
}

.network-leads-module .kanban-card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm;
  @apply border border-gray-200 dark:border-gray-700 border-l-4;
  @apply p-3 cursor-move;
}

.network-leads-module .kanban-card.dragging {
  @apply opacity-50;
}

/* ============================================================
   MARKETING MODULE
   ============================================================ */
.network-marketing-module .asset-card {
  @apply bg-gray-50 dark:bg-gray-700/50 rounded-xl overflow-hidden;
  @apply hover:shadow-lg transition-all duration-300 cursor-pointer;
}

.network-marketing-module .asset-card:hover .asset-overlay {
  @apply opacity-100;
}

.network-marketing-module .asset-overlay {
  @apply absolute inset-0 bg-black/50 opacity-0 transition-opacity;
  @apply flex items-center justify-center gap-2;
}

.network-marketing-module .asset-type-badge {
  @apply absolute top-2 left-2 px-2 py-1 bg-black/50 backdrop-blur-sm;
  @apply rounded-lg text-xs text-white flex items-center gap-1;
}

.network-marketing-module .upload-dropzone {
  @apply border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl;
  @apply p-8 text-center transition-colors cursor-pointer;
}

.network-marketing-module .upload-dropzone:hover,
.network-marketing-module .upload-dropzone.dragover {
  @apply border-teal-500 bg-teal-50 dark:bg-teal-900/20;
}

/* ============================================================
   DASHBOARD MODULE
   ============================================================ */
.network-dashboard-module .kpi-card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm;
  @apply border border-gray-200 dark:border-gray-700 p-4;
}

.network-dashboard-module .kpi-card .kpi-icon {
  @apply w-10 h-10 rounded-lg flex items-center justify-center;
}

.network-dashboard-module .kpi-card .kpi-trend {
  @apply text-xs font-medium;
}

.network-dashboard-module .kpi-card .kpi-trend.positive {
  @apply text-green-500;
}

.network-dashboard-module .kpi-card .kpi-trend.negative {
  @apply text-red-500;
}

.network-dashboard-module .chart-container {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm;
  @apply border border-gray-200 dark:border-gray-700 p-6;
}

.network-dashboard-module .chart-bar {
  @apply bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t-lg;
  @apply transition-all duration-300 hover:from-indigo-600 hover:to-purple-600;
}

.network-dashboard-module .funnel-bar {
  @apply h-full rounded-full flex items-center justify-end pr-2;
  @apply transition-all duration-300;
}

.network-dashboard-module .activity-item {
  @apply relative flex gap-4 pl-8;
}

.network-dashboard-module .activity-dot {
  @apply absolute left-2 w-4 h-4 rounded-full flex items-center justify-center;
}

/* ============================================================
   MESSAGING MODULE
   ============================================================ */
.network-messaging-module .message-item {
  @apply flex items-start gap-4 p-4;
  @apply hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors;
}

.network-messaging-module .message-item.unread {
  @apply bg-blue-50/50 dark:bg-blue-900/10;
}

.network-messaging-module .message-type-icon {
  @apply w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0;
}

.network-messaging-module .message-type-icon.announcement {
  @apply bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400;
}

.network-messaging-module .message-type-icon.update {
  @apply bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400;
}

.network-messaging-module .message-type-icon.alert {
  @apply bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400;
}

.network-messaging-module .message-type-icon.promotion {
  @apply bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400;
}

.network-messaging-module .message-type-icon.event {
  @apply bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400;
}

.network-messaging-module .message-type-icon.general {
  @apply bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400;
}

.network-messaging-module .inbox-nav-item {
  @apply w-full flex items-center justify-between px-4 py-2.5 rounded-lg transition-colors;
}

.network-messaging-module .inbox-nav-item.active {
  @apply bg-blue-50 dark:bg-blue-900/30 text-blue-600;
}

.network-messaging-module .inbox-nav-item:not(.active) {
  @apply text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700;
}

/* ============================================================
   MODALS
   ============================================================ */
.network-modal {
  @apply fixed inset-0 z-50;
}

.network-modal .modal-backdrop {
  @apply absolute inset-0 bg-black/50;
}

.network-modal .modal-content {
  @apply bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden;
}

.network-modal .modal-header {
  @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
}

.network-modal .modal-header.gradient {
  @apply bg-gradient-to-r;
}

.network-modal .modal-body {
  @apply p-6 overflow-y-auto;
}

.network-modal .modal-footer {
  @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700;
  @apply bg-gray-50 dark:bg-gray-900/50;
}

/* ============================================================
   TABS
   ============================================================ */
.network-tabs {
  @apply flex border-b border-gray-200 dark:border-gray-700;
}

.network-tab {
  @apply px-6 py-3 font-medium transition-colors;
}

.network-tab.active {
  @apply text-teal-600 border-b-2 border-teal-500;
}

.network-tab:not(.active) {
  @apply text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300;
}

/* ============================================================
   SIDEBAR TABS (Config modal)
   ============================================================ */
.config-tab {
  @apply w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-colors;
}

.config-tab.active {
  @apply bg-white dark:bg-gray-800 text-teal-600 dark:text-teal-400 shadow-sm;
}

.config-tab:not(.active) {
  @apply text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700;
}

/* ============================================================
   FORMS
   ============================================================ */
.network-form-group {
  @apply space-y-1;
}

.network-form-label {
  @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
}

.network-form-input {
  @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg;
  @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
  @apply focus:ring-2 focus:ring-teal-500 focus:border-teal-500;
  @apply transition-colors duration-200;
}

.network-form-input:disabled {
  @apply bg-gray-100 dark:bg-gray-800 cursor-not-allowed;
}

.network-form-select {
  @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg;
  @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
  @apply focus:ring-2 focus:ring-teal-500;
}

.network-form-textarea {
  @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg;
  @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-white resize-none;
  @apply focus:ring-2 focus:ring-teal-500;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.network-btn {
  @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200;
  @apply inline-flex items-center justify-center gap-2;
}

.network-btn-primary {
  @apply bg-teal-500 text-white hover:bg-teal-600;
}

.network-btn-secondary {
  @apply border border-gray-300 dark:border-gray-600;
  @apply text-gray-700 dark:text-gray-300;
  @apply hover:bg-gray-100 dark:hover:bg-gray-700;
}

.network-btn-danger {
  @apply bg-red-500 text-white hover:bg-red-600;
}

.network-btn-sm {
  @apply px-3 py-1.5 text-sm;
}

.network-btn-lg {
  @apply px-6 py-3 text-lg;
}

.network-btn:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* ============================================================
   TOGGLE SWITCH
   ============================================================ */
.network-toggle {
  @apply relative inline-flex items-center cursor-pointer;
}

.network-toggle input {
  @apply sr-only peer;
}

.network-toggle .toggle-track {
  @apply w-11 h-6 bg-gray-200 rounded-full peer;
  @apply peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800;
  @apply dark:bg-gray-600;
  @apply peer-checked:bg-teal-500;
  @apply after:content-[''] after:absolute after:top-[2px] after:left-[2px];
  @apply after:bg-white after:border-gray-300 after:border after:rounded-full;
  @apply after:h-5 after:w-5 after:transition-all;
  @apply peer-checked:after:translate-x-full peer-checked:after:border-white;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.network-pagination {
  @apply flex items-center justify-between px-4 py-3;
  @apply bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700;
}

.network-pagination-info {
  @apply text-sm text-gray-500 dark:text-gray-400;
}

.network-pagination-btn {
  @apply p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700;
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
}

.network-pagination-page {
  @apply w-8 h-8 rounded-lg flex items-center justify-center;
}

.network-pagination-page.active {
  @apply bg-teal-500 text-white;
}

.network-pagination-page:not(.active) {
  @apply hover:bg-gray-100 dark:hover:bg-gray-700;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes network-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.network-animate-in {
  animation: network-fade-in 0.3s ease-out;
}

@keyframes network-slide-in {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.network-slide-in {
  animation: network-slide-in 0.3s ease-out;
}

@keyframes network-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.network-pulse {
  animation: network-pulse 2s ease-in-out infinite;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .network-directory-module .reseller-grid {
    @apply grid-cols-1;
  }

  .network-leads-module .kanban-column {
    @apply w-full;
  }

  .network-marketing-module .assets-grid {
    @apply grid-cols-2;
  }

  .network-messaging-module .sidebar {
    @apply hidden;
  }
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */
.dark .network-form-input::placeholder {
  @apply text-gray-400;
}

.dark .network-modal .modal-content {
  @apply border border-gray-700;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .network-module {
    @apply bg-white text-black;
  }

  .network-btn,
  .network-pagination {
    @apply hidden;
  }

  .network-modal {
    @apply hidden;
  }
}