/**
 * 🎨 ZANGAPRO DASHBOARD COMPLETE OVERRIDE
 * Override complet pour transformer tout le dashboard
 */

/* ============================================
   SECTION "JE VEUX..." (QUICK ACTIONS)
   ============================================ */

/* Container de la section */
.tw-rounded-2xl.tw-shadow-sm.tw-overflow-hidden[style*="background:#f7f2e8"] {
    background-color: var(--zp-surface) !important;
    border: 1px solid var(--zp-border) !important;
    border-radius: var(--zp-radius-lg) !important;
    box-shadow: var(--zp-shadow-sm) !important;
}

/* Header de la section */
.tw-rounded-2xl.tw-shadow-sm.tw-overflow-hidden[style*="background:#f7f2e8"]>div:first-child {
    background-color: var(--zp-surface-hover) !important;
    border-bottom: 1px solid var(--zp-border) !important;
    padding: var(--zp-space-4) !important;
}

/* Boutons d'action rapide */
.tw-dw-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--zp-space-2) !important;
    padding: var(--zp-space-3) var(--zp-space-4) !important;
    font-size: var(--zp-text-base) !important;
    font-weight: var(--zp-font-medium) !important;
    border-radius: var(--zp-radius-md) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    min-height: 44px !important;
    text-decoration: none !important;
}

.tw-dw-btn-primary {
    background-color: var(--zp-primary) !important;
    color: white !important;
}

.tw-dw-btn-primary:hover {
    background-color: var(--zp-primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--zp-shadow-md) !important;
}

.tw-dw-btn-success {
    background-color: var(--zp-success) !important;
    color: white !important;
}

.tw-dw-btn-success:hover {
    background-color: #15803d !important;
    transform: translateY(-2px) !important;
}

.tw-dw-btn-info {
    background-color: var(--zp-info) !important;
    color: white !important;
}

.tw-dw-btn-info:hover {
    background-color: #2563eb !important;
    transform: translateY(-2px) !important;
}

.tw-dw-btn-warning {
    background-color: var(--zp-warning) !important;
    color: white !important;
}

.tw-dw-btn-warning:hover {
    background-color: #d97706 !important;
    transform: translateY(-2px) !important;
}

.tw-dw-btn-outline {
    background-color: transparent !important;
    border: 1px solid var(--zp-border) !important;
    color: var(--zp-text-primary) !important;
}

.tw-dw-btn-outline:hover {
    background-color: var(--zp-surface-hover) !important;
}

.tw-dw-btn-sm {
    min-height: 36px !important;
    padding: var(--zp-space-2) var(--zp-space-3) !important;
    font-size: var(--zp-text-sm) !important;
}

/* Cards de rapports avec gradients → Design propre */
.tw-group.tw-w-full.tw-rounded-2xl.tw-text-white {
    background: var(--zp-surface) !important;
    border-radius: var(--zp-radius-lg) !important;
    padding: var(--zp-space-4) !important;
    box-shadow: var(--zp-shadow-sm) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--zp-space-3) !important;
    border: 1px solid var(--zp-border) !important;
}

.tw-group.tw-w-full.tw-rounded-2xl.tw-text-white:hover {
    box-shadow: var(--zp-shadow-md) !important;
    transform: translateY(-2px) !important;
}

/* Icônes dans les report cards */
.tw-group.tw-w-full.tw-rounded-2xl.tw-text-white .tw-h-12.tw-w-12 {
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--zp-radius-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* S'assurer que les icônes FontAwesome sont visibles */
.tw-group.tw-w-full.tw-rounded-2xl.tw-text-white .tw-h-12.tw-w-12 i,
.tw-group.tw-w-full.tw-rounded-2xl.tw-text-white .tw-h-12.tw-w-12 .fa {
    font-size: 1.5rem !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Texte dans les report cards */
.tw-group.tw-w-full.tw-rounded-2xl.tw-text-white .tw-font-bold {
    color: var(--zp-text-primary) !important;
    font-weight: var(--zp-font-semibold) !important;
}

.tw-group.tw-w-full.tw-rounded-2xl.tw-text-white .tw-text-xs {
    color: var(--zp-text-secondary) !important;
}

.tw-group.tw-w-full.tw-rounded-2xl.tw-text-white .fa-chevron-right {
    color: var(--zp-text-secondary) !important;
}

/* Couleurs des icônes selon le type */
.tw-group.tw-w-full.tw-rounded-2xl.tw-text-white:nth-child(1) .tw-h-12.tw-w-12 {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: var(--zp-info) !important;
}

.tw-group.tw-w-full.tw-rounded-2xl.tw-text-white:nth-child(2) .tw-h-12.tw-w-12 {
    background-color: rgba(22, 163, 74, 0.1) !important;
    color: var(--zp-success) !important;
}

.tw-group.tw-w-full.tw-rounded-2xl.tw-text-white:nth-child(3) .tw-h-12.tw-w-12 {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: var(--zp-warning) !important;
}

/* ============================================
   GRID DE TUILES (SECTION 2)
   ============================================ */

/* Container de la grid */
.tw-bg-white.tw-rounded-2xl.tw-shadow-sm.tw-border {
    background-color: var(--zp-surface) !important;
    border-radius: var(--zp-radius-lg) !important;
    box-shadow: var(--zp-shadow-sm) !important;
    border: 1px solid var(--zp-border) !important;
}

/* Header de la section tuiles */
.tw-border-b.tw-border-gray-200 {
    border-bottom: 1px solid var(--zp-border) !important;
    background-color: var(--zp-surface-hover) !important;
}

/* Tuiles modernes */
.modern-dash-tile {
    background-color: var(--zp-surface) !important;
    border: 1px solid var(--zp-border) !important;
    border-radius: var(--zp-radius-lg) !important;
    box-shadow: var(--zp-shadow-sm) !important;
    transition: all 0.2s ease !important;
    padding: var(--zp-space-4) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--zp-space-3) !important;
    text-decoration: none !important;
    min-height: 120px !important;
}

.modern-dash-tile:hover {
    box-shadow: var(--zp-shadow-md) !important;
    transform: translateY(-4px) !important;
    border-color: var(--zp-primary) !important;
}

.modern-dash-tile .tile-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: var(--zp-radius-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modern-dash-tile .tile-text {
    color: var(--zp-text-primary) !important;
    font-weight: var(--zp-font-medium) !important;
    font-size: var(--zp-text-sm) !important;
    text-align: center !important;
}

/* Couleurs des icônes de tuiles */
.tile-icon.green {
    background-color: rgba(22, 163, 74, 0.1) !important;
    color: var(--zp-success) !important;
}

.tile-icon.purple {
    background-color: rgba(147, 51, 234, 0.1) !important;
    color: #9333ea !important;
}

.tile-icon.pink {
    background-color: rgba(236, 72, 153, 0.1) !important;
    color: #ec4899 !important;
}

.tile-icon.indigo {
    background-color: rgba(99, 102, 241, 0.1) !important;
    color: #6366f1 !important;
}

.tile-icon.brown {
    background-color: rgba(120, 53, 15, 0.1) !important;
    color: #78350f !important;
}

.tile-icon.blue {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: var(--zp-info) !important;
}

.tile-icon.orange {
    background-color: rgba(249, 115, 22, 0.1) !important;
    color: #f97316 !important;
}

.tile-icon.red {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: var(--zp-error) !important;
}

.tile-icon.yellow {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: var(--zp-warning) !important;
}

.tile-icon.teal {
    background-color: rgba(20, 184, 166, 0.1) !important;
    color: #14b8a6 !important;
}

/* Grid layout */
.dash-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: var(--zp-space-4) !important;
    padding: var(--zp-space-4) !important;
}

/* ============================================
   RESPONSIVE MOBILE
   ============================================ */

@media (max-width: 768px) {

    /* Grids → 2 colonnes sur mobile */
    .tw-grid.tw-grid-cols-1.sm\:tw-grid-cols-2.lg\:tw-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .tw-grid.tw-grid-cols-1.sm\:tw-grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    .dash-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--zp-space-3) !important;
    }

    .modern-dash-tile {
        min-height: 100px !important;
        padding: var(--zp-space-3) !important;
    }

    .modern-dash-tile .tile-icon {
        width: 48px !important;
        height: 48px !important;
    }

    .modern-dash-tile .tile-text {
        font-size: var(--zp-text-xs) !important;
    }
}

/* ============================================
   PRINT
   ============================================ */

@media print {

    .tw-dw-btn,
    .modern-dash-tile,
    .tw-group.tw-w-full.tw-rounded-2xl {
        display: none !important;
    }
}

/* ============================================
   LIVEWIRE COMPONENTS - NE PAS OVERRIDE
   ============================================ */

/* S'assurer que les boutons Livewire fonctionnent */
[wire\:click],
[wire\:click\.prevent] {
    cursor: pointer !important;
    pointer-events: auto !important;
}