/**
 * LIFOX Platform - Design Vona-Inspired
 * Minimal Admin Dashboard - Clean & Ergonomic
 * Version 11.0
 */

/* ============================================
   GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================
   VARIABLES & RESET
   ============================================ */
:root {
    /* Primary */
    --ins-primary: #111827;
    --ins-secondary: #6366f1;
    --ins-success: #22c55e;
    --ins-info: #06b6d4;
    --ins-warning: #eab308;
    --ins-danger: #ef4444;

    /* Grays */
    --ins-gray-100: #f3f4f6;
    --ins-gray-200: #e5e7eb;
    --ins-gray-300: #d1d5db;
    --ins-gray-400: #9ca3af;
    --ins-gray-500: #6b7280;
    --ins-gray-600: #4b5563;
    --ins-gray-700: #374151;
    --ins-gray-800: #1f2937;
    --ins-gray-900: #111827;

    /* Backgrounds */
    --ins-body-bg: #f9f9f9;
    --ins-card-bg: #ffffff;
    --ins-border-color: #e5e7eb;

    /* Subtle backgrounds */
    --ins-primary-subtle: #dbdcdf;
    --ins-secondary-subtle: #e8e8fd;
    --ins-success-subtle: #def6e7;
    --ins-info-subtle: #daf4f9;
    --ins-warning-subtle: #fcf4da;
    --ins-danger-subtle: #fde3e3;

    /* Text */
    --ins-body-color: #374151;
    --ins-heading-color: #111827;
    --ins-muted: #9ca3af;

    /* Shadows */
    --ins-shadow: 0px 1px 4px 0px rgba(130, 143, 163, 0.15);
    --ins-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --ins-shadow-md: 0 4px 8px rgba(0,0,0,0.08);
    --ins-shadow-lg: 0 8px 24px rgba(0,0,0,0.1);

    /* Radius */
    --ins-radius: 0.4rem;
    --ins-radius-sm: 0.3rem;
    --ins-radius-lg: 0.6rem;
    --ins-radius-xl: 1rem;

    /* Sidebar */
    --sidebar-width: 250px;
    --sidebar-icon-width: 60px;
    --sidebar-collapsed-width: 60px;
    --sidebar-bg: #ffffff;
    --sidebar-border: #e5e7eb;
    --sidebar-item-color: #4b5563;
    --sidebar-item-hover-bg: #f3f4f6;
    --sidebar-item-active-bg: #111827;
    --sidebar-item-active-color: #ffffff;

    /* Transitions */
    --ins-transition: all 0.15s ease-in-out;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.lifox-app {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--ins-body-bg);
    color: var(--ins-body-color);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.lifox-app-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
    position: relative;
}

.lifox-main {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 24px 40px 40px;
    background: var(--ins-body-bg);
    min-height: 100vh;
    width: calc(100% - var(--sidebar-width));
    max-width: none;
    transition: margin-left 0.25s ease-in-out, width 0.25s ease-in-out;
}

@media screen and (min-width: 1400px) {
    .lifox-main {
        padding: 24px 50px 50px;
    }
}

/* MOBILE OVERRIDE */
@media screen and (max-width: 900px) {
    .lifox-app-wrapper {
        display: block !important;
        overflow-x: hidden !important;
    }
    .lifox-main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 80px 16px 24px 16px !important;
        float: none !important;
        position: relative !important;
    }
    .lifox-sidebar:not(.open) {
        left: -320px !important;
        visibility: hidden;
    }
}

/* Suppression des soulignements */
.lifox-app-wrapper a,
.lifox-app-wrapper a:hover,
.lifox-app-wrapper a:focus,
.lifox-app-wrapper a:visited {
    text-decoration: none !important;
}

/* ============================================
   WORDPRESS THEME RESET
   ============================================ */
body.lifox-app,
body.lifox-app .site,
body.lifox-app .site-content,
body.lifox-app .content-area,
body.lifox-app .site-main,
body.lifox-app .entry-content,
body.lifox-app article,
body.lifox-app .post,
body.lifox-app .page,
body.lifox-app .container,
body.lifox-app .wrapper,
body.lifox-app .inner,
body.lifox-app .elementor-section,
body.lifox-app .elementor-container,
body.lifox-app .elementor-widget-wrap {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.lifox-app {
    margin: 0;
    padding: 0;
}

body.lifox-app #wpadminbar,
body.lifox-app header,
body.lifox-app footer,
body.lifox-app .site-header,
body.lifox-app .site-footer,
body.lifox-app .elementor-location-header,
body.lifox-app .elementor-location-footer {
    display: none !important;
}

body.lifox-app .site-content,
body.lifox-app .page-content,
body.lifox-app main.site-main,
body.lifox-app .elementor-page-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* ============================================
   SETTINGS PAGE LAYOUT
   ============================================ */
.lifox-settings-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    width: 100%;
}

.lifox-settings-main { min-width: 0; }
.lifox-settings-sidebar { min-width: 0; }

@media (max-width: 1200px) {
    .lifox-settings-layout {
        grid-template-columns: 1fr;
    }
    .lifox-settings-sidebar { order: -1; }
}

/* ============================================
   SIDEBAR - Vona Style (Light, Clean)
   ============================================ */
.lifox-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow: visible;
    border-right: 1px solid var(--sidebar-border);
    box-shadow: var(--ins-shadow);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lifox-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Logo Header */
.lifox-sidebar-header {
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--ins-border-color);
    display: flex;
    flex-direction: column;
    align-items: var(--logo-align, flex-start);
    text-align: var(--logo-text-align, left);
    min-height: 60px;
    justify-content: center;
    overflow: hidden;
}

.lifox-logo,
.lifox-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--logo-margin-top, 0px);
    margin-bottom: var(--logo-margin-bottom, 4px);
}

.lifox-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.lifox-logo img,
.lifox-logo-img {
    width: var(--logo-width, auto);
    height: var(--logo-height, 36px);
    max-width: 180px;
    min-height: 28px;
    object-fit: contain;
    display: block;
}

.lifox-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--ins-heading-color) !important;
    letter-spacing: -0.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.lifox-logo-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.lifox-logo-text span {
    color: var(--ins-secondary);
}

.lifox-logo-subtitle {
    font-size: 10px;
    color: var(--ins-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 2px;
    font-weight: 500;
    width: 100%;
}

/* Navigation */
.lifox-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
}

.lifox-sidebar-nav::-webkit-scrollbar { width: 4px; }
.lifox-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.lifox-sidebar-nav::-webkit-scrollbar-thumb { background: var(--ins-gray-300); border-radius: 3px; }

/* Nav Section Header */
.lifox-nav-section {
    margin-bottom: 2px;
}

.lifox-nav-section.first-section,
.lifox-nav-section.lifox-nav-section-first {
    margin-bottom: 0;
}

.lifox-nav-separator {
    height: 1px;
    background: var(--ins-border-color);
    margin: 12px 10px;
}

.lifox-nav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    color: var(--ins-muted);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    transition: var(--ins-transition);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    margin-top: 8px;
}

.lifox-nav-section-header:hover {
    background: var(--sidebar-item-hover-bg);
    color: var(--ins-gray-700);
}

.lifox-nav-section-header.active {
    color: var(--ins-secondary);
}

/* Force no orange/pink on active sections */
.lifox-nav-section-header.active,
.lifox-nav-section-header[aria-expanded="true"] {
    background: var(--ins-secondary-subtle) !important;
    color: var(--ins-secondary) !important;
}

.lifox-nav-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lifox-nav-section-title .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.lifox-nav-toggle {
    font-size: 12px;
    transition: transform 0.2s;
}

.lifox-nav-section-header.collapsed .lifox-nav-toggle {
    transform: rotate(-90deg);
}

/* Nav Content */
.lifox-nav-section-content {
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.3s ease;
}

.lifox-nav-section-content.collapsed {
    max-height: 0 !important;
}

/* Nav Items - Vona pill style */
.lifox-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    color: var(--sidebar-item-color);
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    margin: 1px 0;
    transition: color 0.15s ease-in-out, background 0.15s ease-in-out;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 34px;
}

/* Notification badge */
.lifox-nav-badge {
    min-width: 18px;
    height: 18px;
    background: #ef4444;
    color: #fff;
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    margin-left: auto;
    padding: 0 5px;
    line-height: 1;
}
.lifox-nav-badge:empty { display: none; }

.lifox-nav-item:hover,
.lifox-nav-item:focus {
    text-decoration: none !important;
    background: var(--sidebar-item-hover-bg);
    color: var(--ins-heading-color) !important;
}

.lifox-nav-item:hover .dashicons,
.lifox-nav-item:focus .dashicons {
    color: var(--ins-heading-color) !important;
}

.lifox-nav-item:visited {
    text-decoration: none !important;
    color: var(--sidebar-item-color);
}

.lifox-nav-item.active {
    background: var(--sidebar-item-active-bg) !important;
    color: var(--sidebar-item-active-color) !important;
    text-decoration: none !important;
    font-weight: 600;
}

.lifox-nav-item.active .dashicons {
    color: var(--sidebar-item-active-color) !important;
}

.lifox-nav-item.active .lifox-nav-badge {
    background: rgba(255,255,255,0.2);
}

.lifox-nav-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: inherit;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

/* Nav Link variant (alias for nav-item) */
.lifox-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    color: var(--sidebar-item-color);
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    transition: var(--ins-transition);
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 34px;
    text-decoration: none !important;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.lifox-nav-link:hover {
    background: var(--sidebar-item-hover-bg);
    color: var(--ins-heading-color);
}

.lifox-nav-link.active {
    background: var(--sidebar-item-active-bg);
    color: var(--sidebar-item-active-color);
}

.lifox-nav-link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Sidebar Footer - User Card */
.lifox-sidebar-footer {
    padding: 10px;
    border-top: 1px solid var(--ins-border-color);
    background: var(--ins-gray-100);
    overflow: hidden;
}

.lifox-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
    text-decoration: none !important;
}

.lifox-user-card-link {
    cursor: pointer;
    transition: var(--ins-transition);
}

.lifox-user-card-link:hover {
    background: var(--ins-gray-200);
}

.lifox-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--sidebar-item-active-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.lifox-user-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
}

.lifox-user-info {
    flex: 1;
    min-width: 0;
}

.lifox-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ins-heading-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lifox-user-role {
    font-size: 10px;
    color: var(--ins-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lifox-user-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 600;
    border-radius: 50rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.lifox-user-badge.essentiel { background: var(--ins-info-subtle); color: #0891b2; }
.lifox-user-badge.confort { background: var(--ins-success-subtle); color: #16a34a; }
.lifox-user-badge.pro { background: var(--ins-secondary-subtle); color: #4f46e5; }
.lifox-user-badge.elite { background: var(--ins-secondary-subtle); color: #4f46e5; }
.lifox-user-badge.admin { background: var(--ins-primary-subtle); color: var(--ins-primary); }
.lifox-user-badge.donneur { background: var(--ins-success-subtle); color: #0d9488; }

.lifox-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lifox-sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--ins-gray-100);
    color: var(--ins-gray-600);
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ins-transition);
    text-decoration: none;
}

.lifox-sidebar-btn:hover {
    background: var(--ins-gray-200);
    color: var(--ins-heading-color);
}

.lifox-sidebar-btn.logout:hover {
    background: var(--ins-danger-subtle);
    color: var(--ins-danger);
    border-color: var(--ins-danger);
}

/* ============================================
   PAGE HEADER - Vona style
   ============================================ */
.lifox-page-header {
    margin-bottom: 16px;
    background: var(--ins-card-bg);
    padding: 16px 20px;
    border-radius: var(--ins-radius-xl);
    border: 1px solid var(--ins-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lifox-page-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ins-heading-color);
    margin: 0 0 2px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.lifox-page-subtitle {
    font-size: 12px;
    color: var(--ins-muted);
    margin: 0;
}

.lifox-page-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Archive filter tabs */
.lifox-filter-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.lifox-filter-tab {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--ins-border-color);
    background: var(--ins-card-bg);
    color: var(--ins-muted);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.lifox-filter-tab:hover {
    border-color: var(--ins-gray-300);
    color: var(--ins-heading-color);
}

.lifox-filter-tab.active {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
}

.lifox-filter-tab .lifox-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    background: rgba(0,0,0,0.1);
}

.lifox-filter-tab.active .lifox-tab-count {
    background: rgba(255,255,255,0.2);
}

/* ============================================
   STATS CARDS - Vona Minimal
   ============================================ */
.lifox-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.lifox-stat-card {
    background: var(--ins-card-bg);
    border-radius: 10px;
    padding: 14px;
    box-shadow: var(--ins-shadow-sm);
    border: 1px solid var(--ins-border-color);
    transition: var(--ins-transition);
    position: relative;
    overflow: hidden;
}

.lifox-stat-card:hover {
    box-shadow: var(--ins-shadow-md);
}

/* Card accent lines removed - clean minimal look */
.lifox-stat-card::before { display: none; }

/* Card Colors - subtle top border */
.lifox-stat-card.blue { border-top: 2px solid #3b82f6; }
.lifox-stat-card.green { border-top: 2px solid var(--ins-success); }
.lifox-stat-card.orange { border-top: 2px solid var(--ins-secondary); }
.lifox-stat-card.purple { border-top: 2px solid #8b5cf6; }
.lifox-stat-card.teal { border-top: 2px solid #14b8a6; }
.lifox-stat-card.indigo { border-top: 2px solid var(--ins-secondary); }

.lifox-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.lifox-stat-card.blue .lifox-stat-icon { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.lifox-stat-card.green .lifox-stat-icon { background: var(--ins-success-subtle); color: var(--ins-success); }
.lifox-stat-card.orange .lifox-stat-icon { background: var(--ins-secondary-subtle); color: var(--ins-secondary); }
.lifox-stat-card.purple .lifox-stat-icon { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.lifox-stat-card.teal .lifox-stat-icon { background: rgba(20, 184, 166, 0.1); color: #14b8a6; }
.lifox-stat-card.indigo .lifox-stat-icon { background: var(--ins-secondary-subtle); color: var(--ins-secondary); }

.lifox-stat-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.lifox-stat-value {
    font-size: 19px;
    font-weight: 700;
    color: var(--ins-heading-color);
    line-height: 1.2;
}

.lifox-stat-label {
    font-size: 11px;
    color: var(--ins-muted);
    font-weight: 500;
    margin-top: 4px;
}

/* ============================================
   SECTIONS
   ============================================ */
.lifox-section {
    margin-bottom: 24px;
}

.lifox-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.lifox-section-icon {
    font-size: 18px;
    color: var(--ins-muted);
}

.lifox-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ins-heading-color);
}

/* ============================================
   ACTIONS RAPIDES
   ============================================ */
.lifox-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.lifox-action-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ins-card-bg);
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-radius-xl);
    cursor: pointer;
    transition: var(--ins-transition);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--ins-shadow);
}

.lifox-action-card:hover {
    box-shadow: var(--ins-shadow-md);
    border-color: var(--ins-gray-300);
}

.lifox-action-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ins-radius);
    background: rgba(59, 130, 246, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    flex-shrink: 0;
}

.lifox-action-icon .dashicons {
    font-size: 17px;
    width: 17px;
    height: 17px;
}

.lifox-action-icon.green { background: var(--ins-success-subtle); color: var(--ins-success); }
.lifox-action-icon.orange { background: var(--ins-secondary-subtle); color: var(--ins-secondary); }
.lifox-action-icon.purple { background: rgba(139, 92, 246, 0.08); color: #8b5cf6; }
.lifox-action-icon.teal { background: rgba(20, 184, 166, 0.08); color: #14b8a6; }
.lifox-action-icon.indigo { background: var(--ins-secondary-subtle); color: var(--ins-secondary); }

.lifox-action-content h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--ins-heading-color);
    margin-bottom: 1px;
}

.lifox-action-content p {
    font-size: 12px;
    color: var(--ins-muted);
    margin: 0;
}

/* ============================================
   CARDS - Vona style
   ============================================ */
.lifox-card {
    background: var(--ins-card-bg);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: var(--ins-shadow-sm);
    border: 1px solid var(--ins-border-color);
    margin-bottom: 14px;
}

.lifox-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ins-border-color);
}

.lifox-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ins-heading-color);
}

/* Force lisibilité */
.lifox-card h3,
.lifox-card-header h3,
.lifox-card .lifox-card-title {
    color: var(--ins-heading-color) !important;
    font-weight: 600 !important;
}

.lifox-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ins-heading-color) !important;
    margin-bottom: 6px;
}

.lifox-card p,
.lifox-form-group p {
    color: var(--ins-gray-500);
}

/* ============================================
   TABLES - Vona clean style
   ============================================ */
.lifox-table-container {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.02);
}

.lifox-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    line-height: 1.5;
}

.lifox-table thead {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.lifox-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.lifox-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 12px;
    vertical-align: middle;
}

.lifox-table tbody tr {
    transition: all 0.2s ease;
}

.lifox-table tbody tr:hover {
    background: linear-gradient(135deg, rgba(59,130,246,0.02), rgba(99,102,241,0.04));
}

.lifox-table tbody tr:last-child td {
    border-bottom: none;
}

.lifox-table tbody tr.clickable-row { cursor: pointer; }
.lifox-table tbody tr.clickable-row:hover { transform: translateX(2px); }

/* User cell */
.lifox-table-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lifox-table-user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.lifox-table-user-name {
    font-weight: 600;
    color: var(--ins-heading-color);
}

.lifox-table-user-email {
    font-size: 12px;
    color: var(--ins-muted);
}

/* ============================================
   BADGES - Vona pill style
   ============================================ */
.lifox-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--ins-radius);
    white-space: nowrap;
}

.lifox-badge.primary { background: var(--ins-primary-subtle); color: var(--ins-primary); }
.lifox-badge.success { background: var(--ins-success-subtle); color: #16a34a; }
.lifox-badge.warning { background: var(--ins-warning-subtle); color: #a16207; }
.lifox-badge.danger { background: var(--ins-danger-subtle); color: var(--ins-danger); }
.lifox-badge.error { background: var(--ins-danger-subtle); color: var(--ins-danger); }
.lifox-badge.info { background: var(--ins-info-subtle); color: #0891b2; }
.lifox-badge.default { background: #f1f5f9; color: #475569; }
.lifox-badge.neutral { background: var(--ins-gray-100); color: var(--ins-gray-600); }

/* ============================================
   BUTTONS - Vona style
   ============================================ */
.lifox-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.5;
}

.lifox-btn:hover,
.lifox-btn:focus,
.lifox-btn:visited {
    text-decoration: none !important;
}

.lifox-btn.small,
.lifox-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: var(--ins-radius-sm);
    gap: 4px;
}

.lifox-btn.small .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.lifox-btn-primary,
.lifox-btn.primary {
    background: var(--ins-primary) !important;
    color: #fff !important;
    border-color: var(--ins-primary) !important;
    box-shadow: 0px 2px 6px 0px rgba(17, 24, 39, 0.2);
}

.lifox-btn-primary:hover,
.lifox-btn.primary:hover {
    background: var(--ins-gray-800) !important;
    border-color: var(--ins-gray-800) !important;
    color: #fff !important;
}

.lifox-btn-secondary,
.lifox-btn.secondary {
    background: var(--ins-card-bg);
    color: var(--ins-gray-600);
    border: 1px solid var(--ins-border-color);
}

.lifox-btn-secondary:hover,
.lifox-btn.secondary:hover {
    background: var(--ins-gray-100);
    color: var(--ins-heading-color);
    border-color: var(--ins-gray-300);
}

.lifox-btn-success,
.lifox-btn.success {
    background: var(--ins-success);
    color: #fff;
    border-color: var(--ins-success);
    box-shadow: 0px 2px 6px 0px rgba(34, 197, 94, 0.2);
}

.lifox-btn-success:hover,
.lifox-btn.success:hover {
    background: #16a34a;
    border-color: #16a34a;
}

.lifox-btn-danger,
.lifox-btn.danger {
    background: var(--ins-gray-600);
    color: #fff;
    border-color: var(--ins-gray-600);
}

.lifox-btn-danger:hover,
.lifox-btn.danger:hover {
    background: var(--ins-gray-700);
    border-color: var(--ins-gray-700);
}

.lifox-btn-warning,
.lifox-btn.warning {
    background: var(--ins-secondary);
    color: #fff;
    border-color: var(--ins-secondary);
    box-shadow: 0px 2px 6px 0px rgba(99, 102, 241, 0.2);
}

.lifox-btn-info,
.lifox-btn.info {
    background: #8b5cf6;
    color: #fff;
    border-color: #8b5cf6;
    box-shadow: 0px 2px 6px 0px rgba(139, 92, 246, 0.2);
}

/* Icon buttons */
.lifox-btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ins-card-bg);
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-radius);
    color: var(--ins-gray-500);
    cursor: pointer;
    transition: var(--ins-transition);
    text-decoration: none !important;
    position: relative;
    vertical-align: middle;
    margin: 2px;
}

.lifox-btn-icon .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    pointer-events: none;
}

.lifox-btn-icon:hover {
    background: var(--ins-primary);
    border-color: var(--ins-primary);
    color: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(17, 24, 39, 0.2);
}

.lifox-btn-icon:active {
    box-shadow: none;
}

.lifox-btn-icon.danger:hover,
.lifox-btn-icon[title="Supprimer"]:hover,
.lifox-btn-icon[title="Refuser"]:hover,
.lifox-btn-icon[title="Rejeter"]:hover,
.lifox-btn-icon[title="Fermer"]:hover,
.lifox-btn-icon[title="Annuler"]:hover {
    background: var(--ins-danger);
    border-color: var(--ins-danger);
    color: #ffffff;
}

.lifox-btn-icon[title="Envoyer"]:hover,
.lifox-btn-icon[title="Email"]:hover {
    background: var(--ins-secondary);
    border-color: var(--ins-secondary);
    color: #ffffff;
}

.lifox-btn-icon[title="PDF"]:hover,
.lifox-btn-icon[title="Voir PDF"]:hover,
.lifox-btn-icon[title="Télécharger"]:hover {
    background: var(--ins-success);
    border-color: var(--ins-success);
    color: #ffffff;
}

td .lifox-btn-icon { margin: 1px; }
td { vertical-align: middle; }

/* Button disabled */
.lifox-btn:disabled,
.lifox-btn-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tooltip */
.lifox-btn-icon[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ins-gray-900);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--ins-radius-sm);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}

.lifox-btn-icon[title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--ins-gray-900);
    z-index: 100;
    pointer-events: none;
}

/* Spinner */
.lifox-btn .lifox-spinner,
.lifox-btn-icon .lifox-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   FORMS - Vona style
   ============================================ */
.lifox-form-group {
    margin-bottom: 16px;
}

.lifox-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ins-heading-color);
    margin-bottom: 6px;
}

.lifox-form-input,
.lifox-form-select,
.lifox-form-textarea {
    width: 100%;
    padding: 8px 14px;
    font-size: 14px;
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-radius);
    background: var(--ins-card-bg);
    background-color: #ffffff !important;
    color: var(--ins-body-color);
    color: var(--ins-heading-color) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.lifox-form-input::placeholder,
.lifox-form-textarea::placeholder {
    color: var(--ins-muted) !important;
}

.lifox-form-input:focus,
.lifox-form-select:focus,
.lifox-form-textarea:focus {
    outline: none;
    border-color: var(--ins-gray-700);
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.lifox-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* ============================================
   MODALS - Vona clean style
   ============================================ */
.lifox-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

.lifox-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lifox-modal {
    background: var(--ins-card-bg);
    border-radius: var(--ins-radius-xl);
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--ins-border-color);
}

.lifox-modal-overlay.active .lifox-modal {
    transform: scale(1) translateY(0);
}

.lifox-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ins-border-color);
    background: var(--ins-card-bg);
}

.lifox-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ins-heading-color);
}

.lifox-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ins-gray-100);
    border: none;
    border-radius: var(--ins-radius);
    cursor: pointer;
    font-size: 18px;
    color: var(--ins-muted);
    transition: var(--ins-transition);
}

.lifox-modal-close:hover {
    background: var(--ins-gray-200);
    color: var(--ins-heading-color);
}

.lifox-modal-body {
    padding: 20px;
    max-height: calc(85vh - 140px);
    overflow-y: auto;
}

.lifox-modal-body::-webkit-scrollbar { width: 4px; }
.lifox-modal-body::-webkit-scrollbar-track { background: transparent; }
.lifox-modal-body::-webkit-scrollbar-thumb { background: var(--ins-gray-300); border-radius: 4px; }

.lifox-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--ins-border-color);
    background: var(--ins-gray-100);
}

/* Quick Modal */
.lifox-quick-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    transition: all 0.3s ease;
    padding: 20px;
}

.lifox-quick-modal-overlay.active { opacity: 1; }

.lifox-quick-modal {
    background: var(--ins-card-bg);
    border-radius: var(--ins-radius-xl);
    max-width: 640px;
    width: 90%;
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
    position: relative;
    transform: scale(0.95) translateY(10px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--ins-border-color);
}

.lifox-quick-modal-overlay.active .lifox-quick-modal {
    transform: scale(1) translateY(0);
}

.lifox-quick-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--ins-gray-100);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: var(--ins-radius);
    font-size: 18px;
    cursor: pointer;
    color: var(--ins-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ins-transition);
    z-index: 1;
}

.lifox-quick-modal-close:hover {
    background: var(--ins-gray-200);
    color: var(--ins-heading-color);
}

.lifox-quick-modal-content { padding: 24px; }

.lifox-quick-modal-content table {
    width: 100%;
    border-collapse: collapse;
}

.lifox-quick-modal-content table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ins-gray-200);
    font-size: 14px;
}

.lifox-quick-modal-content table td:first-child {
    font-weight: 600;
    color: var(--ins-gray-500);
    width: 38%;
    font-size: 13px;
}

.lifox-quick-modal::-webkit-scrollbar { width: 4px; }
.lifox-quick-modal::-webkit-scrollbar-thumb { background: var(--ins-gray-300); border-radius: 4px; }

/* ============================================
   EMPTY STATE
   ============================================ */
.lifox-empty-state {
    text-align: center;
    padding: 36px 24px;
    background: var(--ins-card-bg);
    border-radius: var(--ins-radius-xl);
    border: 1px dashed var(--ins-border-color);
}

.lifox-empty-icon {
    font-size: 40px;
    color: var(--ins-gray-300);
    margin-bottom: 12px;
}

.lifox-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ins-heading-color);
    margin-bottom: 4px;
}

.lifox-empty-text {
    font-size: 13px;
    color: var(--ins-muted);
    margin-bottom: 20px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.lifox-empty-state .lifox-btn {
    background: var(--ins-primary) !important;
    color: #fff !important;
    border-color: var(--ins-primary) !important;
}

.lifox-empty-state .lifox-btn:hover {
    background: var(--ins-gray-800) !important;
    border-color: var(--ins-gray-800) !important;
}

/* ============================================
   ALERTS
   ============================================ */
.lifox-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--ins-radius-lg);
    margin-bottom: 16px;
    border: 1px solid;
}

.lifox-alert.info {
    background: var(--ins-info-subtle);
    border-color: rgba(6, 182, 212, 0.2);
    color: #0e7490;
}

.lifox-alert.success {
    background: var(--ins-success-subtle);
    border-color: rgba(34, 197, 94, 0.2);
    color: #15803d;
}

.lifox-alert.warning {
    background: var(--ins-warning-subtle);
    border-color: rgba(234, 179, 8, 0.2);
    color: #a16207;
}

.lifox-alert.danger {
    background: var(--ins-danger-subtle);
    border-color: rgba(239, 68, 68, 0.2);
    color: #b91c1c;
}

.lifox-alert-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.lifox-alert.info .lifox-alert-icon { color: var(--ins-info); }
.lifox-alert.success .lifox-alert-icon { color: var(--ins-success); }
.lifox-alert.warning .lifox-alert-icon { color: var(--ins-warning); }
.lifox-alert.danger .lifox-alert-icon { color: var(--ins-danger); }

.lifox-alert-content { flex: 1; }

.lifox-alert-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.lifox-alert-text {
    font-size: 13px;
}

/* Inline alert legacy */
.ll-alert { padding: 12px 16px; border-radius: var(--ins-radius-lg); margin-bottom: 12px; font-size: 14px; }
.ll-alert.err { background: var(--ins-danger-subtle); color: #b91c1c; border: 1px solid rgba(239,68,68,0.2); }
.ll-alert.ok { background: var(--ins-success-subtle); color: #15803d; border: 1px solid rgba(34,197,94,0.2); }

/* ============================================
   TABS - Vona segment control
   ============================================ */
.lifox-tabs {
    display: flex;
    gap: 2px;
    background: var(--ins-gray-100);
    padding: 3px;
    border-radius: var(--ins-radius);
    margin-bottom: 20px;
    width: fit-content;
    border: 1px solid var(--ins-border-color);
}

.lifox-tab {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ins-gray-500);
    background: transparent;
    border: none;
    border-radius: var(--ins-radius-sm);
    cursor: pointer;
    transition: var(--ins-transition);
}

.lifox-tab:hover {
    color: var(--ins-heading-color);
}

.lifox-tab.active {
    background: var(--ins-card-bg);
    color: var(--ins-heading-color);
    box-shadow: var(--ins-shadow-sm);
    font-weight: 600;
}

/* ============================================
   PRICING
   ============================================ */
.lifox-pricing-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 48px;
}

.lifox-pricing-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    color: var(--ins-heading-color);
}

.lifox-pricing-subtitle {
    font-size: 16px;
    color: var(--ins-gray-500);
}

.lifox-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

.lifox-pricing-card {
    background: var(--ins-card-bg);
    border-radius: var(--ins-radius-xl);
    padding: 28px;
    border: 1px solid var(--ins-border-color);
    transition: var(--ins-transition);
    position: relative;
    box-shadow: var(--ins-shadow);
}

.lifox-pricing-card:hover {
    box-shadow: var(--ins-shadow-lg);
}

.lifox-pricing-card.featured {
    border-color: var(--ins-secondary);
    border-width: 2px;
}

.lifox-pricing-card.featured::before {
    content: 'POPULAIRE';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ins-secondary);
    color: #fff;
    padding: 4px 14px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50rem;
    letter-spacing: 0.5px;
}

.lifox-pricing-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--ins-heading-color);
}

.lifox-pricing-price {
    font-size: 36px;
    font-weight: 700;
    color: var(--ins-heading-color);
    margin-bottom: 8px;
    letter-spacing: -1px;
}

.lifox-pricing-price span {
    font-size: 14px;
    color: var(--ins-muted);
    font-weight: 500;
}

.lifox-pricing-desc {
    font-size: 13px;
    color: var(--ins-gray-500);
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ins-border-color);
}

.lifox-pricing-features {
    list-style: none;
    margin-bottom: 24px;
}

.lifox-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ins-gray-600);
}

.lifox-pricing-features li .dashicons {
    color: var(--ins-success);
    font-size: 16px;
    flex-shrink: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.lifox-animate-in {
    animation: fadeIn 0.3s ease forwards;
}

.lifox-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ins-gray-200);
    border-top-color: var(--ins-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

/* ============================================
   WORKFLOW TIMELINE
   ============================================ */
.lifox-timeline {
    position: relative;
    padding-left: 32px;
}

.lifox-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ins-gray-200);
}

.lifox-timeline-item {
    position: relative;
    padding-bottom: 24px;
}

.lifox-timeline-item:last-child { padding-bottom: 0; }

.lifox-timeline-dot {
    position: absolute;
    left: -27px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ins-primary);
    border: 3px solid var(--ins-card-bg);
    box-shadow: var(--ins-shadow-sm);
}

.lifox-timeline-item.completed .lifox-timeline-dot { background: var(--ins-success); }
.lifox-timeline-item.pending .lifox-timeline-dot { background: var(--ins-secondary); }

.lifox-timeline-content {
    background: var(--ins-card-bg);
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-radius-lg);
    padding: 14px;
}

.lifox-timeline-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ins-heading-color);
    margin-bottom: 4px;
}

.lifox-timeline-text {
    font-size: 13px;
    color: var(--ins-gray-500);
}

.lifox-timeline-date {
    font-size: 12px;
    color: var(--ins-muted);
    margin-top: 6px;
}

/* ============================================
   UTILITIES
   ============================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--ins-muted); }
.text-primary { color: var(--ins-primary); }
.text-success { color: var(--ins-success); }
.text-danger { color: var(--ins-danger); }
.font-bold { font-weight: 700; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

/* ============================================
   DASHBOARD PAVÉS - Vona card sections
   ============================================ */
.lifox-dashboard-paves {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lifox-pave {
    background: var(--ins-card-bg);
    border-radius: var(--ins-radius-xl);
    border: 1px solid var(--ins-border-color);
    overflow: hidden;
    box-shadow: var(--ins-shadow);
}

.lifox-pave:hover {
    box-shadow: var(--ins-shadow-md);
}

.lifox-pave-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.lifox-pave-header:hover {
    background: var(--ins-gray-100);
}

.lifox-pave-icon {
    font-size: 20px;
}

.lifox-pave-header h3 {
    flex: 1;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ins-heading-color);
}

.lifox-pave-toggle {
    color: var(--ins-muted);
    transition: transform 0.2s;
}

.lifox-pave.collapsed .lifox-pave-toggle { transform: rotate(-90deg); }
.lifox-pave.collapsed .lifox-pave-content { display: none; }

.lifox-pave-content {
    padding: 0 20px 20px;
}

.lifox-pave-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.lifox-pave-item {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: var(--ins-gray-100);
    border-radius: var(--ins-radius-lg);
    text-decoration: none;
    transition: var(--ins-transition);
    border: 1px solid transparent;
}

.lifox-pave-item:hover {
    background: var(--ins-card-bg);
    border-color: var(--ins-border-color);
    box-shadow: var(--ins-shadow-sm);
}

.lifox-pave-item.alert {
    background: var(--ins-danger-subtle);
    border-color: rgba(239, 68, 68, 0.15);
}

.lifox-pave-item.highlight-green {
    background: var(--ins-success-subtle);
    border-color: rgba(34, 197, 94, 0.15);
}

.lifox-pave-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--ins-heading-color);
    line-height: 1.2;
}

.lifox-pave-item.alert .lifox-pave-value { color: var(--ins-danger); }
.lifox-pave-item.highlight-green .lifox-pave-value { color: var(--ins-success); }

.lifox-pave-label {
    font-size: 12px;
    color: var(--ins-muted);
    margin-top: 4px;
    font-weight: 500;
}

.lifox-pave-help {
    font-size: 12px;
    color: var(--ins-muted);
    font-style: normal;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--ins-border-color);
}

/* Pavé couleurs */
.lifox-pave.blue .lifox-pave-header { border-left: 3px solid #3b82f6; }
.lifox-pave.green .lifox-pave-header { border-left: 3px solid var(--ins-success); }
.lifox-pave.purple .lifox-pave-header { border-left: 3px solid #8b5cf6; }
.lifox-pave.orange .lifox-pave-header { border-left: 3px solid var(--ins-secondary); }
.lifox-pave.indigo .lifox-pave-header { border-left: 3px solid var(--ins-secondary); }
.lifox-pave.dark .lifox-pave-header {
    border-left: 3px solid var(--ins-primary);
    background: var(--ins-gray-900);
}
.lifox-pave.dark .lifox-pave-header h3 { color: #fff; }
.lifox-pave.dark .lifox-pave-icon { filter: grayscale(1) brightness(2); }
.lifox-pave.dark .lifox-pave-toggle { color: rgba(255,255,255,0.5); }

/* Pavé Actions */
.lifox-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.lifox-actions-buttons .lifox-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lifox-actions-more {
    background: var(--ins-gray-100);
    border-radius: var(--ins-radius-lg);
    padding: 14px 16px;
}

.lifox-actions-more p {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: var(--ins-heading-color);
}

.lifox-actions-more ul { margin: 0; padding: 0; list-style: none; }

.lifox-actions-more li {
    padding: 6px 0;
    border-bottom: 1px solid var(--ins-border-color);
}

.lifox-actions-more li:last-child { border-bottom: none; }

.lifox-actions-more a {
    color: var(--ins-secondary);
    text-decoration: none;
    font-size: 13px;
}

.lifox-actions-more a:hover { text-decoration: underline; }

/* ============================================
   RESPONSIVE - TABLETTE
   ============================================ */

/* Hamburger mobile */
.lifox-mobile-toggle {
    display: none !important;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10001;
    width: 44px;
    height: 44px;
    background: var(--ins-primary);
    border: none;
    border-radius: var(--ins-radius-lg);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ins-shadow-md);
}

.lifox-mobile-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: relative;
    transition: var(--ins-transition);
    border-radius: 2px;
}

.lifox-mobile-toggle span::before,
.lifox-mobile-toggle span::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: #fff;
    transition: var(--ins-transition);
    border-radius: 2px;
}

.lifox-mobile-toggle span::before { top: -6px; }
.lifox-mobile-toggle span::after { top: 6px; }

.lifox-mobile-toggle.active span { background: transparent; }
.lifox-mobile-toggle.active span::before { transform: rotate(45deg); top: 0; }
.lifox-mobile-toggle.active span::after { transform: rotate(-45deg); top: 0; }

/* Overlay mobile */
.lifox-sidebar-overlay {
    display: none !important;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.lifox-sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Activity feed */
.lifox-activity-feed {
    background: var(--ins-card-bg);
    border-radius: var(--ins-radius-xl);
    border: 1px solid var(--ins-border-color);
    padding: 16px;
    margin-top: 16px;
    box-shadow: var(--ins-shadow);
}

.lifox-activity-feed h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ins-heading-color);
}

.lifox-activity-list {
    max-height: 300px;
    overflow-y: auto;
}

.lifox-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ins-gray-200);
}

.lifox-activity-item:last-child { border-bottom: none; }

.lifox-activity-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--ins-radius);
    background: var(--ins-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.lifox-activity-icon.blue { background: rgba(59, 130, 246, 0.08); color: #3b82f6; }
.lifox-activity-icon.green { background: var(--ins-success-subtle); color: var(--ins-success); }
.lifox-activity-icon.orange { background: var(--ins-secondary-subtle); color: var(--ins-secondary); }
.lifox-activity-icon.indigo { background: var(--ins-secondary-subtle); color: var(--ins-secondary); }
.lifox-activity-icon.purple { background: rgba(139, 92, 246, 0.08); color: #8b5cf6; }
.lifox-activity-icon.red { background: var(--ins-danger-subtle); color: var(--ins-danger); }

.lifox-activity-content { flex: 1; min-width: 0; }

.lifox-activity-text {
    font-size: 13px;
    color: var(--ins-body-color);
    line-height: 1.4;
}

.lifox-activity-text strong { font-weight: 600; color: var(--ins-heading-color); }

.lifox-activity-time {
    font-size: 12px;
    color: var(--ins-muted);
    margin-top: 2px;
}

/* Dashboard grid layout */
.lifox-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.lifox-dashboard-grid .lifox-pave { break-inside: avoid; }
.lifox-dashboard-grid-full { grid-column: 1 / -1; }

@media (max-width: 1100px) {
    .lifox-dashboard-grid { grid-template-columns: 1fr; }
}

/* ============================================
   TABLETTE (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    :root { --sidebar-width: 240px; }

    .lifox-main { padding: 24px 24px; }

    .lifox-pave-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .lifox-stats-grid { grid-template-columns: repeat(2, 1fr); }

    .lifox-table th,
    .lifox-table td {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* ============================================
   MOBILE LARGE (max-width: 900px)
   ============================================ */
@media (max-width: 900px) {
    .lifox-mobile-header { display: flex !important; }
    .lifox-sidebar-overlay { display: block !important; }

    .lifox-sidebar {
        position: fixed !important;
        left: -320px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        z-index: 10002 !important;
        transition: left 0.25s ease-in-out, visibility 0s linear 0.25s !important;
        transform: none !important;
        visibility: hidden;
    }

    .lifox-sidebar.open {
        left: 0 !important;
        visibility: visible;
        transition: left 0.25s ease-in-out, visibility 0s !important;
        box-shadow: 8px 0 24px rgba(0,0,0,0.15);
    }

    .lifox-main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 80px 16px 24px 16px !important;
        min-width: 0 !important;
    }

    .lifox-app-wrapper {
        display: block !important;
        overflow-x: hidden !important;
    }

    .lifox-page-header { padding: 16px !important; }
    .lifox-page-title { font-size: 18px !important; }
    .lifox-page-subtitle { font-size: 12px !important; }

    .lifox-dashboard-grid { grid-template-columns: 1fr !important; }
}

/* ============================================
   TABLETTE PORTRAIT (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    .lifox-main { padding: 70px 14px 16px; }

    .lifox-pave-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .lifox-pave-item { padding: 12px; }
    .lifox-pave-value { font-size: 20px; }
    .lifox-pave-label { font-size: 11px; }
    .lifox-pave-header h3 { font-size: 14px; }

    .lifox-actions-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .lifox-actions-buttons .lifox-btn {
        width: 100%;
        justify-content: center;
    }

    .lifox-stats-grid,
    .lifox-pricing-grid { grid-template-columns: 1fr; }

    .lifox-actions-grid { grid-template-columns: 1fr; }
    .lifox-form-row { grid-template-columns: 1fr; gap: 12px; }

    .lifox-table-container {
        overflow-x: auto;
        margin: 0 -14px;
        padding: 0 14px;
    }

    .lifox-table { min-width: 600px; }

    .lifox-page-header-flex {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .lifox-page-header-flex .lifox-btn {
        width: 100%;
        justify-content: center;
    }

    .lifox-card { padding: 16px; border-radius: var(--ins-radius-lg); }

    .lifox-modal {
        width: 100%;
        max-width: none;
        max-height: 90vh;
        border-radius: var(--ins-radius-lg);
    }

    .lifox-modal-body { max-height: 60vh; padding: 16px; }
    .lifox-modal-header { padding: 14px 16px; }

    .lifox-modal-footer {
        padding: 12px 16px;
        flex-direction: column;
    }

    .lifox-modal-footer .lifox-btn {
        width: 100%;
        justify-content: center;
    }

    .lifox-quick-modal { width: 95%; max-height: 85vh; }
    .lifox-quick-modal-content { padding: 16px; }

    .lifox-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        margin-bottom: 16px;
    }

    .lifox-tab { flex-shrink: 0; padding: 8px 14px; font-size: 12px; }
    .lifox-activity-feed { padding: 14px; margin-top: 12px; }
    .lifox-stat-card { padding: 14px; }
    .lifox-stat-value { font-size: 22px; }
    .lifox-action-card { padding: 14px; }
}

/* ============================================
   MOBILE SMALL (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    .lifox-main { padding: 65px 12px 12px; }

    .lifox-mobile-toggle {
        width: 36px;
        height: 36px;
    }

    .lifox-page-title { font-size: 17px; }
    .lifox-page-subtitle { font-size: 12px; }

    .lifox-pave-grid { grid-template-columns: 1fr; }

    .lifox-pave-item {
        padding: 14px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .lifox-pave-value { font-size: 18px; order: 2; }
    .lifox-pave-label { font-size: 12px; order: 1; text-align: left; }
    .lifox-pave-header { padding: 14px 16px; }
    .lifox-pave-header h3 { font-size: 13px; }
    .lifox-pave-content { padding: 12px 16px 16px; }

    .lifox-btn { padding: 8px 14px; font-size: 12px; }
    .lifox-btn-icon { width: 32px; height: 32px; }

    .lifox-btn-icon[title]:hover::after,
    .lifox-btn-icon[title]:hover::before { display: none; }

    .lifox-form-input,
    .lifox-form-select,
    .lifox-form-textarea { padding: 8px 12px; font-size: 14px; }

    .lifox-form-label { font-size: 12px; }
    .lifox-alert { padding: 12px; font-size: 13px; }
    .lifox-badge { padding: 2px 8px; font-size: 10px; }
    .lifox-empty-state { padding: 32px 16px; }
    .lifox-empty-title { font-size: 15px; }
    .lifox-empty-text { font-size: 12px; }

    .lifox-activity-item { padding: 8px 0; }
    .lifox-activity-icon { width: 26px; height: 26px; }
    .lifox-activity-text { font-size: 12px; }

    /* Tables mobile cards */
    .lifox-table-mobile-cards .lifox-table thead { display: none; }

    .lifox-table-mobile-cards .lifox-table tbody tr {
        display: block;
        background: var(--ins-card-bg);
        border: 1px solid var(--ins-border-color);
        border-radius: var(--ins-radius-lg);
        margin-bottom: 10px;
        padding: 12px;
    }

    .lifox-table-mobile-cards .lifox-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid var(--ins-gray-200);
    }

    .lifox-table-mobile-cards .lifox-table td:last-child { border-bottom: none; }

    .lifox-table-mobile-cards .lifox-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 11px;
        color: var(--ins-gray-500);
        text-transform: uppercase;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .lifox-sidebar, .lifox-mobile-toggle, .lifox-sidebar-overlay, .lifox-btn, .lifox-modal-overlay { display: none !important; }
    .lifox-main { margin-left: 0 !important; padding: 20px !important; }
    .lifox-pave { break-inside: avoid; page-break-inside: avoid; }
    .lifox-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ============================================
   TOUCH INTERACTIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    .lifox-btn:active { transform: scale(0.98); }
    .lifox-pave-item:active { transform: scale(0.98); }
    .lifox-nav-item:active { background: var(--sidebar-item-hover-bg); }
    .lifox-btn-icon { min-width: 44px; min-height: 44px; }
    .lifox-form-input, .lifox-form-select { min-height: 44px; }
}

/* ============================================
   LIFOX AI ASSISTANT (JARVIS)
   ============================================ */
.lifox-ai-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ins-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: var(--ins-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: var(--ins-transition);
}

.lifox-ai-fab-icon {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1);
}

.lifox-ai-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.3);
}

.lifox-ai-fab.active { border-radius: var(--ins-radius-xl); }

.lifox-ai-panel {
    position: fixed;
    bottom: 88px;
    right: 24px;
    z-index: 99998;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 560px;
    background: var(--ins-card-bg);
    border-radius: var(--ins-radius-xl);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ins-border-color);
    animation: lifox-ai-slideUp 0.25s ease;
}

.lifox-ai-panel.open { display: flex; }

@keyframes lifox-ai-slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.lifox-ai-header {
    padding: 16px;
    background: var(--ins-primary);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lifox-ai-header-icon { font-size: 24px; }
.lifox-ai-header-info { flex: 1; }
.lifox-ai-header-info h4 { font-size: 15px; font-weight: 600; margin: 0; }
.lifox-ai-header-info span { font-size: 12px; opacity: 0.7; }

.lifox-ai-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.lifox-ai-btn-history,
.lifox-ai-btn-new,
.lifox-ai-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 30px; height: 30px;
    border-radius: var(--ins-radius);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.lifox-ai-btn-history:hover,
.lifox-ai-btn-new:hover,
.lifox-ai-close:hover { background: rgba(255,255,255,0.25); }

/* Conversation list */
.lifox-ai-conv-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.lifox-ai-conv-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ins-gray-200);
    font-size: 13px;
    color: var(--ins-heading-color);
}

.lifox-ai-conv-back {
    background: none;
    border: none;
    color: var(--ins-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: var(--ins-radius);
    transition: background 0.15s;
}

.lifox-ai-conv-back:hover { background: var(--ins-gray-100); }

.lifox-ai-conv-items {
    flex: 1;
    overflow-y: auto;
    max-height: 360px;
}

.lifox-ai-conv-item {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ins-gray-100);
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}

.lifox-ai-conv-item:hover { background: var(--ins-gray-50); }
.lifox-ai-conv-item.active { background: rgba(37,99,235,0.06); border-left: 3px solid var(--ins-primary); }

.lifox-ai-conv-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--ins-heading-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.lifox-ai-conv-item-meta {
    font-size: 11px;
    color: var(--ins-gray-400);
    margin-top: 3px;
}

.lifox-ai-conv-delete {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.15s;
    color: var(--ins-gray-400);
    padding: 4px;
}

.lifox-ai-conv-item:hover .lifox-ai-conv-delete { opacity: 1; }
.lifox-ai-conv-delete:hover { color: #ef4444; }

.lifox-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lifox-ai-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: var(--ins-radius-xl);
    font-size: 13px;
    line-height: 1.5;
}

.lifox-ai-msg.bot {
    background: var(--ins-gray-100);
    color: var(--ins-heading-color);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.lifox-ai-msg.user {
    background: var(--ins-primary);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.lifox-ai-msg.bot .lifox-ai-msg-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--ins-secondary);
    margin-bottom: 4px;
}

.lifox-ai-typing {
    display: flex; gap: 4px; padding: 10px 14px; align-self: flex-start;
}

.lifox-ai-typing span {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ins-gray-300);
    animation: lifox-ai-dot 1.4s ease-in-out infinite;
}

.lifox-ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.lifox-ai-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes lifox-ai-dot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.lifox-ai-suggestions {
    padding: 0 14px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lifox-ai-suggest-btn {
    padding: 6px 12px;
    background: var(--ins-gray-100);
    border: 1px solid var(--ins-border-color);
    border-radius: 50rem;
    font-size: 12px;
    color: var(--ins-gray-600);
    cursor: pointer;
    transition: var(--ins-transition);
    white-space: nowrap;
}

.lifox-ai-suggest-btn:hover {
    background: var(--ins-primary);
    color: #fff;
    border-color: var(--ins-primary);
}

.lifox-ai-input-wrap {
    padding: 10px 14px 14px;
    border-top: 1px solid var(--ins-gray-200);
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.lifox-ai-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-radius-lg);
    font-size: 13px;
    font-family: inherit;
    resize: none;
    min-height: 40px;
    max-height: 100px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s;
}

.lifox-ai-input:focus { border-color: var(--ins-gray-600); }

.lifox-ai-send {
    width: 40px;
    height: 40px;
    border-radius: var(--ins-radius-lg);
    background: var(--ins-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: var(--ins-transition);
    flex-shrink: 0;
}

.lifox-ai-send:hover { background: var(--ins-gray-800); }
.lifox-ai-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* AI Panel mobile */
@media (max-width: 768px) {
    .lifox-ai-panel {
        bottom: 0; right: 0; left: 0;
        width: 100%; max-width: 100%; max-height: 80vh;
        border-radius: var(--ins-radius-xl) var(--ins-radius-xl) 0 0;
    }
    .lifox-ai-fab { bottom: 16px; right: 16px; width: 48px; height: 48px; font-size: 20px; }
    .lifox-ai-fab-icon { width: 24px; height: 24px; }
}

/* ============================================
   MOBILE RESPONSIVE FIXES
   ============================================ */
@media (max-width: 900px) {
    .lifox-sidebar .lifox-sidebar-header {
        padding: 20px 16px 16px;
        min-height: 60px;
    }

    .lifox-sidebar .lifox-logo img { max-height: 36px; width: auto; }
    .lifox-sidebar .lifox-logo-text { font-size: 20px; }

    .lifox-sidebar.open {
        box-shadow: 8px 0 24px rgba(0,0,0,0.15);
    }

    .lifox-mobile-header {
        display: flex !important;
    }

    .lifox-main { padding-top: 72px !important; }

    .lifox-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lifox-table { min-width: 600px; }

    .lifox-ai-fab { z-index: 99999; }
}

/* ============================================
   DARK MODE OVERRIDE - Force sidebar dark
   ============================================ */
/* If admin settings force dark sidebar, override */
.lifox-sidebar[data-theme="dark"],
.lifox-sidebar.dark-sidebar {
    --sidebar-bg: #111827;
    --sidebar-border: #1f2937;
    --sidebar-item-color: #9ca3af;
    --sidebar-item-hover-bg: #1f2937;
    --sidebar-item-active-bg: #374151;
    --sidebar-item-active-color: #ffffff;
    background: var(--sidebar-bg);
    border-right-color: var(--sidebar-border);
}

.lifox-sidebar[data-theme="dark"] .lifox-logo-text,
.lifox-sidebar.dark-sidebar .lifox-logo-text {
    color: #ffffff !important;
}

.lifox-sidebar[data-theme="dark"] .lifox-user-card,
.lifox-sidebar.dark-sidebar .lifox-user-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.lifox-sidebar[data-theme="dark"] .lifox-user-name,
.lifox-sidebar.dark-sidebar .lifox-user-name {
    color: #fff;
}

.lifox-sidebar[data-theme="dark"] .lifox-sidebar-footer,
.lifox-sidebar.dark-sidebar .lifox-sidebar-footer {
    border-top-color: rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.2);
}

.lifox-sidebar[data-theme="dark"] .lifox-sidebar-btn,
.lifox-sidebar.dark-sidebar .lifox-sidebar-btn {
    background: rgba(255,255,255,0.05);
    color: #9ca3af;
    border-color: rgba(255,255,255,0.1);
}

.lifox-sidebar[data-theme="dark"] .lifox-sidebar-btn:hover,
.lifox-sidebar.dark-sidebar .lifox-sidebar-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.lifox-sidebar[data-theme="dark"] .lifox-nav-separator,
.lifox-sidebar.dark-sidebar .lifox-nav-separator {
    background: rgba(255,255,255,0.08);
}

.lifox-sidebar[data-theme="dark"] .lifox-logo-subtitle,
.lifox-sidebar.dark-sidebar .lifox-logo-subtitle {
    color: #6b7280;
}

.lifox-sidebar[data-theme="dark"] .lifox-sidebar-nav::-webkit-scrollbar-thumb,
.lifox-sidebar.dark-sidebar .lifox-sidebar-nav::-webkit-scrollbar-thumb {
    background: #374151;
}

/* ============================================
   WIDGETS GRID - Compact layout
   ============================================ */
.lifox-widgets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 1200px) {
    .lifox-widgets-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SIDEBAR COLLAPSE TOGGLE - Modern Design
   ============================================ */
.lifox-sidebar-collapse-btn {
    position: absolute;
    right: -14px;
    top: 28px;
    width: 28px;
    height: 28px;
    background: var(--ins-card-bg, #fff);
    border: 1.5px solid var(--ins-border-color, #e5e7eb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    font-size: 11px;
    color: var(--ins-gray-500, #6b7280);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.25s ease;
    opacity: 0;
    padding: 0;
}

.lifox-sidebar:hover .lifox-sidebar-collapse-btn,
.lifox-sidebar-collapse-btn:focus {
    opacity: 1;
}

.lifox-sidebar-collapse-btn:hover {
    background: var(--ins-secondary, #6366f1);
    border-color: var(--ins-secondary, #6366f1);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}

/* Always show collapse btn when sidebar is collapsed */
.lifox-sidebar.collapsed .lifox-sidebar-collapse-btn {
    opacity: 1;
    right: -14px;
    top: 28px;
}

/* ============================================
   SIDEBAR COLLAPSED STATE - Clean icon-only mode
   ============================================ */

/* All text labels hidden with smooth transition */
.lifox-sidebar .lifox-nav-item,
.lifox-sidebar .lifox-nav-link {
    overflow: hidden;
    white-space: nowrap;
}

.lifox-sidebar.collapsed .lifox-nav-item span:not(.dashicons):not(.lifox-nav-badge),
.lifox-sidebar.collapsed .lifox-nav-link span:not(.dashicons):not(.lifox-nav-badge) {
    width: 0;
    opacity: 0;
    overflow: hidden;
    display: inline-block;
    transition: width 0.2s ease, opacity 0.15s ease;
}

/* Hide section header text, badges, subtitle, logo text, user info, € symbol */
.lifox-sidebar.collapsed .lifox-nav-section-header .lifox-nav-section-title span:not(.dashicons),
.lifox-sidebar.collapsed .lifox-nav-section-header .lifox-nav-toggle,
.lifox-sidebar.collapsed .lifox-logo-subtitle,
.lifox-sidebar.collapsed .lifox-logo-text span:not(.lifox-logo-icon),
.lifox-sidebar.collapsed .lifox-nav-badge,
.lifox-sidebar.collapsed .lifox-user-info,
.lifox-sidebar.collapsed .lifox-user-name,
.lifox-sidebar.collapsed .lifox-user-badge,
.lifox-sidebar.collapsed .lifox-sidebar-actions .lifox-sidebar-btn span:not(.dashicons),
.lifox-sidebar.collapsed .lifox-nav-section-title span:last-child,
.lifox-sidebar.collapsed .lifox-sidebar-footer .lifox-user-card .dashicons-arrow-right-alt2 {
    display: none !important;
}

/* Nav items: icon-only, centered */
.lifox-sidebar.collapsed .lifox-nav-item,
.lifox-sidebar.collapsed .lifox-nav-link {
    font-size: 0;
    justify-content: center;
    padding: 10px;
    gap: 0;
    border-radius: 8px;
    position: relative;
}

/* Icons slightly bigger in collapsed mode for better touch targets */
.lifox-sidebar.collapsed .lifox-nav-item .dashicons,
.lifox-sidebar.collapsed .lifox-nav-link .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Section headers: just show the icon, centered */
.lifox-sidebar.collapsed .lifox-nav-section-header {
    font-size: 0;
    justify-content: center;
    padding: 6px 4px;
}

/* Hide inline-styled spans (like €) in collapsed mode */
.lifox-sidebar.collapsed .lifox-nav-section-title span[style] {
    font-size: 0 !important;
}

.lifox-sidebar.collapsed .lifox-nav-section-title {
    justify-content: center;
    gap: 0;
}

.lifox-sidebar.collapsed .lifox-nav-section-title .dashicons {
    font-size: 13px;
    width: 13px;
    height: 13px;
}

/* Separators smaller */
.lifox-sidebar.collapsed .lifox-nav-separator {
    margin: 8px 6px;
}

/* ---- Collapsed logo icon: hidden by default (when sidebar expanded) ---- */
.lifox-logo-collapsed-icon {
    display: none !important;
}

/* Logo area: centered, icon only */
.lifox-sidebar.collapsed .lifox-sidebar-header {
    padding: 16px 6px 12px;
    align-items: center;
}

.lifox-sidebar.collapsed .lifox-logo,
.lifox-sidebar.collapsed .lifox-sidebar-logo {
    justify-content: center;
}

.lifox-sidebar.collapsed .lifox-logo-link {
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}

/* Hide the expanded logo when collapsed */
.lifox-sidebar.collapsed .lifox-logo-expanded {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Show the collapsed icon */
.lifox-sidebar.collapsed .lifox-logo-collapsed-icon {
    display: block !important;
    visibility: visible !important;
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    object-fit: contain;
    border-radius: 8px;
    margin: 0 auto;
}

/* Collapsed icon alignment */
.lifox-sidebar.collapsed .lifox-logo-collapsed-icon {
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    margin: 0 auto;
}

/* Hide the text-based logo in collapsed (when it has .lifox-logo-expanded class) */
.lifox-sidebar.collapsed .lifox-logo-text.lifox-logo-expanded {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Footer: compact avatar-only */
.lifox-sidebar.collapsed .lifox-sidebar-footer {
    padding: 8px 6px;
}

.lifox-sidebar.collapsed .lifox-user-card,
.lifox-sidebar.collapsed .lifox-user-card-link {
    justify-content: center;
    padding: 8px 4px;
    gap: 0;
}

.lifox-sidebar.collapsed .lifox-user-avatar {
    margin: 0;
}

.lifox-sidebar.collapsed .lifox-user-avatar img {
    width: 32px !important;
    height: 32px !important;
}

.lifox-sidebar.collapsed .lifox-sidebar-actions {
    flex-direction: column;
    gap: 2px;
}

.lifox-sidebar.collapsed .lifox-sidebar-btn {
    justify-content: center;
    padding: 8px;
    gap: 0;
    font-size: 0;
}

.lifox-sidebar.collapsed .lifox-sidebar-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Nav padding in collapsed mode */
.lifox-sidebar.collapsed .lifox-sidebar-nav {
    padding: 6px;
}

/* Main content adapts to collapsed sidebar - DESKTOP ONLY */
@media (min-width: 901px) {
    .lifox-sidebar.collapsed + .lifox-main,
    .lifox-sidebar.collapsed ~ .lifox-main {
        margin-left: var(--sidebar-collapsed-width) !important;
        width: calc(100% - var(--sidebar-collapsed-width)) !important;
    }
}

/* ============================================
   TOOLTIP ON HOVER (collapsed mode)
   ============================================ */
.lifox-sidebar.collapsed .lifox-nav-item:hover::after,
.lifox-sidebar.collapsed .lifox-nav-link:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--ins-gray-800, #1f2937);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: lifoxTooltipIn 0.15s ease;
}

.lifox-sidebar.collapsed .lifox-nav-item:hover::before,
.lifox-sidebar.collapsed .lifox-nav-link:hover::before {
    content: '';
    position: absolute;
    left: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: var(--ins-gray-800, #1f2937);
    z-index: 9999;
    pointer-events: none;
    animation: lifoxTooltipIn 0.15s ease;
}

@keyframes lifoxTooltipIn {
    from { opacity: 0; transform: translateY(-50%) translateX(-4px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ============================================
   EXPAND TRANSITION (smooth)
   ============================================ */
.lifox-sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lifox-sidebar .lifox-nav-item span,
.lifox-sidebar .lifox-nav-link span,
.lifox-sidebar .lifox-nav-section-header span {
    transition: opacity 0.2s ease 0.1s, width 0.2s ease;
}

.lifox-sidebar.collapsed .lifox-nav-item span,
.lifox-sidebar.collapsed .lifox-nav-link span,
.lifox-sidebar.collapsed .lifox-nav-section-header span {
    transition: opacity 0.1s ease, width 0.15s ease;
}

/* ============================================
   FORCE LIFOX COLORS - Override theme oranges
   Maximum specificity with body.lifox-app prefix
   ============================================ */
body.lifox-app .lifox-app-wrapper .lifox-btn.primary,
body.lifox-app .lifox-app-wrapper .lifox-btn-primary,
body.lifox-app .lifox-app-wrapper button.lifox-btn.primary,
body.lifox-app .lifox-app-wrapper a.lifox-btn.primary {
    background-color: #111827 !important;
    border-color: #111827 !important;
    color: #ffffff !important;
}

body.lifox-app .lifox-app-wrapper .lifox-btn.primary:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-primary:hover {
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
}

/* Force dark color on empty-state buttons (override any theme orange) */
body.lifox-app .lifox-app-wrapper .lifox-empty-state .lifox-btn,
body.lifox-app .lifox-app-wrapper .lifox-empty-state .lifox-btn-primary,
body.lifox-app .lifox-app-wrapper .lifox-empty-state button.lifox-btn,
body.lifox-app .lifox-empty-state .lifox-btn,
body.lifox-app .lifox-empty-state .lifox-btn-primary {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #111827 !important;
    color: #ffffff !important;
}

body.lifox-app .lifox-app-wrapper .lifox-empty-state .lifox-btn:hover,
body.lifox-app .lifox-empty-state .lifox-btn:hover {
    background: #1f2937 !important;
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
}

body.lifox-app .lifox-app-wrapper .lifox-btn.success,
body.lifox-app .lifox-app-wrapper .lifox-btn-success {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}

body.lifox-app .lifox-app-wrapper .lifox-btn.success:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-success:hover {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
}

/* ============================================
   NUCLEAR COLOR OVERRIDE - Kill ALL orange/pink
   body.lifox-app prefix for maximum specificity
   ============================================ */

/* --- Action icon buttons in tables: gray default, indigo/color on hover --- */
body.lifox-app .lifox-app-wrapper .lifox-btn-icon,
body.lifox-app .lifox-app-wrapper td .lifox-btn-icon,
body.lifox-app .lifox-app-wrapper .lifox-table .lifox-btn-icon,
body.lifox-app .lifox-app-wrapper table .lifox-btn-icon,
body.lifox-app .lifox-app-wrapper tr .lifox-btn-icon,
body.lifox-app .lifox-app-wrapper .lifox-main .lifox-btn-icon,
body.lifox-app .lifox-app-wrapper a.lifox-btn-icon,
body.lifox-app .lifox-app-wrapper button.lifox-btn-icon {
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-color: #e5e7eb !important;
    color: #4b5563 !important;
    border-radius: 0.4rem !important;
}

body.lifox-app .lifox-app-wrapper .lifox-btn-icon:hover,
body.lifox-app .lifox-app-wrapper td .lifox-btn-icon:hover,
body.lifox-app .lifox-app-wrapper table .lifox-btn-icon:hover,
body.lifox-app .lifox-app-wrapper a.lifox-btn-icon:hover,
body.lifox-app .lifox-app-wrapper button.lifox-btn-icon:hover {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #111827 !important;
    color: #ffffff !important;
}

body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Supprimer"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Refuser"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Rejeter"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Annuler"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Fermer"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon.danger:hover {
    background: #ef4444 !important;
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Envoyer"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Email"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Envoyer par email"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Voir"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Voir profil"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Voir fiche entreprise"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Modifier"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Éditer"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Devis"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Factures"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Fiche de paie"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="MAD associées"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Donneur d'ordre"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Gérer les salariés"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Lancer la paie"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Voir les factures"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Modifier dans WordPress"]:hover {
    background: #6366f1 !important;
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="PDF"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Voir PDF"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Télécharger"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Telecharger"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Voir justificatif"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Valider"]:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-icon[title="Convertir en facture"]:hover {
    background: #22c55e !important;
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}

/* --- Secondary/Cancel/Annuler buttons: gray, NO pink/rose ever --- */
body.lifox-app .lifox-app-wrapper .lifox-btn-secondary,
body.lifox-app .lifox-app-wrapper .lifox-btn.secondary,
body.lifox-app .lifox-app-wrapper button.lifox-btn-secondary,
body.lifox-app .lifox-app-wrapper button.lifox-btn.secondary,
body.lifox-app .lifox-app-wrapper a.lifox-btn-secondary,
body.lifox-app .lifox-app-wrapper a.lifox-btn.secondary,
body.lifox-app .lifox-app-wrapper .lifox-modal-close,
body.lifox-app .lifox-app-wrapper button.lifox-modal-close,
body.lifox-app .lifox-app-wrapper .lifox-btn.secondary.lifox-modal-close,
body.lifox-app .lifox-app-wrapper .lifox-btn.lifox-btn-secondary.lifox-modal-close {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
    border-color: #e5e7eb !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

body.lifox-app .lifox-app-wrapper .lifox-btn-secondary:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn.secondary:hover,
body.lifox-app .lifox-app-wrapper button.lifox-btn-secondary:hover,
body.lifox-app .lifox-app-wrapper button.lifox-btn.secondary:hover,
body.lifox-app .lifox-app-wrapper a.lifox-btn-secondary:hover,
body.lifox-app .lifox-app-wrapper a.lifox-btn.secondary:hover,
body.lifox-app .lifox-app-wrapper .lifox-modal-close:hover,
body.lifox-app .lifox-app-wrapper button.lifox-modal-close:hover {
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

/* --- Filter tabs / template-filter buttons: indigo outline style --- */
body.lifox-app .lifox-app-wrapper .template-filter,
body.lifox-app .lifox-app-wrapper .lifox-filter-btn,
body.lifox-app .lifox-app-wrapper .lifox-btn.lifox-btn-sm {
    background: #ffffff !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
}

body.lifox-app .lifox-app-wrapper .template-filter.active,
body.lifox-app .lifox-app-wrapper .lifox-filter-btn.active,
body.lifox-app .lifox-app-wrapper .lifox-btn.lifox-btn-sm.active {
    background: #6366f1 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper .template-filter:hover,
body.lifox-app .lifox-app-wrapper .lifox-filter-btn:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn.lifox-btn-sm:hover {
    background: #e8e8fd !important;
    color: #6366f1 !important;
    border-color: #6366f1 !important;
}

/* --- Tags/badges: no orange --- */
body.lifox-app .lifox-app-wrapper .lifox-tag,
body.lifox-app .lifox-app-wrapper .lifox-badge,
body.lifox-app .lifox-app-wrapper span.lifox-tag {
    border-color: #6366f1 !important;
    color: #6366f1 !important;
    background: #e8e8fd !important;
}

/* --- AI Bubble: dark theme, no pink/orange --- */
body.lifox-app .lifox-app-wrapper .lifox-ai-fab {
    background: #111827 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.3) !important;
}

body.lifox-app .lifox-app-wrapper .lifox-ai-fab:hover {
    background: #1f2937 !important;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.4) !important;
}

/* AI panel buttons - no pink/rose hover anywhere */
body.lifox-app .lifox-app-wrapper .lifox-ai-btn-history,
body.lifox-app .lifox-app-wrapper .lifox-ai-btn-new,
body.lifox-app .lifox-app-wrapper .lifox-ai-close {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

body.lifox-app .lifox-app-wrapper .lifox-ai-btn-history:hover,
body.lifox-app .lifox-app-wrapper .lifox-ai-btn-new:hover,
body.lifox-app .lifox-app-wrapper .lifox-ai-close:hover {
    background: rgba(255,255,255,0.3) !important;
    color: #fff !important;
}

body.lifox-app .lifox-app-wrapper .lifox-ai-btn-history svg,
body.lifox-app .lifox-app-wrapper .lifox-ai-btn-new svg {
    display: block;
}

/* --- Tabs: indigo active, no orange --- */
body.lifox-app .lifox-app-wrapper .lifox-tab {
    color: #6b7280 !important;
    border-bottom-color: transparent !important;
}

body.lifox-app .lifox-app-wrapper .lifox-tab.active {
    color: #6366f1 !important;
    border-bottom-color: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper .lifox-tab:hover {
    color: #6366f1 !important;
}

/* --- Status badges: consistent colors --- */
body.lifox-app .lifox-app-wrapper .lifox-status-badge,
body.lifox-app .lifox-app-wrapper .lifox-badge {
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 10px !important;
    border-radius: 50rem !important;
}

/* --- CATCH-ALL: Override ANY inline orange/pink/rose/amber colors --- */
body.lifox-app .lifox-app-wrapper [style*="background-color: #f97316"],
body.lifox-app .lifox-app-wrapper [style*="background:#f97316"],
body.lifox-app .lifox-app-wrapper [style*="background: #f97316"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}
body.lifox-app .lifox-app-wrapper [style*="color: #f97316"],
body.lifox-app .lifox-app-wrapper [style*="color:#f97316"] {
    color: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper [style*="background-color: #fb923c"],
body.lifox-app .lifox-app-wrapper [style*="background:#fb923c"],
body.lifox-app .lifox-app-wrapper [style*="background: #fb923c"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}
body.lifox-app .lifox-app-wrapper [style*="color: #fb923c"],
body.lifox-app .lifox-app-wrapper [style*="color:#fb923c"] {
    color: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper [style*="background-color: #ea580c"],
body.lifox-app .lifox-app-wrapper [style*="background:#ea580c"],
body.lifox-app .lifox-app-wrapper [style*="background: #ea580c"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper [style*="background-color: #f59e0b"],
body.lifox-app .lifox-app-wrapper [style*="background:#f59e0b"],
body.lifox-app .lifox-app-wrapper [style*="background: #f59e0b"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}
body.lifox-app .lifox-app-wrapper [style*="color: #f59e0b"],
body.lifox-app .lifox-app-wrapper [style*="color:#f59e0b"] {
    color: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper [style*="background-color: #fbbf24"],
body.lifox-app .lifox-app-wrapper [style*="background:#fbbf24"],
body.lifox-app .lifox-app-wrapper [style*="background: #fbbf24"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper [style*="background-color: #ec4899"],
body.lifox-app .lifox-app-wrapper [style*="background:#ec4899"],
body.lifox-app .lifox-app-wrapper [style*="background: #ec4899"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}
body.lifox-app .lifox-app-wrapper [style*="color: #ec4899"],
body.lifox-app .lifox-app-wrapper [style*="color:#ec4899"] {
    color: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper [style*="background-color: #f472b6"],
body.lifox-app .lifox-app-wrapper [style*="background:#f472b6"],
body.lifox-app .lifox-app-wrapper [style*="background: #f472b6"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper [style*="background-color: #db2777"],
body.lifox-app .lifox-app-wrapper [style*="background:#db2777"],
body.lifox-app .lifox-app-wrapper [style*="background: #db2777"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper [style*="background-color: #e11d48"],
body.lifox-app .lifox-app-wrapper [style*="background:#e11d48"],
body.lifox-app .lifox-app-wrapper [style*="background: #e11d48"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper [style*="background-color: #be185d"],
body.lifox-app .lifox-app-wrapper [style*="background:#be185d"],
body.lifox-app .lifox-app-wrapper [style*="background: #be185d"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper [style*="color: #d97706"],
body.lifox-app .lifox-app-wrapper [style*="color:#d97706"] {
    color: #6366f1 !important;
}

body.lifox-app .lifox-app-wrapper [style*="background-color: #d97706"],
body.lifox-app .lifox-app-wrapper [style*="background:#d97706"],
body.lifox-app .lifox-app-wrapper [style*="background: #d97706"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}

/* --- WordPress theme button overrides: catch WP default button colors --- */
body.lifox-app .lifox-app-wrapper button,
body.lifox-app .lifox-app-wrapper input[type="button"],
body.lifox-app .lifox-app-wrapper input[type="submit"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* --- All buttons: ensure proper centering --- */
body.lifox-app .lifox-app-wrapper .lifox-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* ================================================================
   LIFOX GLOBAL DESIGN FORCE - Override ALL WordPress theme styles
   ================================================================ */

/* Force ALL buttons inside LIFOX app to NOT be orange */
body.lifox-app button,
body.lifox-app .lifox-app-wrapper button,
body.lifox-app input[type="button"],
body.lifox-app input[type="submit"],
.lifox-app-wrapper button,
.lifox-app-wrapper input[type="button"],
.lifox-app-wrapper input[type="submit"] {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

/* Restore LIFOX-specific button styles */
body.lifox-app .lifox-btn-primary,
body.lifox-app .lifox-app-wrapper .lifox-btn-primary,
.lifox-app-wrapper .lifox-btn-primary {
    background-color: #3b82f6 !important;
    background: #3b82f6 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
}
body.lifox-app .lifox-btn-primary:hover,
.lifox-app-wrapper .lifox-btn-primary:hover {
    background-color: #2563eb !important;
    background: #2563eb !important;
    border-color: #2563eb !important;
}

body.lifox-app .lifox-btn-secondary,
.lifox-app-wrapper .lifox-btn-secondary {
    background-color: #f1f5f9 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}
body.lifox-app .lifox-btn-secondary:hover,
.lifox-app-wrapper .lifox-btn-secondary:hover {
    background-color: #e2e8f0 !important;
    background: #e2e8f0 !important;
}

body.lifox-app .lifox-btn.success,
.lifox-app-wrapper .lifox-btn.success {
    background-color: #10b981 !important;
    background: #10b981 !important;
    color: #fff !important;
    border-color: #10b981 !important;
}

body.lifox-app .lifox-btn.info,
.lifox-app-wrapper .lifox-btn.info {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
    color: #fff !important;
    border-color: #6366f1 !important;
}

body.lifox-app .lifox-btn.warning,
.lifox-app-wrapper .lifox-btn.warning {
    background-color: #3b82f6 !important;
    background: #3b82f6 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
}

body.lifox-app .lifox-btn.danger,
.lifox-app-wrapper .lifox-btn.danger {
    background-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
}

/* Force lifox-btn-icon buttons */
body.lifox-app .lifox-btn-icon,
.lifox-app-wrapper .lifox-btn-icon {
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #4b5563 !important;
    border-radius: 6px !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
body.lifox-app .lifox-btn-icon:hover,
.lifox-app-wrapper .lifox-btn-icon:hover {
    background: #e5e7eb !important;
    color: #1f2937 !important;
}

/* Force modal close buttons */
body.lifox-app .lifox-modal-close,
.lifox-app-wrapper .lifox-modal-close {
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    font-size: 24px !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}
body.lifox-app .lifox-modal-close:hover,
.lifox-app-wrapper .lifox-modal-close:hover {
    color: #1f2937 !important;
    background: transparent !important;
}

/* Force nav section headers (sidebar) - compact & inline */
body.lifox-app .lifox-nav-section-header,
.lifox-app-wrapper .lifox-nav-section-header,
html body.lifox-app button.lifox-nav-section-header {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 6px 12px !important;
    margin-top: 4px !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    height: auto !important;
}
body.lifox-app .lifox-nav-section-header .lifox-nav-section-title,
.lifox-app-wrapper .lifox-nav-section-header .lifox-nav-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
}
body.lifox-app .lifox-nav-section-header .lifox-nav-toggle,
.lifox-app-wrapper .lifox-nav-section-header .lifox-nav-toggle {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
}

/* Force sidebar collapse button */
body.lifox-app .lifox-sidebar-collapse-btn,
.lifox-app-wrapper .lifox-sidebar-collapse-btn {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

/* Mobile header hidden on desktop */
.lifox-mobile-header {
    display: none;
}

/* Override ANY orange/pink from theme - catch-all selectors */
body.lifox-app [style*="background-color: #f97316"],
body.lifox-app [style*="background:#f97316"],
body.lifox-app [style*="background-color:#f97316"],
body.lifox-app [style*="background: #f97316"] {
    background-color: #3b82f6 !important;
    background: #3b82f6 !important;
}
body.lifox-app [style*="background-color: #f59e0b"],
body.lifox-app [style*="background:#f59e0b"],
body.lifox-app [style*="background-color:#f59e0b"],
body.lifox-app [style*="background: #f59e0b"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}
body.lifox-app [style*="background-color: #ec4899"],
body.lifox-app [style*="background:#ec4899"],
body.lifox-app [style*="background-color:#ec4899"],
body.lifox-app [style*="background: #ec4899"] {
    background-color: #6366f1 !important;
    background: #6366f1 !important;
}
body.lifox-app [style*="background-color: #fb923c"],
body.lifox-app [style*="background:#fb923c"],
body.lifox-app [style*="background-color:#fb923c"],
body.lifox-app [style*="background: #fb923c"] {
    background-color: #3b82f6 !important;
    background: #3b82f6 !important;
}

/* Force form selects/inputs */
body.lifox-app .lifox-form-select,
body.lifox-app .lifox-form-input,
.lifox-app-wrapper .lifox-form-select,
.lifox-app-wrapper .lifox-form-input {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #0f172a !important;
    box-shadow: none !important;
    outline: none !important;
}
body.lifox-app .lifox-form-select:focus,
body.lifox-app .lifox-form-input:focus,
.lifox-app-wrapper .lifox-form-select:focus,
.lifox-app-wrapper .lifox-form-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}

/* Force tab styles */
body.lifox-app .lifox-tab,
.lifox-app-wrapper .lifox-tab {
    background: transparent !important;
    color: #64748b !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 10px 16px !important;
}
body.lifox-app .lifox-tab.active,
.lifox-app-wrapper .lifox-tab.active {
    color: #3b82f6 !important;
    border-bottom-color: #3b82f6 !important;
    font-weight: 600 !important;
}
body.lifox-app .lifox-tab:hover,
.lifox-app-wrapper .lifox-tab:hover {
    color: #3b82f6 !important;
    background: #f8fafc !important;
}

/* Force badges */
body.lifox-app .lifox-badge.warning,
.lifox-app-wrapper .lifox-badge.warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}
body.lifox-app .lifox-badge.success,
.lifox-app-wrapper .lifox-badge.success {
    background-color: #dcfce7 !important;
    color: #166534 !important;
}
body.lifox-app .lifox-badge.danger,
.lifox-app-wrapper .lifox-badge.danger {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}
body.lifox-app .lifox-badge.info,
.lifox-app-wrapper .lifox-badge.info {
    background-color: #dbeafe !important;
    color: #1e40af !important;
}
body.lifox-app .lifox-badge.purple,
.lifox-app-wrapper .lifox-badge.purple {
    background-color: #ede9fe !important;
    color: #5b21b6 !important;
}
body.lifox-app .lifox-badge.neutral,
.lifox-app-wrapper .lifox-badge.neutral {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

/* Force cards */
body.lifox-app .lifox-card,
.lifox-app-wrapper .lifox-card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 20px !important;
}

/* Force tables */
body.lifox-app .lifox-table,
.lifox-app-wrapper .lifox-table {
    width: 100% !important;
    border-collapse: collapse !important;
}
body.lifox-app .lifox-table th,
.lifox-app-wrapper .lifox-table th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 12px !important;
    border-bottom: 2px solid #e5e7eb !important;
}
body.lifox-app .lifox-table td,
.lifox-app-wrapper .lifox-table td {
    padding: 10px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #0f172a !important;
    font-size: 13px !important;
}
body.lifox-app .lifox-table tbody tr:hover,
.lifox-app-wrapper .lifox-table tbody tr:hover {
    background: #f8fafc !important;
}

/* Force alert styles */
body.lifox-app .lifox-alert,
.lifox-app-wrapper .lifox-alert {
    border-radius: 10px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}
body.lifox-app .lifox-alert.info,
.lifox-app-wrapper .lifox-alert.info {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1e40af !important;
}
body.lifox-app .lifox-alert.success,
.lifox-app-wrapper .lifox-alert.success {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #166534 !important;
}
body.lifox-app .lifox-alert.warning,
.lifox-app-wrapper .lifox-alert.warning {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #92400e !important;
}
body.lifox-app .lifox-alert.danger,
.lifox-app-wrapper .lifox-alert.danger {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
}

/* Force page headers */
body.lifox-app .lifox-page-title,
.lifox-app-wrapper .lifox-page-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}
body.lifox-app .lifox-page-subtitle,
.lifox-app-wrapper .lifox-page-subtitle {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 4px 0 0 !important;
}

/* Force modals */
body.lifox-app .lifox-modal-overlay,
.lifox-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}
body.lifox-app .lifox-modal-overlay.active,
.lifox-modal-overlay.active {
    display: flex !important;
}
body.lifox-app .lifox-modal,
.lifox-modal-overlay .lifox-modal {
    background: #fff !important;
    border-radius: 16px !important;
    width: 90% !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
    overflow: hidden !important;
}
body.lifox-app .lifox-modal-header,
.lifox-modal-overlay .lifox-modal-header {
    padding: 18px 24px !important;
    border-bottom: 1px solid #e5e7eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #fff !important;
}
body.lifox-app .lifox-modal-body,
.lifox-modal-overlay .lifox-modal-body {
    padding: 24px !important;
    background: #fff !important;
}
body.lifox-app .lifox-modal-footer,
.lifox-modal-overlay .lifox-modal-footer {
    padding: 16px 24px !important;
    border-top: 1px solid #e5e7eb !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    background: #f8fafc !important;
}

/* ============================================
   ABSOLUTE NUCLEAR OVERRIDE - KILL ALL THEME COLORS
   Last section - highest priority
   ============================================ */

/* ANY button or a element that the theme targets */
body.lifox-app button,
body.lifox-app a,
body.lifox-app input[type="submit"],
body.lifox-app input[type="button"],
body.lifox-app .elementor-widget-container button,
body.lifox-app .elementor-element button,
body.lifox-app .elementor-widget-container a,
html body.lifox-app button,
html body.lifox-app a.lifox-btn-icon,
html body.lifox-app button.lifox-btn-icon {
    text-decoration: none !important;
}

/* Kill ANY background that could be orange/pink/rose/amber on buttons */
html body.lifox-app .lifox-app-wrapper button:not(.lifox-btn):not(.lifox-btn-primary):not(.lifox-btn-success):not(.lifox-btn-info):not(.lifox-btn-danger):not(.lifox-modal-close):not(.lifox-nav-section-header):not(.lifox-sidebar-collapse-btn):not(.lifox-mobile-toggle):not([class*="btn-"]):not([id*="btn"]) {
    background-color: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
}

/* Specifically target icon buttons in tables - these show orange */
html body.lifox-app table button,
html body.lifox-app .lifox-table button,
html body.lifox-app td button,
html body.lifox-app tr button,
html body.lifox-app tbody button {
    background-color: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #4b5563 !important;
    border-radius: 6px !important;
}
html body.lifox-app table button:hover,
html body.lifox-app .lifox-table button:hover,
html body.lifox-app td button:hover,
html body.lifox-app tr button:hover,
html body.lifox-app tbody button:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;
}

/* LIFOX-specific button styles - these MUST win over generic reset */
html body.lifox-app .lifox-app-wrapper .lifox-btn.lifox-btn-primary,
html body.lifox-app .lifox-btn-primary {
    background-color: #111827 !important;
    border-color: #111827 !important;
    color: #ffffff !important;
}
html body.lifox-app .lifox-app-wrapper .lifox-btn.lifox-btn-primary:hover,
html body.lifox-app .lifox-btn-primary:hover {
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
    color: #ffffff !important;
}
html body.lifox-app .lifox-app-wrapper .lifox-btn.lifox-btn-success,
html body.lifox-app .lifox-btn-success {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}
html body.lifox-app .lifox-app-wrapper .lifox-btn.lifox-btn-info,
html body.lifox-app .lifox-btn-info {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}
html body.lifox-app .lifox-app-wrapper .lifox-btn.lifox-btn-danger,
html body.lifox-app .lifox-btn-danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

/* --- Cancel/Annuler button: consistent ghost style --- */
/* Override Hello Elementor reset.css: [type=button]{border:1px solid #c36;color:#c36} */
.lifox-btn-cancel,
button.lifox-btn-cancel,
a.lifox-btn-cancel,
[type="button"].lifox-btn-cancel,
[type="button"].lifox-modal-close,
button[type="button"].lifox-btn-cancel,
button[type="button"].lifox-modal-close,
body.lifox-app .lifox-app-wrapper .lifox-btn-cancel,
body.lifox-app .lifox-app-wrapper button.lifox-btn-cancel,
body.lifox-app .lifox-app-wrapper [type="button"].lifox-btn-cancel,
body.lifox-app .lifox-app-wrapper [type="button"].lifox-modal-close,
html body.lifox-app .lifox-app-wrapper .lifox-btn-cancel {
    background: transparent !important;
    background-color: transparent !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    border-color: #e2e8f0 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    line-height: 1 !important;
    min-height: 38px !important;
}
.lifox-btn-cancel:hover,
button.lifox-btn-cancel:hover,
a.lifox-btn-cancel:hover,
[type="button"].lifox-btn-cancel:hover,
[type="button"].lifox-modal-close:hover,
button[type="button"].lifox-btn-cancel:hover,
button[type="button"].lifox-modal-close:hover,
body.lifox-app .lifox-app-wrapper .lifox-btn-cancel:hover,
body.lifox-app .lifox-app-wrapper button.lifox-btn-cancel:hover,
body.lifox-app .lifox-app-wrapper [type="button"].lifox-btn-cancel:hover,
body.lifox-app .lifox-app-wrapper [type="button"].lifox-modal-close:hover,
html body.lifox-app .lifox-app-wrapper .lifox-btn-cancel:hover {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

/* --- NUCLEAR: Override Hello Elementor reset.css [type=button] { color:#c36; border:#c36 } --- */
[type="button"].lifox-btn-cancel,
[type="button"].lifox-modal-close,
button[type="button"].lifox-btn-cancel,
button[type="button"].lifox-modal-close,
html body [type="button"].lifox-btn-cancel,
html body [type="button"].lifox-modal-close,
html body button[type="button"].lifox-btn-cancel,
html body button[type="button"].lifox-modal-close,
html body .lifox-modal-footer [type="button"],
html body .lifox-modal-footer button[type="button"],
/* --- Modal footer cancel buttons: absolute override --- */
html body .lifox-modal-footer .lifox-btn-cancel,
html body .lifox-modal-footer button.lifox-btn-cancel,
html body .lifox-modal-footer .lifox-modal-close,
html body .lifox-modal-footer button.lifox-modal-close,
html body.lifox-app .lifox-modal-footer .lifox-btn-cancel,
html body.lifox-app .lifox-modal-footer button.lifox-modal-close,
html body.lifox-app .lifox-app-wrapper .lifox-modal-footer .lifox-btn-cancel,
html body.lifox-app .lifox-app-wrapper .lifox-modal-footer button.lifox-modal-close {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    border-color: #e2e8f0 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}
html body .lifox-modal-footer .lifox-btn-cancel:hover,
html body .lifox-modal-footer button.lifox-modal-close:hover,
html body.lifox-app .lifox-modal-footer .lifox-btn-cancel:hover,
html body.lifox-app .lifox-modal-footer button.lifox-modal-close:hover,
html body.lifox-app .lifox-app-wrapper .lifox-modal-footer .lifox-btn-cancel:hover,
html body.lifox-app .lifox-app-wrapper .lifox-modal-footer button.lifox-modal-close:hover {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

/* Quick modal (from app.js) - force no orange */
html body.lifox-app .lifox-quick-modal-overlay,
html body .lifox-quick-modal-overlay {
    background: rgba(15, 23, 42, 0.6) !important;
}
html body.lifox-app .lifox-quick-modal,
html body .lifox-quick-modal {
    background: #ffffff !important;
    border: none !important;
}
html body.lifox-app .lifox-quick-modal-close,
html body .lifox-quick-modal-close {
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    font-size: 24px !important;
}

/* FINAL KILL: Any element with inline orange/pink/rose styles - broadest possible */
html body.lifox-app *[style*="#f97316"],
html body.lifox-app *[style*="#fb923c"],
html body.lifox-app *[style*="#ea580c"],
html body.lifox-app *[style*="#c2410c"],
html body.lifox-app *[style*="#f59e0b"],
html body.lifox-app *[style*="#d97706"],
html body.lifox-app *[style*="#c36"],
html body.lifox-app *[style*="#C36"],
html body.lifox-app *[style*="orange"],
html body.lifox-app *[style*="#e11d48"],
html body.lifox-app *[style*="#f43f5e"],
html body.lifox-app *[style*="#ec4899"],
html body.lifox-app *[style*="#db2777"],
html body.lifox-app *[style*="#be185d"],
html body.lifox-app *[style*="pink"],
html body.lifox-app *[style*="rose"] {
    background-color: #3b82f6 !important;
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* Override Elementor/theme button specific classes */
html body.lifox-app .elementor-button,
html body.lifox-app .e-button,
html body.lifox-app [class*="elementor"] button,
html body.lifox-app [class*="elementor"] a.button {
    background-color: #111827 !important;
    border-color: #111827 !important;
    color: #ffffff !important;
}

/* Calendar nav buttons override (div role=button) */
html body.lifox-app div[role="button"],
html body.lifox-app .lifox-app-wrapper div[role="button"] {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}
html body.lifox-app div[role="button"]:hover,
html body.lifox-app .lifox-app-wrapper div[role="button"]:hover {
    background-color: #e2e8f0 !important;
    color: #111827 !important;
}

/* Badge colors - ensure no orange */
html body.lifox-app .lifox-badge.warning,
html body.lifox-app .lifox-app-wrapper .lifox-badge.warning {
    background-color: #dbeafe !important;
    color: #1e40af !important;
}

/* ============================================
   TOAST & ANIMATIONS
   ============================================ */
@keyframes lifoxToastIn {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes lifoxToastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(60px); }
}
@keyframes lifoxSlideIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Notification badge pulse */
@keyframes lifoxPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
@keyframes lifoxBounceIn {
    0% { opacity:0; transform:translateX(80px) scale(0.9); }
    50% { opacity:1; transform:translateX(-8px) scale(1.02); }
    70% { transform:translateX(4px) scale(1); }
    100% { transform:translateX(0) scale(1); }
}
.lifox-notif-pulse {
    animation: lifoxPulse 1.5s ease infinite;
}

/* Notification popup */
.lifox-notif-popup {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99998;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    padding: 18px 22px;
    max-width: 380px;
    animation: lifoxSlideIn 0.4s ease;
    cursor: pointer;
    transition: transform 0.2s;
}
.lifox-notif-popup:hover { transform: translateY(-2px); }
.lifox-notif-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.lifox-notif-popup-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.lifox-notif-popup-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}
.lifox-notif-popup-time {
    font-size: 11px;
    color: #94a3b8;
}
.lifox-notif-popup-body {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    padding-left: 46px;
}

/* ============================================
   MOBILE APP REDESIGN (v11.31)
   Complete mobile-first responsive overhaul
   ============================================ */

/* Force sidebar hidden on mobile, regardless of collapsed state */
@media (max-width: 900px) {
    .lifox-sidebar,
    .lifox-sidebar.collapsed {
        position: fixed !important;
        left: -320px !important;
        width: 280px !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 10002 !important;
        visibility: hidden !important;
        transform: none !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s !important;
    }

    .lifox-sidebar.open,
    .lifox-sidebar.collapsed.open {
        left: 0 !important;
        visibility: visible !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s !important;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
    }

    /* Overlay must be above header but below sidebar */
    .lifox-sidebar-overlay {
        z-index: 10001 !important;
    }

    /* When sidebar is open on mobile, reset collapsed styles */
    .lifox-sidebar.collapsed.open {
        width: 280px !important;
    }
    .lifox-sidebar.collapsed.open .lifox-nav-item,
    .lifox-sidebar.collapsed.open .lifox-nav-link {
        font-size: inherit;
        justify-content: flex-start;
        padding: 10px 14px;
        gap: 10px;
    }
    .lifox-sidebar.collapsed.open .lifox-nav-item span:not(.dashicons):not(.lifox-nav-badge),
    .lifox-sidebar.collapsed.open .lifox-nav-link span:not(.dashicons):not(.lifox-nav-badge) {
        width: auto;
        opacity: 1;
        overflow: visible;
        display: inline;
    }
    .lifox-sidebar.collapsed.open .lifox-nav-section-header .lifox-nav-section-title span:not(.dashicons),
    .lifox-sidebar.collapsed.open .lifox-nav-section-header .lifox-nav-toggle,
    .lifox-sidebar.collapsed.open .lifox-logo-subtitle,
    .lifox-sidebar.collapsed.open .lifox-logo-text span:not(.lifox-logo-icon),
    .lifox-sidebar.collapsed.open .lifox-nav-badge,
    .lifox-sidebar.collapsed.open .lifox-user-info,
    .lifox-sidebar.collapsed.open .lifox-user-name,
    .lifox-sidebar.collapsed.open .lifox-user-badge,
    .lifox-sidebar.collapsed.open .lifox-sidebar-actions .lifox-sidebar-btn span:not(.dashicons),
    .lifox-sidebar.collapsed.open .lifox-nav-section-title span:last-child {
        display: inline !important;
    }
    .lifox-sidebar.collapsed.open .lifox-nav-section-header {
        font-size: inherit;
        justify-content: flex-start;
        padding: 10px 14px;
    }
    .lifox-sidebar.collapsed.open .lifox-logo-expanded {
        display: flex !important;
    }
    .lifox-sidebar.collapsed.open .lifox-logo-collapsed-icon {
        display: none !important;
    }

    /* Hide collapse button on mobile */
    .lifox-sidebar-collapse-btn {
        display: none !important;
    }

    /* MAIN CONTENT - Full width, no margin, app-like padding */
    .lifox-main,
    .lifox-sidebar.collapsed + .lifox-main,
    .lifox-sidebar.collapsed ~ .lifox-main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        padding: 72px 16px 24px !important;
        float: none !important;
        position: relative !important;
        overflow-x: hidden !important;
    }

    /* APP-LIKE HEADER BAR */
    .lifox-mobile-header {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: #ffffff;
        z-index: 10000;
        align-items: center;
        padding: 0 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        border-bottom: 1px solid #f1f5f9;
        gap: 12px;
    }

    .lifox-mobile-toggle {
        display: flex !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 40px;
        height: 40px;
        background: #f1f5f9 !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0 !important;
        transition: background 0.2s ease !important;
    }

    .lifox-mobile-toggle:active {
        background: #e2e8f0 !important;
        transform: scale(0.95);
    }

    /* Hide the old CSS hamburger spans */
    .lifox-mobile-toggle span,
    .lifox-mobile-toggle span::before,
    .lifox-mobile-toggle span::after {
        display: none !important;
    }

    /* SVG hamburger icon via background */
    .lifox-mobile-toggle {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 20px !important;
    }

    /* When sidebar open: show X icon */
    .lifox-mobile-toggle.active {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
        background-color: #e2e8f0 !important;
    }

    .lifox-mobile-logo {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
    }

    .lifox-mobile-logo-text {
        font-size: 18px;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.5px;
    }

    .lifox-mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    .lifox-mobile-header-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: #64748b !important;
        text-decoration: none !important;
        background: transparent;
        transition: background 0.15s;
    }

    .lifox-mobile-header-btn:hover,
    .lifox-mobile-header-btn:active {
        background: #f1f5f9;
    }

    .lifox-mobile-header-btn .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }

    /* Remove pseudo-element app bar (now using real element) */
    .lifox-app-wrapper::before {
        display: none !important;
    }

    /* ---- GLOBAL OVERFLOW FIX ---- */
    html, body {
        overflow-x: hidden !important;
    }

    .lifox-app-wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Force all child elements to respect container width */
    .lifox-main * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Exceptions for flex/grid children that need specific widths */
    .lifox-stat-cards-row > *,
    .lifox-mobile-header *,
    .lifox-sidebar *,
    .lifox-modal *,
    svg *,
    canvas {
        max-width: none !important;
    }

    /* Fix inline flex containers that can overflow */
    [style*="display:flex"],
    [style*="display: flex"] {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    /* Fix stat cards specifically - they have colored left borders in screenshot */
    .lifox-stats-grid .lifox-stat-card {
        overflow: hidden !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        border-width: 1px !important;
        border-top-width: 3px !important;
    }

    /* Fix dossier completion card on entrepreneur dashboard */
    [style*="padding:20px 28px"],
    [style*="padding: 20px 28px"],
    [style*="padding:24px 28px"],
    [style*="padding: 24px 28px"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    [style*="padding:14px 18px"],
    [style*="padding: 14px 18px"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Overlay - between header (10000) and sidebar (10002) */
    .lifox-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.4) !important;
        z-index: 10001 !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease !important;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
    .lifox-sidebar-overlay.active {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* PAGE HEADER - Mobile optimized */
    .lifox-page-header {
        padding: 0 0 16px !important;
        margin-bottom: 16px;
    }

    .lifox-page-title {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    .lifox-page-subtitle {
        font-size: 13px !important;
        margin-top: 4px;
    }

    .lifox-page-header-flex {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .lifox-page-header-flex .lifox-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* CARDS - App-like rounded cards */
    .lifox-card {
        padding: 16px !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    }

    .lifox-card-header {
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
    }

    .lifox-card-title {
        font-size: 15px !important;
    }

    /* PAVÉS (STAT BLOCKS) - Modern mobile cards */
    .lifox-pave {
        border-radius: 16px !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .lifox-pave-header {
        padding: 14px 16px !important;
    }

    .lifox-pave-header h3 {
        font-size: 14px !important;
    }

    .lifox-pave-content {
        padding: 0 16px 16px !important;
    }

    /* Stat grid - 2 columns on mobile */
    .lifox-pave-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .lifox-pave-item {
        padding: 12px !important;
        border-radius: 12px !important;
        text-align: center;
    }

    .lifox-pave-value {
        font-size: 20px !important;
    }

    .lifox-pave-label {
        font-size: 11px !important;
    }

    /* DASHBOARD GRID - Single column */
    .lifox-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* BUTTONS - Touch-friendly */
    .lifox-btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
        min-height: 44px !important;
    }

    .lifox-btn-sm {
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }

    .lifox-btn-icon {
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 10px !important;
    }

    /* Action buttons row - wrap */
    .lifox-actions-buttons,
    .lifox-btn-group {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* TABLES - Horizontal scroll with momentum */
    .lifox-table-container,
    .lifox-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -16px !important;
        padding: 0 16px !important;
        scrollbar-width: none !important;
    }

    .lifox-table-container::-webkit-scrollbar,
    .lifox-table-wrap::-webkit-scrollbar {
        display: none;
    }

    .lifox-table {
        min-width: 580px !important;
    }

    .lifox-table th,
    .lifox-table td {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    /* MODALS - Full screen bottom sheet style */
    .lifox-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .lifox-modal {
        width: 100% !important;
        max-width: none !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        animation: lifoxSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .lifox-modal-header {
        padding: 16px 20px !important;
        position: relative;
    }

    /* Modal drag handle indicator */
    .lifox-modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
    }

    .lifox-modal-body {
        padding: 16px 20px !important;
        max-height: 65vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .lifox-modal-footer {
        padding: 12px 20px 20px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .lifox-modal-footer .lifox-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* FORMS - Larger inputs for touch */
    .lifox-form-group {
        margin-bottom: 14px !important;
    }

    .lifox-form-input,
    .lifox-form-select,
    .lifox-form-textarea {
        padding: 12px 14px !important;
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        border-radius: 10px !important;
        min-height: 46px !important;
    }

    .lifox-form-label,
    .lifox-label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .lifox-form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* QUICK MODAL */
    .lifox-quick-modal-overlay {
        padding: 16px !important;
    }

    .lifox-quick-modal {
        width: 100% !important;
        max-height: 85vh !important;
        border-radius: 16px !important;
    }

    /* STATUS BANNERS */
    .lifox-alert {
        padding: 12px 14px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }

    /* TABS - Horizontal scroll */
    .lifox-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .lifox-tabs::-webkit-scrollbar {
        display: none;
    }

    .lifox-tab {
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    /* BADGES */
    .lifox-badge {
        padding: 3px 8px !important;
        font-size: 11px !important;
    }

    /* NOTIFICATION POPUPS - Mobile position */
    .lifox-notif-popup {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        max-width: none !important;
        min-width: auto !important;
        border-radius: 14px !important;
    }

    /* TOAST - Mobile position */
    .lifox-toast {
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: 24px !important;
        max-width: none !important;
        border-radius: 12px !important;
    }

    /* EMPTY STATES */
    .lifox-empty-state {
        padding: 40px 20px !important;
    }

    .lifox-empty-icon .dashicons {
        font-size: 40px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .lifox-empty-title {
        font-size: 16px !important;
    }

    /* CONVERSATION / TICKETS */
    .lifox-conversation,
    .lifox-conv {
        padding: 12px !important;
    }

    .lifox-msg,
    .lifox-cmsg {
        max-width: 90% !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
    }

    /* AI FAB - Adjust for mobile */
    .lifox-ai-fab {
        bottom: 16px !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
    }

    /* Settings page */
    .lifox-settings-layout {
        grid-template-columns: 1fr !important;
    }

    /* Inline styles fix - cards with text-align center on mobile */
    .lifox-card[style*="text-align:center"] {
        padding: 24px 16px !important;
    }

    .lifox-card[style*="text-align:center"] p {
        max-width: 100% !important;
    }

    /* Fix stats grid on mobile */
    .lifox-stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   MOBILE EXTRA-SMALL (max-width: 380px)
   ============================================ */
@media (max-width: 380px) {
    .lifox-main {
        padding: 60px 10px 16px !important;
    }

    .lifox-pave-grid {
        grid-template-columns: 1fr !important;
    }

    .lifox-pave-item {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: left !important;
    }

    .lifox-pave-value {
        font-size: 18px !important;
        order: 2 !important;
    }

    .lifox-pave-label {
        font-size: 12px !important;
        order: 1 !important;
        text-align: left !important;
    }

    .lifox-page-title {
        font-size: 18px !important;
    }

    .lifox-btn {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
}

/* Modal slide-up animation for mobile */
@keyframes lifoxSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0.5;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ============================================
   MOBILE APP PRO DESIGN (v11.31)
   Targets inline-styled dashboard elements
   ============================================ */
@media (max-width: 900px) {

    /* ---- TOP STAT CARDS: Horizontal scroll strip ---- */
    .lifox-stat-cards-row {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 10px !important;
        margin: 0 0 16px !important;
        padding: 0 0 8px !important;
        scrollbar-width: none !important;
    }

    .lifox-stat-cards-row::-webkit-scrollbar {
        display: none;
    }

    .lifox-stat-cards-row > .lifox-stat-card,
    .lifox-stat-cards-row > div {
        min-width: 150px !important;
        max-width: 170px !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        border-radius: 14px !important;
        padding: 14px !important;
    }

    /* ---- WIDGET GRID: Stack on mobile ---- */
    .lifox-widget-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .lifox-widget-card {
        border-radius: 14px !important;
        padding: 14px 16px !important;
    }

    .lifox-widget-card-header {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }

    .lifox-widget-card-header h4 {
        font-size: 13px !important;
    }

    /* Mini stats in widget cards - horizontal layout */
    .lifox-mini-stat {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        margin-bottom: 4px !important;
    }

    .lifox-mini-stat .ms-val {
        font-size: 16px !important;
        order: 2 !important;
    }

    .lifox-mini-stat .ms-label {
        font-size: 12px !important;
        order: 1 !important;
        color: #374151 !important;
    }

    /* ---- CHARTS: Stack vertically ---- */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Chart cards */
    .lifox-card canvas {
        max-height: 180px !important;
    }

    /* ---- WIDGET ACTION BUTTONS: Grid 2 cols ---- */
    .lifox-widget-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .lifox-widget-actions .lifox-btn {
        font-size: 11px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    /* Full width for odd last button */
    .lifox-widget-actions .lifox-btn:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }

    /* ---- INLINE GRID OVERRIDES ---- */
    /* Force any inline grid with multiple columns to stack on mobile */
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    /* 2-column grids with fixed widths (2fr 1fr, 1fr 300px, etc.) → stack */
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 1fr 300px"],
    [style*="grid-template-columns:1fr 300px"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Stats grid (used in entrepreneur/paierh) */
    .lifox-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .lifox-stats-grid .lifox-stat-card {
        border-radius: 14px !important;
    }

    /* Dashboard grid */
    .lifox-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Doc grid */
    .lifox-doc-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ---- SECTION HEADERS ---- */
    .lifox-section-header {
        margin-bottom: 12px !important;
    }

    .lifox-section-title {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    /* ---- TABLE IMPROVEMENTS ---- */
    /* Wrap tables in a horizontal scroll container */
    .lifox-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 !important;
        border-radius: 10px !important;
    }

    .lifox-table {
        min-width: 500px !important;
        width: 100% !important;
    }

    .lifox-table th {
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        color: #6b7280 !important;
        white-space: nowrap !important;
        padding: 8px 10px !important;
        background: #f8fafc !important;
        position: sticky !important;
        top: 0 !important;
    }

    .lifox-table td {
        font-size: 12px !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }

    .lifox-table tr {
        border-bottom: 1px solid #f1f5f9 !important;
    }

    /* Generic table fallback (not .lifox-table) */
    .lifox-card table:not(.lifox-table) {
        width: 100% !important;
        font-size: 12px !important;
    }

    .lifox-card table:not(.lifox-table) th,
    .lifox-card table:not(.lifox-table) td {
        padding: 6px 8px !important;
        white-space: nowrap !important;
    }

    /* ---- ACTIVITY FEED ---- */
    .lifox-activity-feed {
        border-radius: 14px !important;
    }

    .lifox-activity-item {
        padding: 10px 0 !important;
    }

    /* ---- PAGE HEADER: App title style ---- */
    .lifox-page-header {
        background: transparent !important;
        border: none !important;
        padding: 0 0 12px !important;
        margin-bottom: 14px !important;
        box-shadow: none !important;
    }

    .lifox-page-title {
        font-size: 22px !important;
        font-weight: 800 !important;
        letter-spacing: -0.5px !important;
        color: #0f172a !important;
    }

    .lifox-page-subtitle {
        font-size: 13px !important;
        color: #64748b !important;
        margin-top: 2px !important;
    }

    /* ---- CARDS: Glassmorphism-lite ---- */
    .lifox-card {
        border-radius: 16px !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        padding: 14px 16px !important;
        margin-bottom: 10px !important;
    }

    .lifox-card h3 {
        font-size: 13px !important;
    }

    /* ---- BADGES: Pill style ---- */
    .lifox-badge {
        border-radius: 20px !important;
        padding: 3px 10px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
    }

    /* ---- "Voir tous" LINKS ---- */
    a[href*="view="][style*="text-align"],
    .lifox-card a[style*="text-align: right"],
    .lifox-card a[style*="text-align:right"] {
        display: block !important;
        text-align: center !important;
        padding: 10px !important;
        margin-top: 8px !important;
        background: #f8fafc !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        color: #6366f1 !important;
    }

    /* ---- CONSISTENT BLOCK ALIGNMENT ---- */
    /* Ensure all direct children of .lifox-main align to the same padding */
    .lifox-main > div,
    .lifox-main > form,
    .lifox-main > section {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fix any inline gap/margin that's too wide for mobile */
    [style*="gap: 24px"],
    [style*="gap:24px"] {
        gap: 10px !important;
    }

    [style*="gap: 20px"],
    [style*="gap:20px"] {
        gap: 10px !important;
    }

    [style*="margin-bottom: 20px"],
    [style*="margin-bottom:20px"] {
        margin-bottom: 10px !important;
    }

    /* ---- TICKET SUPPORT SECTION ---- */
    .lifox-card table {
        width: 100% !important;
    }

    /* Ticket stat boxes - stack */
    .lifox-card > div[style*="display: flex"][style*="gap: 8px"] {
        flex-wrap: wrap !important;
    }

    .lifox-card > div[style*="display: flex"][style*="gap: 8px"] > div {
        min-width: calc(50% - 4px) !important;
    }

    /* ---- SAFE AREA for iPhone notch ---- */
    .lifox-mobile-header {
        padding-top: env(safe-area-inset-top, 0) !important;
        height: calc(56px + env(safe-area-inset-top, 0)) !important;
    }

    .lifox-main {
        padding-top: calc(72px + env(safe-area-inset-top, 0)) !important;
    }

    /* ---- SMOOTH SCROLLING ---- */
    html {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ---- SEPARATOR LINES ---- */
    hr, .lifox-separator {
        margin: 12px 0 !important;
        border: none !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    /* ---- FIX INLINE STYLE OVERRIDES ---- */
    /* Many dashboard elements use inline padding/margin that's too large for mobile */
    [style*="padding: 40px"],
    [style*="padding:40px"],
    [style*="padding: 32px"],
    [style*="padding:32px"] {
        padding: 20px 16px !important;
    }

    [style*="padding: 48px"],
    [style*="padding:48px"] {
        padding: 20px 16px !important;
    }

    /* Max-width inline constraints */
    [style*="max-width: 400px"],
    [style*="max-width:400px"] {
        max-width: 100% !important;
    }

    /* Fix inline font sizes that are too large */
    [style*="font-size: 48px"],
    [style*="font-size:48px"] {
        font-size: 36px !important;
    }
}

/* ---- Extra-small mobile ---- */
@media (max-width: 380px) {
    .lifox-stat-cards-row > .lifox-stat-card,
    .lifox-stat-cards-row > div {
        min-width: 120px !important;
        max-width: 140px !important;
    }

    .lifox-widget-actions {
        grid-template-columns: 1fr !important;
    }

    .lifox-mini-stat .ms-val {
        font-size: 15px !important;
    }

    .lifox-card {
        padding: 12px !important;
    }

    .lifox-page-title {
        font-size: 18px !important;
    }
}