/**
 * MTS Community P&L Widget — styles.
 *
 * Layouts:
 *   - horizontal: cards affiancate (default desktop)
 *   - vertical:   cards impilate verticalmente
 *   - auto:       horizontal su desktop, vertical su mobile (≤640px)
 *
 * Temi:
 *   - light: sfondo bianco, testi scuri
 *   - dark:  sfondo navy, testi chiari
 *
 * NOTA su specificity:
 * I siti host (blog) hanno spesso reset CSS molto aggressivi che resettano
 * display:grid/flex sui figli di .entry-content o body. Per resistere ai
 * conflitti uso !important sui layout critici e selettori doppio-classe.
 */

/* ====================================================================
   MTS Community P&L Widget — styles base.
   Il VERO CSS è iniettato inline come "critical CSS" nello shortcode
   (build_critical_css con specificity #id per battere il tema host).
   Questo file fornisce fallback/baseline.
   ==================================================================== */

.mtspnl-widget,
.mtspnl-widget *,
.mtspnl-widget *::before,
.mtspnl-widget *::after {
    box-sizing: border-box;
}

/* === TEMI === */
.mtspnl-widget.mtspnl-theme-light {
    background: #fff;
    border-color: #e2e8f0;
    color: #0f172a;
}
.mtspnl-widget.mtspnl-theme-dark {
    background: #0f172a;
    border-color: #1e293b;
    color: #f1f5f9;
}

/* === HEADER === */
.mtspnl-widget .mtspnl-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.mtspnl-widget .mtspnl-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.mtspnl-widget.mtspnl-theme-light .mtspnl-title { color: #64748b; }
.mtspnl-widget.mtspnl-theme-dark .mtspnl-title  { color: #94a3b8; }

.mtspnl-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: mtspnl-pulse 2s infinite;
}
@keyframes mtspnl-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0); }
}

/* === CARDS GRID === */
.mtspnl-widget .mtspnl-cards {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
}

/* HORIZONTAL: cards affiancate, max 5 colonne */
.mtspnl-widget.mtspnl-layout-horizontal .mtspnl-cards {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}

/* VERTICAL: 1 colonna */
.mtspnl-widget.mtspnl-layout-vertical .mtspnl-cards {
    grid-template-columns: 1fr !important;
}

/* AUTO: horizontal su desktop, vertical su mobile */
.mtspnl-widget.mtspnl-layout-auto .mtspnl-cards {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}
@media (max-width: 640px) {
    .mtspnl-widget.mtspnl-layout-auto .mtspnl-cards {
        grid-template-columns: 1fr !important;
    }
}

/* === SINGLE CARD === */
.mtspnl-widget .mtspnl-card {
    padding: 14px 16px !important;
    border-radius: 8px !important;
    text-align: center !important;
    border: 1px solid !important;
    transition: transform 0.15s, box-shadow 0.15s;
    display: block !important;
}
.mtspnl-widget.mtspnl-theme-light .mtspnl-card {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.mtspnl-widget.mtspnl-theme-dark .mtspnl-card {
    background: #1e293b;
    border-color: #334155;
}

/* In vertical: card più "wide" e dense */
.mtspnl-widget.mtspnl-layout-vertical .mtspnl-card {
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
.mtspnl-widget.mtspnl-layout-vertical .mtspnl-card .mtspnl-card-label {
    grid-column: 1;
    grid-row: 1;
}
.mtspnl-widget.mtspnl-layout-vertical .mtspnl-card .mtspnl-card-value {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
}
.mtspnl-widget.mtspnl-layout-vertical .mtspnl-card .mtspnl-card-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 2px;
    font-size: 11px;
}
@media (max-width: 640px) {
    .mtspnl-widget.mtspnl-layout-auto .mtspnl-card {
        text-align: left;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding: 12px 16px;
    }
    .mtspnl-widget.mtspnl-layout-auto .mtspnl-card .mtspnl-card-label  { grid-column: 1; grid-row: 1; }
    .mtspnl-widget.mtspnl-layout-auto .mtspnl-card .mtspnl-card-value  { grid-column: 2; grid-row: 1; text-align: right; }
    .mtspnl-widget.mtspnl-layout-auto .mtspnl-card .mtspnl-card-meta   { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; }
}

/* === CARD CONTENT === */
.mtspnl-widget .mtspnl-card-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: 0.7;
    line-height: 1.3;
}
.mtspnl-widget .mtspnl-card-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.mtspnl-widget .mtspnl-card-meta {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

/* === PROFIT/LOSS COLORS === */
.mtspnl-widget .mtspnl-card.mtspnl-profit .mtspnl-card-value,
.mtspnl-widget .mtspnl-card.mtspnl-profit .mtspnl-card-meta {
    color: #10b981;
}
.mtspnl-widget .mtspnl-card.mtspnl-loss .mtspnl-card-value,
.mtspnl-widget .mtspnl-card.mtspnl-loss .mtspnl-card-meta {
    color: #ef4444;
}

/* === SPARKLINE === */
.mtspnl-widget .mtspnl-card-spark .mtspnl-spark {
    height: 40px;
    margin: 4px 0 2px;
    width: 100%;
}
.mtspnl-widget .mtspnl-card-spark .mtspnl-spark svg {
    width: 100%;
    height: 100%;
    display: block;
}
.mtspnl-widget.mtspnl-theme-light .mtspnl-spark path { stroke: #10b981; }
.mtspnl-widget.mtspnl-theme-dark .mtspnl-spark path  { stroke: #34d399; }
.mtspnl-widget .mtspnl-spark path  { fill: none; stroke-width: 1.5; }
.mtspnl-widget .mtspnl-spark .mtspnl-spark-area { fill: rgba(16, 185, 129, 0.15); stroke: none; }

/* === FOOTER === */
.mtspnl-widget .mtspnl-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    font-size: 11px;
    border-top: 1px solid;
    flex-wrap: wrap;
    gap: 8px;
}
.mtspnl-widget.mtspnl-theme-light .mtspnl-footer { border-top-color: #f1f5f9; color: #64748b; }
.mtspnl-widget.mtspnl-theme-dark .mtspnl-footer  { border-top-color: #1e293b; color: #94a3b8; }

.mtspnl-widget .mtspnl-link {
    font-weight: 600;
    text-decoration: none;
}
.mtspnl-widget.mtspnl-theme-light .mtspnl-link { color: #3b82f6; }
.mtspnl-widget.mtspnl-theme-dark .mtspnl-link  { color: #60a5fa; }
.mtspnl-widget .mtspnl-link:hover { text-decoration: underline; }

/* === FULL WIDGET — replica delle 7 sezioni del widget interno === */

.mtspnl-widget.mtspnl-full {
    max-width: 720px;
    padding: 24px;
}

/* HERO */
.mtspnl-widget .mtspnl-hero {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    padding: 16px 18px !important;
    border-radius: 10px !important;
    margin-bottom: 18px !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.06));
}
.mtspnl-widget.mtspnl-theme-dark .mtspnl-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(16, 185, 129, 0.12));
}
.mtspnl-widget .mtspnl-hero-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.7;
}
.mtspnl-widget .mtspnl-hero-value {
    font-size: 28px;
    font-weight: 800;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.mtspnl-widget .mtspnl-hero-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.mtspnl-widget .mtspnl-hero-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}
.mtspnl-widget .mtspnl-hero-row-label { opacity: 0.7; }
.mtspnl-widget .mtspnl-hero-row-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.mtspnl-widget .mtspnl-hero-row small { font-weight: 400; opacity: 0.65; font-size: 11px; }

/* SECTION TITLE */
.mtspnl-widget .mtspnl-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid;
}
.mtspnl-widget.mtspnl-theme-light .mtspnl-section-title { border-bottom-color: #f1f5f9; color: #64748b; }
.mtspnl-widget.mtspnl-theme-dark .mtspnl-section-title  { border-bottom-color: #1e293b; color: #94a3b8; }
.mtspnl-widget .mtspnl-section-total {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* PERIODS GRID */
.mtspnl-widget .mtspnl-periods-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100%;
}
.mtspnl-widget .mtspnl-period {
    text-align: center !important;
    padding: 10px 8px !important;
    border-radius: 8px !important;
    border: 1px solid !important;
    display: block !important;
}
.mtspnl-widget.mtspnl-theme-light .mtspnl-period { background: #f8fafc; border-color: #e2e8f0; }
.mtspnl-widget.mtspnl-theme-dark .mtspnl-period  { background: #1e293b; border-color: #334155; }
.mtspnl-widget .mtspnl-period-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 4px;
}
.mtspnl-widget .mtspnl-period-value {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.mtspnl-widget .mtspnl-period-pct {
    font-size: 11px;
    margin-top: 2px;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

/* MONTHLY BARS */
.mtspnl-widget .mtspnl-monthly-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 90px;
    margin-bottom: 8px;
}
.mtspnl-widget .mtspnl-monthly-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 9px;
}
.mtspnl-widget .mtspnl-monthly-bar-fill {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.3s;
}
.mtspnl-widget .mtspnl-monthly-bar.mtspnl-profit .mtspnl-monthly-bar-fill { background: #10b981; }
.mtspnl-widget .mtspnl-monthly-bar.mtspnl-loss   .mtspnl-monthly-bar-fill { background: #ef4444; }
.mtspnl-widget .mtspnl-monthly-bar-label {
    opacity: 0.6;
    font-weight: 600;
    text-transform: uppercase;
}

/* PREV YEAR */
.mtspnl-widget .mtspnl-prev-year {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
.mtspnl-widget .mtspnl-prev-cell {
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid;
}
.mtspnl-widget.mtspnl-theme-light .mtspnl-prev-cell { background: #f8fafc; border-color: #e2e8f0; }
.mtspnl-widget.mtspnl-theme-dark .mtspnl-prev-cell  { background: #1e293b; border-color: #334155; }
.mtspnl-widget .mtspnl-prev-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 4px;
}
.mtspnl-widget .mtspnl-prev-value {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.mtspnl-widget .mtspnl-prev-pct {
    font-size: 12px;
    margin-top: 3px;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

/* EQUITY CHART */
.mtspnl-widget .mtspnl-equity-chart {
    height: 120px;
    width: 100%;
    margin-bottom: 4px;
}
.mtspnl-widget .mtspnl-equity-chart svg { width: 100%; height: 100%; display: block; }
.mtspnl-widget .mtspnl-equity-chart .mtspnl-equity-line { fill: none; stroke-width: 2; }
.mtspnl-widget .mtspnl-equity-chart .mtspnl-equity-area { stroke: none; }
.mtspnl-widget.mtspnl-theme-light .mtspnl-equity-line { stroke: #3b82f6; }
.mtspnl-widget.mtspnl-theme-light .mtspnl-equity-area { fill: rgba(59, 130, 246, 0.15); }
.mtspnl-widget.mtspnl-theme-dark .mtspnl-equity-line  { stroke: #60a5fa; }
.mtspnl-widget.mtspnl-theme-dark .mtspnl-equity-area  { fill: rgba(96, 165, 250, 0.2); }

/* FUNDS */
.mtspnl-widget .mtspnl-funds-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.mtspnl-widget .mtspnl-fund-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid !important;
}
.mtspnl-widget.mtspnl-theme-light .mtspnl-fund-row { background: #f8fafc; border-color: #e2e8f0; }
.mtspnl-widget.mtspnl-theme-dark .mtspnl-fund-row  { background: #1e293b; border-color: #334155; }
.mtspnl-widget .mtspnl-fund-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mtspnl-widget .mtspnl-fund-name {
    font-weight: 700;
    font-size: 13px;
}
.mtspnl-widget .mtspnl-fund-pct {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mtspnl-widget .mtspnl-fund-spark {
    width: 100px;
    height: 30px;
}
.mtspnl-widget .mtspnl-fund-spark svg { width: 100%; height: 100%; display: block; }
.mtspnl-widget .mtspnl-fund-spark path { fill: none; stroke-width: 1.5; }
.mtspnl-widget.mtspnl-theme-light .mtspnl-fund-spark path { stroke: #10b981; }
.mtspnl-widget.mtspnl-theme-dark .mtspnl-fund-spark path  { stroke: #34d399; }

/* === RESPONSIVE BASE === */
@media (max-width: 640px) {
    .mtspnl-widget.mtspnl-full .mtspnl-hero { grid-template-columns: 1fr; }
    .mtspnl-widget.mtspnl-full .mtspnl-periods-grid { grid-template-columns: 1fr 1fr; }
    .mtspnl-widget.mtspnl-full .mtspnl-prev-year { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .mtspnl-widget {
        padding: 16px;
    }
    .mtspnl-widget .mtspnl-card-value {
        font-size: 19px;
    }
    .mtspnl-widget .mtspnl-hero-value {
        font-size: 22px;
    }
}