/* ═══════════════════════════════════════════════════════════════
   IMMOBILIER.FR - Custom Styles
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   Couleurs supplémentaires pour les badges et labels
   Ces couleurs complètent la palette Vuexy
   ═══════════════════════════════════════════ */

/* Purple */
.bg-label-purple {
    background-color: rgba(168, 85, 247, 0.16) !important;
    color: #a855f7 !important;
}
.bg-purple {
    background-color: #a855f7 !important;
}
.text-purple {
    color: #a855f7 !important;
}

/* Indigo */
.bg-label-indigo {
    background-color: rgba(99, 102, 241, 0.16) !important;
    color: #6366f1 !important;
}
.bg-indigo {
    background-color: #6366f1 !important;
}
.text-indigo {
    color: #6366f1 !important;
}

/* Violet */
.bg-label-violet {
    background-color: rgba(139, 92, 246, 0.16) !important;
    color: #8b5cf6 !important;
}
.bg-violet {
    background-color: #8b5cf6 !important;
}
.text-violet {
    color: #8b5cf6 !important;
}

/* Pink */
.bg-label-pink {
    background-color: rgba(236, 72, 153, 0.16) !important;
    color: #ec4899 !important;
}
.bg-pink {
    background-color: #ec4899 !important;
}
.text-pink {
    color: #ec4899 !important;
}

/* Fuchsia */
.bg-label-fuchsia {
    background-color: rgba(217, 70, 239, 0.16) !important;
    color: #d946ef !important;
}
.bg-fuchsia {
    background-color: #d946ef !important;
}
.text-fuchsia {
    color: #d946ef !important;
}

/* Teal */
.bg-label-teal {
    background-color: rgba(20, 184, 166, 0.16) !important;
    color: #14b8a6 !important;
}
.bg-teal {
    background-color: #14b8a6 !important;
}
.text-teal {
    color: #14b8a6 !important;
}

/* Cyan */
.bg-label-cyan {
    background-color: rgba(6, 182, 212, 0.16) !important;
    color: #06b6d4 !important;
}
.bg-cyan {
    background-color: #06b6d4 !important;
}
.text-cyan {
    color: #06b6d4 !important;
}

/* Emerald */
.bg-label-emerald {
    background-color: rgba(5, 150, 105, 0.16) !important;
    color: #059669 !important;
}
.bg-emerald {
    background-color: #059669 !important;
}
.text-emerald {
    color: #059669 !important;
}

/* Lime */
.bg-label-lime {
    background-color: rgba(132, 204, 22, 0.16) !important;
    color: #84cc16 !important;
}
.bg-lime {
    background-color: #84cc16 !important;
}
.text-lime {
    color: #84cc16 !important;
}

/* Amber */
.bg-label-amber {
    background-color: rgba(217, 119, 6, 0.16) !important;
    color: #d97706 !important;
}
.bg-amber {
    background-color: #d97706 !important;
}
.text-amber {
    color: #d97706 !important;
}

/* Orange */
.bg-label-orange {
    background-color: rgba(249, 115, 22, 0.16) !important;
    color: #f97316 !important;
}
.bg-orange {
    background-color: #f97316 !important;
}
.text-orange {
    color: #f97316 !important;
}

/* Stone */
.bg-label-stone {
    background-color: rgba(120, 113, 108, 0.16) !important;
    color: #78716c !important;
}
.bg-stone {
    background-color: #78716c !important;
}
.text-stone {
    color: #78716c !important;
}

/* Zinc */
.bg-label-zinc {
    background-color: rgba(113, 113, 122, 0.16) !important;
    color: #71717a !important;
}
.bg-zinc {
    background-color: #71717a !important;
}
.text-zinc {
    color: #71717a !important;
}

/* Neutral */
.bg-label-neutral {
    background-color: rgba(115, 115, 115, 0.16) !important;
    color: #737373 !important;
}
.bg-neutral {
    background-color: #737373 !important;
}
.text-neutral {
    color: #737373 !important;
}

/* ═══════════════════════════════════════════
   Types de biens - Icônes avec couleurs
   ═══════════════════════════════════════════ */

.bien-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 0.375rem;
}

.bien-type-icon.bien-type-sm {
    width: 32px;
    height: 32px;
}

.bien-type-icon.bien-type-lg {
    width: 48px;
    height: 48px;
}

.bien-type-icon.bien-type-xl {
    width: 64px;
    height: 64px;
}

/* ═══════════════════════════════════════════
   Timeline styles
   ═══════════════════════════════════════════ */

.timeline-point-purple { background: #a855f7 !important; }
.timeline-point-indigo { background: #6366f1 !important; }
.timeline-point-pink { background: #ec4899 !important; }
.timeline-point-teal { background: #14b8a6 !important; }
.timeline-point-orange { background: #f97316 !important; }

/* ═══════════════════════════════════════════
   Cards et layout
   ═══════════════════════════════════════════ */

/* Card avec bordure colorée */
.card.border-primary {
    border-color: #7367f0 !important;
}

.card.border-success {
    border-color: #28c76f !important;
}

.card.border-warning {
    border-color: #ff9f43 !important;
}

.card.border-danger {
    border-color: #ea5455 !important;
}

/* ═══════════════════════════════════════════
   DPE / GES Badges
   ═══════════════════════════════════════════ */

.dpe-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 4px;
}

.dpe-a, .ges-a { background-color: #319834; color: white; }
.dpe-b, .ges-b { background-color: #33cc31; color: white; }
.dpe-c, .ges-c { background-color: #cbfc33; color: #333; }
.dpe-d, .ges-d { background-color: #fbfe06; color: #333; }
.dpe-e, .ges-e { background-color: #fbcc05; color: #333; }
.dpe-f, .ges-f { background-color: #f7961d; color: white; }
.dpe-g, .ges-g { background-color: #eb1b24; color: white; }

/* ═══════════════════════════════════════════
   Statistiques et KPIs
   ═══════════════════════════════════════════ */

.kpi-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════
   Responsive adjustments
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .bien-type-icon {
        width: 36px;
        height: 36px;
    }
    
    .bien-type-icon.bien-type-lg {
        width: 40px;
        height: 40px;
    }
}

/* ═══════════════════════════════════════════
   Dark mode support (si activé)
   ═══════════════════════════════════════════ */

[data-theme="dark"] .bg-label-purple,
.dark-style .bg-label-purple {
    background-color: rgba(168, 85, 247, 0.24) !important;
}

[data-theme="dark"] .bg-label-indigo,
.dark-style .bg-label-indigo {
    background-color: rgba(99, 102, 241, 0.24) !important;
}

[data-theme="dark"] .bg-label-pink,
.dark-style .bg-label-pink {
    background-color: rgba(236, 72, 153, 0.24) !important;
}

[data-theme="dark"] .bg-label-teal,
.dark-style .bg-label-teal {
    background-color: rgba(20, 184, 166, 0.24) !important;
}

[data-theme="dark"] .bg-label-orange,
.dark-style .bg-label-orange {
    background-color: rgba(249, 115, 22, 0.24) !important;
}

/* ═══════════════════════════════════════════
   Admin Menu Dark Theme - Text Visibility Fix
   ═══════════════════════════════════════════ */

/* Admin menu with dark background */
.layout-menu.bg-dark {
    background-color: #1e1e2d !important;
}

.layout-menu.bg-dark .menu-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.layout-menu.bg-dark .menu-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.layout-menu.bg-dark .menu-item.active > .menu-link {
    color: #fff !important;
    background-color: rgba(234, 84, 85, 0.2) !important;
}

.layout-menu.bg-dark .menu-header {
    color: rgba(255, 255, 255, 0.5) !important;
}

.layout-menu.bg-dark .menu-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

.layout-menu.bg-dark .menu-item.active .menu-icon {
    color: #ea5455 !important;
}

.layout-menu.bg-dark .menu-link div {
    color: inherit !important;
}

/* ═══════════════════════════════════════════
   Menu icon fix - Hide fallback squares
   (fixes missing icon glyphs appearing as squares)
   ═══════════════════════════════════════════ */

/* Ensure menu icons have no background box */
.layout-menu .menu-icon,
.menu-vertical .menu-icon {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* For dark menu, ensure icon backgrounds are transparent */
.menu-dark .menu-icon,
.layout-menu-dark .menu-icon,
.bg-menu-theme-dark .menu-icon,
[data-menu-bg="dark"] .menu-icon {
    background: transparent !important;
    background-color: transparent !important;
}

/* Hide icon pseudo-elements that might show as boxes */
.layout-menu .menu-icon::before,
.layout-menu .menu-icon::after {
    background: transparent !important;
    box-shadow: none !important;
}

/* Tabler icon fallback fix */
.ti:not(:empty)::before {
    /* If icon has content but glyph missing, hide it */
}

/* Ensure icons inherit text color in dark mode */
.menu-dark .menu-link .menu-icon i,
.layout-menu-dark .menu-link .menu-icon i,
.menu-dark .menu-icon,
.layout-menu-dark .menu-icon {
    color: inherit !important;
}