/**
 * =================================================================
 * STRATEGIES MODULE STYLES - MEXC Trading Bot
 * =================================================================
 * Stiluri pentru modulul de strategii de trading
 * Respectă CERINȚĂ #3 - CSS modular separat
 * =================================================================
 */

/* ================================================================
   CONTAINER PRINCIPAL
   ================================================================ */

#strategies-module {
    padding: 0;
}

.strategies-container {
    padding: 0; /* Elimină padding pentru lățime completă */
    min-height: calc(100vh - 200px);
    overflow: visible; /* ✅ IMPORTANT: Permite tooltip-urilor să iasă din container */
    position: relative;
}

/* ================================================================
   EMPTY STATE - Când nu există strategii
   ================================================================ */

.strategies-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem; /* Padding intern pentru conținut */
    margin: 0; /* Elimină margin pentru lățime completă */
    text-align: center;
    background: var(--surface-color);
    border-radius: 0; /* Elimină border-radius */
    border: none; /* Elimină border */
    border-top: 1px solid var(--border-color); /* Doar border de sus */
    border-bottom: 1px solid var(--border-color); /* Și border de jos */
    min-height: 400px;
}

.strategies-empty .empty-icon {
    width: 80px;
    height: 80px;
    color: var(--primary-color);
    opacity: 0.5;
    margin-bottom: 1.5rem;
}

.strategies-empty h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.strategies-empty p {
    color: var(--text-secondary);
    margin: 0 0 2rem 0;
    font-size: 1rem;
    max-width: 400px;
}

.strategies-empty .btn {
    margin-top: 1rem;
}

/* ================================================================
   STRATEGY CARDS - Lista de strategii
   ================================================================ */

.strategies-list {
    display: flex; /* Schimbat de la grid la flex pentru stack vertical */
    flex-direction: column; /* Cardurile stivuite vertical */
    gap: 10px; /* Spațiu de 10px între carduri */
}

.strategy-card {
    background: var(--surface-color);
    border-radius: 0; /* Elimină border-radius pentru margini drepte */
    border: 1px solid var(--border-color); /* Border subtil pe toate laturile */
    border-bottom: 1px solid var(--border-color); /* Doar border de jos */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Shadow subtil pentru profunzime */
    transition: all 0.3s ease;
    overflow: visible; /* ✅ SCHIMBAT: visible pentru a permite tooltip-uri si layout dinamic */
    width: 100%; /* Lățime completă */
    display: flex; /* ✅ ADAUGAT: Flexbox pentru layout vertical */
    flex-direction: column; /* ✅ ADAUGAT: Directie verticala */
}

.strategy-card:hover {
    background: rgba(0, 0, 0, 0.02); /* Ușoară schimbare de fundal la hover */
    border-color: var(--primary-color); /* Border devine primary color la hover */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Shadow mai pronunțat la hover */
    transform: none; /* Elimină translateY pentru consistență */
}

/* Card restrâns (collapsed) */
.strategy-card.collapsed .strategy-card-body,
.strategy-card.collapsed .strategy-card-footer {
    display: none; /* Ascunde body și footer când e restrâns */
}

/* ================================================================
   CARD HEADER
   ================================================================ */

.strategy-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Schimbat de la flex-start la center pentru aliniere */
    padding: 0.75rem 1rem; /* Redus de la 1.25rem */
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--surface-color) 0%, rgba(0,0,0,0.02) 100%);
    gap: 1rem; /* Spațiu între elemente */
}

.strategy-info {
    display: flex;
    gap: 0.75rem; /* Redus de la 1rem */
    flex: 1;
}

.strategy-icon {
    width: 40px; /* Redus de la 48px */
    height: 40px;
    border-radius: 8px; /* Redus de la 10px */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* ✅ NOU: Wrapper pentru iconița BOT (ca în Dashboard) */
.strategy-icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.strategy-card:hover .strategy-icon-wrapper {
    transform: scale(1.05);
}

/* Iconița BOT în strategies folosește același stil ca în Dashboard */
.strategy-icon-wrapper .svg-icon.bot-icon {
    font-size: 32px; /* Mărime iconița */
}

.strategy-card:hover .strategy-icon {
    transform: scale(1.05);
}

.strategy-icon.grid {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.strategy-icon.dca {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.strategy-icon svg {
    color: white;
}

.strategy-details {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center; /* Aliniază pe vertical centrat */
    gap: 1rem; /* Spațiu între name și meta */
    flex-wrap: wrap; /* Permite wrap pe mobile */
}

.strategy-name {
    font-size: 0.8rem; /* ✅ Redus de la 0.9rem pentru dimensiune mai mică */
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 !important; /* ✅ Elimină margin-bottom pentru aliniere pe aceeași linie */
    line-height: 1.2 !important; /* ✅ Mărit de la 1 pentru a arăta textul complet */
    overflow: hidden;
    text-overflow: ellipsis; /* Adaugă '...' dacă textul e prea lung */
    white-space: nowrap; /* Previne wrap-ul textului pe mai multe linii */
    flex-shrink: 0; /* Nu permite micșorarea numelui */
    padding-right: 0.75rem; /* Redus de la 1rem */
    /* ✅ border-right eliminat */
}

/* Container pentru nume + badge BOT (aliniere orizontală) */
/* ✅ SCHIMBAT: strategy-name-column - Layout vertical (BOT badge sub nume) */
.strategy-name-column {
    display: flex; /* Layout flex pentru aliniere */
    flex-direction: column; /* Layout vertical - badge sub nume */
    align-items: center; /* ✅ Centrat orizontal - badge în mijloc */
    gap: 0.4rem; /* Spațiu între nume și badge */
}

/* Badge pentru numărul BOT (BOT_1, BOT_2, etc.) */
.strategy-bot-badge {
    display: inline-flex; /* Layout inline-flex pentru sizing automat */
    align-items: center; /* Aliniază vertical centrat */
    padding: 0.2rem 0.5rem; /* Padding compact */
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.10), rgba(118, 101, 162, 0.10)); /* ✅ Gradient foarte subtil cu opacitate 10% */
    color: #9ca3af; /* ✅ Gri deschis pentru status oprit (default) */
    font-size: 0.7rem; /* Font mic */
    font-weight: 700; /* Font bold */
    border-radius: 12px; /* Colțuri rotunjite */
    text-transform: uppercase; /* Text cu majuscule */
    letter-spacing: 0.5px; /* Spacing între litere */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Shadow subtil */
    white-space: nowrap; /* Previne wrap-ul textului */
    margin-left: -10px; /* Ajustare 10px la stânga pentru centrare perfectă */
    margin-top: 0 !important; /* ✅ Elimină orice margin-top care vine din alte reguli */
    margin-bottom: 0 !important; /* ✅ Elimină orice margin-bottom */
    transition: all 0.3s ease; /* Tranziție smoothă */
}

/* ✅ Culoare NEGRU pentru badge când strategia e activă (running) */
.strategy-card.running .strategy-bot-badge {
    color: #1f2937; /* Negru pentru status activ */
}

/* ✅ Animație de pulsație pentru badge când strategia e activă */
@keyframes badgePulse {
    0%, 100% {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.10), rgba(118, 101, 162, 0.10));
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    50% {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.25), rgba(118, 101, 162, 0.25));
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }
}

/* Aplică animația pe badge când strategia e activă (running) */
.strategy-card.running .strategy-bot-badge {
    animation: badgePulse 2s ease-in-out infinite;
}

/* ✅ MODIFICAT: strategy-meta este container flex column (2 rânduri) */
.strategy-meta {
    display: flex;
    flex-direction: column; /* Layout vertical - 2 rânduri */
    gap: 0.35rem; /* Spațiu între rânduri */
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Rândul 1: Type | Market | Symbol (inline) */
.strategy-meta-main {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

.strategy-type {
    font-weight: 500;
}

.strategy-separator {
    color: var(--border-color);
}

.strategy-market {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.strategy-market.spot {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.strategy-market.futures {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.strategy-symbol {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--text-primary);
}

/* ✅ NOU: Source File Path - Pe linie separată sub metadata */
.strategy-source {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.55rem;
    color: var(--text-secondary);
    margin-top: 0.05rem;
    padding: 0.05rem 0.45rem;
    background: rgba(102, 126, 234, 0.06);
    border-radius: 4px;
    border-left: 2px solid rgba(102, 126, 234, 0.4);
    transition: all 0.2s ease;
    width: fit-content;
}

.strategy-source:hover {
    background: rgba(102, 126, 234, 0.12);
    border-left-color: rgba(102, 126, 234, 0.7);
}

.source-icon {
    flex-shrink: 0;
    opacity: 0.65;
}

.source-path {
    font-family: 'Courier New', Monaco, monospace;
    font-weight: 500;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}

/* ================================================================
   STATUS INDICATOR
   ================================================================ */

.strategy-status {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* Redus de la 0.5rem */
    padding: 0.35rem 0.75rem; /* Redus de la 0.5rem 1rem */
    border-radius: 16px; /* Redus de la 20px */
    font-size: 0.8rem; /* Redus de la 0.85rem */
    font-weight: 600;
    white-space: nowrap;
}

.strategy-status.running {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.strategy-status.stopped {
    background: rgba(156, 163, 175, 0.1);
    color: #6b7280;
}

.status-indicator {
    width: 6px; /* Redus de la 8px */
    height: 6px;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.strategy-status.running .status-indicator {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.strategy-status.stopped .status-indicator {
    background: #6b7280;
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ================================================================
   CARD CONTROLS - Butoane de control (mută sus/jos, collapse)
   ================================================================ */

.strategy-card-controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    width: 28px; /* Redus de la 32px */
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    padding: 0;
}

.btn-icon:hover {
    background: var(--background-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
}

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

.btn-icon svg {
    width: 14px; /* Redus de la 16px */
    height: 14px;
}

/* Animație pentru butonul de collapse */
/* ✅ Buton collapse: + când e deschis, − când e închis (ca în Settings) */
.btn-collapse svg {
    transition: transform 0.3s ease;
}

.btn-collapse svg line:first-child {
    transition: opacity 0.3s ease;
}

/* Când cardul e collapsed (închis), prima linie (verticală) dispare → rămâne doar − */
.strategy-card.collapsed .btn-collapse svg line:first-child {
    opacity: 0;
}

/* ================================================================
   CARD BODY - Metrici
   ================================================================ */

.strategy-card-body {
    padding: 0.5rem 1rem; /* Redus de la 0.75rem 1rem */
    overflow: visible;  /* ✅ Permite tooltip-urilor sa iasa din body */
    min-height: 0; /* ✅ Permite flex items sa se redimensioneze corect */
}

.strategy-metrics {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 coloane pentru 5 metrici */
    gap: 0.1rem 0.75rem; /* Row gap ultra-compact, column gap normal */
    row-gap: 0.1rem; /* Forțează gap vertical ultra-mic */
    padding: 0;
    margin-bottom: 0.5rem;
}

.metric {
    display: flex;
    flex-direction: column; /* Layout vertical: label sus, value jos */
    align-items: center; /* ✅ SCHIMBAT: Centrat - valorile centrate sub label-uri */
    gap: 0.2rem; /* Spațiu mic între label și value */
}

.metric-label {
    font-size: 0.7rem; /* Mărime mică ca în config */
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    white-space: nowrap;
}

/* ✅ Elimină separatorul :: după label */
.metric-label::after {
    content: none;
}

.metric-value {
    font-size: 0.85rem; /* Mărime value ca în config */
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    background: transparent !important; /* ✅ Forțează fundal transparent */
}

/* ✅ Toate metricile au aceeași culoare - fără verde pentru positive */
.strategy-metrics .metric-value.positive {
    color: var(--text-primary) !important; /* Text normal, fără verde */
    background: transparent !important; /* Fără fundal verde */
}

.strategy-metrics .metric-value.negative {
    color: #ef4444 !important; /* Doar valorile negative rămân roșii */
    background: transparent !important; /* Fără fundal */
}

/* ================================================================
   STRATEGY CONFIG - Configurație specifică (Grid/DCA)
   ================================================================ */

.strategy-config {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ================================================================
   CONFIG CONTAINER - Layout side-by-side compact
   ================================================================ */

.config-container {
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 500px;  /* ✅ Înălțime maximă pentru întregul container */
    overflow: visible;  /* ✅ Permite tooltip-urilor să iasă din container */
}

/* Header cu titlu și buton editare */
.config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;  /* ✅ Header-ul nu se comprimă */
    overflow: visible;  /* ✅ Permite tooltip-urilor să iasă din header */
    position: relative;  /* ✅ Context pentru positioning */
}

.config-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Layout 2 coloane: Display + Edit Form */
.config-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 50% fiecare */
    gap: 1.5rem;
    align-items: start;  /* ✅ SCHIMBAT: start in loc de stretch pentru a permite crestere naturala */
    min-height: 0;  /* ✅ Permite scroll */
    overflow: visible;  /* ✅ SCHIMBAT: Permite tooltip-urilor sa iasa din container */
    margin-bottom: 1rem; /* ✅ ADAUGAT: Spatiu intre configuratie si footer */
}

/* Coloana 1: Valori curente (read-only) */
.config-display {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;  /* Acelasi gap ca in form */
    min-height: 0;  /* ✅ Permite scroll in grid */
    height: auto; /* ✅ ADAUGAT: Inaltime automata pentru crestere naturala */
}

.config-item-compact {
    display: grid;
    grid-template-columns: 100px 80px 1fr;  /* Label (100px) | Value (80px) | Description (mai mult spațiu) */
    align-items: center;
    gap: 5px;  /* ✅ Redus de la 8px la 5px pentru compactare */
    padding: 2px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.config-item-compact .label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.config-item-compact .value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    justify-self: end;
}

.config-item-compact .description {
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0.7;
    font-style: italic;
    white-space: nowrap;
    text-align: left;
    justify-self: start;
    padding-left: 10px;  /* ✅ Adăugat 10px spațiu la stânga pentru separare vizuală */
}

/* Coloana 2: Formular editare (ascuns inițial) */
.config-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 1.5rem;
    border-left: 2px solid var(--primary-color);
    height: 100%;  /* ✅ Exact înălțimea grid cell-ului */
    min-height: 0;  /* ✅ Permite shrink în grid */
    overflow: visible;  /* ✅ SCHIMBAT: Permite tooltip-urilor să iasă */
}

/* Coloana 2: Panou informativ (vizibil când formularul e ascuns) */
.config-info-panel {
    display: flex;
    flex-direction: column;
    padding-left: 1.5rem;
    border-left: 2px solid var(--border-color);
    height: 100%;  /* ✅ Exact înălțimea grid cell-ului */
    max-height: 480px;  /* ✅ Limitează înălțimea maximă */
    min-height: 0;  /* ✅ Permite shrink în grid */
    overflow: hidden;  /* ✅ Împiedică expandarea */
}

.config-info-panel .info-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 0.75rem 0;
    flex-shrink: 0;  /* Titlul nu se comprimă */
}

.config-info-panel .info-content {
    flex: 1;  /* Ia tot spațiul disponibil */
    min-height: 0;  /* ✅ Permite scroll când flex child */
    overflow-y: auto;   /* Scroll vertical când conținutul depășește */
    overflow-x: hidden;
    padding-right: 0.5rem;  /* Spațiu pentru scrollbar */
    /* Styling pentru conținut */
    font-size: 11px;  /* Font mic pentru mai mult conținut */
    line-height: 1.5;
    color: var(--text-secondary);
    opacity: 0.7;     /* Contrast subtil */
    font-style: italic;
}

/* Scroll bar subtil pentru panou informativ */
.config-info-panel .info-content::-webkit-scrollbar {
    width: 6px;
}

.config-info-panel .info-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.config-info-panel .info-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.config-info-panel .info-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.config-info-panel .info-content p {
    margin: 0 0 0.75rem 0;
}

.config-info-panel .info-content strong {
    font-weight: 600;
    color: var(--text-primary);
    opacity: 1;
    font-style: normal;
}

.config-info-panel .info-content ul {
    margin: 0.5rem 0 0.75rem 1.25rem;
    padding: 0;
}

.config-info-panel .info-content li {
    margin-bottom: 0.35rem;
}

/* Ascunde panoul informativ când formularul e vizibil */
.config-layout.edit-mode .config-info-panel {
    display: none;
}

.form-group-compact {
    display: grid;
    grid-template-columns: auto 1fr 50px; /* ✅ Auto pentru label+warning, apoi input, apoi small */
    align-items: center;
    gap: 0.5rem;
    position: relative; /* ✅ Pentru tooltip positioning */
}

/* ✅ Container pentru label + warning */
.form-group-compact label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px; /* ✅ Spațiu între label și warning */
    min-width: 90px; /* ✅ Lățime minimă pentru label */
    position: relative; /* ✅ Pentru tooltip positioning */
}

.form-group-compact input {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-primary);
    background: var(--card-background);
    transition: all 0.2s ease;
}

.form-group-compact input[type="checkbox"] {
    width: 16px;   /* ✅ Mărit la 16 pixeli */
    height: 16px;  /* ✅ Mărit la 16 pixeli */
    cursor: pointer;
    accent-color: var(--primary-color);  /* Culoare custom pentru checkbox */
    margin: 0;
    vertical-align: middle;
}

/* Styling pentru labels cu checkbox */
.form-group-compact:has(input[type="checkbox"]) {
    grid-template-columns: 90px auto 50px;  /* Layout special pentru checkbox */
}

.form-group-compact:has(input[type="checkbox"]) label {
    grid-column: 1 / 2;
}

.form-group-compact:has(input[type="checkbox"]) input[type="checkbox"] {
    grid-column: 2 / 3;
    justify-self: start;
}

.form-group-compact:has(input[type="checkbox"]) small {
    grid-column: 3 / 4;
    font-size: 0.65rem;
}

.form-group-compact input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* ✅ Validation warning icon */
.validation-warning {
    position: relative;
    font-size: 1rem;
    color: #ff6b6b;
    margin-left: 5px;
    animation: pulse-warning 1.5s ease-in-out infinite;
    cursor: help;
    display: inline-block;
}

/* ✅ Dezactivează tooltip-ul nativ al browser-ului */
.validation-warning[title] {
    pointer-events: auto;
}

@keyframes pulse-warning {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

/* ✅ Tooltip pentru warning (deasupra icon-ului) */
.validation-warning::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(2px);  /* ✅ SCHIMBAT: de la -8px la +2px (10px mai jos) */
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4), 0 0 0 1px rgba(239, 68, 68, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 999999;  /* ✅ CRESCUT: z-index foarte mare pentru a ieși din orice container */
    font-weight: 500;
    text-align: center;
}

/* Săgeată tooltip (jos, sub tooltip, spre icon) */
.validation-warning::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);  /* ✅ SCHIMBAT: translateY pozitiv pentru a o muta SUB tooltip */
    border: 6px solid transparent;
    border-top-color: #dc2626;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000000;  /* ✅ CRESCUT: Săgeața trebuie să fie deasupra tooltip-ului */
}

.validation-warning:hover::after,
.validation-warning:hover::before {
    opacity: 1;
    visibility: visible;
}

.validation-warning:hover::after {
    transform: translateX(-50%) translateY(-2px);  /* ✅ SCHIMBAT: de la -12px la -2px (10px mai jos) */
}

.validation-warning:hover::before {
    transform: translateX(-50%) translateY(0px);  /* ✅ SCHIMBAT: 0px pentru poziție perfectă sub tooltip */
}

/* Animație fade-in pentru tooltip */
@keyframes warningTooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(-12px);
    }
}

.validation-warning:hover::after {
    animation: warningTooltipFadeIn 0.3s ease forwards;
}

.form-group-compact input.invalid {
    border: 3px solid #ff6b6b;  /* ✅ SCHIMBAT: de la border-color la border complet cu 3px */
    background-color: rgba(255, 107, 107, 0.05);
    padding: calc(0.35rem - 2px) calc(0.5rem - 2px);  /* ✅ Compensează border-ul mai gros pentru a păstra dimensiunea */
}

.form-group-compact small {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: right;
}

/* Buton Editează/Salvează */
.btn-edit-config {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: #22577a;  /* ✅ Culoare nouă pentru butonul Editează */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit-config:hover {
    background: #1a4460;  /* ✅ Culoare mai închisă la hover */
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(34, 87, 122, 0.4);  /* ✅ Shadow ajustată */
}

.btn-edit-config svg {
    width: 14px;
    height: 14px;
}

/* ✅ Buton disabled când strategia rulează - arată NORMAL (albastru cu "Editează") */
.btn-edit-config.disabled,
.btn-edit-config:disabled {
    cursor: not-allowed;
    position: relative;
}

/* ✅ Forțează pointer-events pentru a permite hover chiar și cu disabled */
.btn-edit-config.disabled {
    pointer-events: auto !important;
}

/* ✅ Text "Editează" - ascuns la hover */
.btn-edit-config.disabled .edit-text {
    display: inline;
}

.btn-edit-config.disabled:hover .edit-text {
    display: none !important;
}

/* ✅ Text "Blocat" - ascuns normal, vizibil la hover */
.btn-edit-config.disabled .locked-text {
    display: none;
}

.btn-edit-config.disabled:hover .locked-text {
    display: inline !important;
}

/* ✅ Tooltip custom (nu folosim title native) - STÂNGA butonului */
.btn-edit-config.disabled::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 100%;  /* ✅ SCHIMBAT: Poziționat la stânga butonului */
    top: 50%;
    transform: translateY(-50%);  /* ✅ SCHIMBAT: Centrat vertical */
    margin-right: 10px;  /* ✅ Spațiu între tooltip și buton */
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);  /* ✅ SCHIMBAT: Fundal roșu */
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5), 0 0 0 1px rgba(239, 68, 68, 0.4);  /* ✅ SCHIMBAT: Shadow roșu */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 999999;
    font-weight: 500;
}

/* ✅ Săgeată tooltip (dreapta, spre buton) */
.btn-edit-config.disabled::before {
    content: '';
    position: absolute;
    right: 100%;  /* ✅ SCHIMBAT: Poziționat la stânga */
    top: 50%;
    transform: translateY(-50%);  /* ✅ SCHIMBAT: Centrat vertical */
    margin-right: 4px;  /* ✅ Spațiu între săgeată și buton */
    border: 6px solid transparent;
    border-left-color: #dc2626;  /* ✅ SCHIMBAT: Săgeată roșie */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000000;
}

/* ✅ La hover, tooltip-ul apare */
.btn-edit-config.disabled:hover::after,
.btn-edit-config.disabled:hover::before {
    opacity: 1;
    visibility: visible;
}

.btn-edit-config.disabled:hover::after {
    transform: translateY(-50%) translateX(-5px);  /* ✅ SCHIMBAT: Slide spre stânga */
}

/* ✅ Animație shake subtilă când user încearcă să dea click pe buton disabled */
.btn-edit-config.disabled:active,
.btn-edit-config:disabled:active {
    animation: shake-disabled 0.3s ease;
}

@keyframes shake-disabled {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* ================================================================
   TOOLTIP-URI PENTRU BUTOANE DE ACȚIUNE (Start, Stop, Delete)
   ================================================================ */

/* ✅ Buton cu tooltip - poziționare relativă */
.btn-with-tooltip {
    position: relative;
}

/* ✅ Tooltip custom DEASUPRA butonului */
.btn-with-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;  /* ✅ Deasupra butonului */
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: nowrap;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 999999;
    font-weight: 500;
}

/* ✅ Culoare roșie pentru Stop și Delete */
.btn-danger.btn-with-tooltip::after {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5), 0 0 0 1px rgba(239, 68, 68, 0.4);
}

/* ✅ Culoare verde pentru Start */
.btn-success.btn-with-tooltip::after {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.5), 0 0 0 1px rgba(16, 185, 129, 0.4);
}

/* ✅ Culoare albastră pentru SAVE AS BOT (primary) */
.btn-primary.btn-with-tooltip::after {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.4);
}

/* ✅ Culoare portocalie pentru CLONE (secondary) */
.btn-secondary.btn-with-tooltip::after {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.5), 0 0 0 1px rgba(249, 115, 22, 0.4);
}

/* ✅ Săgeată tooltip (jos, spre buton) */
.btn-with-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    border: 6px solid transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000000;
}

/* ✅ Săgeată roșie pentru Stop și Delete */
.btn-danger.btn-with-tooltip::before {
    border-top-color: #dc2626;
}

/* ✅ Săgeată verde pentru Start */
.btn-success.btn-with-tooltip::before {
    border-top-color: #059669;
}

/* ✅ Săgeată albastră pentru SAVE AS BOT (primary) */
.btn-primary.btn-with-tooltip::before {
    border-top-color: #2563eb;
}

/* ✅ Săgeată portocalie pentru CLONE (secondary) */
.btn-secondary.btn-with-tooltip::before {
    border-top-color: #ea580c;
}

/* ✅ La hover, tooltip-ul apare */
.btn-with-tooltip:hover::after,
.btn-with-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

.btn-with-tooltip:hover::after {
    transform: translateX(-50%) translateY(-12px);
}

/* ✅ Animație shake pentru butonul Delete la hover */
.btn-danger.btn-with-tooltip:hover svg {
    animation: trash-shake 0.5s ease-in-out;
}

/* ✅ Animație pulse pentru butonul CLONE la hover */
.btn-secondary.btn-with-tooltip:hover svg {
    animation: clone-pulse 0.6s ease-in-out;
}

@keyframes trash-shake {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-3deg); }
    20% { transform: rotate(3deg); }
    30% { transform: rotate(-3deg); }
    40% { transform: rotate(3deg); }
    50% { transform: rotate(-2deg); }
    60% { transform: rotate(2deg); }
    70% { transform: rotate(-1deg); }
    80% { transform: rotate(1deg); }
    90% { transform: rotate(-0.5deg); }
}

@keyframes clone-pulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.15); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Mode: Edit activ */
.config-layout.edit-mode .config-display {
    opacity: 0.6;
}

.config-layout.edit-mode .config-edit-form {
    display: flex !important;
}

/* Responsive */
@media (max-width: 768px) {
    .config-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .config-edit-form {
        padding-left: 0;
        border-left: none;
        border-top: 2px solid var(--primary-color);
        padding-top: 1rem;
    }
}

/* Legacy styles (păstrate pentru compatibilitate) */
.config-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.1rem 0.75rem; /* Row gap ultra-compact la 0.1rem, column gap 0.75rem */
    row-gap: 0.1rem; /* Forțează gap vertical ultra-mic */
}

.config-item {
    display: flex;
    flex-direction: row; /* Schimbat de la column la row pentru aliniere orizontală */
    align-items: center; /* Aliniază vertical centrat */
    gap: 0.4rem; /* Spațiu între label și value */
}

.config-label {
    font-size: 0.7rem; /* Redus de la 0.75rem */
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap; /* Previne wrap-ul textului */
    position: relative;
}

/* Separator vizual după label */
.config-label::after {
    content: ':';
    margin-left: 0.15rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

.config-value {
    font-size: 0.85rem; /* Redus de la 0.9rem */
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap; /* Previne wrap-ul valorii */
}

/* ================================================================
   CONFIG ACTIONS - Butoane pentru editarea configurației
   ================================================================ */

.config-actions {
    margin-top: 1.5rem; /* Spațiu deasupra butonului */
    padding-top: 1rem; /* Padding intern */
    display: flex;
    justify-content: flex-start; /* Aliniere la stânga */
}

.btn-edit-config {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #22577a;  /* ✅ Culoare nouă pentru butonul Editează */
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit-config:hover {
    background: #1a4460;  /* ✅ Culoare mai închisă la hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(34, 87, 122, 0.4);  /* ✅ Shadow ajustată */
}

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

.btn-edit-config svg {
    width: 16px;
    height: 16px;
}

/* ================================================================
   TABS PANEL - Sistem de taburi pentru detalii strategii
   ================================================================ */

/* Container principal pentru panoul cu taburi */
.strategy-tabs-panel {
    margin-top: 0.75rem; /* Spațiu deasupra panoului */
    border-top: 1px solid var(--border-color); /* Separator vizual */
    padding-top: 0.75rem; /* Padding intern */
}

/* Container pentru taburi (header-ul taburilor) */
.strategy-tabs-header {
    display: flex; /* Layout flex pentru aliniere orizontală */
    gap: 0.5rem; /* Spațiu între taburi */
    border-bottom: 2px solid var(--border-color); /* Linie de separare sub taburi */
    margin-bottom: 0.1rem; /* Spațiu sub header */
    overflow: visible; /* ✅ IMPORTANT: Permite tooltip-urilor să iasă din header */
    position: relative;
    z-index: auto; /* ✅ SCHIMBAT: Auto pentru a nu crea stacking context (era z-index: 1) */
}

/* Tab individual (buton tab) */
.strategy-tab {
    padding: 0.5rem 1rem; /* Padding intern pentru tab */
    background: transparent; /* Fundal transparent pentru tab inactiv */
    border: none; /* Fără bordură */
    border-bottom: 2px solid transparent; /* Bordură de jos transparentă (pentru tab activ) */
    cursor: pointer; /* Cursor pointer la hover */
    font-size: 0.85rem; /* Dimensiune text */
    font-weight: 600; /* Text bold */
    color: var(--text-secondary); /* Culoare text secundară pentru tab inactiv */
    transition: all 0.2s ease; /* Tranziție smoothă */
    position: relative; /* Poziționare relativă pentru linia de jos */
    bottom: -2px; /* Offset pentru a suprapune linia de jos */
    z-index: auto; /* ✅ ADĂUGAT: Auto pentru a nu bloca tooltip-urile */
}

/* Tab la hover */
.strategy-tab:hover {
    color: var(--primary-color); /* Culoare primary la hover */
    background: rgba(0, 0, 0, 0.02); /* Fundal subtil la hover */
}

/* Tab activ */
.strategy-tab.active {
    color: var(--primary-color); /* Culoare primary pentru tab activ */
    border-bottom-color: var(--primary-color); /* Bordură de jos primary pentru tab activ */
}

/* Container pentru conținutul taburilor */
.strategy-tabs-content {
    padding: 0; /* ✅ ELIMINAT: era 0.75rem 0 - creează spațiu inutil */
    min-height: 0; /* ✅ ELIMINAT: era 150px - forța înălțime minimă */
    overflow-x: hidden; /* ✅ FIX: Elimină scroll orizontal în plus */
}

/* Conținut individual per tab */
.strategy-tab-pane {
    display: none; /* Ascunde conținutul implicit */
    overflow-x: hidden; /* ✅ FIX: Elimină scroll orizontal în plus */
}

/* Conținut tab activ (vizibil) */
.strategy-tab-pane.active {
    display: block; /* Afișează conținutul tab-ului activ */
    overflow-x: hidden; /* ✅ FIX: Elimină scroll orizontal în plus */
}

/* ✅ Padding pentru tab-ul de informații */
.strategy-tab-pane[data-pane="information"] {
    padding: 0.75rem 0; /* Spațiu intern pentru informații */
}

/* ✅ Padding pentru tab-ul de configurație */
.strategy-tab-pane[data-pane="config"] {
    padding: 1rem; /* Spațiu intern pentru configurație */
    border-bottom: 1px solid var(--border-color); /* ✅ ADĂUGAT: Bordură la fund */
    overflow: visible;  /* ✅ Permite tooltip-urilor să iasă din tab */
}

/* ✅ Padding pentru tab-ul de testare */
.strategy-tab-pane[data-pane="testing"] {
    padding: 0; /* ✅ SCHIMBAT: Fără padding pentru a permite layout-ul să gestioneze spațiile */
    height: 100%; /* ✅ Ocupă toată înălțimea disponibilă */
    overflow: visible; /* ✅ IMPORTANT: Permite tooltip-urilor să iasă din tab */
    position: relative; /* ✅ Pentru poziționare corectă a tooltip-urilor */
}

/* ================================================================
   TAB TESTARE - Layout Două Panouri
   ================================================================ */

/* Container principal testare - Layout flex cu două panouri */
.testing-layout {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    overflow: visible; /* ✅ Permite tooltip-urilor să iasă */
    position: relative;
}

/* Panou stânga: Variabile (250px fix, se restrânge când e collapsed) */
.testing-variables {
    width: 250px;
    flex-shrink: 0; /* ✅ Nu se comprimă */
    border-right: 2px solid var(--border-color);
    padding: 4px;
    background: transparent;
    overflow-y: auto; /* ✅ Scroll dacă conținutul e prea mare */
    overflow-x: visible; /* ✅ Permite tooltip-urilor să iasă lateral */
    transition: width 0.3s ease; /* ✅ ADĂUGAT: Tranziție smooth pentru width */
}

/* ✅ ADĂUGAT: Panou collapsed - se restrânge la lățimea butonului */
.testing-variables.collapsed {
    width: 44px; /* ✅ AJUSTAT: 32px buton + 8px padding + 4px extra */
    overflow: hidden; /* ✅ Ascunde conținutul care depășește */
}

/* Panou dreapta: TradingView (restul spațiului) */
.testing-tradingview {
    flex: 1; /* ✅ Ocupă tot spațiul rămas */
    min-width: 400px; /* ✅ Lățime minimă pentru grafic */
    padding: 4px;
    background: transparent;
    overflow-y: auto; /* ✅ Scroll vertical dacă conținutul e prea mare */
    overflow-x: hidden; /* ✅ FIX: Elimină scroll orizontal nedorit */
    position: relative; /* ⚠️ IMPORTANT: Pentru poziționare butoane absolute */
}

/* ✅ MODIFICAT: Header panou cu buton collapse deasupra */
.testing-panel-header {
    display: flex;
    justify-content: flex-end; /* ✅ Aliniere la dreapta */
    align-items: center;
    margin-bottom: 0.5rem; /* ✅ Spațiu sub buton */
}

/* Titluri panouri - Identice cu "Configurație Grid Trading" */
.testing-panel-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 20 0 0 0;
    border-bottom: 1px solid var(--border-color);
    /*text-transform: uppercase;*/
    letter-spacing: 0.5px;
}

/* ✅ ADĂUGAT: Header row cu statistici (Tradingview + Stats) */
.testing-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

/* ✅ ADĂUGAT: Container statistici test */
.test-stats-container {
    display: flex;
    gap: 30px;
    align-items: center;
}

/* ✅ ADĂUGAT: Item individual statistică */
.test-stat-item {
    display: flex;
    flex-direction: column;           /* ✅ MODIFICAT: column pentru layout vertical */
    align-items: center;              /* ✅ Centrat orizontal */
    gap: 4px;                         /* ✅ MODIFICAT: spațiu mic între text și valoare */
}

/* ✅ ADĂUGAT: Label statistică (text deasupra) - SPECIFICITATE MAXIMĂ */
.test-stats-container .test-stat-item .stat-label,
.testing-tradingview .test-stats-container .stat-label {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;  /* ✅ Default: gri închis */
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-transform: none !important;  /* ✅ OVERRIDE: elimină uppercase din main.css */
    margin-bottom: 0 !important;      /* ✅ OVERRIDE: elimină margin din main.css */
}

/* ✅ NOU: Dark theme - stat labels albe */
.strategy-card[data-card-theme="dark"] .test-stats-container .test-stat-item .stat-label,
.strategy-card[data-card-theme="dark"] .testing-tradingview .test-stats-container .stat-label {
    color: var(--card-dark-text, #ffffff) !important;
}

/* ✅ NOU: Light theme - stat labels negre/gri */
.strategy-card[data-card-theme="light"] .test-stats-container .test-stat-item .stat-label,
.strategy-card[data-card-theme="light"] .testing-tradingview .test-stats-container .stat-label {
    color: var(--card-light-text, var(--text-primary)) !important;
}

/* ✅ ADĂUGAT: Valoare statistică (valoare dedesubt) - SPECIFICITATE MAXIMĂ */
.test-stats-container .test-stat-item .stat-value,
.testing-tradingview .test-stats-container .stat-value {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;  /* ✅ Default: gri închis */
    font-family: 'Courier New', monospace !important;
    white-space: nowrap !important;
    text-align: center !important;
    margin-bottom: 0 !important;      /* ✅ OVERRIDE: elimină margin din main.css */
}

/* ✅ NOU: Dark theme - stat values albe */
.strategy-card[data-card-theme="dark"] .test-stats-container .test-stat-item .stat-value,
.strategy-card[data-card-theme="dark"] .testing-tradingview .test-stats-container .stat-value {
    color: var(--card-dark-text, #ffffff) !important;
}

/* ✅ NOU: Light theme - stat values negre/gri */
.strategy-card[data-card-theme="light"] .test-stats-container .test-stat-item .stat-value,
.strategy-card[data-card-theme="light"] .testing-tradingview .test-stats-container .stat-value {
    color: var(--card-light-text, var(--text-primary)) !important;
}

/* ✅ MODIFICAT: Buton collapse pentru panou variabile - stilizare identică cu .theme-btn */
.btn-collapse-variables {
    width: 32px; /* ✅ Identic cu .theme-btn */
    height: 32px; /* ✅ Identic cu .theme-btn */
    border-radius: 6px; /* ✅ Identic cu .theme-btn */
    border: 1px solid #D1D1D1; /* ✅ Identic cu .theme-btn */
    background: #FFFFFF; /* ✅ Identic cu .theme-btn */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease; /* ✅ Identic cu .theme-btn */
    position: relative;
    padding: 0;
}

.btn-collapse-variables:hover {
    background: #F3F4F6; /* ✅ Identic cu .theme-btn:hover */
    border-color: #3B82F6; /* ✅ Identic cu .theme-btn:hover */
    transform: translateY(-2px); /* ✅ Identic cu .theme-btn:hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ✅ Identic cu .theme-btn:hover */
}

.btn-collapse-variables svg {
    width: 18px; /* ✅ Identic cu .theme-btn svg */
    height: 18px; /* ✅ Identic cu .theme-btn svg */
    stroke: #6B7280; /* ✅ Identic cu .theme-btn svg */
    transition: all 0.3s ease; /* ✅ Tranziție pentru rotație */
}

.btn-collapse-variables:hover svg {
    stroke: #3B82F6; /* ✅ Identic cu .theme-btn:hover svg */
}

/* ✅ ADĂUGAT: Rotație săgeată când panoul este collapsed */
.testing-variables.collapsed .btn-collapse-variables svg {
    transform: rotate(180deg);
}

/* ✅ MODIFICAT: Ascunde titlul și form-ul când panoul este collapsed */
.testing-variables.collapsed .testing-panel-title,
.testing-variables.collapsed .testing-form {
    display: none;
}

/* ================================================================
   TAB TESTARE - Formular Variabile (Panoul Stâng)
   ================================================================ */

/* Container formular */
.testing-form {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Form group - Layout INLINE (label + input pe aceeași linie) */
.form-group-test {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Label - Partea stângă, fix width */
.form-label-test {
    position: relative;  /* ✅ Pentru tooltip positioning */
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b; /* ✅ IZOLAT: Valoare explicită în loc de var(--text-secondary) */
    white-space: nowrap;
    min-width: 100px;
    flex-shrink: 0;
}

/* Valoare statică - Arată ca un input dar nu e editabilă */
.form-static-value {
    flex: 1;
    padding: 0.2rem 0.6rem;
    /* background: var(--surface-color, rgba(30, 34, 45, 0.3));*/
    background: rgba(255, 255, 255, 0.05); /* ✅ IZOLAT: Valoare explicită în loc de var(--input-bg) */
    /*border: 1px solid var(--border-color);*/
    border-radius: 4px;
    color: #1e293b; /* ✅ IZOLAT: Valoare explicită în loc de var(--text-primary) */
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    cursor: default;
    opacity: 0.9;
}

/* Select & Input - Partea dreaptă, ocupă restul spațiului */
.form-select-test,
.form-input-test {
    position: relative;  /* ✅ Pentru tooltip positioning */
    flex: 1;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.05); /* ✅ IZOLAT: Valoare explicită în loc de var(--input-bg) */
    border: 1px solid #e2e8f0; /* ✅ IZOLAT: Valoare explicită în loc de var(--border-color) */
    border-radius: 4px;
    color: #1e293b; /* ✅ IZOLAT: Valoare explicită în loc de var(--text-primary) */
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-select-test:focus,
.form-input-test:focus {
    border-color: #2962FF;
}

.form-select-test:hover,
.form-input-test:hover {
    border-color: #64748b; /* ✅ IZOLAT: Valoare explicită în loc de var(--text-secondary) */
}

/* Separator între secțiuni */
.form-separator {
    height: 1px;
    background: #e2e8f0; /* ✅ IZOLAT: Valoare explicită în loc de var(--border-color) */
    margin: 0.5rem 0;
}

/* Subtitle pentru configurații dinamice */
.config-subtitle {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b; /* ✅ IZOLAT: Valoare explicită în loc de var(--text-primary) */
    margin: 0.1rem 0;
    border-bottom: 1px solid #e2e8f0; /* ✅ IZOLAT: Valoare explicită în loc de var(--border-color) */
    /*text-transform: uppercase;*/
    letter-spacing: 0.3px;
}

/* Container configurații dinamice */
.dynamic-config {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Butoane Control Test */
.testing-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #e2e8f0; /* ✅ IZOLAT: Valoare explicită în loc de var(--border-color) */
}

.btn-test {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-test svg {
    width: 14px;
    height: 14px;
}

/* Buton Start (Verde) */
.btn-test-start {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #ffffff;
}

.btn-test-start:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
}

/* Buton Stop (Roșu) */
.btn-test-stop {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: #ffffff;
}

.btn-test-stop:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

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

/* ================================================================
   TAB TESTARE - Grafic TradingView (Panoul Dreapta)
   ================================================================ */

/* Container grafic */
.tradingview-chart-container {
    width: 100%;
    min-width: 400px; /* ✅ Lățime minimă */
    height: 400px;
    max-height: 400px;
    background: #FFFFFF; /* ✅ Fundal alb pentru grafic */
    border: 1px solid #D1D1D1; /* ✅ Border gri deschis */
    border-radius: 8px;
    overflow: hidden; /* ✅ PĂSTRĂM hidden pentru chart interior */
    position: relative;
}

/* Loading Spinner INLINE - INTRE Grid Vertical si Lock Scale */
.chart-loading-spinner-inline {
    display: flex; /* Flexbox pentru aliniere orizontala */
    align-items: center; /* Centrare verticala */
    gap: 8px; /* Spatiu intre spinner si text */
    padding: 6px 12px; /* Padding compact */
    background: rgba(59, 130, 246, 0.1); /* Fundal albastru transparent */
    border-radius: 6px; /* Colturi rotunjite */
    border: 1px solid rgba(59, 130, 246, 0.3); /* Border albastru */
}

/* ✅ ELIMINAT: Nu mai forțăm vizibilitatea cu !important
   JavaScript-ul controlează complet display prin inline style */

/* Spinner SVG roata dintata - versiune inline */
.chart-loading-spinner-inline .spinner-svg {
    width: 20px; /* Marime SVG roata dintata */
    height: 20px; /* Marime SVG roata dintata */
    animation: spin 5.5s linear infinite; /* Rotatie continua (mai lenta pentru roata dintata) */
    flex-shrink: 0; /* Nu se micsoreaza */
}

/* Animatie rotatie pentru SVG */
@keyframes spin {
    to { transform: rotate(360deg); } /* Rotatie completa 360 grade */
}

/* Loading Text - inline cu spinner-ul */
.chart-loading-spinner-inline .loading-text-inline {
    font-size: 0.75rem; /* Mai mic pentru inline */
    font-weight: 500; /* Bold */
    color: #3B82F6; /* Culoare albastru */
    white-space: nowrap; /* Textul pe o singura linie */
}

/* ⚠️ IMPORTANT: Lightweight Charts div principal trebuie sa ocupe tot spatiul disponibil */
.tradingview-chart-container > div {
    width: 100% !important;
    height: 100% !important;
}

/* Canvas-urile Lightweight Charts - permite layout-ul nativ al bibliotecii */
.tradingview-chart-container canvas {
    display: block; /* Elimina spatiul alb de sub canvas */
}

/* ================================================================
   SAGEATA PRET CURENT (marker pe axa dreapta a pretului)
   ================================================================ */

/* Stilizare pentru container Lightweight Charts (poziționare relativă pentru săgeată) */
.tv-lightweight-charts {
    position: relative !important; /* CRITICAL: Necesar pentru poziționare absolută a săgeții */
}

/* Stilizare pentru SVG-ul sagetii de pret (creat dinamic prin JavaScript) */
.price-arrow-svg {
    position: absolute !important; /* Pozitionare absoluta fata de .tv-lightweight-charts */
    /* right se setează dinamic în JavaScript (înainte de axa prețului) */
    /* top se setează dinamic în JavaScript (la prețul curent) - NU folosim !important */
    z-index: 50 !important; /* Deasupra canvas-urilor chart-ului */
    pointer-events: none !important; /* Nu blocheaza interactiunile cu chart-ul */
    transition: top 0.15s ease-out, right 0.3s ease !important; /* Animatie smooth pentru miscarea verticala si orizontala */
    transform: translateY(-50%) !important; /* Centrat vertical pe linia prețului */
}

/* Stilizare pentru container chart cu sageata activata (legacy - nu mai e necesar) */
.tradingview-chart-container.has-price-arrow {
    position: relative; /* Necesar pentru pozitionare absoluta a copiilor */
}

/* ================================================================
   PANOU BUTOANE TEMA CHART (deasupra chart-ului)
   ================================================================ */

.chart-controls-panel {
    width: 100%; /* Latimea egala cu chart-ul */
    min-width: 400px; /* Aceeasi latime minima ca chart-ul */
    height: 48px; /* Inaltime fixa pentru panou */
    background: transparent; /* Fundal transparent */
    display: flex;
    align-items: center;
    justify-content: space-between; /* ✅ Space between pentru distribuire uniforma */
    padding: 0 8px; /* Padding mic pe laterale */
    margin-bottom: 1px; /* Spatiu intre panou si chart */
    gap: 16px; /* ✅ ADAUGAT: Spatiu intre elementele flex (stanga, mijloc, dreapta) */
    overflow: visible; /* ✅ IMPORTANT: Permite tooltip-urilor să iasă din container */
    position: relative; /* ✅ Pentru poziționare corectă a tooltip-urilor */
}

/* ================================================================
   BUTOANE TEMA CHART (în panou - stânga)
   ================================================================ */

.chart-theme-controls {
    display: flex;
    gap: 8px;
    overflow: visible; /* ✅ Permite tooltip-urilor să iasă */
    position: relative;
}

/* ================================================================
   BUTOANE ACȚIUNE CHART (în panou - dreapta)
   ================================================================ */

.chart-action-controls {
    display: flex;
    gap: 8px;
    overflow: visible; /* ✅ Permite tooltip-urilor să iasă */
    position: relative;
}

/* ✅ NOU (10 Mar 2026): Wrapper dreapta — Zoom + Action Controls la 20px distanță */
.chart-right-controls {
    display: flex;
    align-items: center;
    gap: 20px;          /* 20px între zoom controls și action controls */
    overflow: visible;
    position: relative;
}

/* ================================================================
   ZOOM CONTROLS (în panou - mijloc, replicat din Trading)
   ✅ NOU (10 Mar 2026)
   ================================================================ */

.strat-zoom-controls {
    display: flex;
    gap: 5px;
    align-items: center;
    position: relative;
    z-index: 1000;
}

.strat-zoom-btn {
    position: relative;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(100, 100, 100, 0.35);
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: inherit;
}

.strat-zoom-btn:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.5);
    transform: scale(1.05);
}

.strat-zoom-btn:active {
    transform: scale(0.95);
}

.strat-zoom-btn.manual-zoom-active {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.55);
}

.strat-zoom-btn.manual-zoom-active:hover {
    background: rgba(16, 185, 129, 0.28);
    border-color: rgba(16, 185, 129, 0.75);
}

/* Indicator Auto Scale / Manual Zoom */
.strat-zoom-indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 2px;
}

.strat-zoom-indicator:hover {
    background: rgba(59, 130, 246, 0.12);
}

.strat-zoom-indicator:active {
    transform: scale(0.9);
}

.strat-zoom-indicator svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    transition: all 0.2s ease;
}

.strat-zoom-indicator:hover svg {
    transform: scale(1.1);
    stroke: var(--primary-color, #3b82f6);
}

/* Tooltip pentru zoom buttons din Strategies */
.strat-zoom-btn[data-tooltip]::after,
.strat-zoom-indicator[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: #22557a;
    color: #f2ffc2;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10000;
}

.strat-zoom-btn[data-tooltip]:hover::after,
.strat-zoom-indicator[data-tooltip]:hover::after {
    opacity: 1;
}

.strat-zoom-btn[data-tooltip]::before,
.strat-zoom-indicator[data-tooltip]::before {
    display: none;
}

.theme-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #D1D1D1;
    background: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    padding: 0;
}

.theme-btn:hover {
    background: #F3F4F6;
    border-color: #3B82F6;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.theme-btn.active {
    background: #3B82F6;
    border-color: #3B82F6;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.theme-btn svg {
    width: 18px;
    height: 18px;
    stroke: #6B7280;
    transition: stroke 0.2s ease;
}

.theme-btn:hover svg {
    stroke: #3B82F6;
}

.theme-btn.active svg {
    stroke: #FFFFFF;
}

/* ✅ Buton Grid Toggle Orizontal - SVG gri când nu e activ */
.theme-btn.grid-toggle-btn svg {
    stroke: #9CA3AF; /* Gri mediu */
}

/* ✅ Buton Grid Toggle Orizontal - SVG gri când nu e activ */
.theme-btn.grid-toggle-btn svg {
    stroke: #9CA3AF; /* Gri mediu */
}

.theme-btn.grid-toggle-btn:hover svg {
    stroke: #3B82F6; /* Albastru la hover */
}

.theme-btn.grid-toggle-btn.active svg {
    stroke: #FFFFFF; /* Alb când e activ */
}

/* ✅ Buton Grid Toggle Vertical - SVG gri când nu e activ */
.theme-btn.grid-toggle-btn-vertical svg {
    stroke: #9CA3AF; /* Gri mediu */
}

.theme-btn.grid-toggle-btn-vertical:hover svg {
    stroke: #3B82F6; /* Albastru la hover */
}

.theme-btn.grid-toggle-btn-vertical.active svg {
    stroke: #FFFFFF; /* Alb când e activ */
}

/* ================================================================
   BUTOANE SĂGEȚI (Arrow Up/Down)
   ================================================================ */

.theme-btn.arrow-btn svg {
    stroke: #6B7280; /* Gri normal */
}

.theme-btn.arrow-btn:hover svg {
    stroke: #3B82F6; /* Albastru la hover */
}

.theme-btn.arrow-btn.active svg {
    stroke: #FFFFFF; /* Alb când e activ */
}

/* ================================================================
   ✅ NOU (07 Mar 2026): BARA SIMULARE PRET MANUAL
   ================================================================ */

.price-sim-bar {
    width: 100%;
    height: 40px;
    /*background: linear-gradient(90deg, #78350f 0%, #92400e 100%);*/
    border: 1px solid #f59e0b;
    border-radius: 8px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 10px;
    margin-bottom: 4px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    animation: simBarPulse 2s ease-in-out infinite;
    overflow: hidden;
}

@keyframes simBarPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); }
    50%       { box-shadow: 0 2px 16px rgba(245, 158, 11, 0.6); }
}

.price-sim-label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fbbf24;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.price-sim-label svg {
    stroke: #fbbf24;
    flex-shrink: 0;
}

.price-sim-current {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    font-family: monospace;
    min-width: 90px;
    text-align: center;
    background: rgba(0,0,0,0.25);
    border-radius: 5px;
    padding: 2px 8px;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.price-sim-btn {
    height: 26px;
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.2);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.price-sim-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fbbf24;
    transform: translateY(-1px);
}

.price-sim-btn:active {
    transform: translateY(0);
    background: rgba(255,255,255,0.25);
}

.price-sim-down {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}
.price-sim-down:hover {
    background: rgba(239, 68, 68, 0.5);
    border-color: #ef4444;
}

.price-sim-up {
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.5);
}
.price-sim-up:hover {
    background: rgba(34, 197, 94, 0.5);
    border-color: #22c55e;
}

/* ─── Step input wrap ─────────────────────────── */
.price-sim-step-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.price-sim-step-label {
    color: #fcd34d;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Lățime dinamică — controlată din JS prin ch units */
.price-sim-step-input,
.price-sim-set-input {
    min-width: 36px;
    height: 26px;
    padding: 0 5px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.3);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
    transition: width 0.1s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.price-sim-step-input::-webkit-inner-spin-button,
.price-sim-step-input::-webkit-outer-spin-button,
.price-sim-set-input::-webkit-inner-spin-button,
.price-sim-set-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.price-sim-step-input:focus {
    border-color: #fbbf24;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 0 0 2px rgba(251,191,36,0.3);
}

/* ─── Set-price section ───────────────────────── */
.price-sim-set-btn {
    background: rgba(99, 102, 241, 0.35);
    border-color: rgba(99, 102, 241, 0.6);
}
.price-sim-set-btn:hover {
    background: rgba(99, 102, 241, 0.55);
    border-color: #6366f1;
}

.price-sim-set-input {
    text-align: left;
}
.price-sim-set-input:focus {
    border-color: #6366f1;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.3);
}
.price-sim-set-input::placeholder {
    color: rgba(255,255,255,0.4);
    font-size: 11px;
}

/* ─── Vizibilitate bar (controlat din JS) ─────── */
.price-sim-bar          { display: none; }
.price-sim-bar.sim-active { display: flex; }

/* Buton SIM activ → portocaliu */
.theme-btn.chart-sim-toggle-btn .sim-toggle-text {
    font-size: 10px;
    font-weight: 700;
    color: #6B7280;
    letter-spacing: 0.05em;
}
.theme-btn.chart-sim-toggle-btn.active {
    background: #f59e0b;
    border-color: #d97706;
    box-shadow: 0 4px 8px rgba(245,158,11,0.4);
}
.theme-btn.chart-sim-toggle-btn.active .sim-toggle-text {
    color: #ffffff;
}

/* Dark mode overrides */
[data-theme="dark"] .price-sim-step-input,
[data-theme="dark"] .price-sim-set-input {
    background: rgba(0,0,0,0.4);
}

/* ================================================================
   MODAL SETTINGS CULORI CHART
   ================================================================ */

.chart-theme-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* Overlay semi-transparent */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px); /* Efect blur */
}

.chart-theme-modal-content {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    min-width: 300px;
    max-width: 400px;
}

.chart-theme-modal-content h4 {
    margin: 0 0 1.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.color-picker-group {
    margin-bottom: 1.25rem;
}

.color-picker-group label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.color-picker-group label span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.color-picker-group input[type="color"] {
    width: 100%;
    height: 50px;
    border: 2px solid #D1D1D1;
    border-radius: 8px;
    cursor: pointer;
    padding: 4px;
    background: #FFFFFF;
}

.color-picker-group input[type="color"]:hover {
    border-color: #3B82F6;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.modal-actions .btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
}

/* Mesaj loading/placeholder */
.chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ================================================================
   CARD FOOTER - Actiuni
   ================================================================ */

.strategy-card-footer {
    padding: 0.65rem 1rem; /* Redus de la 1rem 1.25rem */
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.02);
    clear: both; /* ✅ ADAUGAT: Forteaza footer-ul sa se pozitioneze dupa continutul float */
    margin-top: 1rem; /* ✅ ADAUGAT: Spatiu sigur intre continut si footer */
}

.strategy-actions {
    display: flex;
    gap: 0.4rem; /* Redus de la 0.5rem */
    flex-wrap: wrap;
}

.strategy-actions .btn {
    flex: 1;
    min-width: 100px;
}

.strategy-actions .btn-icon {
    flex: 0;
    min-width: auto;
    width: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================================
   MODAL - Creare/Editare Strategii
   ================================================================ */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(120, 88, 88, 0.5);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn 0.3s ease;
}

.modal.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background: #22577a; /* Fundal albastru fix */
    color: white; /* Text alb fix */
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    max-width: 650px; /* Crescut de la 600px pentru mai mult spatiu */
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Border alb transparent */
}

.modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: white; /* Text alb fix */
    font-weight: 600;
    display: flex; /* Flexbox pentru aliniere icon + text */
    align-items: center; /* Centrare verticala */
    gap: 0.5rem; /* Spatiu intre icon si text */
}

/* Stiluri pentru icon-uri (emoji sau SVG) in header modal */
.modal-header h3 span {
    display: inline-flex; /* Flex pentru a centrata SVG-urile */
    align-items: center; /* Centrare verticala */
    justify-content: center; /* Centrare orizontala */
}

/* Stiluri pentru imagini SVG in header modal */
.modal-header h3 img {
    width: 24px; /* Marime fixa */
    height: 24px; /* Marime fixa */
    display: inline-block; /* Display inline */
    vertical-align: middle; /* Aliniere verticala */
    background: transparent; /* Fundal transparent 100% */
    /* NU aplicam filtre - pastram culoarea originala a SVG-ului */
}

.modal-close {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8); /* Icon alb semi-transparent */
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1); /* Fundal alb transparent la hover */
    color: white; /* Icon alb complet la hover */
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    color: white; /* Text alb fix */
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Border alb transparent */
    /*background: rgba(0, 0, 0, 0.1); /* Fundal semi-transparent pentru diferentiere */
}

/* Stiluri specifice pentru butoane in modale (contrast cu fundal #22577a) */
.modal-footer .btn-primary {
    background: white; /* Buton alb pentru contrast maxim */
    color: #22577a; /* Text albastru */
    font-weight: 600;
}

.modal-footer .btn-primary:hover {
    background: #f0f0f0; /* Gri deschis la hover */
    color: #1a4058; /* Albastru mai inchis */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modal-footer .btn-secondary {
    background: rgba(255, 255, 255, 0.2); /* Fundal alb semi-transparent */
    color: white; /* Text alb */
    border: 1px solid rgba(255, 255, 255, 0.4); /* Border alb */
    font-weight: 600;
}

.modal-footer .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3); /* Mai opac la hover */
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* ================================================================
   FORM STYLES
   ================================================================ */

#strategy-form .form-group {
    margin-bottom: 1.5rem;
}

#strategy-form .form-group:last-child {
    margin-bottom: 0;
}

/* ✅ Info box pentru configurații avansate */
.form-info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    margin-top: 1.5rem;
}

.form-info-box svg {
    flex-shrink: 0;
    color: #3b82f6;
    margin-top: 2px;
}

.form-info-box p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.form-info-box strong {
    color: var(--primary-color);
    font-weight: 600;
}

#strategy-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

/* Label pentru dropdown-uri - mai compact */
#strategy-form label[for="strategy-type"],
#strategy-form label[for="market-type"],
#strategy-form label[for="strategy-symbol"] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#strategy-form .form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--background-color);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

/* Stiluri specifice pentru dropdown-uri (select) */
#strategy-form select.form-control {
    font-size: 0.9rem; /* Text mai mic pentru dropdown */
    padding: 0.65rem 2rem 0.65rem 0.85rem; /* Padding ajustat */
    line-height: 1.4; /* Linie mai strânsă */
    height: auto; /* Înălțime automată */
    appearance: none; /* Elimină stilul default browser */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    cursor: pointer;
    overflow: hidden; /* Ascunde textul ce depășește */
    text-overflow: ellipsis; /* Adaugă ... pentru text lung */
    white-space: nowrap; /* Nu permite wrap pe mai multe linii */
    font-weight: 500; /* Text puțin mai bold pentru lizibilitate */
}

/* Dropdown la hover/focus */
#strategy-form select.form-control:hover {
    border-color: var(--primary-color);
    background-color: var(--surface-color);
}

#strategy-form select.form-control:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Opțiuni din dropdown */
#strategy-form select.form-control option {
    font-size: 0.9rem;
    padding: 0.5rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}

#strategy-form .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

#strategy-form .form-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

#strategy-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

#strategy-form .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#strategy-form .checkbox-label span {
    font-weight: 500;
    color: var(--text-primary);
}

/* ================================================================
   BUTTONS
   ================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn svg {
    flex-shrink: 0;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-secondary {
    background: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background: #475569;
    transform: translateY(-1px);
}

.btn-success {
    background: transparent !important; /* ✅ Eliminat fundal verde */
    color: #10b981 !important; /* ✅ Text verde în loc de alb */
    border: 1px solid #10b981 !important; /* ✅ Bordură verde pentru contrast */
    font-weight: 700 !important; /* ✅ Text bold pentru butonul Start */
}

.btn-success:hover {
    background: rgba(16, 185, 129, 0.1) !important; /* ✅ Fundal verde foarte subtil la hover */
    color: #059669 !important; /* ✅ Text verde mai închis la hover */
    border-color: #059669 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ✅ Selector mai specific pentru butonul din strategy-actions */
.strategy-actions .btn-success,
#strategies-module .btn-success {
    background: transparent !important;
    color: #10b981 !important;
    border: 1px solid #10b981 !important;
}

.strategy-actions .btn-success:hover,
#strategies-module .btn-success:hover {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
    border-color: #059669 !important;
}

.btn-danger {
    background: #ef4444;
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ================================================================
   MODULE HEADER
   ================================================================ */

/* Selector mai specific pentru a suprascrie stilul global din main.css */
#strategies-module .module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem 1.5rem !important; /* !important pentru a forța override */
    border-bottom: 1px solid var(--border-color);
}

#strategies-module .module-header h2 {
    margin: 0;
    font-size: 1.75rem;
    color: var(--text-primary);
    font-weight: 600;
}

#strategies-module .module-header .btn {
    margin: 0;
    flex-shrink: 0; /* Nu permite micșorarea butonului */
    width: auto !important; /* Forțează dimensionarea automată bazată pe conținut */
    min-width: auto; /* Elimină orice lățime minimă forțată */
    max-width: none; /* Elimină orice lățime maximă forțată */
    white-space: nowrap; /* Previne wrap-ul textului pe mai multe linii */
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
    .strategies-container {
        padding: 0; /* Lățime completă pe mobile */
    }
    
    .strategies-list {
        gap: 0; /* Fără gap între carduri */
    }
    
    .strategies-empty {
        margin: 0; /* Lățime completă pentru empty state */
        padding: 3rem 1rem; /* Padding mai mic pe mobile */
    }
    
    .strategy-metrics {
        grid-template-columns: repeat(2, 1fr); /* 2 coloane pe mobile */
        gap: 0.5rem 0.75rem;
        row-gap: 0.5rem;
    }
    
    .metric {
        gap: 0.2rem;
    }
    
    .metric-value {
        font-size: 0.85rem;
    }
    
    .config-grid {
        grid-template-columns: 1fr; /* O singură coloană pe mobile */
        gap: 0.75rem;
    }
    
    .strategy-card-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .strategy-details {
        flex-direction: column; /* Pe mobile, revin la coloane */
        align-items: flex-start; /* Aliniază la stânga pe mobile */
        gap: 0.5rem;
    }
    
    .strategy-name {
        margin-bottom: 0.25rem; /* Adaugă puțin spațiu pe mobile */
        border-right: none; /* Elimină separator-ul pe mobile */
        padding-right: 0;
    }
    
    .strategy-meta {
        flex-wrap: wrap; /* Permite wrap pe mobile */
    }
    
    .strategy-status {
        align-self: flex-start;
    }
    
    #strategies-module .module-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        padding: 1rem !important; /* Același padding ca strategies-container pe mobile */
    }
    
    #strategies-module .module-header .btn {
        width: 100%;
    }
    
    .modal-content {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }
    
    .strategy-actions {
        flex-direction: column;
    }
    
    .strategy-actions .btn {
        width: 100%;
    }
}
/* ================================================================
   ORDERS FEED - Feed live cu ordinele plasate
   ================================================================ */

.orders-feed {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.orders-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; /* ✅ SCHIMBAT: de la 1rem (16px) la 5px */
    flex-wrap: wrap; /* ✅ ADĂUGAT: Permite wrap pe mobile */
    gap: 0.75rem; /* ✅ ADĂUGAT: Spațiu între elemente */
}

.orders-feed-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ✅ КОПИРАНЕ ОТ DASHBOARD ACTIVITY */
.orders-feed-controls {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.orders-filter-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 4px 6px;
    color: #94a3b8;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 11px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orders-filter-btn:hover {
    background: rgba(37, 99, 235, 0.3); /* ✅ SCHIMBAT: 30% opacitate cu primary color pentru hover */
    color: #ffffff;
    border-color: rgba(37, 99, 235, 0.5);
}

.orders-filter-btn.active {
    background: rgba(37, 99, 235, 0.5); /* ✅ SCHIMBAT: 50% opacitate pentru fundal (#2563eb cu alpha 0.5) */
    color: #ffffff;
    border-color: var(--primary-light);
}

/* ✅ ADĂUGAT: Previne override-ul hover-ului pentru butoanele active */
.orders-filter-btn.active:hover {
    background: rgba(37, 99, 235, 0.5); /* Păstrează 50% opacitate la hover pentru butoanele active */
}

.orders-separator {
    color: var(--text-secondary);
    opacity: 0.3;
    font-size: 0.75rem;
    margin: 0 2px;
}

.orders-feed-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    margin-left: 4px;
}

.orders-feed-table {
    overflow-x: auto; /* Scroll orizontal pentru tabel lat */
    overflow-y: auto; /* ✅ ADĂUGAT: Scroll vertical pentru multe rânduri */
    max-height: 305px; /* ✅ SCHIMBAT: de la 400px la 305px pentru exact 10 rânduri (header 28px + 10 rânduri × 27px + margini) */
    border: 1px solid var(--border-color); /* ✅ ADĂUGAT: Bordură pentru delimitare */
    border-radius: 8px; /* ✅ ADĂUGAT: Colțuri rotunjite */
}

.orders-table,
.orders-table-live,
.orders-table-test {
    width: 100%;
    min-width: 1200px; /* ✅ ADĂUGAT: Forțează scroll orizontal când tabelul e mic */
    border-collapse: collapse;
    font-size: 0.75rem; /* ✅ REDUS: de la 0.85rem la 0.75rem */
}

.orders-table thead,
.orders-table-live thead,
.orders-table-test thead {
    background: linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)), #ffffff; /* ✅ IZOLAT: Valoare explicită în loc de var(--surface-color) */
    border-bottom: 2px solid #e2e8f0; /* ✅ IZOLAT: Valoare explicită în loc de var(--border-color) */
    position: sticky; /* ✅ ADĂUGAT: Header fix când se face scroll */
    top: 0; /* ✅ ADĂUGAT: Poziționat la top */
    z-index: 10; /* ✅ ADĂUGAT: Deasupra conținutului */
}

.orders-table th,
.orders-table-live th,
.orders-table-test th {
    padding: 0.4rem 0.5rem; /* ✅ REDUS: de la 0.75rem la 0.4rem pe verticală */
    text-align: left;
    font-weight: 600;
    color: #64748b; /* ✅ IZOLAT: Valoare explicită în loc de var(--text-secondary) */
    font-size: 0.7rem; /* ✅ REDUS: de la 0.75rem la 0.7rem */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)), #ffffff; /* ✅ IZOLAT: Fundal solid + overlay pentru sticky header */
}

/* ✅ ADĂUGAT: Styling pentru coloane sortabile */
.orders-table th.sortable,
.orders-table-live th.sortable,
.orders-table-test th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    position: relative;
}

.orders-table th.sortable:hover,
.orders-table-live th.sortable:hover,
.orders-table-test th.sortable:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), #ffffff; /* ✅ IZOLAT: Valoare explicită */
}

.orders-table th.sortable .sort-icon,
.orders-table-live th.sortable .sort-icon,
.orders-table-test th.sortable .sort-icon {
    margin-left: 0.01rem;
    font-size: 0.7rem;
    color: #4c4c89; /* ✅ IZOLAT: Valoare explicită în loc de var(--text-secondary) */
    opacity: 0.01;
    transition: opacity 0.2s ease;
    display: inline-block;
}

/* ✅ ADĂUGAT: Săgețile individuale */
.orders-table th.sortable .sort-up,
.orders-table th.sortable .sort-down,
.orders-table-live th.sortable .sort-up,
.orders-table-live th.sortable .sort-down,
.orders-table-test th.sortable .sort-up,
.orders-table-test th.sortable .sort-down {
    font-weight: 900;
    font-size: 0.7rem;
}

.orders-table th.sortable:hover .sort-icon,
.orders-table-live th.sortable:hover .sort-icon,
.orders-table-test th.sortable:hover .sort-icon {
    opacity: 0.6;
}

/* ✅ MODIFICAT: Colorează DOAR textul coloanei în albastru când e sortată ASC */
.orders-table th.sortable.sorted-asc,
.orders-table-live th.sortable.sorted-asc,
.orders-table-test th.sortable.sorted-asc {
    color: var(--primary-color);
}

/* ✅ Când sortează ASC: ↑ devine albastru bold, ↓ rămâne gri */
.orders-table th.sortable.sorted-asc .sort-icon,
.orders-table-live th.sortable.sorted-asc .sort-icon,
.orders-table-test th.sortable.sorted-asc .sort-icon {
    opacity: 1;
}

.orders-table th.sortable.sorted-asc .sort-up,
.orders-table-live th.sortable.sorted-asc .sort-up,
.orders-table-test th.sortable.sorted-asc .sort-up {
    color: var(--primary-color);
    font-weight: 900;
    font-size: 0.8rem; /* ✅ MODIFICAT: de la 0.9rem la 0.8rem */
    transform: scaleX(1.5); /* ✅ MODIFICAT: de la 1.2 la 1.5 (50% mai groasă) */
    display: inline-block;
}

.orders-table th.sortable.sorted-asc .sort-down,
.orders-table-live th.sortable.sorted-asc .sort-down,
.orders-table-test th.sortable.sorted-asc .sort-down {
    color: var(--text-secondary);
    font-weight: 400;
    opacity: 0.3;
    font-size: 0.7rem;
}

/* ✅ MODIFICAT: Colorează DOAR textul coloanei în albastru când e sortată DESC */
.orders-table th.sortable.sorted-desc,
.orders-table-live th.sortable.sorted-desc,
.orders-table-test th.sortable.sorted-desc {
    color: var(--primary-color);
}

/* ✅ Când sortează DESC: ↓ devine albastru bold, ↑ rămâne gri */
.orders-table th.sortable.sorted-desc .sort-icon,
.orders-table-live th.sortable.sorted-desc .sort-icon,
.orders-table-test th.sortable.sorted-desc .sort-icon {
    opacity: 1;
}

.orders-table th.sortable.sorted-desc .sort-up,
.orders-table-live th.sortable.sorted-desc .sort-up,
.orders-table-test th.sortable.sorted-desc .sort-up {
    color: var(--text-secondary);
    font-weight: 400;
    opacity: 0.3;
    font-size: 0.7rem;
}

.orders-table th.sortable.sorted-desc .sort-down,
.orders-table-live th.sortable.sorted-desc .sort-down,
.orders-table-test th.sortable.sorted-desc .sort-down {
    color: var(--primary-color);
    font-weight: 900;
    font-size: 0.8rem; /* ✅ MODIFICAT: de la 0.9rem la 0.8rem */
    transform: scaleX(1.5); /* ✅ MODIFICAT: de la 1.2 la 1.5 (50% mai groasă) */
    display: inline-block;
}

/* ✅ ADĂUGAT: Header-ul se adaptează la hover-ul card-ului */
.strategy-card:hover .orders-table thead,
.strategy-card:hover .orders-table-live thead,
.strategy-card:hover .orders-table-test thead {
    background: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), #ffffff; /* ✅ IZOLAT: Valoare explicită */
}

.strategy-card:hover .orders-table th,
.strategy-card:hover .orders-table-live th,
.strategy-card:hover .orders-table-test th {
    background: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), #ffffff; /* ✅ IZOLAT: Valoare explicită */
}

.orders-table tbody tr,
.orders-table-live tbody tr,
.orders-table-test tbody tr {
    border-bottom: 1px solid #e2e8f0; /* ✅ IZOLAT: Valoare explicită în loc de var(--border-color) */
    transition: background 0.2s ease;
    cursor: pointer; /* ✅ ADĂUGAT: Cursor pointer pentru click */
}

.orders-table tbody tr:hover,
.orders-table-live tbody tr:hover,
.orders-table-test tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* ✅ MODIFICAT: Highlight pentru rând selectat - chenar albastru */
.orders-table tbody tr.highlighted,
.orders-table-live tbody tr.highlighted,
.orders-table-test tbody tr.highlighted {
    outline: 2px solid #3B82F6; /* ✅ MODIFICAT: Chenar albastru */
    outline-offset: -2px; /* ✅ Chenar în interior */
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4); /* ✅ Shadow albastru subtil */
}

.orders-table td,
.orders-table-live td,
.orders-table-test td {
    padding: 0.35rem 0.5rem; /* ✅ REDUS: de la 0.75rem la 0.35rem pe verticală */
    color: var(--text-primary);
    font-size: 0.65rem; /* ✅ UNIFORMIZAT: toate valorile la 0.65rem */
}

.order-time {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem; /* ✅ UNIFORMIZAT: de la 0.7rem la 0.65rem */
    color: var(--text-secondary);
}

.order-bot {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem; /* ✅ UNIFORMIZAT: de la 0.7rem la 0.65rem */
    color: var(--text-primary);
}

.bot-number {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ✅ ADĂUGAT: Badge pentru leverage */
.leverage-badge {
    display: inline-block;
    padding: 0.15rem 0.35rem;
    margin-left: 0.3rem;
    background: rgba(251, 191, 36, 0.15);
    color: #f59e0b;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: 0.2px;
}

/* ✅ ADĂUGAT: Icon SVG leverage în header tabel */
.leverage-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-left: 0.4rem;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.leverage-icon:hover {
    opacity: 1;
}

.type-badge {
    display: inline-block;
    padding: 0.15rem 0.4rem; /* ✅ REDUS: de la 0.2rem 0.5rem */
    border-radius: 4px;
    font-size: 0.65rem; /* ✅ REDUS: de la 0.7rem la 0.65rem */
    font-weight: 700;
    text-transform: uppercase;
}

.type-badge.buy {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.type-badge.sell {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.order-price,
.order-amount,
.order-total {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 0.65rem; /* ✅ UNIFORMIZAT: de la 0.75rem la 0.65rem */
}

.status-badge {
    display: inline-block;
    padding: 0.15rem 0.4rem; /* ✅ REDUS: de la 0.2rem 0.5rem */
    border-radius: 4px;
    font-size: 0.65rem; /* ✅ UNIFORMIZAT: rămâne 0.65rem */
    font-weight: 600;
}

.status-badge.pending {
    background: rgba(251, 191, 36, 0.1);
    color: #f59e0b;
}

.status-badge.filled,
.status-badge.executed {  /* ✅ ADĂUGAT: status pentru executed */
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.status-badge.cancelled {
    background: rgba(156, 163, 175, 0.1);
    color: #6b7280;
}

.status-badge.partial {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* ✅ ADĂUGAT: Stilizare profit pozitiv/negativ/așteptat */
.profit-positive {
    color: #22c55e;
    font-weight: 600;
    font-size: 0.65rem; /* ✅ UNIFORMIZAT */
}

.profit-negative {
    color: #ef4444;
    font-weight: 600;
    font-size: 0.65rem; /* ✅ UNIFORMIZAT */
}

.profit-expected {
    color: #3b82f6;  /* Albastru - profit așteptat */
    font-weight: 600;
    font-size: 0.65rem;
    font-style: italic;  /* Italic pentru diferențiere */
}

.profit-neutral {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.65rem;
}

/* ================================================================
   CLOSE ORDER BUTTON - Buton pentru închidere ordine
   ================================================================ */

.order-close {
    text-align: center;
    padding: 0.35rem 0.25rem;
}

.close-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.135rem 0.36rem; /* ✅ REDUS 10%: de la 0.15rem 0.4rem */
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 4px;
    color: #ef4444;
    font-size: 0.585rem; /* ✅ REDUS 10%: de la 0.65rem */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 20px; /* ✅ REDUS 10%: de la 22px */
    height: auto;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
}

/* Icon X - vizibil în mod normal */
.close-order-btn .close-icon {
    display: inline-block;
    font-size: 0.765rem; /* ✅ REDUS 10%: de la 0.85rem */
    line-height: 1;
    font-weight: 400;
}

/* Text "Close" - ascuns în mod normal */
.close-order-btn .close-text {
    display: none;
    font-size: 0.585rem; /* ✅ REDUS 10%: de la 0.65rem */
    font-weight: 600;
    text-transform: uppercase;
}

/* La hover: ascunde X, arată text, mărește butonul */
.close-order-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    padding: 0.135rem 0.45rem; /* ✅ REDUS 10%: de la 0.15rem 0.5rem */
    min-width: auto;
}

.close-order-btn:hover .close-icon {
    display: none;
}

.close-order-btn:hover .close-text {
    display: inline-block;
}

/* La click (active) */
.close-order-btn:active {
    background: rgba(239, 68, 68, 0.25);
    transform: scale(0.95);
}

.orders-feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    text-align: center;
}

.orders-feed-empty svg {
    margin-bottom: 1rem;
    opacity: 0.3;
}

.orders-feed-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* ================================================================
   ORDERS TEST - Tabel ordine test (identic cu orders-feed)
   ================================================================ */

.orders-test {
    margin-top: 1rem; /* Spațiu între grafic și tabel */
    background: #ffffff; /* ✅ MODIFICAT: Valoare explicită în loc de var(--surface-color) pentru izolare */
    border-radius: 8px;
    /* ✅ FIX (09 Mar 2026): overflow:hidden ascundea tabelul când controls wrapa pe 2 rânduri (BUY/SELL filters) */
    /* border-radius aplicat direct pe orders-test-table */
}

.orders-test-table {
    border-radius: 0 0 8px 8px; /* colțuri rotunjite doar jos, pentru aspect corect */
}

/* ✅ ADĂUGAT: Override pentru dark theme card */
.strategy-card[data-card-theme="dark"] .orders-test {
    background: var(--card-dark-bg, #1a1a1a);
}

/* ✅ ADĂUGAT: Override pentru light theme card */
.strategy-card[data-card-theme="light"] .orders-test {
    background: var(--card-light-bg, #ffffff);
}

.orders-test-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; /* ✅ La fel ca orders-feed-header */
    flex-wrap: wrap; /* ✅ Permite wrap pe mobile */
    gap: 0.75rem; /* ✅ Spațiu între elemente */
}

.orders-test-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b; /* ✅ MODIFICAT: Valoare explicită în loc de var(--text-primary) pentru izolare */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.orders-test-controls {
    display: flex;
    gap: 4px; /* ✅ MODIFICAT: de la 0.5rem la 4px ca orders-feed-controls */
    align-items: center;
    flex-wrap: wrap;
}

/* ✅ MODIFICAT: Butoane filtrare TIP și STATUS - styling identic cu orders-filter-btn */
/* Grup filtrare TIP (Toate/BUY/SELL) — doar pentru FUTURES */
.filter-type-group {
    display: flex;
    gap: 4px; /* ✅ MODIFICAT: de la 0.25rem la 4px */
    align-items: center;
}

.btn-filter-type {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 4px 6px;
    color: #94a3b8;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-filter-type:hover {
    background: rgba(37, 99, 235, 0.3);
    color: #ffffff;
    border-color: rgba(37, 99, 235, 0.5);
}

.btn-filter-type.active {
    background: rgba(37, 99, 235, 0.5);
    color: #ffffff;
    border-color: #3b82f6;
}

.btn-filter-type.active:hover {
    background: rgba(37, 99, 235, 0.5);
}

/* Separator vertical între grupuri */
.filter-separator {
    color: #64748b; /* ✅ IZOLAT: Valoare explicită în loc de var(--text-secondary) */
    opacity: 0.3;
    font-size: 0.75rem;
    margin: 0 2px;
}

/* ✅ NOU (09 Mar 2026): Grupuri filtrare Status BUY / Status SELL */
.filter-buy-status-group,
.filter-sell-status-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

.filter-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-right: 2px;
    white-space: nowrap;
}

.btn-filter-buy-status,
.btn-filter-sell-status {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 4px 6px;
    color: #94a3b8;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-filter-buy-status:hover {
    background: rgba(34, 197, 94, 0.25);
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.5);
}

.btn-filter-buy-status.active {
    background: rgba(34, 197, 94, 0.4);
    color: #ffffff;
    border-color: #22c55e;
}

.btn-filter-buy-status.active:hover {
    background: rgba(34, 197, 94, 0.4);
}

.btn-filter-sell-status:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #ffffff;
    border-color: rgba(239, 68, 68, 0.5);
}

.btn-filter-sell-status.active {
    background: rgba(239, 68, 68, 0.4);
    color: #ffffff;
    border-color: #ef4444;
}

.btn-filter-sell-status.active:hover {
    background: rgba(239, 68, 68, 0.4);
}

.orders-test-count {
    font-size: 0.75rem; /* ✅ MODIFICAT: de la implicit */
    color: #64748b; /* ✅ IZOLAT: Valoare explicită în loc de var(--text-secondary) */
    font-weight: 500;
    white-space: nowrap;
    margin-left: 4px;
}

.orders-test-table {
    min-height: 210px; /* ✅ MODIFICAT: Înălțime minimă (header + 6-7 rânduri) */
    max-height: 300px; /* Înălțime maximă pentru scroll vertical */
    overflow-y: auto; /* Scroll vertical când tabelul e prea înalt */
    overflow-x: auto; /* ✅ FIX: Scroll orizontal când tabelul e prea lat */
}

/* Empty state pentru orders test */
.orders-test-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    text-align: center;
}

.orders-test-empty svg {
    margin-bottom: 1rem;
    opacity: 0.3;
}

.orders-test-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* ================================================================
   PROFIT COLUMN - Styling pentru coloana Profit
   ================================================================ */

.order-profit {
    font-weight: 600;
    text-align: left; /* ✅ MODIFICAT: de la right la left */
    font-size: 0.75rem; /* ✅ Același font-size ca restul tabelului */
}

/* ✅ NOU (03 Mai 2026): Animatie flash pentru celula SL actualizata (SL trailing update) */
@keyframes sl-flash {
    0%   { background-color: rgba(255, 165, 0, 0.4); }
    100% { background-color: transparent; }
}
td.order-stoploss.sl-updated {
    animation: sl-flash 1.5s ease-out forwards;
}

.profit-value {
    padding: 0.15rem 0.4rem; /* ✅ Același padding ca type-badge */
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.65rem; /* ✅ Același font-size ca type-badge */
    display: inline-block; /* ✅ ADĂUGAT: pentru a se comporta ca badge */
}

/* ✅ ADĂUGAT: Styling pentru fees (aceeași dimensiune ca profit-value) */
.profit-fees {
    font-weight: 600; /* ✅ MODIFICAT: de la 400 la 600 (bold) */
    font-size: 0.65rem; /* ✅ ACEEAȘI DIMENSIUNE ca profit-value (0.65rem) */
    color: var(--text-secondary);
    margin-left: 0.25rem;
    display: inline-block;
}

/* ✅ ADĂUGAT: Styling pentru coloana Maker/Taker (fees) */
.order-maker-taker {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

.maker-taker-fees {
    font-weight: 600; /* ✅ MODIFICAT: de la 400 la 600 (bold) */
    font-size: 0.65rem;
    color: var(--text-secondary);
    display: inline-block;
}

/* ✅ ADĂUGAT: Styling pentru coloana Exit Value */
.order-exit-value {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

.exit-value-amount {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-primary);
    display: inline-block;
}

.profit-positive {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.profit-negative {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.profit-neutral {
    color: var(--text-secondary);
    background: rgba(128, 128, 128, 0.1);
}

/* ✅ ADĂUGAT: Centrare conținut coloana Nr. Trading */
.orders-test-table th[data-column="grid-level"],
.orders-test-table td.order-grid-level {
    text-align: center;
}

/* ✅ ADĂUGAT: Centrare conținut pentru coloanele: Cantitate, Profit, Status Buy, Status Sell */
.orders-test-table th[data-column="quantity"],
.orders-test-table td.order-quantity,
.orders-test-table th[data-column="profit"],
.orders-test-table td.order-profit,
.orders-test-table th[data-column="status-buy"],
.orders-test-table td.order-status-buy,
.orders-test-table th[data-column="status-sell"],
.orders-test-table td.order-status-sell {
    text-align: center;
}

/* ✅ ADĂUGAT: Styling pentru coloanele Ordin Plasat și Preț Curent */
.order-current-price,
.order-live-price {
    font-size: 0.75rem; /* ✅ Același font-size ca restul tabelului */
}

.live-price-value {
    font-weight: 500;
    font-size: 0.75rem; /* ✅ Același font-size ca restul tabelului */
}

/* ✅ ADĂUGAT: Styling pentru coloana Canceled - buton și săgeată */
.orders-test-table th[data-column="canceled"],
.orders-test-table td.order-canceled {
    text-align: center;
}

.btn-cancel-sell {
    background: rgba(255, 107, 107, 0.5);  /* 50% transparență */
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-cancel-sell:hover {
    background: rgba(255, 82, 82, 0.8);  /* 80% opacitate la hover */
    transform: scale(1.05);
}

.btn-cancel-sell:active {
    transform: scale(0.95);
}

/* ✅ FIX (12 Apr 2026): Buton Cancel pentru Futures — acelasi stil ca btn-cancel-sell */
.btn-cancel-futures {
    background: rgba(255, 107, 107, 0.5);  /* 50% transparenta */
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-cancel-futures:hover {
    background: rgba(255, 82, 82, 0.8);  /* 80% opacitate la hover */
    transform: scale(1.05);
}

.btn-cancel-futures:active {
    transform: scale(0.95);
}

.cancel-arrow {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: bold;
    display: inline-block;
    animation: pointLeft 1s ease-in-out;
}

@keyframes pointLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
}

/* ✅ ADĂUGAT: Badge pentru status CANCELED (culoare portocaliu distinctă) */
.status-badge.CANCELED,
.status-badge.canceled {
    background: rgba(251, 191, 36, 0.1);  /* Portocaliu deschis */
    color: #f59e0b;  /* Portocaliu */
    font-weight: 600;
}

/* ✅ FIX (12 Apr 2026): Tooltip pe badge-urile FILLED/CANCELED cu data-tooltip=TP/SL
   Futures V2: CLOSED_TP → FILLED cu tooltip "TP", CLOSED_SL → CANCELED cu tooltip "SL"
   Tooltip apare sub badge la hover */
.status-badge[data-tooltip] {
    position: relative;
    cursor: default;
}

.status-badge[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.92);
    color: #f1f5f9;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
    letter-spacing: 0.5px;
}

.status-badge[data-tooltip]:hover::after {
    opacity: 1;
}

/* ================================================================
   CONFIG EDIT SIDEBAR - Slide-in panel pentru editare configurații
   ================================================================ */

/* Container principal (hidden by default) */
.config-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Sidebar activ (vizibil) */
.config-sidebar.active {
    pointer-events: auto;
    opacity: 1;
}

/* Overlay semi-transparent */
.config-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ================================================================
   CHART FONT SIZE TOGGLE BUTTON
   ================================================================ */

.font-size-toggle-btn .font-size-text {
    font-size: 12px;
    font-weight: 700;
    color: #9CA3AF;  /*#22577A ✅ ADĂUGAT: Culoare text albastru-cyan */
    transition: font-size 0.2s ease, color 0.2s ease;
}

/* State-uri pentru dimensiuni diferite */
.font-size-toggle-btn[data-font-size="10"] .font-size-text {
    font-size: 10px;
}

.font-size-toggle-btn[data-font-size="12"] .font-size-text {
    font-size: 12px;
}

.font-size-toggle-btn[data-font-size="14"] .font-size-text {
    font-size: 14px;
}

/* ✅ State activ când font size e 12px (highlight similar cu BOT) */
.font-size-toggle-btn[data-font-size="12"] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

/* ✅ Text alb când buton activ (font size 12px) */
.font-size-toggle-btn[data-font-size="12"] .font-size-text {
    color: #ffffff;
}

/* ✅ Hover effect implicit de la .theme-btn:hover se va aplica automat */

/* ✅ ADĂUGAT: CSS variabilă pentru font size chart labels */
.tradingview-chart-container {
    --chart-label-font-size: 10px;
}

/* ✅ ÎMBUNĂTĂȚIT: Aplicăm font size DOAR la elemente specifice (nu la toate cu *) */
.tradingview-chart-container canvas + div {
    font-size: var(--chart-label-font-size) !important;
}

/* ✅ Previne blurring prin font-smoothing */
.tradingview-chart-container * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ================================================================
   TOOLTIPS PENTRU BUTOANE TAB 3 (TESTING)
   ================================================================ */

/* Poziționare relativă pentru toate butoanele theme */
.theme-btn,
.font-size-toggle-btn,
.chart-bot-toggle-btn,
.chart-profit-toggle-btn,
.chart-breakeven-toggle-btn,
.chart-gridnum-toggle-btn,
.chart-timer-toggle-btn,
.arrow-btn {
    position: relative;
    z-index: 1;  /* ✅ Z-index de bază */
}

/* ✅ ADĂUGAT: Crește z-index la hover pentru a aduce tooltip-ul deasupra */
.theme-btn:hover,
.font-size-toggle-btn:hover,
.chart-bot-toggle-btn:hover,
.chart-profit-toggle-btn:hover,
.chart-breakeven-toggle-btn:hover,
.chart-gridnum-toggle-btn:hover,
.chart-timer-toggle-btn:hover,
.arrow-btn:hover {
    z-index: 9999998;  /* ✅ Butonul la hover devine aproape la fel de înalt ca tooltip-ul */
}

/* Tooltip DEASUPRA butonului */
.theme-btn[data-tooltip]::after,
.font-size-toggle-btn[data-tooltip]::after,
.chart-bot-toggle-btn[data-tooltip]::after,
.chart-profit-toggle-btn[data-tooltip]::after,
.chart-breakeven-toggle-btn[data-tooltip]::after,
.chart-gridnum-toggle-btn[data-tooltip]::after,
.chart-timer-toggle-btn[data-tooltip]::after,
.arrow-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;  /* ✅ SCHIMBAT: Deasupra (era top: 50%) */
    left: 50%;  /* ✅ SCHIMBAT: Centrat orizontal (era left: 100%) */
    transform: translateX(-50%) translateY(-12px);  /* ✅ SCHIMBAT: Centrat + offset pentru săgeată (12px = 2*6px border) */
    margin-bottom: 0;  /* ✅ SCHIMBAT: Fără margin (era 8px) - săgeata face conexiunea */
    background: #22577a;
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(34, 87, 122, 0.4), 0 0 0 1px rgba(34, 87, 122, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 9999999;
    font-weight: 500;
}

/* Săgeată tooltip (DEASUPRA butonului, la 10px sub tooltip) */
.theme-btn[data-tooltip]::before,
.font-size-toggle-btn[data-tooltip]::before,
.chart-bot-toggle-btn[data-tooltip]::before,
.chart-profit-toggle-btn[data-tooltip]::before,
.chart-breakeven-toggle-btn[data-tooltip]::before,
.chart-gridnum-toggle-btn[data-tooltip]::before,
.chart-timer-toggle-btn[data-tooltip]::before,
.arrow-btn[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 100%;  /* ✅ Deasupra butonului */
    left: 50%;  /* ✅ Centrat orizontal */
    transform: translateX(-50%) translateY(-2px);  /* ✅ SCHIMBAT: -2px (era -5px) = mai jos cu 3px */
    margin: 0;
    border: 6px solid transparent;
    border-top-color: #22577a;  /* ✅ Săgeată în jos */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10000000;
}

/* La hover, tooltip-ul apare */
.theme-btn[data-tooltip]:hover::after,
.theme-btn[data-tooltip]:hover::before,
.font-size-toggle-btn[data-tooltip]:hover::after,
.font-size-toggle-btn[data-tooltip]:hover::before,
.chart-bot-toggle-btn[data-tooltip]:hover::after,
.chart-bot-toggle-btn[data-tooltip]:hover::before,
.chart-profit-toggle-btn[data-tooltip]:hover::after,
.chart-profit-toggle-btn[data-tooltip]:hover::before,
.chart-breakeven-toggle-btn[data-tooltip]:hover::after,
.chart-breakeven-toggle-btn[data-tooltip]:hover::before,
.chart-gridnum-toggle-btn[data-tooltip]:hover::after,
.chart-gridnum-toggle-btn[data-tooltip]:hover::before,
.chart-timer-toggle-btn[data-tooltip]:hover::after,
.chart-timer-toggle-btn[data-tooltip]:hover::before,
.arrow-btn[data-tooltip]:hover::after,
.arrow-btn[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

.theme-btn[data-tooltip]:hover::after,
.font-size-toggle-btn[data-tooltip]:hover::after,
.chart-bot-toggle-btn[data-tooltip]:hover::after,
.chart-profit-toggle-btn[data-tooltip]:hover::after,
.chart-breakeven-toggle-btn[data-tooltip]:hover::after,
.chart-gridnum-toggle-btn[data-tooltip]:hover::after,
.chart-timer-toggle-btn[data-tooltip]:hover::after,
.arrow-btn[data-tooltip]:hover::after {
    transform: translateX(-50%) translateY(-16px);  /* ✅ SCHIMBAT: Slide în sus (era -12px) */
}

/* ================================================================
   TOOLTIPS SPECIFICE PENTRU TEMA GLOBALĂ APLICAȚIEI
   ================================================================ */

/* Tooltip pentru LIGHT Theme (default - fără clasa .dark-theme pe body) */
body:not(.dark-theme) .theme-btn[data-tooltip]::after,
body:not(.dark-theme) .font-size-toggle-btn[data-tooltip]::after,
body:not(.dark-theme) .chart-bot-toggle-btn[data-tooltip]::after,
body:not(.dark-theme) .chart-profit-toggle-btn[data-tooltip]::after,
body:not(.dark-theme) .chart-breakeven-toggle-btn[data-tooltip]::after,
body:not(.dark-theme) .chart-gridnum-toggle-btn[data-tooltip]::after,
body:not(.dark-theme) .chart-timer-toggle-btn[data-tooltip]::after,
body:not(.dark-theme) .arrow-btn[data-tooltip]::after {
    background: #22577A !important;  /* Albastru-cyan */
    color: #FFFFC5 !important;       /* Galben deschis */
    box-shadow: 0 4px 12px rgba(34, 87, 122, 0.4), 0 0 0 1px rgba(34, 87, 122, 0.3);
}

/* Săgeată pentru LIGHT Theme */
body:not(.dark-theme) .theme-btn[data-tooltip]::before,
body:not(.dark-theme) .font-size-toggle-btn[data-tooltip]::before,
body:not(.dark-theme) .chart-bot-toggle-btn[data-tooltip]::before,
body:not(.dark-theme) .chart-profit-toggle-btn[data-tooltip]::before,
body:not(.dark-theme) .chart-breakeven-toggle-btn[data-tooltip]::before,
body:not(.dark-theme) .chart-gridnum-toggle-btn[data-tooltip]::before,
body:not(.dark-theme) .chart-timer-toggle-btn[data-tooltip]::before,
body:not(.dark-theme) .arrow-btn[data-tooltip]::before {
    border-top-color: #22577A !important;
}

/* Tooltip pentru DARK Theme (când body are clasa .dark-theme) */
body.dark-theme .theme-btn[data-tooltip]::after,
body.dark-theme .font-size-toggle-btn[data-tooltip]::after,
body.dark-theme .chart-bot-toggle-btn[data-tooltip]::after,
body.dark-theme .chart-profit-toggle-btn[data-tooltip]::after,
body.dark-theme .chart-breakeven-toggle-btn[data-tooltip]::after,
body.dark-theme .chart-gridnum-toggle-btn[data-tooltip]::after,
body.dark-theme .chart-timer-toggle-btn[data-tooltip]::after,
body.dark-theme .arrow-btn[data-tooltip]::after {
    background: #FFFFC5 !important;  /* Galben deschis */
    color: #22577A !important;       /* Albastru-cyan */
    box-shadow: 0 4px 12px rgba(255, 255, 197, 0.4), 0 0 0 1px rgba(255, 255, 197, 0.3);
}

/* Săgeată pentru DARK Theme */
body.dark-theme .theme-btn[data-tooltip]::before,
body.dark-theme .font-size-toggle-btn[data-tooltip]::before,
body.dark-theme .chart-bot-toggle-btn[data-tooltip]::before,
body.dark-theme .chart-profit-toggle-btn[data-tooltip]::before,
body.dark-theme .chart-breakeven-toggle-btn[data-tooltip]::before,
body.dark-theme .chart-gridnum-toggle-btn[data-tooltip]::before,
body.dark-theme .chart-timer-toggle-btn[data-tooltip]::before,
body.dark-theme .arrow-btn[data-tooltip]::before {
    border-top-color: #FFFFC5 !important;
}

/* ================================================================
   TOOLTIP PENTRU LABEL-URI TEST (Read Only)
   ================================================================ */

/* Tooltip pentru label-uri test - Deasupra label-ului */
label.form-label-test[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    margin-bottom: 0;
    background: #22577A;
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(34, 87, 122, 0.4), 0 0 0 1px rgba(34, 87, 122, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 9999999;
    font-weight: 500;
}

/* Săgeată tooltip pentru label-uri test */
label.form-label-test[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    margin: 0;
    border: 6px solid transparent;
    border-top-color: #22577A;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10000000;
}

/* La hover, tooltip-ul apare */
label.form-label-test[data-tooltip]:hover::after,
label.form-label-test[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

label.form-label-test[data-tooltip]:hover::after {
    transform: translateX(-50%) translateY(-16px);
}

/* Tooltip pentru LIGHT Theme */
body:not(.dark-theme) label.form-label-test[data-tooltip]::after {
    background: #22577A !important;
    color: #FFFFC5 !important;
    box-shadow: 0 4px 12px rgba(34, 87, 122, 0.4), 0 0 0 1px rgba(34, 87, 122, 0.3);
}

body:not(.dark-theme) label.form-label-test[data-tooltip]::before {
    border-top-color: #22577A !important;
}

/* Tooltip pentru DARK Theme */
body.dark-theme label.form-label-test[data-tooltip]::after {
    background: #FFFFC5 !important;
    color: #22577A !important;
    box-shadow: 0 4px 12px rgba(255, 255, 197, 0.4), 0 0 0 1px rgba(255, 255, 197, 0.3);
}

body.dark-theme label.form-label-test[data-tooltip]::before {
    border-top-color: #FFFFC5 !important;
}

/* ================================================================
   CHART BOT TOGGLE BUTTON - Styling similar cu celelalte butoane theme
   ================================================================ */

.chart-bot-toggle-btn .bot-toggle-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9CA3AF;  /* #22577A✅ ADĂUGAT: Culoare text albastru-cyan */
    transition: color 0.2s ease;
}

/* State activ pentru butonul BOT (când numărul BOT e afișat) */
.chart-bot-toggle-btn.active {
    background: #E60000;  /* ✅ Roșu */
    border-color: #E60000;
    color: #ffffff;
}

/* ✅ Text alb când buton activ */
.chart-bot-toggle-btn.active .bot-toggle-text {
    color: #ffffff;
}

/* ================================================================
   CHART PROFIT/LOSS TOGGLE BUTTON
   ================================================================ */

.chart-profit-toggle-btn .profit-toggle-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9CA3AF;  /* #22577A ✅ ADĂUGAT: Culoare text albastru-cyan */
    transition: color 0.2s ease;
}

/* State activ pentru butonul P/L (când profit/loss e afișat) */
.chart-profit-toggle-btn.active {
    background: #10b981; /* Verde pentru profit */
    border-color: #10b981;
    color: #ffffff;
}

/* ✅ Text alb când buton activ */
.chart-profit-toggle-btn.active .profit-toggle-text {
    color: #ffffff;
}

/* ================================================================
   CHART BREAK-EVEN TOGGLE BUTTON
   ================================================================ */

.chart-breakeven-toggle-btn .breakeven-toggle-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9CA3AF;  /* #22577A ✅ ADĂUGAT: Culoare text albastru-cyan */
    transition: color 0.2s ease;
}

/* State activ pentru butonul B/E (când break-even e afișat) */
.chart-breakeven-toggle-btn.active {
    background: #f59e0b; /* Portocaliu/Galben pentru break-even */
    border-color: #f59e0b;
    color: #ffffff;
}

/* ✅ Text alb când buton activ */
.chart-breakeven-toggle-btn.active .breakeven-toggle-text {
    color: #ffffff;
}

/* ================================================================
   CHART GRID NUMBERING TOGGLE BUTTON
   ================================================================ */

.chart-gridnum-toggle-btn .gridnum-toggle-text {
    font-size: 12px;
    font-weight: 700;
    color: #9CA3AF;  /* #22577A✅ ADĂUGAT: Culoare text albastru-cyan */
    transition: color 0.2s ease;
}

/* State activ pentru butonul # (când numerotare grid e afișată) */
.chart-gridnum-toggle-btn.active {
    background: #00856f;  /* ✅ Verde-teal */
    border-color: #00856f;
    color: #ffffff;
}

/* ✅ Text alb când buton activ */
.chart-gridnum-toggle-btn.active .gridnum-toggle-text {
    color: #ffffff;
}

/* ================================================================
   CHART DCA TIMER TOGGLE BUTTON
   ================================================================ */

.chart-timer-toggle-btn .timer-toggle-text {
    font-size: 14px;
}

/* State activ pentru butonul Timer (când countdown DCA e afișat) */
.chart-timer-toggle-btn.active {
    background: #ec4899; /* Pink/Magenta pentru timer */
    border-color: #ec4899;
    color: #ffffff;
}

/* ✅ Text alb când buton activ */
.chart-timer-toggle-btn.active .timer-toggle-text {
    color: #ffffff;
}

/* ================================================================
   CONFIG SIDEBAR
   ================================================================ */

.config-sidebar.active .config-sidebar-overlay {
    opacity: 1;
}

/* Panel-ul sidebar (slide din dreapta) */
.config-sidebar-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
    max-width: 90%;
    height: 100%;
    background: var(--card-background);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.config-sidebar.active .config-sidebar-panel {
    transform: translateX(0);
}

/* Header sidebar */
.config-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(to bottom, var(--card-background), rgba(0, 0, 0, 0.02));
}

.config-sidebar-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.config-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.config-sidebar-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

/* Body sidebar (scrollable) */
.config-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Footer sidebar */
.config-sidebar-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.02);
}

.config-sidebar-footer .btn {
    flex: 1;
}

/* Form styling în sidebar */
#config-edit-form .form-group {
    margin-bottom: 1.5rem;
}

#config-edit-form .form-group:last-child {
    margin-bottom: 0;
}

#config-edit-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

#config-edit-form .form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--card-background);
    transition: all 0.2s ease;
}

#config-edit-form .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

#config-edit-form .form-text {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
    .config-sidebar-panel {
        width: 100%;
        max-width: 100%;
    }
}

/* ================================================================
   OVERRIDE BUTOANE SUCCESS - Stiluri transparente pentru modul Strategies
   Mutat din index.html <style> tag (Regula #3 - CSS modular)
   ================================================================ */

/* Override variabila CSS --success-color DOAR pentru modulul strategies */
#strategies-module,
#strategies-list {
    --success-color: transparent; /* Culoare transparenta pentru butonul success */
}

/* Override direct toate variantele de .btn-success in modul strategies */
#strategies-module .btn-success,
#strategies-list .btn-success,
.strategy-actions .btn-success,
.btn.btn-success {
    background: transparent !important; /* Fundal transparent */
    background-color: transparent !important; /* Fundal transparent (fallback) */
    color: #10b981 !important; /* Culoare text verde */
    border: 1px solid #10b981 !important; /* Border verde */
}

/* Hover state pentru butoanele success */
#strategies-module .btn-success:hover,
#strategies-list .btn-success:hover,
.strategy-actions .btn-success:hover,
.btn.btn-success:hover {
    background: rgba(16, 185, 129, 0.1) !important; /* Fundal verde transparent la hover */
    background-color: rgba(16, 185, 129, 0.1) !important; /* Fundal verde transparent (fallback) */
    color: #059669 !important; /* Culoare text verde mai inchis la hover */
    border-color: #059669 !important; /* Border verde mai inchis la hover */
}

/* ================================================================
   VALIDATION MODAL - Foloseste clasele .modal existente
   ================================================================ */

/* Stiluri specifice pentru lista de erori in validation modal */
.validation-errors-list {
    list-style: none; /* Fara bullet points */
    padding: 0; /* Fara padding */
    margin: 0; /* Fara margini */
    display: flex; /* Flexbox */
    flex-direction: column; /* Directie verticala */
    gap: 0.75rem; /* Spatiu intre erori */
}

/* Item eroare */
.validation-error-item {
    display: flex; /* Flexbox pentru aliniere */
    align-items: flex-start; /* Aliniere sus */
    gap: 0.75rem; /* Spatiu intre icon si text */
    padding: 0.75rem; /* Padding */
    background: rgba(255, 255, 255, 0.1); /* Fundal alb transparent */
    border-radius: 8px; /* Colturi rotunjite */
    border-left: 3px solid #ef4444; /* Border rosu la stanga */
}

/* ✅ ADĂUGAT: Item warning (galben) */
.validation-warning-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(251, 191, 36, 0.1); /* Fundal galben transparent */
    border-radius: 8px;
    border-left: 3px solid #f59e0b; /* Border galben la stanga */
}

/* Icon eroare (emoji) */
.validation-error-icon {
    font-size: 1.25rem; /* Marime medie */
    line-height: 1; /* Inaltime linie compacta */
    flex-shrink: 0; /* Nu se micsoreaza */
}

/* Text eroare */
.validation-error-text {
    flex: 1; /* Ia tot spatiul ramas */
    font-size: 0.95rem; /* Marime normala */
    line-height: 1.5; /* Inaltime linie pentru citibilitate */
    color: white; /* Text alb fix */
}

/* ================================================================
   COLUMN VISIBILITY DROPDOWN
   ================================================================ */

/* Container dropdown coloane */
.column-selector {
    position: relative;
    display: inline-block;
}

/* Buton dropdown coloane */
.column-selector-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    height: 36px;
}

.column-selector-btn:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.column-selector-btn svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.column-selector-btn:hover svg {
    color: var(--primary-color);
}

.column-selector-btn .dropdown-arrow {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.column-selector.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* ================================================================
   DROPDOWN MENU - LIGHT THEME (default)
   ================================================================ */

/* Dropdown menu - LIGHT THEME */
body:not(.dark-theme) .column-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background: #22577A;  /* ✅ LIGHT: Fundal albastru */
    border: 1px solid rgba(34, 87, 122, 0.3);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(34, 87, 122, 0.4), 0 0 0 1px rgba(34, 87, 122, 0.3);
    min-width: 160px;  /* ✅ UNIFORMIZAT: 160px pentru ambele teme */
    max-height: 210px;  /* ✅ UNIFORMIZAT: 210px pentru ambele teme */
    overflow-y: auto;  /* ✅ Scroll vertical când depășește înălțimea */
    z-index: 1000;
    display: none;
}

body:not(.dark-theme) .column-selector.open .column-dropdown {
    display: block;
    animation: dropdownFadeIn 0.2s ease;
}

/* Header dropdown - LIGHT THEME */
body:not(.dark-theme) .column-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;  /* ✅ ADĂUGAT: Spacing între elemente pentru counter */
    padding: 4px 14px;  /* ✅ UNIFORMIZAT: 4px pentru ambele teme */
    border-bottom: 1px solid rgba(255, 255, 197, 0.2);
    font-weight: 600;
    font-size: 13px;
    color: #FFFFC5;  /* ✅ LIGHT: Text galben */
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px 8px 0 0;
}

/* Buton Salvează - LIGHT THEME */
body:not(.dark-theme) .save-columns {
    padding: 4px 10px;
    background: #FFFFC5;  /* ✅ LIGHT: Fundal galben */
    color: #22577A;       /* ✅ LIGHT: Text albastru */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s ease;
}

body:not(.dark-theme) .save-columns:hover {
    background: #FFFFE5;  /* ✅ LIGHT: Galben mai deschis */
    transform: scale(1.05);
}

/* Item dropdown - LIGHT THEME */
body:not(.dark-theme) .column-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;  /* ✅ REDUS: 10px → 8px (spacing între checkbox și text) */
    padding: 6px 14px;  /* ✅ REDUS: 10px → 6px (padding vertical pentru compactare) */
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 13px;
    color: #FFFFC5;  /* ✅ LIGHT: Text galben */
    user-select: none;
}

body:not(.dark-theme) .column-dropdown-item:hover {
    background: rgba(255, 255, 197, 0.15);  /* ✅ LIGHT: Hover galben */
}

body:not(.dark-theme) .column-dropdown-item input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #FFFFC5;  /* ✅ LIGHT: Checkbox galben */
}

/* ================================================================
   DROPDOWN MENU - DARK THEME
   ================================================================ */

/* Dropdown menu - DARK THEME */
body.dark-theme .column-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background: #FFFFC5;  /* ✅ DARK: Fundal galben */
    border: 1px solid rgba(255, 255, 197, 0.3);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(255, 255, 197, 0.4), 0 0 0 1px rgba(255, 255, 197, 0.3);
    min-width: 160px;  /* ✅ UNIFORMIZAT: 160px (era 220px) */
    max-height: 210px;  /* ✅ UNIFORMIZAT: 210px (era 400px) */
    overflow-y: auto;  /* ✅ Scroll vertical când depășește înălțimea */
    z-index: 1000;
    display: none;
}

body.dark-theme .column-selector.open .column-dropdown {
    display: block;
    animation: dropdownFadeIn 0.2s ease;
}

/* Header dropdown - DARK THEME */
body.dark-theme .column-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;  /* ✅ ADĂUGAT: Spacing între elemente pentru counter */
    padding: 4px 14px;  /* ✅ UNIFORMIZAT: 4px (era 12px) */
    border-bottom: 1px solid rgba(34, 87, 122, 0.2);
    font-weight: 600;
    font-size: 13px;
    color: #22577A;  /* ✅ DARK: Text albastru */
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px 8px 0 0;
}

/* Buton Salvează - DARK THEME */
body.dark-theme .save-columns {
    padding: 4px 10px;
    background: #22577A;  /* ✅ DARK: Fundal albastru */
    color: #FFFFC5;       /* ✅ DARK: Text galben */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s ease;
}

body.dark-theme .save-columns:hover {
    background: #1a4660;  /* ✅ DARK: Albastru mai închis */
    transform: scale(1.05);
}

/* Item dropdown - DARK THEME */
body.dark-theme .column-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;  /* ✅ REDUS: 10px → 8px (spacing între checkbox și text) */
    padding: 6px 14px;  /* ✅ REDUS: 10px → 6px (padding vertical pentru compactare) */
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 13px;
    color: #22577A;  /* ✅ DARK: Text albastru */
    user-select: none;
}

body.dark-theme .column-dropdown-item:hover {
    background: rgba(34, 87, 122, 0.15);  /* ✅ DARK: Hover albastru */
}

body.dark-theme .column-dropdown-item input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #22577A;  /* ✅ DARK: Checkbox albastru */
}

/* ================================================================
   COMMON STYLES (pentru ambele teme)
   ================================================================ */

.column-dropdown-item span {
    flex: 1;
}

/* ✅ ADĂUGAT: Counter coloane vizibile (X/10) */
.column-counter {
    display: inline-flex;  /* ✅ FIX: Folosește flex pentru centrare perfectă */
    align-items: center;  /* ✅ FIX: Centrare verticală */
    justify-content: center;  /* ✅ FIX: Centrare orizontală */
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.15);  /* Fundal semi-transparent */
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;  /* Previne wrap-ul textului pe mai multe linii */
    min-width: 36px;  /* ✅ FIX: Mărit de la 32px la 36px pentru "10/10" */
    height: 18px;  /* ✅ FIX: Înălțime fixă pentru consistență */
    line-height: 1;  /* ✅ FIX: Line-height 1 pentru centrare perfectă */
}

/* Counter - LIGHT THEME (text galben pe fundal albastru) */
body:not(.dark-theme) .column-counter {
    color: #FFFFC5;  /* Text galben */
}

/* Counter - DARK THEME (text albastru pe fundal galben) */
body.dark-theme .column-counter {
    color: #22577A;  /* Text albastru */
}

/* Culori indicator status counter */
.column-counter.all-visible {
    background: rgba(16, 185, 129, 0.25);  /* Verde (toate vizibile) */
}

.column-counter.none-visible {
    background: rgba(239, 68, 68, 0.25);  /* Roșu (toate ascunse) */
}

.column-counter.partial-visible {
    background: rgba(245, 158, 11, 0.25);  /* Portocaliu (parțial) */
}

/* ✅ Ascundere coloane (pentru ambele tabele: LIVE și TEST) */
.orders-table-live th.hidden,
.orders-table-live td.hidden,
.orders-table-test th.hidden,
.orders-table-test td.hidden {
    display: none !important;
}

/* Animație fade-in */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================================
   TEST UPTIME TIMER - PE ACELAȘI RÂND CU TRADINGVIEW
   ================================================================ */

.tradingview-title-with-timer {
    /*display: flex;*/
    display: block;
    align-items: center;
    gap: 12px;
}

.tradingview-title-with-timer .testing-panel-title {
    margin: 0;
}

.test-uptime-value {
    font-weight: 600;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: #8b5cf6;
    letter-spacing: 1px;
    display: none; /* Ascuns by default */
}

/* ================================================================
   SAVE AS BOT BUTTON - Strategy Footer
   ================================================================ */

.strategy-actions .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.strategy-actions .btn-primary:hover {
    background: linear-gradient(135deg, #5568d3 0%, #63408a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.strategy-actions .btn-primary svg {
    margin-right: 6px;
}

/* ================================================================
   STRATEGY NOTES SECTION
   ================================================================ */

.strategy-notes-section {
    margin-top: 15px;
    padding: 5px;
    height: 220px;
    /*background: var(--surface-color);*/
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.notes-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
    color: var(--text-primary);
    flex-shrink: 0;
}

.notes-counter {
    font-size: 12px;
    font-weight: normal;
    color: #64748b; /* ✅ IZOLAT: Valoare explicită în loc de var(--text-secondary) */
    font-family: 'Courier New', monospace;
}

.strategy-notes-textarea {
    width: 100%;
    flex: 1;
    padding: 8px;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.4;
    color: #1e293b; /* ✅ IZOLAT: Valoare explicită în loc de var(--text-primary) */
    background: rgba(0, 0, 0, 0.02); /* ✅ IZOLAT: Valoare explicită în loc de var(--bg-color) */
    border: 1px solid #e2e8f0; /* ✅ IZOLAT: Valoare explicită în loc de var(--border-color) */
    border-radius: 6px;
    resize: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.strategy-notes-textarea:focus {
    outline: none;
    border-color: #667eea; /* ✅ IZOLAT: Valoare explicită (primary color) */
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.strategy-notes-textarea::placeholder {
    color: #64748b; /* ✅ IZOLAT: Valoare explicită în loc de var(--text-secondary) */
    opacity: 0.6;
}

/* Counter color change când e aproape de limită */
.notes-counter.warning {
    color: #f59e0b;
}

.notes-counter.danger {
    color: #ef4444;
    font-weight: bold;
}

/* ==================================================================
   CARD THEME BUTTONS - Butoane temă individuală per strategy card
   ================================================================== */

/* Container pentru butoanele de temă */
.strategy-card-theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto; /* Poziționează în partea dreaptă */
}

/* Buton individual de temă - ✅ IDENTIC cu .theme-btn */
.strategy-theme-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #D1D1D1;
    background: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    padding: 0;
}

.strategy-theme-btn:hover {
    background: #F3F4F6;
    border-color: #3B82F6;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.strategy-theme-btn.active {
    background: #3B82F6;
    border-color: #3B82F6;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

/* ✅ ACTUALIZAT: SVG și IMG styling - IDENTIC cu .theme-btn */
.strategy-theme-btn svg {
    width: 18px;
    height: 18px;
    stroke: #6B7280;
    transition: stroke 0.2s ease;
}

.strategy-theme-btn:hover svg {
    stroke: #3B82F6;
}

.strategy-theme-btn.active svg {
    stroke: #FFFFFF;
}

/* ✅ ADĂUGAT: Support pentru IMG (Settings button) */
.strategy-theme-btn img {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.strategy-theme-btn:hover img {
    opacity: 1;
}

.strategy-theme-btn.active img {
    filter: brightness(0) invert(1); /* White color for active state */
}

/* ✅ MODIFICAT: Modal pentru Card Theme Settings (similar cu chart-theme-modal) */
.card-theme-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.card-theme-modal-content {
    background: #ffffff; /* ✅ IZOLAT: Valoare explicită în loc de var(--surface-color) */
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    min-width: 350px;
    max-width: 500px;
}

/* ✅ ADĂUGAT: Dark theme pentru modal când aplicația e în dark mode */
body.dark-theme .card-theme-modal-content {
    background: #1e293b;
    color: #f1f5f9;
}

.card-theme-modal-content h4 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.color-picker-group {
    margin-bottom: 16px;
}

.color-picker-group label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.color-picker-group input[type="color"] {
    width: 60px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* ==================================================================
   CARD THEMES - Aplicare temă individuală pe strategy-card
   ================================================================== */

/* Ajustare layout pentru header cu butoane */
.strategy-tabs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.strategy-tabs-left {
    display: flex;
    gap: 8px;
    flex: 1;
}

/* ==================================================================
   IZOLARE COMPLETĂ - Strategy card independent de tema globală
   ================================================================== */

/* ✅ Când strategy-card are temă personalizată (dark/light),
   resetăm toate CSS variables globale pentru izolare completă */
.strategy-card[data-card-theme="dark"],
.strategy-card[data-card-theme="light"] {
    /* Resetăm variables globale care ar putea interfera */
    --surface-color: unset;
    --background-color: unset;
    --background-secondary: unset;
    --text-primary: unset;
    --text-secondary: unset;
    --border-color: unset;
    --surface-hover: unset;
}

/* ==================================================================
   CARD THEMES - Aplicare temă individuală pe strategy-card
   ================================================================== */

/* Dark Theme pentru Card - ✅ MODIFICAT: Folosește CSS variables pentru culori personalizate */
.strategy-card[data-card-theme="dark"] {
    background: var(--card-dark-bg, #1a1a1a);
    border-color: #333333;
}

.strategy-card[data-card-theme="dark"] .strategy-header,
.strategy-card[data-card-theme="dark"] .strategy-content,
.strategy-card[data-card-theme="dark"] .strategy-tabs-panel,
.strategy-card[data-card-theme="dark"] .strategy-tabs-header,
.strategy-card[data-card-theme="dark"] .strategy-tab-pane,
.strategy-card[data-card-theme="dark"] .testing-layout,
.strategy-card[data-card-theme="dark"] .testing-variables,
.strategy-card[data-card-theme="dark"] .testing-chart-area {
    background: var(--card-dark-bg, #1a1a1a);    
}

.strategy-card[data-card-theme="dark"] .strategy-title,
.strategy-card[data-card-theme="dark"] .strategy-tab,
.strategy-card[data-card-theme="dark"] .form-label-test,
.strategy-card[data-card-theme="dark"] .testing-panel-title,
.strategy-card[data-card-theme="dark"] .form-static-value,
.strategy-card[data-card-theme="dark"] .notes-label {
    color: var(--card-dark-text, #ffffff);
}

.strategy-card[data-card-theme="dark"] .strategy-type,
.strategy-card[data-card-theme="dark"] .strategy-symbol,
.strategy-card[data-card-theme="dark"] .notes-counter {
    color: var(--card-dark-text, #cccccc);
}

.strategy-card[data-card-theme="dark"] input,
.strategy-card[data-card-theme="dark"] textarea,
.strategy-card[data-card-theme="dark"] select {
    /*background: #2a2a2a; */
    color: #ffffff;
    border-color: #444444;
}

.strategy-card[data-card-theme="dark"] input:focus,
.strategy-card[data-card-theme="dark"] textarea:focus,
.strategy-card[data-card-theme="dark"] select:focus {
    border-color: var(--primary-color);
    background: #333333;
}

.strategy-card[data-card-theme="dark"] .strategy-tab {
    color: #cccccc;
}

.strategy-card[data-card-theme="dark"] .strategy-tab.active {
    color: #ffffff;
    border-bottom-color: var(--primary-color);
}

.strategy-card[data-card-theme="dark"] .form-separator {
    border-color: #333333;
}

/* Light Theme pentru Card - ✅ MODIFICAT: Folosește CSS variables pentru culori personalizate + Izolare completă */
.strategy-card[data-card-theme="light"] {
    background: var(--card-light-bg, #ffffff);  /* ✅ Valoare explicită în loc de var(--surface-color) */
    border-color: #e2e8f0;  /* ✅ Valoare explicită în loc de var(--border-color) */
}

.strategy-card[data-card-theme="light"] .strategy-header,
.strategy-card[data-card-theme="light"] .strategy-content,
.strategy-card[data-card-theme="light"] .strategy-tabs-panel,
.strategy-card[data-card-theme="light"] .strategy-tabs-header,
.strategy-card[data-card-theme="light"] .strategy-tab-pane,
.strategy-card[data-card-theme="light"] .testing-layout,
.strategy-card[data-card-theme="light"] .testing-variables,
.strategy-card[data-card-theme="light"] .testing-chart-area {
    background: var(--card-light-bg, #ffffff);  /* ✅ Izolat de var(--surface-color) */
}

.strategy-card[data-card-theme="light"] .strategy-title,
.strategy-card[data-card-theme="light"] .strategy-tab,
.strategy-card[data-card-theme="light"] .form-label-test,
.strategy-card[data-card-theme="light"] .testing-panel-title,
.strategy-card[data-card-theme="light"] .form-static-value,
.strategy-card[data-card-theme="light"] .notes-label {
    color: var(--card-light-text, #1e293b);  /* ✅ Izolat de var(--text-primary) */
}

.strategy-card[data-card-theme="light"] .strategy-type,
.strategy-card[data-card-theme="light"] .strategy-symbol,
.strategy-card[data-card-theme="light"] .notes-counter {
    color: #64748b;  /* ✅ Izolat de var(--text-secondary) */
}

/* ==================================================================
   GHID CONFIGURAȚIE - Aplicare contrast automat pentru Dark/Light theme
   ================================================================== */

/* ✅ Dark Theme - Ghid Configurație */
.strategy-card[data-card-theme="dark"] .config-title {
    color: var(--card-dark-text, #ffffff);
}

.strategy-card[data-card-theme="dark"] .config-item-compact .label {
    color: var(--card-dark-text, #cccccc);
}

.strategy-card[data-card-theme="dark"] .config-item-compact .value {
    color: var(--card-dark-text, #ffffff);
}

.strategy-card[data-card-theme="dark"] .config-item-compact .description {
    color: var(--card-dark-text, #999999);
}

/* ✅ Light Theme - Ghid Configurație */
.strategy-card[data-card-theme="light"] .config-title {
    color: var(--card-light-text, #1e293b);  /* ✅ Izolat */
}

.strategy-card[data-card-theme="light"] .config-item-compact .label {
    color: var(--card-light-text, #64748b);  /* ✅ Izolat */
}

.strategy-card[data-card-theme="light"] .config-item-compact .value {
    color: var(--card-light-text, #1e293b);  /* ✅ Izolat */
}

.strategy-card[data-card-theme="light"] .config-item-compact .description {
    color: var(--card-light-text, #64748b);  /* ✅ Izolat */
    opacity: 0.7;
}

/* ==================================================================
   PANOU INFORMATIV - Aplicare contrast automat pentru Dark/Light theme
   ================================================================== */

/* ✅ Dark Theme - Panou Informativ */
.strategy-card[data-card-theme="dark"] .config-info-panel {
    border-left-color: #444444;
}

.strategy-card[data-card-theme="dark"] .config-info-panel .info-title {
    color: var(--primary-color); /* Păstrăm primary color pentru title */
}

.strategy-card[data-card-theme="dark"] .config-info-panel .info-content {
    color: var(--card-dark-text, #cccccc);
}

.strategy-card[data-card-theme="dark"] .config-info-panel .info-content p {
    color: var(--card-dark-text, #cccccc);
}

.strategy-card[data-card-theme="dark"] .config-info-panel .info-content strong {
    color: var(--card-dark-text, #ffffff);
}

.strategy-card[data-card-theme="dark"] .config-info-panel .info-content li {
    color: var(--card-dark-text, #cccccc);
}

/* Scrollbar pentru dark theme */
.strategy-card[data-card-theme="dark"] .config-info-panel .info-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.strategy-card[data-card-theme="dark"] .config-info-panel .info-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.strategy-card[data-card-theme="dark"] .config-info-panel .info-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ✅ Light Theme - Panou Informativ */
.strategy-card[data-card-theme="light"] .config-info-panel {
    border-left-color: #e2e8f0;  /* ✅ Izolat de var(--border-color) */
}

.strategy-card[data-card-theme="light"] .config-info-panel .info-title {
    color: #2563eb;  /* ✅ Păstrăm primary color explicit */
}

.strategy-card[data-card-theme="light"] .config-info-panel .info-content {
    color: var(--card-light-text, #64748b);  /* ✅ Izolat */
}

.strategy-card[data-card-theme="light"] .config-info-panel .info-content p {
    color: var(--card-light-text, #64748b);  /* ✅ Izolat */
}

.strategy-card[data-card-theme="light"] .config-info-panel .info-content strong {
    color: var(--card-light-text, #1e293b);  /* ✅ Izolat */
}

.strategy-card[data-card-theme="light"] .config-info-panel .info-content li {
    color: var(--card-light-text, #64748b);  /* ✅ Izolat */
}

/* ==================================================================
   TABEL ORDERS TEST - Aplicare contrast automat pentru Dark/Light theme
   ================================================================== */

/* ✅ Dark Theme - Tabel Orders Test */
.strategy-card[data-card-theme="dark"] .orders-test-title {
    color: var(--card-dark-text, #ffffff);
}

/* ✅ ADĂUGAT: thead background pentru dark theme */
.strategy-card[data-card-theme="dark"] .orders-table thead,
.strategy-card[data-card-theme="dark"] .orders-table-live thead,
.strategy-card[data-card-theme="dark"] .orders-table-test thead {
    background: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)), var(--card-dark-bg, #1a1a1a);
    border-bottom-color: #444444;
}

.strategy-card[data-card-theme="dark"] .orders-table th,
.strategy-card[data-card-theme="dark"] .orders-table-live th,
.strategy-card[data-card-theme="dark"] .orders-table-test th {
    color: var(--card-dark-text, #ffffff);
    background: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)), var(--card-dark-bg, #1a1a1a);
}

.strategy-card[data-card-theme="dark"] .orders-table td,
.strategy-card[data-card-theme="dark"] .orders-table-live td,
.strategy-card[data-card-theme="dark"] .orders-table-test td {
    color: var(--card-dark-text, #cccccc);
    border-bottom-color: #444444;
}

.strategy-card[data-card-theme="dark"] .orders-table tbody tr:hover,
.strategy-card[data-card-theme="dark"] .orders-table-live tbody tr:hover,
.strategy-card[data-card-theme="dark"] .orders-table-test tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ✅ ADĂUGAT: Hover pentru sortable headers - dark theme */
.strategy-card[data-card-theme="dark"] .orders-table th.sortable:hover,
.strategy-card[data-card-theme="dark"] .orders-table-live th.sortable:hover,
.strategy-card[data-card-theme="dark"] .orders-table-test th.sortable:hover {
    background: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), var(--card-dark-bg, #1a1a1a);
}

/* ✅ ADĂUGAT: Sort icon color - dark theme */
.strategy-card[data-card-theme="dark"] .orders-table th.sortable .sort-icon,
.strategy-card[data-card-theme="dark"] .orders-table-live th.sortable .sort-icon,
.strategy-card[data-card-theme="dark"] .orders-table-test th.sortable .sort-icon {
    color: var(--card-dark-text, #999999);
}

/* ✅ ADĂUGAT: Card hover thead/th - dark theme */
.strategy-card[data-card-theme="dark"]:hover .orders-table thead,
.strategy-card[data-card-theme="dark"]:hover .orders-table-live thead,
.strategy-card[data-card-theme="dark"]:hover .orders-table-test thead {
    background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)), var(--card-dark-bg, #1a1a1a);
}

.strategy-card[data-card-theme="dark"]:hover .orders-table th,
.strategy-card[data-card-theme="dark"]:hover .orders-table-live th,
.strategy-card[data-card-theme="dark"]:hover .orders-table-test th {
    background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)), var(--card-dark-bg, #1a1a1a);
}

/* ✅ ADĂUGAT: Tbody tr borders - dark theme */
.strategy-card[data-card-theme="dark"] .orders-table tbody tr,
.strategy-card[data-card-theme="dark"] .orders-table-live tbody tr,
.strategy-card[data-card-theme="dark"] .orders-table-test tbody tr {
    border-bottom-color: #444444;
}

.strategy-card[data-card-theme="dark"] .order-time {
    color: var(--card-dark-text, #999999);
}

.strategy-card[data-card-theme="dark"] .order-bot {
    color: var(--card-dark-text, #cccccc);
}

.strategy-card[data-card-theme="dark"] .order-price,
.strategy-card[data-card-theme="dark"] .order-amount,
.strategy-card[data-card-theme="dark"] .order-total,
.strategy-card[data-card-theme="dark"] .order-current-price,
.strategy-card[data-card-theme="dark"] .live-price-value,
.strategy-card[data-card-theme="dark"] .exit-value-amount {
    color: var(--card-dark-text, #ffffff);
}

/* ✅ Light Theme - Tabel Orders Test */
.strategy-card[data-card-theme="light"] .orders-test-title {
    color: var(--card-light-text, #1e293b);  /* ✅ Izolat */
}

/* ✅ ADĂUGAT: thead background pentru light theme */
.strategy-card[data-card-theme="light"] .orders-table thead,
.strategy-card[data-card-theme="light"] .orders-table-live thead,
.strategy-card[data-card-theme="light"] .orders-table-test thead {
    background: linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)), var(--card-light-bg, #ffffff);
    border-bottom-color: #e2e8f0;
}

.strategy-card[data-card-theme="light"] .orders-table th,
.strategy-card[data-card-theme="light"] .orders-table-live th,
.strategy-card[data-card-theme="light"] .orders-table-test th {
    color: var(--card-light-text, #1e293b);  /* ✅ Izolat */
    background: linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)), var(--card-light-bg, #ffffff);
}

.strategy-card[data-card-theme="light"] .orders-table td,
.strategy-card[data-card-theme="light"] .orders-table-live td,
.strategy-card[data-card-theme="light"] .orders-table-test td {
    color: var(--card-light-text, #1e293b);  /* ✅ Izolat */
}

.strategy-card[data-card-theme="light"] .order-time {
    color: var(--card-light-text, #64748b);  /* ✅ Izolat */
}

.strategy-card[data-card-theme="light"] .order-bot {
    color: var(--card-light-text, #1e293b);  /* ✅ Izolat */
}

.strategy-card[data-card-theme="light"] .order-price,
.strategy-card[data-card-theme="light"] .order-amount,
.strategy-card[data-card-theme="light"] .order-total,
.strategy-card[data-card-theme="light"] .order-current-price,
.strategy-card[data-card-theme="light"] .live-price-value,
.strategy-card[data-card-theme="light"] .exit-value-amount {
    color: var(--card-light-text, #1e293b);  /* ✅ Izolat */
}

/* ✅ ADĂUGAT: Hover pentru sortable headers - light theme */
.strategy-card[data-card-theme="light"] .orders-table th.sortable:hover,
.strategy-card[data-card-theme="light"] .orders-table-live th.sortable:hover,
.strategy-card[data-card-theme="light"] .orders-table-test th.sortable:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), var(--card-light-bg, #ffffff);
}

/* ✅ ADĂUGAT: Sort icon color - light theme */
.strategy-card[data-card-theme="light"] .orders-table th.sortable .sort-icon,
.strategy-card[data-card-theme="light"] .orders-table-live th.sortable .sort-icon,
.strategy-card[data-card-theme="light"] .orders-table-test th.sortable .sort-icon {
    color: var(--card-light-text, #64748b);
}

/* ✅ ADĂUGAT: Card hover thead/th - light theme */
.strategy-card[data-card-theme="light"]:hover .orders-table thead,
.strategy-card[data-card-theme="light"]:hover .orders-table-live thead,
.strategy-card[data-card-theme="light"]:hover .orders-table-test thead {
    background: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)), var(--card-light-bg, #ffffff);
}

.strategy-card[data-card-theme="light"]:hover .orders-table th,
.strategy-card[data-card-theme="light"]:hover .orders-table-live th,
.strategy-card[data-card-theme="light"]:hover .orders-table-test th {
    background: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)), var(--card-light-bg, #ffffff);
}

/* ✅ ADĂUGAT: Tbody tr borders - light theme */
.strategy-card[data-card-theme="light"] .orders-table tbody tr,
.strategy-card[data-card-theme="light"] .orders-table-live tbody tr,
.strategy-card[data-card-theme="light"] .orders-table-test tbody tr {
    border-bottom-color: #e2e8f0;
}

/* ✅ ADĂUGAT: Izolare pentru orders-test count și separator */
.strategy-card[data-card-theme="dark"] .orders-test-count,
.strategy-card[data-card-theme="dark"] .filter-separator {
    color: var(--card-dark-text, #999999);
}

.strategy-card[data-card-theme="light"] .orders-test-count,
.strategy-card[data-card-theme="light"] .filter-separator {
    color: var(--card-light-text, #64748b);
}

/* ==================================================================
   TESTING FORM - Aplicare contrast automat pentru Dark/Light theme
   ================================================================== */

/* ✅ Dark Theme - Testing Form */
.strategy-card[data-card-theme="dark"] .form-label-test {
    color: var(--card-dark-text, #cccccc);
}

.strategy-card[data-card-theme="dark"] .form-static-value {
    background: rgba(255, 255, 255, 0.05);
    color: var(--card-dark-text, #ffffff);
}

.strategy-card[data-card-theme="dark"] .form-select-test,
.strategy-card[data-card-theme="dark"] .form-input-test {
    background: rgba(255, 255, 255, 0.05);
    border-color: #444444;
    color: var(--card-dark-text, #ffffff);
}

.strategy-card[data-card-theme="dark"] .form-select-test:hover,
.strategy-card[data-card-theme="dark"] .form-input-test:hover {
    border-color: #666666;
}

.strategy-card[data-card-theme="dark"] .form-separator {
    background: #444444;
}

.strategy-card[data-card-theme="dark"] .config-subtitle {
    color: var(--card-dark-text, #ffffff);
    border-bottom-color: #444444;
}

.strategy-card[data-card-theme="dark"] .testing-controls {
    border-top-color: #444444;
}

/* ✅ Light Theme - Testing Form */
.strategy-card[data-card-theme="light"] .form-label-test {
    color: var(--card-light-text, #64748b);
}

.strategy-card[data-card-theme="light"] .form-static-value {
    background: rgba(0, 0, 0, 0.02);
    color: var(--card-light-text, #1e293b);
}

.strategy-card[data-card-theme="light"] .form-select-test,
.strategy-card[data-card-theme="light"] .form-input-test {
    background: rgba(0, 0, 0, 0.02);
    border-color: #e2e8f0;
    color: var(--card-light-text, #1e293b);
}

.strategy-card[data-card-theme="light"] .form-select-test:hover,
.strategy-card[data-card-theme="light"] .form-input-test:hover {
    border-color: #cbd5e1;
}

.strategy-card[data-card-theme="light"] .form-separator {
    background: #e2e8f0;
}

.strategy-card[data-card-theme="light"] .config-subtitle {
    color: var(--card-light-text, #1e293b);
    border-bottom-color: #e2e8f0;
}

.strategy-card[data-card-theme="light"] .testing-controls {
    border-top-color: #e2e8f0;
}

/* ==================================================================
   NOTES TEXTAREA - Aplicare contrast automat pentru Dark/Light theme
   ================================================================== */

/* ✅ Dark Theme - Notes */
.strategy-card[data-card-theme="dark"] .notes-counter {
    color: var(--card-dark-text, #999999);
}

.strategy-card[data-card-theme="dark"] .strategy-notes-textarea {
    color: var(--card-dark-text, #ffffff);
    background: rgba(255, 255, 255, 0.05);
    border-color: #444444;
}

.strategy-card[data-card-theme="dark"] .strategy-notes-textarea:focus {
    border-color: #667eea;
}

.strategy-card[data-card-theme="dark"] .strategy-notes-textarea::placeholder {
    color: var(--card-dark-text, #999999);
}

/* ✅ Light Theme - Notes */
.strategy-card[data-card-theme="light"] .notes-counter {
    color: var(--card-light-text, #64748b);
}

.strategy-card[data-card-theme="light"] .strategy-notes-textarea {
    color: var(--card-light-text, #1e293b);
    background: rgba(0, 0, 0, 0.02);
    border-color: #e2e8f0;
}

.strategy-card[data-card-theme="light"] .strategy-notes-textarea:focus {
    border-color: #667eea;
}

.strategy-card[data-card-theme="light"] .strategy-notes-textarea::placeholder {
    color: var(--card-light-text, #64748b);
}

/* ==================================================================
   CHART TOOLTIPS - Aplicare contrast automat pentru Dark/Light theme
   ================================================================== */

/* ✅ Dark Theme Card - Tooltips Chart (override tema globală) */
.strategy-card[data-card-theme="dark"] .theme-btn[data-tooltip]::after,
.strategy-card[data-card-theme="dark"] .font-size-toggle-btn[data-tooltip]::after,
.strategy-card[data-card-theme="dark"] .chart-bot-toggle-btn[data-tooltip]::after,
.strategy-card[data-card-theme="dark"] .chart-profit-toggle-btn[data-tooltip]::after,
.strategy-card[data-card-theme="dark"] .chart-breakeven-toggle-btn[data-tooltip]::after,
.strategy-card[data-card-theme="dark"] .chart-gridnum-toggle-btn[data-tooltip]::after,
.strategy-card[data-card-theme="dark"] .chart-timer-toggle-btn[data-tooltip]::after,
.strategy-card[data-card-theme="dark"] .arrow-btn[data-tooltip]::after {
    background: #FFFFC5 !important;  /* Galben deschis pentru dark theme card */
    color: #22577A !important;       /* Albastru-cyan pentru dark theme card */
    box-shadow: 0 4px 12px rgba(255, 255, 197, 0.4), 0 0 0 1px rgba(255, 255, 197, 0.3) !important;
}

/* Săgeată pentru Dark Theme Card */
.strategy-card[data-card-theme="dark"] .theme-btn[data-tooltip]::before,
.strategy-card[data-card-theme="dark"] .font-size-toggle-btn[data-tooltip]::before,
.strategy-card[data-card-theme="dark"] .chart-bot-toggle-btn[data-tooltip]::before,
.strategy-card[data-card-theme="dark"] .chart-profit-toggle-btn[data-tooltip]::before,
.strategy-card[data-card-theme="dark"] .chart-breakeven-toggle-btn[data-tooltip]::before,
.strategy-card[data-card-theme="dark"] .chart-gridnum-toggle-btn[data-tooltip]::before,
.strategy-card[data-card-theme="dark"] .chart-timer-toggle-btn[data-tooltip]::before,
.strategy-card[data-card-theme="dark"] .arrow-btn[data-tooltip]::before {
    border-top-color: #FFFFC5 !important;
}

/* ✅ Light Theme Card - Tooltips Chart (override tema globală) */
.strategy-card[data-card-theme="light"] .theme-btn[data-tooltip]::after,
.strategy-card[data-card-theme="light"] .font-size-toggle-btn[data-tooltip]::after,
.strategy-card[data-card-theme="light"] .chart-bot-toggle-btn[data-tooltip]::after,
.strategy-card[data-card-theme="light"] .chart-profit-toggle-btn[data-tooltip]::after,
.strategy-card[data-card-theme="light"] .chart-breakeven-toggle-btn[data-tooltip]::after,
.strategy-card[data-card-theme="light"] .chart-gridnum-toggle-btn[data-tooltip]::after,
.strategy-card[data-card-theme="light"] .chart-timer-toggle-btn[data-tooltip]::after,
.strategy-card[data-card-theme="light"] .arrow-btn[data-tooltip]::after {
    background: #22577A !important;  /* Albastru-cyan pentru light theme card */
    color: #FFFFC5 !important;       /* Galben deschis pentru light theme card */
    box-shadow: 0 4px 12px rgba(34, 87, 122, 0.4), 0 0 0 1px rgba(34, 87, 122, 0.3) !important;
}

/* Săgeată pentru Light Theme Card */
.strategy-card[data-card-theme="light"] .theme-btn[data-tooltip]::before,
.strategy-card[data-card-theme="light"] .font-size-toggle-btn[data-tooltip]::before,
.strategy-card[data-card-theme="light"] .chart-bot-toggle-btn[data-tooltip]::before,
.strategy-card[data-card-theme="light"] .chart-profit-toggle-btn[data-tooltip]::before,
.strategy-card[data-card-theme="light"] .chart-breakeven-toggle-btn[data-tooltip]::before,
.strategy-card[data-card-theme="light"] .chart-gridnum-toggle-btn[data-tooltip]::before,
.strategy-card[data-card-theme="light"] .chart-timer-toggle-btn[data-tooltip]::before,
.strategy-card[data-card-theme="light"] .arrow-btn[data-tooltip]::before {
    border-top-color: #22577A !important;
}

/* ===== M4 (05 Iun 2026): Hint recomandare maxOrders Futures GridRider (popover la focus) ===== */
/* Grupul care contine hint-ul devine ancora pentru pozitionarea absoluta */
.form-group-test:has(.maxorders-hint) {
    position: relative;
}
.maxorders-hint {
    display: none;            /* afisat dinamic prin JS doar la focus pe input */
    position: absolute;       /* popover — nu impinge layout-ul, nu ingusteaza inputul */
    z-index: 50;
    top: 100%;
    left: 0;
    width: 230px;
    max-width: 92vw;
    margin-top: 4px;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 0.62rem;       /* scris mai mic */
    line-height: 1.32;
    background: #fdf6d8;       /* galben pal OPAC — nu se vede nimic prin el */
    border: 1px solid #facc15;
    color: #3a3320;           /* text inchis pentru contrast pe fundal galben */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.maxorders-hint--warning {
    background: #fde68a;       /* galben mai intens OPAC */
    border-color: #f59e0b;
    color: #4a3410;
}
.maxorders-hint__text strong {
    color: inherit;
    font-weight: 700;
}
.maxorders-hint__btn {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    font-size: 0.62rem;
    font-weight: 600;
    color: #1a1a1a;
    background: #facc15;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.maxorders-hint__btn:hover {
    opacity: 0.85;
}

/* ===== order_category (05 Iun 2026): badge categorie ordin (A/B/progresiv/recovery) + tenta rand ===== */
.cat-badge {
    display: block;            /* pe linie noua, sub badge-ul LONG/SHORT */
    width: fit-content;
    margin: 3px auto 0;        /* centrat orizontal fata de LONG/SHORT de deasupra */
    padding: 1px 7px;
    font-size: 0.48rem;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 4px;
    letter-spacing: 0.3px;
    color: #ffffff;
}
/* Fundal la ~40% intensitate (rgba alpha 0.4), text alb */
.cat-badge--a { background: rgba(100, 116, 139, 0.4); }   /* A — gri */
.cat-badge--b { background: rgba(71, 85, 105, 0.4); }     /* B — gri inchis */
.cat-badge--progressive { background: rgba(37, 99, 235, 0.4); }  /* progresiv — albastru */
.cat-badge--recovery { background: rgba(234, 88, 12, 0.4); }     /* recovery — portocaliu */

/* Tenta subtila pe randurile recovery — ies in evidenta la scanare rapida */
.order-row.cat-recovery {
    background: rgba(234, 88, 12, 0.07);
}
.order-row.cat-recovery:hover {
    background: rgba(234, 88, 12, 0.13);
}