/* Thème « Certigora » appliqué à tout l'espace connecté (copropriétaire et administration), mode clair uniquement.
   Chargé depuis menu.php et menu_administration.php.
   Palette du logo : cyan #03b1f0, bleu #0179f7, turquoise #19d4b8, menthe #81f6ba. */

html body {
    --accent: #0179f7;
    --accent-rgb: 1,121,247;
    --accent-hover: #0556c8;
    --sb-accent: #0179f7;
    --sb-font: 'Geist', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --cg-navy: #0a1f4d;
    --cg-brand: linear-gradient(135deg, #03b1f0 0%, #0179f7 55%, #0556c8 100%);
    --cg-soft: 0 1px 2px rgba(10,31,77,.04), 0 10px 28px -14px rgba(10,31,77,.14);
    --cg-lift: 0 2px 4px rgba(10,31,77,.05), 0 18px 36px -14px rgba(5,86,200,.22);
}

@keyframes cgUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cgPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes cgBlob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.12); } }

/* Les classes :not() inutilisées servent à dépasser la spécificité des feuilles de style de chaque page. */
html body:not(.dark-mode):not(.cg-a):not(.cg-b) {
    font-family: 'Geist', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f3f6fb !important;
    color: #334155;

    /* ── Éléments communs à toutes les pages ── */
    & .modern-section,
    & .stat-card {
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid rgba(15,23,42,.06);
        border-radius: 16px;
        box-shadow: var(--cg-soft);
    }
    & .page-title { color: var(--cg-navy); }
    & .btn-primary {
        background: var(--cg-brand);
        border-color: transparent;
        box-shadow: 0 8px 18px -8px rgba(1,121,247,.65);
    }
    & .btn-primary:hover { filter: brightness(1.07); }

    /* ── Menu latéral ── */
    & .index-sidebar {
        background: #fff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-right: 1px solid rgba(15,23,42,.08) !important;
        box-shadow: 4px 0 24px -12px rgba(10,31,77,.12) !important;
        font-family: var(--sb-font) !important;
    }
    & .index-sidebar::before { display: none !important; }
    & .index-sidebar { top: 0 !important; bottom: 0 !important; left: 0 !important; height: 100vh !important; border-radius: 0 !important; }
    & .copro-badge {
        background: linear-gradient(180deg, #f8fafc, #fff) !important;
        border: 1px solid rgba(15,23,42,.08) !important;
        box-shadow: 0 1px 2px rgba(10,31,77,.05) !important;
        border-radius: 14px !important;
    }
    & .copro-badge-icon {
        background: var(--cg-brand) !important;
        box-shadow: 0 6px 14px -4px rgba(3,177,240,.5);
    }
    & .copro-badge-name { color: var(--cg-navy) !important; font-weight: 600; }
    & .nav-label,
    & .nav-group-label {
        color: #94a3b8 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase;
    }
    & .panel-item {
        position: relative;
        color: #475569 !important;
        font-weight: 500 !important;
        border-radius: 12px !important;
        transition: background .2s ease, color .2s ease, box-shadow .2s ease !important;
    }
    & .panel-item svg { color: #94a3b8 !important; }
    & .panel-item:hover {
        background: rgba(241,245,249,.9) !important;
        color: var(--cg-navy) !important;
    }
    & .panel-item:hover svg { color: #0179f7 !important; }
    & .panel-item.active {
        background: linear-gradient(90deg, #e8f3ff, #fff) !important;
        color: #0556c8 !important;
        font-weight: 600 !important;
        box-shadow: 0 1px 2px rgba(5,86,200,.08), 0 0 0 1px rgba(1,121,247,.15) !important;
    }
    & .panel-item.active svg { color: #0179f7 !important; }
    & .panel-item.active::before {
        display: block !important;
        content: '' !important;
        left: 0 !important;
        top: 9px !important;
        bottom: 9px !important;
        height: auto !important;
        transform: none !important;
        width: 3px !important;
        border-radius: 99px !important;
        background: var(--cg-brand) !important;
    }
    & .sidebar-actions a { color: #64748b; }
    & .sidebar-actions a:hover { color: #0179f7; }
    & .mode-syndic {
        background: var(--cg-brand) !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 22px -10px rgba(1,121,247,.6) !important;
        transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
    }
    & .mode-syndic:hover { transform: translateY(-1px); filter: brightness(1.06); }

    /* ── Barre du haut ── */
    & .topbar-search input,
    & .topbar-search .search-input {
        background: #fff !important;
        border: 1px solid rgba(15,23,42,.1) !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 2px rgba(10,31,77,.04) !important;
        transition: border-color .2s ease, box-shadow .2s ease !important;
    }
    & .topbar-search input:focus,
    & .topbar-search .search-input:focus {
        border-color: #0179f7 !important;
        box-shadow: 0 0 0 4px rgba(1,121,247,.14) !important;
    }
    & .topbar-profile {
        background: #fff !important;
        border: 1px solid rgba(15,23,42,.08) !important;
        box-shadow: 0 1px 2px rgba(10,31,77,.04) !important;
    }
    & .topbar-profile .avatar-initials,
    & .topbar-menu-avatar {
        background: var(--cg-brand) !important;
        color: #fff !important;
        border: 0 !important;
        box-shadow: 0 6px 14px -6px rgba(3,177,240,.6) !important;
    }
    & .topbar-menu { border-radius: 16px !important; border: 1px solid rgba(15,23,42,.08) !important; box-shadow: 0 20px 44px -16px rgba(10,31,77,.28) !important; }

    /* ── En-tête de page ── */
    & .hero-icon {
        background: var(--cg-brand);
        color: #fff;
        box-shadow: 0 8px 18px -8px rgba(3,177,240,.65);
    }
    & .hero-text h2,
    & .hero-text.is-on-dark h2 { color: var(--cg-navy); text-shadow: none; font-weight: 700; }
    & .hero-text .hero-copro,
    & .hero-text.is-on-dark .hero-copro { color: #64748b; text-shadow: none; }
    & .hero-btn,
    & #btn-new,
    & .msgForm .btn,
    & .modal-box .btn-primary {
        background: var(--cg-brand);
        box-shadow: 0 8px 18px -8px rgba(1,121,247,.65);
        transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    & .hero-btn:hover,
    & #btn-new:hover,
    & .msgForm .btn:hover,
    & .modal-box .btn-primary:hover {
        background: var(--cg-brand);
        filter: brightness(1.07);
        transform: translateY(-1px);
        box-shadow: 0 12px 24px -8px rgba(1,121,247,.7);
    }

    /* ── Indicateurs : cartes blanches ── */
    & .dash-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        background: transparent;
        gap: 16px;
        border-radius: 0;
        overflow: visible;
    }
    & .docs-col > .dash-kpis:last-child { display: grid !important; flex: none !important; }
    & .dash-kpis::before,
    & .dash-kpis::after { display: none; }
    & .dash-kpi {
        margin: 0;
        padding: 18px;
        background: #fff;
        border: 1px solid rgba(15,23,42,.06);
        border-radius: 16px;
        box-shadow: var(--cg-soft);
        transition: transform .25s ease, box-shadow .25s ease;
        animation: cgUp .55s cubic-bezier(.16,1,.3,1) both;
    }
    & .dash-kpi:nth-child(2) { animation-delay: .08s; }
    & .dash-kpi:nth-child(3) { animation-delay: .16s; }
    & .dash-kpi:hover { background: #fff; transform: translateY(-3px); box-shadow: var(--cg-lift); }
    & .kpi-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        font-size: 15px;
        margin-bottom: 10px;
        background: var(--cg-brand) !important;
        box-shadow: 0 8px 16px -8px rgba(3,177,240,.7);
    }
    & .kpi-icon--solde-pos { background: linear-gradient(135deg, #81f6ba, #19d4b8) !important; color: #064e3b; }
    & .kpi-icon--solde-neg { background: linear-gradient(135deg, #fda4af, #f43f5e) !important; }
    & .kpi-icon--lots { background: linear-gradient(135deg, #19d4b8, #03b1f0) !important; }
    & .kpi-value { color: var(--cg-navy) !important; font-size: 26px; font-weight: 700; }
    & .kpi-value--pos { color: #059669 !important; }
    & .kpi-value--neg { color: #dc2626 !important; }
    & .kpi-label { color: #64748b; font-weight: 500; }
    & .kpi-new { color: #0563e8; }

    /* ── Cartes ── */
    & #balance-chart-card,
    & #travaux-widget,
    & #agenda-calendar,
    & #demands {
        background: #fff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid rgba(15,23,42,.06) !important;
        box-shadow: var(--cg-soft) !important;
        transition: box-shadow .25s ease, transform .25s ease;
        animation: cgUp .6s cubic-bezier(.16,1,.3,1) both;
    }
    & #agenda-calendar { animation-delay: .1s; }
    & #demands { animation-delay: .18s; }
    & #balance-chart-card:hover,
    & #travaux-widget:hover,
    & #agenda-calendar:hover,
    & #demands:hover {
        background: #fff !important;
        box-shadow: var(--cg-lift) !important;
    }
    & .onboarding-card {
        background: linear-gradient(135deg, #e8f3ff, #effdf8);
        border: 1px solid rgba(1,121,247,.12);
        box-shadow: var(--cg-soft);
        animation: cgPop .5s ease both;
    }
    & .onboarding-icon,
    & .section-icon--indigo {
        background: var(--cg-brand);
        color: #fff;
        box-shadow: 0 8px 16px -8px rgba(3,177,240,.7);
    }
    & .section-h4 { color: var(--cg-navy); font-weight: 700; }
    & .section-icon { border-radius: 10px; }
    & .section-icon--green { background: linear-gradient(135deg, #81f6ba, #19d4b8); color: #064e3b; }
    & .section-icon--teal { background: linear-gradient(135deg, #19d4b8, #03b1f0); color: #fff; }
    & .section-icon--amber { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; }

    /* ── Demandes ── */
    & .tabs .tab.active { color: #0556c8; border-bottom-color: #0179f7; }
    & .ask-item { transition: background .2s ease, padding .2s ease; }
    & .ask-item:hover { background: #f1f7ff; }
    & .ask-status--open { background: #e8f3ff; color: #0556c8; }
    & .ask-status--closed { background: #e6fbf5; color: #0d9488; }
    & .date-pill { background: #f1f5f9; }
    & .month-selector select:focus,
    & .msgForm .form-control:focus,
    & .modal-box .form-control:focus {
        border-color: #0179f7;
        box-shadow: 0 0 0 4px rgba(1,121,247,.14);
    }

    /* ── Fenêtre de dialogue ── */
    & .modal-box { border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(10,31,77,.35); }
    & .modal-box h4 { background: linear-gradient(135deg, #0a1f4d, #0556c8); }

    /* ── Guide de démarrage ── */
    & .ob-step-badge,
    & .ob-btn-next { background: var(--cg-brand); }
    & .ob-btn-next:hover { background: var(--cg-brand); filter: brightness(1.07); box-shadow: 0 10px 22px -8px rgba(1,121,247,.6); }
    & .ob-welcome-icon { background: linear-gradient(135deg, rgba(3,177,240,.14), rgba(25,212,184,.18)); color: #0179f7; }
    & .ob-dot.active { background: #0179f7; }
    & .ob-desc a { color: #0179f7; }
    & .ob-title,
    & .ob-welcome h2 { color: var(--cg-navy); }
    & .soelya-trigger { box-shadow: 0 10px 26px -8px rgba(1,121,247,.55); }

    /* ── Écran de bienvenue ── */
    & .welcome-overlay {
        background:
            radial-gradient(ellipse 520px 520px at 12% 8%, rgba(1,121,247,.45), transparent 70%),
            radial-gradient(ellipse 480px 480px at 90% 92%, rgba(25,212,184,.32), transparent 70%),
            #061233;
    }
    & .welcome-card {
        background: #fff;
        border: 0;
        box-shadow: 0 40px 90px -24px rgba(0,0,0,.55);
    }
    & .welcome-card h2 { color: var(--cg-navy); }
}

/* ── Variante « verre dépoli » : fond pastel, panneaux translucides, grands arrondis ── */
html body:not(.dark-mode):not(.cg-a):not(.cg-b) {
    --cg-glass: rgba(255,255,255,.58);
    --cg-glass-border: 1px solid rgba(255,255,255,.78);
    --cg-glass-shadow: 0 24px 48px -28px rgba(10,31,77,.30), inset 0 1px 0 rgba(255,255,255,.85);
    background:
        radial-gradient(ellipse 60% 50% at 8% 0%, rgba(124,131,253,.38), transparent 70%),
        radial-gradient(ellipse 50% 45% at 96% 6%, rgba(190,170,255,.34), transparent 70%),
        radial-gradient(ellipse 55% 50% at 90% 100%, rgba(150,170,255,.32), transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(99,102,241,.22), transparent 70%),
        #eceefc !important;
    background-attachment: fixed !important;

    /* Menu : panneau flottant */
    & .index-sidebar {
        top: 16px !important;
        bottom: 16px !important;
        left: 16px !important;
        height: calc(100vh - 32px) !important;
        border-radius: 28px !important;
        background: var(--cg-glass) !important;
        backdrop-filter: blur(26px) saturate(165%) !important;
        -webkit-backdrop-filter: blur(26px) saturate(165%) !important;
        border: var(--cg-glass-border) !important;
        box-shadow: var(--cg-glass-shadow) !important;
    }
    & .copro-badge {
        background: rgba(255,255,255,.55) !important;
        border: var(--cg-glass-border) !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 24px -16px rgba(10,31,77,.25) !important;
    }
    & .panel-item { border-radius: 14px !important; }
    & .panel-item.active {
        background: rgba(255,255,255,.85) !important;
        box-shadow: 0 10px 22px -14px rgba(5,86,200,.45), 0 0 0 1px rgba(255,255,255,.9) !important;
    }

    /* Barre du haut : recherche en pilule */
    & .topbar-search input,
    & .topbar-search .search-input,
    & .topbar-profile {
        background: rgba(255,255,255,.62) !important;
        backdrop-filter: blur(18px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
        border: var(--cg-glass-border) !important;
        border-radius: 999px !important;
        box-shadow: 0 10px 24px -18px rgba(10,31,77,.3) !important;
    }

    /* Panneaux et cartes */
    & .modern-section,
    & .stat-card,
    & #balance-chart-card,
    & #travaux-widget,
    & #agenda-calendar,
    & #demands,
    & .onboarding-card,
    & .dash-kpi {
        background: var(--cg-glass) !important;
        backdrop-filter: blur(22px) saturate(165%) !important;
        -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
        border: var(--cg-glass-border) !important;
        border-radius: 26px !important;
        box-shadow: var(--cg-glass-shadow) !important;
    }
    & #balance-chart-card:hover,
    & #travaux-widget:hover,
    & #agenda-calendar:hover,
    & #demands:hover {
        background: rgba(255,255,255,.7) !important;
        box-shadow: 0 30px 56px -28px rgba(5,86,200,.35), inset 0 1px 0 rgba(255,255,255,.9) !important;
    }
    & .onboarding-card { background: linear-gradient(135deg, rgba(232,243,255,.75), rgba(239,253,248,.7)) !important; }

    /* Indicateurs : pastilles, la première en carte bleue façon « carte bancaire » */
    & .dash-kpi {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 14px 18px;
        border-radius: 22px !important;
    }
    & .dash-kpi .kpi-icon { margin-bottom: 0; flex-shrink: 0; }
    & .dash-kpi:hover { background: rgba(255,255,255,.75) !important; }
    & .dash-kpi:first-child {
        background: var(--cg-brand) !important;
        border-color: rgba(255,255,255,.35) !important;
        box-shadow: 0 24px 40px -22px rgba(1,121,247,.75), inset 0 1px 0 rgba(255,255,255,.35) !important;
    }
    & .dash-kpi:first-child:hover { background: var(--cg-brand) !important; filter: brightness(1.05); }
    & .dash-kpi:first-child .kpi-icon { background: rgba(255,255,255,.22) !important; box-shadow: none; }
    & .dash-kpi:first-child .kpi-value,
    & .dash-kpi:first-child .kpi-value--pos,
    & .dash-kpi:first-child .kpi-value--neg { color: #fff !important; }
    & .dash-kpi:first-child .kpi-label { color: rgba(255,255,255,.82); }

    /* En-tête, boutons en pilule */
    & .hero-text h2 { font-size: 26px; letter-spacing: -.02em; }
    & .hero-btn,
    & #btn-new,
    & .msgForm .btn,
    & .modal-box .btn-primary,
    & .btn-primary { border-radius: 999px; }
    & .hero-icon { border-radius: 16px; }
    & .tabs .tab.active { background: rgba(255,255,255,.7); border-radius: 12px 12px 0 0; }
}

/* ── Boutons à plat (sans dégradé) et menu sans liseré ── */
html body:not(.dark-mode):not(.cg-a):not(.cg-b) {
    & .hero-btn,
    & #btn-new,
    & .msgForm .btn,
    & .modal-box .btn-primary,
    & .btn-primary,
    & .mode-syndic,
    & .ob-btn-next {
        background: #0179f7 !important;
        background-image: none !important;
        box-shadow: 0 8px 18px -10px rgba(1,121,247,.55) !important;
    }
    & .hero-btn:hover,
    & #btn-new:hover,
    & .msgForm .btn:hover,
    & .modal-box .btn-primary:hover,
    & .btn-primary:hover,
    & .mode-syndic:hover,
    & .ob-btn-next:hover {
        background: #0556c8 !important;
        background-image: none !important;
        filter: none;
    }
    & .panel-item.active::before,
    & .panel-item-sm.active::before { display: none !important; }
}

/* ── Cartes et pastilles à plat (sans dégradé) ── */
html body:not(.dark-mode):not(.cg-a):not(.cg-b) {
    & .dash-kpi:first-child,
    & .dash-kpi:first-child:hover { background: #0179f7 !important; background-image: none !important; filter: none; }
    & .onboarding-card { background: rgba(232,243,255,.8) !important; background-image: none !important; }
    & .kpi-icon,
    & .hero-icon,
    & .onboarding-icon,
    & .copro-badge-icon,
    & .section-icon--indigo { background: #0179f7 !important; background-image: none !important; color: #fff; }
    & .dash-kpi:first-child .kpi-icon { background: rgba(255,255,255,.22) !important; }
    & .kpi-icon--solde-pos,
    & .section-icon--green { background: #81f6ba !important; color: #064e3b; }
    & .kpi-icon--solde-neg { background: #f43f5e !important; }
    & .kpi-icon--lots,
    & .section-icon--teal { background: #19d4b8 !important; color: #fff; }
    & .section-icon--amber { background: #fcd34d !important; color: #78350f; }
}

/* ── Fond animé discret (élément .cg-bg injecté par les menus partagés) ── */
.cg-bg { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
html body:not(.dark-mode) .cg-bg { display: block; }
.cg-bg i { position: absolute; border-radius: 50%; will-change: transform; }
.cg-bg i:nth-child(1) {
    width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax;
    background: radial-gradient(circle, rgba(124,131,253,.30), transparent 66%);
    animation: cgDriftA 36s ease-in-out infinite;
}
.cg-bg i:nth-child(2) {
    width: 66vmax; height: 66vmax; right: -24vmax; bottom: -30vmax;
    background: radial-gradient(circle, rgba(167,139,250,.24), transparent 66%);
    animation: cgDriftB 44s ease-in-out infinite;
}
.cg-bg i:nth-child(3) {
    width: 46vmax; height: 46vmax; left: 38%; top: 28%;
    background: radial-gradient(circle, rgba(96,165,250,.20), transparent 66%);
    animation: cgDriftA 52s ease-in-out infinite reverse;
}
.cg-bg::after {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(99,102,241,.10) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%);
}
@keyframes cgDriftA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7vmax,5vmax) scale(1.12); } }
@keyframes cgDriftB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-8vmax,-6vmax) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
    body * { animation: none !important; transition-duration: .01ms !important; }
}