/* ==========================================================================
   Theme « Fleuri » — applique a un seul compte (voir renderAppShell dans
   client/js/app.js). Reprend le neumorphisme de l'app en palette rose poudre,
   avec un semis de fleurs en fond. Aucune ressource externe : les motifs sont
   des SVG en data-URI (la CSP de l'app bloque les hotlinks).
   ========================================================================== */

body.fleur-theme {
    /* Fonds — rose poudre tres clair */
    --color-bg-app: #f6e9f0;
    --color-bg-primary: #f6e9f0;
    --color-bg-secondary: #f6e9f0;
    --color-bg-tertiary: #ecd9e4;
    --color-bg-sidebar: #f6e9f0;
    --color-bg-topbar: rgba(246, 233, 240, 0.9);
    --color-bg-hover: rgba(199, 92, 141, 0.07);
    --color-bg-active: rgba(199, 92, 141, 0.1);
    --color-bg-selected: rgba(199, 92, 141, 0.12);

    --color-surface: #f6e9f0;
    --color-surface-raised: #f6e9f0;
    --color-surface-overlay: #fbf2f6;
    --color-surface-input: #f6e9f0;
    --color-surface-input-hover: #f1e2ea;
    --color-surface-sunken: #eedde7;
    --color-surface-disabled: #f1e2ea;

    /* Textes — prune, plus doux que le gris ardoise */
    --color-text-primary: #4a2b3c;
    --color-text-secondary: #7d5668;
    --color-text-tertiary: #a9899a;
    --color-text-placeholder: #c2a6b4;
    --color-text-link: #c75c8d;

    /* Ombres neumorphiques recalculees sur le fond rose */
    --neu-shadow-dark: #d3b9c7;
    --neu-shadow-light: #ffffff;

    /* Accent — rose framboise */
    --color-accent: #c75c8d;
    --color-accent-hover: #b34a7b;
    --color-accent-active: #9c3d69;
    --color-accent-subtle: rgba(199, 92, 141, 0.1);
    --color-accent-muted: rgba(199, 92, 141, 0.18);
    --color-primary: #c75c8d;

    --color-border: rgba(122, 60, 90, 0.08);
    --color-border-light: rgba(122, 60, 90, 0.04);
    --color-border-strong: rgba(122, 60, 90, 0.14);
    --color-border-focus: #c75c8d;
}

/* --------------------------------------------------------------------------
   Semis de fleurs en fond de page — discret, derriere le contenu
   -------------------------------------------------------------------------- */
body.fleur-theme .app-layout {
    background-color: var(--color-bg-app);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23c75c8d' fill-opacity='0.07'%3E%3Cg transform='translate(30 34)'%3E%3Ccircle cx='0' cy='-9' r='6'/%3E%3Ccircle cx='8.6' cy='-2.8' r='6'/%3E%3Ccircle cx='5.3' cy='7.3' r='6'/%3E%3Ccircle cx='-5.3' cy='7.3' r='6'/%3E%3Ccircle cx='-8.6' cy='-2.8' r='6'/%3E%3C/g%3E%3Cg transform='translate(126 92) scale(0.75)'%3E%3Ccircle cx='0' cy='-9' r='6'/%3E%3Ccircle cx='8.6' cy='-2.8' r='6'/%3E%3Ccircle cx='5.3' cy='7.3' r='6'/%3E%3Ccircle cx='-5.3' cy='7.3' r='6'/%3E%3Ccircle cx='-8.6' cy='-2.8' r='6'/%3E%3C/g%3E%3Cg transform='translate(74 140) scale(0.6)'%3E%3Ccircle cx='0' cy='-9' r='6'/%3E%3Ccircle cx='8.6' cy='-2.8' r='6'/%3E%3Ccircle cx='5.3' cy='7.3' r='6'/%3E%3Ccircle cx='-5.3' cy='7.3' r='6'/%3E%3Ccircle cx='-8.6' cy='-2.8' r='6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}

/* Bandeau fleuri en haut de la sidebar, sous le logo */
body.fleur-theme .sidebar {
    background-image:
        linear-gradient(180deg, rgba(199, 92, 141, 0.1) 0%, transparent 190px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23c75c8d' fill-opacity='0.09'%3E%3Cg transform='translate(24 26) scale(0.7)'%3E%3Ccircle cx='0' cy='-9' r='6'/%3E%3Ccircle cx='8.6' cy='-2.8' r='6'/%3E%3Ccircle cx='5.3' cy='7.3' r='6'/%3E%3Ccircle cx='-5.3' cy='7.3' r='6'/%3E%3Ccircle cx='-8.6' cy='-2.8' r='6'/%3E%3C/g%3E%3Cg transform='translate(88 82) scale(0.55)'%3E%3Ccircle cx='0' cy='-9' r='6'/%3E%3Ccircle cx='8.6' cy='-2.8' r='6'/%3E%3Ccircle cx='5.3' cy='7.3' r='6'/%3E%3Ccircle cx='-5.3' cy='7.3' r='6'/%3E%3Ccircle cx='-8.6' cy='-2.8' r='6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
}

/* Petite fleur decorative a cote du logo */
body.fleur-theme .sidebar__logo-text::after {
    content: '❀';
    margin-left: 6px;
    color: #c75c8d;
    font-size: 0.9em;
    vertical-align: middle;
}

/* Coeur de fleur sur l'element de menu actif */
body.fleur-theme .sidebar__nav-item.is-active {
    background: linear-gradient(90deg, rgba(199, 92, 141, 0.16), rgba(199, 92, 141, 0.04));
}

body.fleur-theme .sidebar__nav-item.is-active::before {
    content: '✿';
    position: absolute;
    right: 10px;
    color: #c75c8d;
    font-size: 12px;
    opacity: 0.75;
}

/* Guirlande florale en haut de la zone de contenu.
   ⚠️ NE PAS utiliser ::before sur .main-content : c'est une grille a deux lignes
   exactes (topbar + contenu) avec overflow:hidden — un pseudo-element y devient
   un 3e element de grille et pousse tout le contenu hors du cadre (page vide).
   On peint donc la bande en fond de .content-area, sans element supplementaire. */
body.fleur-theme .content-area {
    background-image: linear-gradient(90deg, #e8a3c2, #c75c8d, #e8a3c2, #f0c4d8, #c75c8d);
    background-size: 100% 5px;
    background-repeat: no-repeat;
    background-position: top left;
}