/* =============================================================
   BancaForum — Custom Stylesheet
   Versione: 2.0 — CSS Variables System
   Tutti i colori sono configurabili dall'ACP tramite color picker.
   I valori :root sono i fallback di default usati se non configurati.
   ============================================================= */

:root {
    /* Colori principali */
    --bf-primary:         #2f6fed;
    --bf-primary-border:  #2459bd;
    --bf-accent:          #7a4fd4;
    --bf-accent-border:   #623fb0;
    --bf-success:         #2f8f2f;
    --bf-success-border:  #247024;
    --bf-danger:          #d9534f;
    --bf-danger-border:   #8f1d1d;
    --bf-warning:         #f39c12;
    --bf-warning-border:  #b86b00;
    --bf-dark:            #173b72;
    --bf-dark-border:     #0f2f57;

    /* Sfondi pannelli e pagina */
    --bf-bg-page:         #f4f7fb;
    --bf-bg-panel:        #ffffff;
    --bf-bg-panel-alt:    #f0f4fa;
    --bf-bg-balance:      linear-gradient(90deg, #eff6ff 0%, #f5f3ff 55%, #eef9ee 100%);
    --bf-bg-buy-panel:    #eef9ee;
    --bf-buy-panel-border: #2f8f2f;

    /* Tabelle */
    --bf-table-header-bg:    #1e2d45;
    --bf-table-header-text:  #ffffff;
    --bf-table-row-odd:      #f0f4fa;
    --bf-table-row-hover:    #e8f0fe;
    --bf-table-border:       #d1d9e6;
    --bf-table-cell-padding: 8px 10px;

    /* Testi */
    --bf-text:            #1f2937;
    --bf-text-muted:      #6b7280;
    --bf-text-positive:   #1a6b1a;
    --bf-text-negative:   #c0392b;
    --bf-text-warning:    #b86b00;

    /* Balance bar */
    --bf-balance-border:  #cfd8e3;

    /* Bordi e raggi */
    --bf-border:          #d1d9e6;
    --bf-radius-sm:       4px;
    --bf-radius-md:       8px;
    --bf-radius-pill:     999px;
}

/* =============================================================
   WRAPPER PRINCIPALE
   ============================================================= */

.bf-page {
    background: var(--bf-bg-page);
    padding: 16px;
    border-radius: var(--bf-radius-md);
}

/* =============================================================
   PANNELLO PRINCIPALE — sovrascrive .panel del tema
   ============================================================= */

.bf-wrap {
    background: var(--bf-bg-panel);
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius-md);
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.bf-wrap h2 {
    color: var(--bf-text);
    font-size: 1.25em;
    font-weight: 700;
    margin: 0 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bf-border);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* =============================================================
   NAVIGATION BADGE BAR
   ============================================================= */

.bf-nav-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.bf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    border-radius: var(--bf-radius-pill);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.bf-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
    opacity: 0.93;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.bf-btn:active {
    transform: translateY(0);
}

.bf-btn--primary {
    background: var(--bf-primary);
    border-color: var(--bf-primary-border);
    color: #fff !important;
}

.bf-btn--accent {
    background: var(--bf-accent);
    border-color: var(--bf-accent-border);
    color: #fff !important;
}

.bf-btn--success {
    background: var(--bf-success);
    border-color: var(--bf-success-border);
    color: #fff !important;
}

.bf-btn--danger {
    background: var(--bf-danger);
    border-color: var(--bf-danger-border);
    color: #fff !important;
}

.bf-btn--warning {
    background: var(--bf-warning);
    border-color: var(--bf-warning-border);
    color: #fff !important;
}

.bf-btn--dark {
    background: var(--bf-dark);
    border-color: var(--bf-dark-border);
    color: #fff !important;
}

.bf-btn--sm {
    padding: 3px 8px;
    font-size: 0.75rem;
}

/* =============================================================
   BALANCE BAR
   ============================================================= */

.bf-balance-bar {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--bf-radius-pill);
    border: 1px solid var(--bf-balance-border);
    background: var(--bf-bg-balance);
    margin-bottom: 14px;
}

.bf-balance-bar__label {
    color: var(--bf-primary);
    font-weight: 700;
}

.bf-balance-bar__total {
    color: var(--bf-text);
    font-weight: 800;
}

.bf-balance-bar__reserved {
    color: var(--bf-text-warning);
    font-weight: 800;
}

.bf-balance-bar__reserved-label {
    color: var(--bf-text-warning);
    font-weight: 600;
}

.bf-balance-bar__sep {
    color: var(--bf-text-muted);
    font-weight: 700;
}

.bf-balance-bar__available {
    color: var(--bf-success);
    font-weight: 800;
}

/* =============================================================
   PANNELLO SALDO DISPONIBILE (buy page)
   ============================================================= */

.bf-buy-panel {
    border: 2px solid var(--bf-buy-panel-border);
    background: var(--bf-bg-buy-panel);
    border-radius: var(--bf-radius-md);
    padding: 12px 16px;
    margin-bottom: 14px;
}

.bf-buy-panel p {
    margin: 0;
}

/* =============================================================
   TABELLE
   ============================================================= */

.bf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: var(--bf-text);
}

.bf-table thead tr {
    background: var(--bf-table-header-bg);
    color: var(--bf-table-header-text);
}

.bf-table thead th {
    padding: var(--bf-table-cell-padding);
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--bf-table-border);
    white-space: nowrap;
}

.bf-table thead th a {
    color: var(--bf-table-header-text) !important;
    text-decoration: none;
}

.bf-table thead th a:hover {
    text-decoration: underline;
}

.bf-table tbody tr:nth-child(odd) {
    background: var(--bf-table-row-odd);
}

.bf-table tbody tr:hover {
    background: var(--bf-table-row-hover);
}

.bf-table td {
    padding: var(--bf-table-cell-padding);
    border-bottom: 1px solid var(--bf-table-border);
    vertical-align: middle;
}

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

.bf-table .bf-col-icon {
    width: 26px;
    padding-right: 0;
}

.bf-table .bf-col-center {
    text-align: center;
}

.bf-table .bf-col-right {
    text-align: right;
}

/* =============================================================
   TABELLA SCROLLABILE (wrapper per overflow orizzontale)
   ============================================================= */

.bf-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =============================================================
   PORTFOLIO CARDS — layout card per schermi stretti
   Visibili solo sotto i 780px, la tabella viene nascosta.
   ============================================================= */

.bf-portfolio-cards {
    display: none;
}

.bf-portfolio-card {
    background: var(--bf-bg-panel);
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius-md);
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.bf-portfolio-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}

.bf-portfolio-card__ticker {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--bf-text);
}

.bf-portfolio-card__company {
    font-size: 0.85rem;
    color: var(--bf-text-muted);
    flex: 1;
}

.bf-portfolio-card__pl {
    font-weight: 700;
    font-size: 0.9rem;
}

.bf-portfolio-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    font-size: 0.82rem;
    margin-bottom: 10px;
}

.bf-portfolio-card__row {
    display: flex;
    flex-direction: column;
}

.bf-portfolio-card__label {
    color: var(--bf-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bf-portfolio-card__value {
    color: var(--bf-text);
    font-weight: 600;
}

.bf-portfolio-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

@media (max-width: 780px) {
    .bf-portfolio-cards {
        display: block;
    }
    .bf-table-scroll {
        display: none;
    }
}

/* =============================================================
   CELLE DI VARIAZIONE PREZZO
   ============================================================= */

.bf-table .positive {
    color: var(--bf-text-positive);
    font-weight: 700;
}

.bf-table .negative {
    color: var(--bf-text-negative);
    font-weight: 700;
}

.bf-table .neutral {
    color: var(--bf-text-muted);
}

/* Usato anche fuori dalle tabelle (portfolio stats) */
.positive { color: var(--bf-text-positive); font-weight: 700; }
.negative { color: var(--bf-text-negative); font-weight: 700; }

/* =============================================================
   STATISTICHE PORTFOLIO
   ============================================================= */

.bf-stats {
    background: var(--bf-bg-panel-alt);
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius-md);
    padding: 12px 16px;
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.bf-stats p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--bf-text);
}

/* =============================================================
   FORM BUY/SELL
   ============================================================= */

.bf-form fieldset {
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius-md);
    padding: 16px;
    background: var(--bf-bg-panel);
}

.bf-form dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 10px 0;
}

.bf-form dt {
    min-width: 180px;
    color: var(--bf-text);
    font-weight: 600;
}

.bf-form dd {
    margin: 0;
    flex: 1;
    min-width: 140px;
}

.bf-form input[type="number"],
.bf-form input[type="text"] {
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius-sm);
    padding: 6px 10px;
    font-size: 0.95rem;
    color: var(--bf-text);
    background: var(--bf-bg-panel);
    width: 100%;
    max-width: 200px;
    box-sizing: border-box;
}

.bf-form .bf-submit-row {
    margin-top: 14px;
}

/* Nasconde le frecce degli input numerici */
.bf-no-spinner::-webkit-outer-spin-button,
.bf-no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bf-no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* =============================================================
   BANNER SUCCESSO (donazione)
   ============================================================= */

.bf-success-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bf-success);
    color: #fff;
    padding: 18px 22px;
    border-radius: var(--bf-radius-md);
    margin: 20px 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.bf-success-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}

.bf-success-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bf-success-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.bf-success-message {
    font-size: 18px;
    font-weight: 600;
}

.bf-success-actions {
    margin-top: 10px;
}

.bf-success-button {
    display: inline-block;
    background: #ffffff;
    color: var(--bf-success) !important;
    padding: 10px 16px;
    border-radius: var(--bf-radius-sm);
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.05s ease;
}

.bf-success-button:hover {
    background: #f2fff6;
}

.bf-success-button:active {
    transform: translateY(1px);
}

/* =============================================================
   BADGE BANCA (nel post)
   ============================================================= */

.bancaforum-donate {
    margin-top: 5px;
    display: inline-block;
}

.bancaforum-donate .button {
    padding: 2px 8px;
    font-size: 13px;
}

.bancaforum-bank-badge {
    display: inline-block;
    background-color: var(--bf-success);
    color: #fff;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: var(--bf-radius-sm);
    margin-left: 5px;
    vertical-align: middle;
}

/* =============================================================
   MESSAGGI NOTIFICA INLINE
   ============================================================= */

.bf-notice {
    padding: 10px 14px;
    border-radius: var(--bf-radius-md);
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.bf-notice--success {
    background: #eef9ee;
    border: 1px solid var(--bf-success-border);
    color: var(--bf-text-positive);
}

.bf-notice--error {
    background: #fff0f0;
    border: 1px solid var(--bf-danger-border);
    color: var(--bf-text-negative);
}

.bf-notice--warning {
    background: #fff8ec;
    border: 1px solid var(--bf-warning-border);
    color: var(--bf-text-warning);
}

/* =============================================================
   AZIONI INLINE NELLA CELLA TABELLA
   ============================================================= */

.bf-action-cell {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* =============================================================
   TRANSAZIONI — stili specifici
   ============================================================= */

.bf-tx-no-fee {
    color: var(--bf-text-muted);
    font-style: italic;
}

/* =============================================================
   COMPATIBILITÀ LEGACY — mantiene funzionanti i vecchi alias
   ============================================================= */

/* =============================================================
   MANUALE UTENTE
   ============================================================= */

.bf-manual-intro {
    background: var(--bf-bg-panel);
    border: 1px solid var(--bf-border);
    border-left: 4px solid var(--bf-primary);
    border-radius: var(--bf-radius-md);
    padding: 14px 18px;
    margin-bottom: 18px;
}

.bf-manual-intro__text {
    margin: 0 0 6px 0;
    font-size: 1rem;
    color: var(--bf-text);
}

.bf-manual-intro__motto {
    margin: 0;
    font-size: 0.9rem;
    color: var(--bf-text-muted);
}

.bf-manual-sections {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.bf-manual-section {
    background: var(--bf-bg-panel);
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius-md);
    padding: 14px 18px;
}

.bf-manual-section__title {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bf-primary);
    border-bottom: 1px solid var(--bf-border);
    padding-bottom: 6px;
}

.bf-manual-section__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--bf-text);
}

.bf-manual-disclaimer {
    background: var(--bf-bg-panel);
    border: 1px solid var(--bf-border);
    border-left: 4px solid var(--bf-accent);
    border-radius: var(--bf-radius-md);
    padding: 12px 18px;
    margin-bottom: 18px;
    font-size: 0.88rem;
    color: var(--bf-text-muted);
}

.bf-manual-disclaimer p {
    margin: 0;
}

.bf-nav-badge-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.bf-nav-badge { display: inline-flex; align-items: center; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid transparent; font-weight: 600; line-height: 1; text-decoration: none; transition: transform 0.15s ease, opacity 0.15s ease; }
.bf-nav-badge:hover { transform: translateY(-1px); text-decoration: none; opacity: 0.95; }
.bf-nav-badge--primary { background: var(--bf-primary); border-color: var(--bf-primary-border); color: #fff; }
.bf-nav-badge--success { background: var(--bf-success); border-color: var(--bf-success-border); color: #fff; }
.bf-nav-badge--accent  { background: var(--bf-accent);  border-color: var(--bf-accent-border);  color: #fff; }