/* ============================================
   PropFlow — Interface pro, fine, uniforme
   Sans logo, sans emoji, sans contour coloré
   ============================================ */

:root {
    /* Fond moins blanc, tons chauds (stone) */
    --pro-bg: #fafaf9;
    --pro-surface: #f8f7f5;
    --pro-surface-strong: #f5f5f0;
    --pro-border: #e7e5e4;
    --pro-text: #1c1917;
    --pro-text-muted: #78716c;
    --pro-accent: #44403c;
    /* Violet dégradé — touches de couleur pro */
    --pro-violet: #6366f1;
    --pro-violet-light: #818cf8;
    --pro-violet-soft: #a78bfa;
    --pro-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
    --pro-gradient-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.08) 50%, rgba(167, 139, 250, 0.06) 100%);
    --pro-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --pro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --pro-radius: 10px;
    --pro-transition: 0.2s ease;
    /* Échelle typo fine */
    --pro-fs-xs: 0.6875rem;
    --pro-fs-sm: 0.75rem;
    --pro-fs-base: 0.8125rem;
    --pro-fs-md: 0.875rem;
    --pro-fs-lg: 0.9375rem;
    --pro-fs-xl: 1rem;
    --pro-fs-2xl: 1.0625rem;
}

/* --- Base : texte plus fin, uniforme --- */
body,
.app-container,
.content {
    background: var(--pro-bg) !important;
    color: var(--pro-text) !important;
    font-size: var(--pro-fs-base) !important;
    line-height: 1.45 !important;
}

.app-container h1,
.app-container h2,
.pc-brand-text h1,
.metric-value-large {
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

.app-container h2,
.section-title,
.enhanced-card > h2,
.overview-master-card h2 {
    color: var(--pro-text) !important;
    font-size: var(--pro-fs-md) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

/* --- Titre en tête de chaque bloc de page : léger violet --- */
.page-block-title {
    font-size: var(--pro-fs-xl) !important;
    font-weight: 600 !important;
    color: var(--pro-text) !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 10px 16px !important;
    border: none !important;
    border-left: 3px solid var(--pro-violet) !important;
    border-bottom: 1px solid var(--pro-border) !important;
    border-radius: 0 0 var(--pro-radius) var(--pro-radius) !important;
    background: var(--pro-gradient-soft) !important;
}

/* --- Header mobile : dégradé violet doux --- */
.header.mobile-only,
.header.mobile-only .header-content {
    background: var(--pro-gradient) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.25) !important;
    padding: 10px 14px !important;
}

.header.mobile-only h1,
#headerTitle {
    font-size: var(--pro-fs-lg) !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* --- Header PC : dégradé violet --- */
.pc-header-modern {
    background: var(--pro-gradient) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.2) !important;
}

.pc-header-modern .pc-brand-text h1 {
    color: #fff !important;
    font-size: var(--pro-fs-lg) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.pc-brand-tagline {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: var(--pro-fs-xs) !important;
}

/* Masquer tout logo/icône de marque dans le header */
.pc-logo-icon,
.pc-header-modern .pc-logo-icon,
.simple-logo {
    display: none !important;
}

/* Nav PC : sur fond violet, liens clairs, actif mis en avant --- */
.pc-nav-item {
    color: rgba(255, 255, 255, 0.8) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--pro-radius) !important;
    transition: background var(--pro-transition), color var(--pro-transition) !important;
    font-size: var(--pro-fs-sm) !important;
    padding: 6px 10px !important;
}

.pc-nav-item .pc-nav-icon {
    color: inherit !important;
}

.pc-nav-label {
    font-size: var(--pro-fs-sm) !important;
}

.pc-nav-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.pc-nav-item.active {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--pro-violet) !important;
    box-shadow: var(--pro-shadow-sm) !important;
}

.pc-settings-modern {
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
    border: none !important;
}

.pc-settings-modern:hover,
.pc-settings-modern.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* --- Barre de navigation bas : dégradé violet doux --- */
.nav {
    background: var(--pro-gradient) !important;
    border-top: none !important;
    box-shadow: 0 -2px 16px rgba(99, 102, 241, 0.2) !important;
    padding: 8px 0 max(20px, env(safe-area-inset-bottom)) !important;
}

.nav-tab {
    color: rgba(255, 255, 255, 0.85) !important;
    border-radius: var(--pro-radius) !important;
    transition: color var(--pro-transition), background var(--pro-transition) !important;
    padding: 6px 4px !important;
    min-height: 52px !important;
}

.nav-tab.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

.nav-text {
    font-size: var(--pro-fs-xs) !important;
    font-weight: 600 !important;
}

.nav-brand h1 {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: var(--pro-fs-md) !important;
}

/* --- FAB : violet pour rappeler le header / nav --- */
.fab-floating {
    background: var(--pro-gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
    border: none !important;
    transition: box-shadow var(--pro-transition), transform var(--pro-transition) !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
}

.fab-floating:hover {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45) !important;
}

/* --- Cartes : compactes, bordures fines --- */
.enhanced-card,
.overview-master-card,
.card,
.promo-card,
.data-card {
    background: var(--pro-surface) !important;
    border: 1px solid var(--pro-border) !important;
    box-shadow: var(--pro-shadow-sm) !important;
    border-radius: var(--pro-radius) !important;
    transition: box-shadow var(--pro-transition), border-color var(--pro-transition) !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
}

.enhanced-card:hover,
.overview-master-card:hover,
.data-card:hover {
    border-color: #d4d4d8 !important;
    box-shadow: var(--pro-shadow-md) !important;
}

/* Supprimer toute bordure latérale ou contour coloré */
.enhanced-card,
.overview-master-card,
.card,
[style*="border-left"],
.section {
    border-left-color: var(--pro-border) !important;
}

/* --- Boutons et filtres : fins, compacts --- */
.filter-btn {
    border: 1px solid var(--pro-border) !important;
    background: var(--pro-surface) !important;
    color: var(--pro-text-muted) !important;
    border-radius: var(--pro-radius) !important;
    transition: border-color var(--pro-transition), background var(--pro-transition), color var(--pro-transition) !important;
    font-size: var(--pro-fs-sm) !important;
    padding: 6px 10px !important;
}

.filter-btn:hover {
    border-color: #d4d4d8 !important;
    background: #fafafa !important;
    color: var(--pro-text) !important;
}

.filter-btn.active {
    background: var(--pro-violet) !important;
    color: #fff !important;
    border-color: var(--pro-violet) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

.metrics-tab,
.propfirm-tab,
.report-tab {
    border: 1px solid var(--pro-border) !important;
    background: var(--pro-surface) !important;
    color: var(--pro-text-muted) !important;
    border-radius: var(--pro-radius) !important;
    transition: border-color var(--pro-transition), background var(--pro-transition), color var(--pro-transition) !important;
    font-size: var(--pro-fs-sm) !important;
    padding: 6px 10px !important;
}

.metrics-tab.active,
.propfirm-tab.active,
.report-tab.active {
    background: var(--pro-violet) !important;
    color: #fff !important;
    border-color: var(--pro-violet) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25) !important;
}

/* --- Champs et sélecteurs : compacts --- */
.stats-year-select,
select,
input[type="text"],
input[type="number"],
input[type="date"] {
    border: 1px solid var(--pro-border) !important;
    background: var(--pro-surface) !important;
    border-radius: 6px !important;
    transition: border-color var(--pro-transition), box-shadow var(--pro-transition) !important;
    font-size: var(--pro-fs-base) !important;
    padding: 6px 10px !important;
}

.stats-year-select:focus,
select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus {
    border-color: #a1a1aa !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04) !important;
}

/* --- Liens et boutons secondaires --- */
.home-settings-button,
.widget-customize-btn {
    border: 1px solid var(--pro-border) !important;
    background: var(--pro-surface) !important;
    color: var(--pro-text) !important;
    border-radius: var(--pro-radius) !important;
    transition: background var(--pro-transition), border-color var(--pro-transition) !important;
    font-size: var(--pro-fs-sm) !important;
    padding: 8px 12px !important;
}

.home-settings-button:hover,
.widget-customize-btn:hover {
    background: #fafafa !important;
    border-color: #d4d4d8 !important;
}

/* --- Modal confidentialité : bordures neutres --- */
#privacyModal [style*="border-bottom"],
#privacyModal [style*="border-left"] {
    border-color: var(--pro-border) !important;
}

/* --- Landing : pas de logo image --- */
.simple-logo {
    display: none !important;
}

.simple-title {
    color: var(--pro-text) !important;
    font-size: var(--pro-fs-xl) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

/* --- Historique : mois, entrées --- */
.month-btn {
    font-size: var(--pro-fs-sm) !important;
    padding: 6px 10px !important;
}

/* --- En-têtes de cartes : padding réduit --- */
.enhanced-card > .card-header,
.overview-master-card > .card-header {
    padding-bottom: 10px !important;
    margin-bottom: 4px !important;
}

.chart-section-redesigned .card-header {
    margin-bottom: 6px !important;
}

.simple-download-btn {
    background: var(--pro-text) !important;
    color: var(--pro-surface) !important;
    border: none !important;
    border-radius: var(--pro-radius) !important;
    box-shadow: var(--pro-shadow-sm) !important;
    transition: box-shadow var(--pro-transition) !important;
}

.simple-download-btn:hover {
    box-shadow: var(--pro-shadow-md) !important;
}

/* --- Icônes de langue --- */
.language-flag {
    font-size: var(--pro-fs-xs) !important;
    font-weight: 600 !important;
    color: var(--pro-text-muted) !important;
}

/* --- Stats : barre année --- */
.stats-year-bar {
    border: 1px solid var(--pro-border) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
}

.stats-year-label {
    font-size: var(--pro-fs-sm) !important;
}

/* --- Contenu principal : moins de marge --- */
.content {
    padding: 12px 0 calc(72px + env(safe-area-inset-bottom)) !important;
}

/* --- Titres de cartes : uniformes, fins --- */
.card-title {
    font-size: var(--pro-fs-md) !important;
    font-weight: 600 !important;
    color: var(--pro-text) !important;
}

/* --- Lignes de métriques (accueil) : compactes --- */
.metric-row {
    background: var(--pro-surface) !important;
    border: 1px solid var(--pro-border) !important;
    border-radius: var(--pro-radius) !important;
    box-shadow: var(--pro-shadow-sm) !important;
    padding: 12px 14px !important;
}

.metric-value-large {
    color: var(--pro-text) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

.metric-label-large {
    color: var(--pro-text-muted) !important;
    font-size: var(--pro-fs-sm) !important;
}

/* --- KPIs secondaires (30j, Prop Firm #1) --- */
.stat-value-fluid {
    font-size: var(--pro-fs-lg) !important;
    font-weight: 600 !important;
}

.stat-label-fluid {
    font-size: var(--pro-fs-sm) !important;
    color: var(--pro-text-muted) !important;
}

/* --- Page Stats : valeurs et labels --- */
.stat-value,
.stat-value-fluid {
    font-size: var(--pro-fs-lg) !important;
    font-weight: 600 !important;
}

.stat-label {
    font-size: var(--pro-fs-sm) !important;
    color: var(--pro-text-muted) !important;
}

/* --- Historique : entrées, recherche --- */
.history-search-input {
    font-size: var(--pro-fs-base) !important;
    padding: 8px 12px !important;
}

.simple-history-card,
.history-entry {
    font-size: var(--pro-fs-base) !important;
}

/* --- Data cards (Export, Import) : titres --- */
.data-card-title,
.privacy-card .data-card-title {
    font-size: var(--pro-fs-md) !important;
    font-weight: 600 !important;
}

/* --- États vides, messages --- */
.empty-state-text,
.empty-state-subtext {
    font-size: var(--pro-fs-sm) !important;
    color: var(--pro-text-muted) !important;
}

/* --- Header PC : hauteur compacte --- */
.pc-header-container {
    padding: 8px 16px !important;
    min-height: 48px !important;
}

/* --- Bloc Bulenox / promos : pas de bordure colorée --- */
.bulenox-card,
.promo-card-new,
.overview-master-card.bulenox-card {
    border: 1px solid var(--pro-border) !important;
}

/* --- Data cards (Export, Import, etc.) --- */
.data-card {
    border: 1px solid var(--pro-border) !important;
}

.data-card:hover {
    background: #f9fafb !important;
}

/* --- Mode sombre --- */
html[data-theme="dark"] body,
html[data-theme="dark"] .app-container,
html[data-theme="dark"] .content {
    background: #111827 !important;
}

/* Dark : garder une touche violette sur les titres de page */
html[data-theme="dark"] .page-block-title {
    background: rgba(99, 102, 241, 0.12) !important;
    border-left-color: var(--pro-violet-light) !important;
    border-bottom-color: #374151 !important;
    color: #e5e7eb !important;
}

html[data-theme="dark"] .enhanced-card,
html[data-theme="dark"] .overview-master-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .metric-row {
    background: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Dark : header et nav gardent un dégradé violet assombri */
html[data-theme="dark"] .header.mobile-only,
html[data-theme="dark"] .header.mobile-only .header-content,
html[data-theme="dark"] .pc-header-modern {
    background: linear-gradient(135deg, #4338ca 0%, #5b21b6 50%, #6d28d9 100%) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .nav {
    background: linear-gradient(135deg, #4338ca 0%, #5b21b6 50%, #6d28d9 100%) !important;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .nav-tab.active,
html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .metrics-tab.active,
html[data-theme="dark"] .propfirm-tab.active,
html[data-theme="dark"] .report-tab.active {
    background: rgba(129, 140, 248, 0.35) !important;
    color: #e0e7ff !important;
    border-color: rgba(129, 140, 248, 0.5) !important;
}

html[data-theme="dark"] .fab-floating {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4) !important;
}

html[data-theme="dark"] .pc-nav-item.active {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #e0e7ff !important;
}