/* ============================================
   MODUL TRADING - Stiluri
   Container principal cu 5 zone pentru trading real MEXC
   Layout resizable cu Split.js
   ============================================ */

/* ============================================
   CUSTOM THEME - Persistență la re-render
   Folosește CSS variables pentru a menține culorile
   ============================================ */

.trading-container.custom-theme-active {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    /* ✅ FIX (23 Mai 2026): Redefinim --text-primary local ca sa fie egal cu --trading-text
       Motivul: 20+ elemente din trading.css folosesc var(--text-primary) care e controlata
       de body.dark-theme din main.css. Prin redefinire locala, izolam Trading complet
       de cascada globala — fara sa modificam fiecare linie individual */
    --text-primary: var(--trading-text);
    --text-secondary: var(--trading-text);
    --text-muted: var(--trading-text);
}

/* Aplică pe toate zonele principale */
.trading-container.custom-theme-active .zone-bots,
.trading-container.custom-theme-active .zone-stats,
.trading-container.custom-theme-active .zone-chart,
.trading-container.custom-theme-active .zone-table {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
}

/* Aplică pe toate header-urile zonelor */
.trading-container.custom-theme-active .zone-title-wrapper {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-bottom-color: var(--trading-border) !important;
}

/* Aplică pe bots-filters */
.trading-container.custom-theme-active .bots-filters {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
}

/* Aplică pe filter buttons */
.trading-container.custom-theme-active .bots-filters .filter-btn,
.trading-container.custom-theme-active .bots-filters button {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-color: var(--trading-border) !important;
}

/* Aplică pe search-box */
.trading-container.custom-theme-active .search-box,
.trading-container.custom-theme-active .search-box input {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-color: var(--trading-border) !important;
}

/* Aplică pe bots-list și bot-cards */
.trading-container.custom-theme-active .bots-list {
    background-color: var(--trading-bg) !important;
}

.trading-container.custom-theme-active .bot-card {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-color: var(--trading-border) !important;
}

/* Aplică pe orders-filters */
.trading-container.custom-theme-active .orders-filters {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
}

.trading-container.custom-theme-active .orders-filters button {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-color: var(--trading-border) !important;
}

/* Aplică pe orders-table */
.trading-container.custom-theme-active .orders-table {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
}

.trading-container.custom-theme-active .orders-table thead,
.trading-container.custom-theme-active .orders-table tbody {
    background-color: var(--trading-bg) !important;
}

.trading-container.custom-theme-active .orders-table tr {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-color: var(--trading-border) !important;
}

.trading-container.custom-theme-active .orders-table td,
.trading-container.custom-theme-active .orders-table th {
    color: var(--trading-text) !important;
    border-color: var(--trading-border) !important;
}

.trading-container.custom-theme-active .orders-table button {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-color: var(--trading-border) !important;
}

/* Aplica pe trading-card (Ordine & Pozitii MEXC) */
.trading-container.custom-theme-active .trading-card {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-color: var(--trading-border) !important;
}

.trading-container.custom-theme-active .trading-card-header {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-bottom-color: var(--trading-border) !important;
}

.trading-container.custom-theme-active .trading-card-header h3 {
    color: var(--trading-text) !important;
}

.trading-container.custom-theme-active .tc-last-update {
    color: var(--trading-text) !important;
    opacity: 0.6;
}

/* Tab-uri tc-tab */
.trading-container.custom-theme-active .tc-tabs {
    background-color: var(--trading-bg) !important;
    border-bottom-color: var(--trading-border) !important;
}

.trading-container.custom-theme-active .tc-tab {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-color: var(--trading-border) !important;
}

.trading-container.custom-theme-active .tc-tab.active {
    color: var(--trading-text) !important;
    border-bottom-color: var(--trading-text) !important;
    font-weight: 600 !important;
}

/* Tabel tc-table */
.trading-container.custom-theme-active .tc-table {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
}

.trading-container.custom-theme-active .tc-table thead,
.trading-container.custom-theme-active .tc-table thead tr,
.trading-container.custom-theme-active .tc-table thead th {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-color: var(--trading-border) !important;
}

.trading-container.custom-theme-active .tc-table tbody tr {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-bottom-color: var(--trading-border) !important;
}

.trading-container.custom-theme-active .tc-table tbody td {
    color: var(--trading-text) !important;
    border-color: var(--trading-border) !important;
}

/* Mesaje empty/loading */
.trading-container.custom-theme-active .tc-empty,
.trading-container.custom-theme-active .tc-loading {
    color: var(--trading-text) !important;
    opacity: 0.6;
}

/* Buton collapse */
.trading-container.custom-theme-active .tc-collapse-btn {
    background-color: var(--trading-bg) !important;
    color: var(--trading-text) !important;
    border-color: var(--trading-border) !important;
}

/* Container principal Trading */
.trading-container {
    /* Bordura vizibila pentru dezvoltare */
    border: 1px solid var(--primary-color);
    
    /* Bordura rotunjita */
    border-radius: 8px;
    
    /* Spatiu interior */
    padding: 0.2rem;
    
    /* Inaltime minima */
    min-height: 735px;
    
    /* Background subtil */
    background: var(--card-bg);
    
    /* Umbra pentru adancime */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Split main container */
.split-main {
    /* Display flex pentru layout principal */
    display: flex;
    
    /* Flex direction orizontal */
    flex-direction: row;
    
    /* ✅ Inaltime flexibilă - ia din părinte (trading-container) */
    /*height: 100%;*/
    min-height: 700px;  /* Minim 700px pentru corelație cu secțiunile */
    
    /* Gap intre left și right - ZERO (lipite) */
    gap: 0;
    
    /* Box sizing */
    box-sizing: border-box;
}

/* Sectiunea stanga - FLEX (ia tot spațiul rămas) */
.left-section {
    /* Display flex pentru zone verticale */
    display: flex;
    
    /* Directie verticala */
    flex-direction: column;
    
    /* FLEX: ia tot spațiul disponibil (după right-section) */
    flex: 1;
    min-width: 400px;  /* Minim pentru chart/table */
    height: 725px;     /* ✅ ÎNĂLȚIME FIXĂ pentru Split.js (735px - 10px) */
    max-height: 725px; /* ✅ NU depășește această înălțime */
    
    /* Gap intre zone - ZERO pentru split.js */
    gap: 0;
    
    /* Box sizing */
    box-sizing: border-box;
}

/* Sectiunea dreapta - LAYOUT FIX (fără split) */
.right-section {
    /* Display flex pentru aranjare orizontală */
    display: flex;
    flex-direction: row;
    
    /* Width DINAMIC: 280px (1 zonă) sau 560px (2 zone) */
    /* Se calculează automat în funcție de zone vizibile */
    flex-shrink: 0;  /* NU se comprimă niciodată */
    height: 725px;     /* ✅ ÎNĂLȚIME FIXĂ (735px - 10px) */
    max-height: 725px; /* ✅ NU depășește această înălțime */
    
    /* Gap 0 - zone lipite */
    gap: 0;
    
    /* Box sizing */
    box-sizing: border-box;
    
    /* Tranziție smooth pentru width change */
    transition: width 0.3s ease;
}

/* Zone-bots - 280px FIXED (full width right-section) */
.zone-bots {
    display: flex;
    flex-direction: column;
    width: 280px;           /* FIXED width */
    min-width: 280px;       /* Nu se micșorează */
    max-width: 280px;       /* Nu se mărește */
    height: 100%;           /* ✅ Extinde pe toată înălțimea */
    flex-shrink: 0;         /* NU se comprimă */
    box-sizing: border-box;
}

/* ✅ Zone din left-section - NU folosim flex: 1 pentru că Split.js gestionează înălțimile! */
/* Split.js are nevoie de control complet asupra height-urilor pentru resize */

/* Media query pentru ecrane mici */
@media (max-width: 900px) {
    .zone-bots {
        width: 255px;
        min-width: 255px;
        max-width: 255px;
    }
}

/* Stiluri comune pentru toate zonele */
.zone-stats,
.zone-chart,
.zone-table,
.zone-bots {
    /* Background zona */
    background: var(--card-bg);
    
    /* Bordura zona */
    /*border: 1px solid var(--border-color);*/
    border: 1px solid var(--trading-text) !important;
    
    /* Colturi rotunjite */
    border-radius: 4px;
    
    /* Spatiu interior */
    padding: 0.45rem;
    
    /* Split.js seteaza height prin inline style — overflow necesar */
    overflow: auto;
    
    /* BOX SIZING pentru dimensiuni corecte */
    box-sizing: border-box;
    
    /* Tranziție smooth pentru show/hide */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ✅ Gutter-ul din left-section trebuie sa fie vizibil si clickabil */
.left-section > .gutter.gutter-vertical {
    /* Latime completa pe orizontala */
    width: 100%;
    /* Inaltime zona de prindere */
    height: 4px !important;
    /* Cursor corect */
    cursor: row-resize !important;
    /* Pointer events explicit */
    pointer-events: auto !important;
    /* Flex shrink 0 — nu se comprima */
    flex-shrink: 0;
    /* Z-index deasupra continutului */
    z-index: 20;
    /* Background subtil permanent — mereu vizibil */
    background-color: rgba(128, 128, 128, 0.15);
    transition: background-color 0.15s ease;
}

.left-section > .gutter.gutter-vertical:hover {
    background-color: var(--primary-color, #4CAF50) !important;
    opacity: 0.5;
}

.left-section > .gutter.gutter-vertical:active {
    background-color: var(--primary-color, #4CAF50) !important;
    opacity: 0.8;
}

/* ✅ Special: zone-stats fără padding (pentru stats-container) */
.zone-stats {
    padding: 0;
    overflow: hidden;  /* Container-ul gestionează scroll-ul */
}

/* ✅ zone-title pentru stats (cu padding redus) */
.zone-stats .zone-title {
    padding: 0.2rem 0.75rem;  /* ✅ Redus de la 0.75rem */
    margin: 0;
    font-size: 0.9rem;  /* ✅ Mai mic */
}

/* Titluri zone */
.zone-title {
    /* Layout pentru text + buton */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Font size */
    font-size: 0.875rem;
    
    /* Font weight bold */
    font-weight: 600;
    
    /* Culoare text - folosește variabila custom când e activă! */
    color: var(--text-secondary);
}

/* ✅ Zone title cu custom theme active - folosește culoarea noastră! */
.trading-container.custom-theme-active .zone-title {
    color: var(--trading-text) !important;
}

.zone-title {
    /* Text uppercase - REMOVED */
    /* text-transform: uppercase; */
    
    /* Letter spacing */
    letter-spacing: 0.05em;
    
    /* Margin bottom - REDUCED */
    margin-bottom: 0.1rem;
    
    /* Padding bottom */
    /*padding-bottom: 0.5rem;*/
    
    /* Bordura bottom */
    /*border-bottom: 1px solid var(--border-color);*/
}

/* Title content (text + count) */
.zone-title .title-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.zone-title .title-text {
    font-weight: 600;
}

.zone-title .orders-count {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
}

/* ============================================
   ZONE STATS - Bot Configuration
   Compact display pentru toate informațiile din config
   ============================================ */

.stats-container {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 0.8125rem;  /* ✅ Mai mic */
    overflow-y: auto;
    height: calc(100% - 2.5rem);  /* ✅ Mai mult spațiu pentru content */
}

/* ✅ Scrollbar styling pentru stats-container */
.stats-container::-webkit-scrollbar {
    width: 6px;
}

.stats-container::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.stats-container::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 3px;
}

.stats-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Status Header */
.stats-row.stats-header {
    padding: 0.15rem 0.5rem;  /* ✅ Redus padding */
    background: var(--bg-secondary);
    border-radius: 0;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    overflow: visible;  /* ✅ NU auto/scroll */
    flex-shrink: 0;  /* ✅ Nu se comprimă */
}

.stats-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stats-status.running {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.stats-status.stopped {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Stats Group */
.stats-group {
    border-bottom: 1px solid var(--border-color);
    overflow: visible;  /* ✅ NU hidden/auto */
    display: flex;  /* ✅ Flex pentru horizontal layout */
    flex-direction: row;  /* ✅ Title + Content pe aceeași linie */
}

.stats-group:last-child {
    border-bottom: none;
}

/* ✅ NOU: Stats Group Grid (pentru afișare pe 2-3 coloane) */
.stats-group-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  /* ✅ Redus de la 150px */
    gap: 0;
    flex: 1;  /* ✅ Ocupă tot spațiul rămas */
}

/* ✅ NOU: Stats Grid Wrapper (fără title, doar grid) */
.stats-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--border-color);
}

.stats-grid-wrapper:last-child {
    border-bottom: none;
}

/* ✅ NOU (08 Feb 2026): Font-size specific pentru grid wrapper (mai mic pentru grid compact) */
.stats-grid-wrapper .stats-label {
    font-size: clamp(0.45rem, 0.9vw, 0.55rem);  /* Mai mic decât default pentru grid compact */
}

.stats-grid-wrapper .stats-value {
    font-size: clamp(0.45rem, 0.9vw, 0.55rem);  /* Mai mic decât default pentru grid compact */
}

.stats-group-title {
    padding: 0.15rem 0.35rem;  /* ✅ Padding normal pentru text horizontal */
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: clamp(0.6rem, 1.2vw, 0.8rem);  /* ✅ Fluid responsive pentru titluri */
    /*font-size: clamp(0.4rem, 1.2vw, 0.5rem);  /* ✅ Fluid responsive pentru titluri */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-right: 1px solid var(--border-color);  /* ✅ Border dreapta în loc de bottom */
    white-space: nowrap;
    display: flex;
    align-items: center;
    min-width: fit-content;  /* ✅ Lățime automată */
    flex-shrink: 0;  /* ✅ Nu se comprimă */
}

/* Stats Row - DEFAULT: Vertical (Label sus, Value jos) */
.stats-row {
    display: flex;
    flex-direction: column;  /* ✅ Vertical (default) */
    justify-content: center;
    align-items: center;
    padding: 0.25rem 0.5rem;
    gap: 0.15rem;  /* ✅ Gap redus pentru vertical */
    overflow: visible;
}

/* ✅ Stats Row HORIZONTAL (pentru Bot Info) */
.stats-horizontal .stats-row {
    flex-direction: row;  /* ✅ Horizontal override */
    justify-content: center;  /* ✅ Centrat la mijloc */
    align-items: center;
    gap: 0.3rem;  /* ✅ Gap mai mare pentru horizontal */
}

.stats-row:last-child {
    border-right: none;
}

/* ✅ Remove border-bottom pentru ultimul rând din grid */
.stats-group-content > .stats-row:nth-last-child(-n+2) {
    border-bottom: none;
}

/* Stats Label - DEFAULT: Centrat pentru vertical */
.stats-label {
    color: var(--text-secondary);
    font-size: clamp(0.45rem, 1vw, 0.7rem);  /* ✅ Fluid responsive: 0.55rem (min) → 0.75rem (max) */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    text-align: center;  /* ✅ Centrat (default vertical) */
}

/* ✅ Stats Label HORIZONTAL (pentru Bot Info) */
.stats-horizontal .stats-label {
    text-align: left;  /* ✅ Stânga pentru horizontal */
    white-space: nowrap;
}

/* Stats Value - DEFAULT: Centrat pentru vertical */
.stats-value {
    font-weight: 600;
    font-size: clamp(0.55rem, 1vw, 0.75rem);  /* ✅ Fluid responsive: 0.55rem (min) → 0.75rem (max) */
    text-align: center;  /* ✅ Centrat (default vertical) */
    word-break: break-word;
}

/* ✅ Stats Value HORIZONTAL (pentru Bot Info) */
.stats-horizontal .stats-value {
    text-align: left;  /* ✅ Stânga pentru horizontal */
    flex: 1;
}

/* Special Values */
.stats-value.symbol-value {
    color: var(--primary-color);
    font-weight: 600;
}

.stats-value.amount-value {
    color: #22c55e;
    font-weight: 600;
}

.stats-value.fee-value {
    /*font-family: monospace;*/
    font-size: clamp(0.5rem, 1vw, 0.55rem);  /* ✅ Fluid responsive */
}

/* Investiție inițială styling */
.investment-value {
    font-size: clamp(0.6rem, 1.5vw, 0.8rem);  /* ✅ Fluid responsive pentru valori mari */
    font-weight: 700;
    color: #2196F3;
}

.investment-details {
    font-size: clamp(0.5rem, 1.1vw, 0.6rem);  /* ✅ Fluid responsive pentru detalii */
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.investment-error {
    color: #f44336;
    font-size: clamp(0.6rem, 1.3vw, 0.8rem);  /* ✅ Fluid responsive */
}

.stats-value.calculating {
    color: var(--text-secondary);
    font-style: italic;
    font-size: clamp(0.6rem, 1.3vw, 0.8rem);  /* ✅ Fluid responsive */
}

/* Layout 2 coloane pentru Investiție + Tranzacții */
.stats-row.stats-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Layout 3 coloane pentru Investiție + Capital + Comisioane */
.stats-row.stats-three-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

/* Layout 5 coloane pentru Investiție + Capital + Comisioane + Profit NET + Capital Total */
.stats-row.stats-five-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem; /* Gap mai mic pentru 5 coloane */
}

.stats-row.stats-two-columns .stats-col,
.stats-row.stats-three-columns .stats-col,
.stats-row.stats-five-columns .stats-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stats-row.stats-two-columns .stats-label,
.stats-row.stats-three-columns .stats-label,
.stats-row.stats-five-columns .stats-label {
    width: 100%;
    /*font-size: 0.75rem; /* Slightly smaller pentru 5 coloane */
}

.stats-row.stats-two-columns .stats-value,
.stats-row.stats-three-columns .stats-value,
.stats-row.stats-five-columns .stats-value {
    width: 100%;
}

/* Tranzacții active / Capital blocat styling */
.transactions-value {
    font-size: clamp(0.6rem, 1.5vw, 0.8rem);  /* ✅ Fluid responsive */
    font-weight: 700;
    color: #FF9800;  /* Orange pentru capital blocat (nici investit complet, nici liber) */
}

.transactions-details {
    font-size: clamp(0.5rem, 1.1vw, 0.65rem);  /* ✅ Fluid responsive */
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

/* Comisioane totale styling */
.fees-value {
    font-size: clamp(0.6rem, 1.5vw, 0.8rem);  /* ✅ Fluid responsive */
    font-weight: 700;
    color: #F44336;  /* Roșu pentru comisioane (cost/pierdere) */
}

.fees-details {
    font-size: clamp(0.5rem, 1.1vw, 0.65rem);  /* ✅ Fluid responsive */
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

/* Profit NET styling */
.profit-value {
    font-size: clamp(0.6rem, 1.5vw, 0.8rem);  /* ✅ Fluid responsive */
    font-weight: 700;
    /* Color dinamic: verde (#4CAF50) pentru profit pozitiv, roșu (#f44336) pentru negativ */
}

.profit-details {
    font-size: clamp(0.5rem, 1.1vw, 0.65em);  /* ✅ Fluid responsive */
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

/* Capital Total styling */
.capital-value {
    font-size: clamp(0.6rem, 1.5vw, 0.8rem);  /* ✅ Fluid responsive */
    font-weight: 700;
    /* Color dinamic: verde pentru profit, roșu pentru pierdere */
}

.capital-details {
    font-size: clamp(0.5rem, 1.1vw, 0.65em);  /* ✅ Fluid responsive */
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

/* Notes */
.stats-notes {
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 0.25rem;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);  /* ✅ Fluid responsive */
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Placeholder text in zone */
.zone-stats p,
.zone-chart p,
.zone-table p,
.zone-bots p {
    /* Culoare text */
    color: var(--text-secondary);
    
    /* Text centrat */
    text-align: center;
    
    /* Padding */
    padding: 2rem 1rem;
    
    /* Font size */
    font-size: 0.9rem;
}

/* Previne selectia textului in timpul drag */
.dragging,
.dragging * {
    /* User select none */
    user-select: none !important;
    
    /* Webkit browsers */
    -webkit-user-select: none !important;
    
    /* Mozilla browsers */
    -moz-user-select: none !important;
    
    /* MS browsers */
    -ms-user-select: none !important;
}

/* Split.js gutter (bordura draggable) */
.gutter {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
    flex-shrink: 0;
    z-index: 10;
    transition: background-color 0.15s ease;
    /* Asigura ca gutterul primeste evenimente mouse */
    pointer-events: auto;
    position: relative;
}

/* Gutter orizontal (stanga-dreapta) */
.gutter.gutter-horizontal {
    cursor: col-resize;
    width: 6px;
    padding: 0 2px;
}

/* Gutter vertical (sus-jos) */
.gutter.gutter-vertical {
    cursor: row-resize;
    /* Inaltime marita pentru zona de prindere mai usoara */
    height: 8px;
    padding: 2px 0;
}

/* Hover state — linie vizibila subtila ca feedback vizual */
.gutter:hover {
    background-color: var(--primary-color, #4CAF50);
    opacity: 0.4;
}

/* Active state (drag in curs) — mai vizibil */
.gutter:active {
    background-color: var(--primary-color, #4CAF50);
    opacity: 0.7;
}

/* Chart container specific */
#trading-chart-container {
    /* Inaltime pentru chart */
    height: calc(100% - 1rem);
    
    /* Width full */
    width: 100%;
}

/* ============================================
   BOTS LIST - Zona Bots (zona-bots)
   ============================================ */

/* Bots count badge */
.bots-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: normal;
    margin-left: 0.5rem;
}

/* Filters & Search Container */
.bots-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;              /* Reduced from 0.75rem (-33%) */
    margin-bottom: 0.7rem;    /* Reduced from 1rem (-30%) */
    padding-bottom: 0.5rem;   /* Reduced from 0.75rem (-33%) */
    border-bottom: 1px solid var(--border-color);
}

/* Filter Row (Market / Status) */
.filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;              /* Reduced from 0.75rem (-33%) */
}

.filter-label {
    font-size: 0.75rem;       /* Reduced from 0.875rem (-14%) */
    font-weight: 600;
    color: var(--trading-text);
    opacity: 0.7;  /* ✅ 90% opacitate la hover (ușoară transparență) */
    /*color: var(--text-secondary);/*
    min-width: 50px;          /* Reduced from 60px (-17%) */
}

/* Filter Buttons */
.filter-buttons {
    display: flex;
    gap: 0.15rem;             /* FURTHER REDUCED to 0.15rem */
    flex: 1;
}

.filter-btn {
    flex: 1;
    padding: 0.35rem 0.35rem; /* ADJUSTED to 0.35rem 0.35rem */
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.75rem;       /* Reduced from 0.875rem (-14%) */
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 1.0;  /* ✅ 100% opacitate când sunt inactive (complet opac) */
}

.filter-btn:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
    opacity: 0.9;  /* ✅ 90% opacitate la hover (ușoară transparență) */
}

.filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    opacity: 0.7;  /* ✅ 70% opacitate când sunt active (foarte transparent pentru efect foarte subtil) */
}

/* ✅ OVERRIDE: Buton activ ÎNTOTDEAUNA albastru + alb (chiar și cu custom theme!) */
.trading-container.custom-theme-active .bots-filters .filter-btn.active {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    opacity: 0.6 !important;  /* ✅ Opacitate 70% pentru efect subtil */
}

/* Special styling pentru butoane SPOT/FUTURES */
.filter-btn-spot.active {
    background: #10b981;
    border-color: #10b981;
}

.filter-btn-futures.active {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Search Box */
.search-box input {
    width: 100%;
    padding: 0.35rem 0.5rem;  /* Reduced from 0.5rem (-30%) */
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.75rem;       /* Reduced from 0.875rem (-14%) */
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Bots List Container */
.bots-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Bot Card */
.bot-card {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: visible; /* Allow dropdown to overflow */
    max-height: 500px; /* Înălțime mare pentru expanded */
    min-width: 255px; /* Lățime minimă fixă */
}

/* Bot card collapsed (doar header vizibil) */
.bot-card.collapsed {
    max-height: 90px; /* Doar header vizibil */
}

.bot-card.collapsed .bot-card-body,
.bot-card.collapsed .bot-card-footer,
.bot-card.collapsed .bot-publish-toggle {
    display: none;
}

.bot-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.bot-card.selected {
    border-color: var(--primary-color);
    border-width: 2px;
    background: var(--hover-bg);
}

.bot-card.running {
    border-left: 4px solid #10b981;  /* Green pentru running */
}

.bot-card.stopped {
    border-left: 4px solid #6b7280;  /* Gray pentru stopped */
}

/* Bot Card Header */
.bot-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

/* ✅ Wrapper pentru icon + badge BOT_X (stivuite vertical) */
.bot-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* REMOVED: .bot-icon background - acum folosim SVG din svg-icons.css */
/* .bot-icon e definit în svg-icons.css cu background-image SVG */
.bot-card-header .bot-icon {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0;
    /* Background-image vine din svg-icons.css */
    transition: all 0.3s ease;
}

/* Icon coordonat cu status - STOPPED (gri) */
.bot-card.stopped .bot-icon {
    filter: grayscale(100%) brightness(0.8);
    opacity: 0.6;
}

/* Icon coordonat cu status - TEST RUNNING (galben) */
.bot-card.running .bot-icon.test {
    filter: sepia(100%) saturate(300%) brightness(0.9) hue-rotate(5deg);
}

/* Icon coordonat cu status - LIVE RUNNING (roșu) */
.bot-card.running .bot-icon.live {
    filter: sepia(100%) saturate(500%) brightness(0.9) hue-rotate(-10deg);
    animation: pulse-icon 2s ease-in-out infinite;
}

/* Icon albastru când cardul este SELECTED (indiferent de status) */
.bot-card.selected .bot-icon {
    filter: sepia(100%) saturate(300%) brightness(1.1) hue-rotate(180deg) !important;
    /* Hue-rotate 180deg transformă culorile către albastru */
    opacity: 0.9 !important;
    /* Ușoară transparență pentru efect sofisticat */
    box-shadow: inset 0px 0px 10px 7px rgba(59, 130, 246, 0.6), 
                0px 0px 12px 4px rgba(59, 130, 246, 0.3) !important;
    /* Inset glow (interior) + outer glow (exterior) pentru efect 3D */
}

/* Bot-name albastru cand cardul este SELECTED — fara modificare font-size (evita wrap pe 2 linii) */
.bot-card.selected .bot-name {
    color: var(--accent) !important;
    /* font-size intentionat eliminat — marimea textului identica cu starea normala */
}

@keyframes pulse-icon {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.85; }
}

.bot-icon svg {
    width: 20px;
    height: 20px;
}

/* Container pentru info + status (stivuite vertical) */
.bot-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0; /* permite text overflow */
}

.bot-header-status {
    /* Status jos - aliniat la stânga */
    /* ✅ FIX (25 Mai 2026): flex-wrap nowrap pentru ca status-badge stopped si published-badge sa ramana pe aceeasi linie */
    /* INAINTE: flex-wrap: wrap — badge-urile se rupeau pe linii diferite cand cardul era ingust */
    /* ACUM: flex-wrap: nowrap — badge-urile raman mereu pe aceeasi linie */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.3rem;
}

.bot-name-wrapper {
    display: flex;
    align-items: center;
}

.bot-name {
    font-size: 0.7rem;  /* Mai mic pentru state normal */
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.05rem;
    transition: font-size 0.2s ease, color 0.2s ease;  /* Smooth transition */
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    padding: 1px 3px;
}

/* ✏️ Pencil icon — vizibil doar la hover pe bot-name */
.btn-rename-inline {
    font-size: 0.65rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: pointer;
    line-height: 1;
    border-radius: 3px;
    padding: 0 2px;
}

.btn-rename-inline:hover {
    opacity: 1 !important;
    background: rgba(var(--accent-rgb, 100, 160, 255), 0.15);
}

.bot-name:hover .btn-rename-inline {
    opacity: 0.6;
}

/* Input inline pentru redenumire */
.inline-rename-input {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--input-bg, rgba(255,255,255,0.08));
    border: 1px solid var(--accent-color, #64a0ff);
    border-radius: 4px;
    padding: 1px 5px;
    outline: none;
    width: 140px;
    max-width: 180px;
    box-shadow: 0 0 0 2px rgba(100, 160, 255, 0.2);
}

/* ✅ Badge BOT_X (BOT_1, BOT_2, etc.) - centrat sub icon */
.bot-number-badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
}

.bot-symbol {
    font-size: 0.6rem;
    color: var(--text-secondary);
}

/* ✅ NOU: Data export bot (sub symbol) */
.bot-export-date {
    font-size: 0.55rem;
    color: var(--text-secondary);
    margin-top: 2px;
    font-weight: 400;
    opacity: 0.8;
}

/* Status Badge */
.status-badge {
    padding: 0.1rem 0.1rem;
    border-radius: 4px;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Badge TEST RUNNING - verde ca butonul TEST */
.status-badge.running.test {
    background: #f59e0b;  /* Green light */
    color: #ffffff;       /* Green dark */
}

/* Badge LIVE RUNNING - roșu ca butonul LIVE */
.status-badge.running.live {
    background: #fee2e2;  /* Red light */
    color: #991b1b;       /* Red dark */
    animation: pulse-live 2s ease-in-out infinite;  /* Pulsing pentru LIVE */
}

/* Badge STOPPED - gri */
.status-badge.stopped {
    background: #e5e7eb;  /* Gray light */
    color: #374151;       /* Gray dark */
}

/* Badge PUBLICAT — verde discret, vizibil doar cand botul e publicat (24 Mai 2026) */
.status-badge.published-badge {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    font-size: 0.65rem;
    font-weight: 600;
}

/* Badge DEZACTIVAT — rosu discret (24 Mai 2026) */
.status-badge.disabled-badge {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    font-size: 0.65rem;
    font-weight: 600;
}

/* Card dezactivat — opacitate redusa pentru feedback vizual */
.bot-card.bot-disabled {
    opacity: 0.6;
    filter: grayscale(30%);
    border-left: 3px solid #ef4444 !important;
}

.bot-card.bot-disabled:hover {
    opacity: 0.8;
}

/* Filtru Dezactivate */
.filter-btn.filter-btn-disabled {
    border-color: #ef4444;
    color: #b91c1c;
}
.filter-btn.filter-btn-disabled.active {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #ef4444;
}

/* Pulsing animation pentru LIVE status (mai vizibil) */
@keyframes pulse-live {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        opacity: 0.85;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
    }
}

/* Market Badge */
.market-badge {
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 0.25rem;
}

.market-badge.spot {
    background: #dbeafe;  /* Blue light */
    color: #1e40af;       /* Blue dark */
}

.market-badge.futures {
    background: #fef3c7;  /* Yellow light */
    color: #92400e;       /* Yellow dark */
}

/* Bot Card Body */
.bot-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.75rem;
}

.bot-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
}

.bot-info-row .label {
    color: var(--text-secondary);
}

.bot-info-row .value {
    font-weight: 600;
    color: var(--text-primary);
}

.bot-info-row .value.positive {
    color: #10b981;  /* Green */
}

.bot-info-row .value.negative {
    color: #ef4444;  /* Red */
}

/* Bot Card Footer */
.bot-card-footer {
    display: flex;
    gap: 0.5rem;
}

.bot-card-footer button {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.btn-edit {
    flex: 1;
    min-width: 60px;  /* Previne butoanele prea înguste */
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border: 1px solid #7c3aed;
    color: white;
}

.btn-edit:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border-color: #6d28d9;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
}

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

.btn-run:hover {
    opacity: 0.9;
}

.btn-run.stop {
    background: #ef4444;  /* Red */
}

.btn-run.stop:hover {
    background: #dc2626;
}

/* Empty State */
.bots-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon {
    width: 64px;
    height: 64px;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.bots-empty-state h4 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.bots-empty-state p {
    color: var(--text-secondary);
    margin-bottom: 0;
}

.no-results {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 1rem;
    font-style: italic;
}

/* ============================================
   CONFIG ZONE - Bot Configuration Display
   ============================================ */

.config-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.config-section {
    background: var(--hover-bg);
    border-radius: 6px;
    padding: 0.75rem;
}

.config-section h4 {
    font-size: 0.85rem;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.config-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.config-item:last-child {
    border-bottom: none;
}

.config-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.config-value {
    color: var(--text-primary);
    font-weight: 600;
}

.config-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.1rem;
}

.config-actions .btn {
    flex: 1;
}

/* Error Message */
.error-message {
    text-align: center;
    padding: 2rem 1rem;
    color: #ef4444;
}

.error-message button {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.error-message button:hover {
    opacity: 0.9;
}

/* ============================================
   ORDERS TABLE - Zona Table (zone-table)
   ============================================ */

/* Orders count badge */
.orders-count {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: normal;
    margin-left: 0.5rem;
}

/* Orders Filters */
.orders-filters {
    display: flex;
    gap: 0.7rem; /* ✅ REDUS cu 30%: era 1rem */
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding: 0.25rem 0; /* ✅ REDUS: era 0.15rem */
    border-bottom: 2px solid var(--border-color);
    background: var(--card-bg);
}

/* ✅ NOU: Filter Groups (TYPE și STATUS) */
.orders-filters .filter-group {
    display: flex;
    gap: 0.35rem; /* ✅ REDUS cu 30%: era 0.5rem */
    align-items: center;
}

/* ✅ NOU: Filter Label */
.orders-filters .filter-label {
    font-size: 0.75rem; /* ✅ REDUS cu ~13%: era 0.75rem */
    font-weight: 600;
    opacity: 0.6;  /* ✅ 60% opacitate la hover (ușoară transparență) */
    /*color: var(--text-secondary);*/
    color: var(--trading-text);
    text-transform: uppercase;
    letter-spacing: 0.03em; /* ✅ REDUS: era 0.05em */
    margin-right: 0.12rem; /* ✅ REDUS: era 0.25rem */
}

.orders-filters .filter-btn {
    padding: 0.25rem 0.5rem;
    background: var(--card-bg); /* ✅ Original background */
    border: 1px solid var(--border-color); /* ✅ Original border */
    border-radius: 3px;
    color: var(--text-primary); /* ✅ Original text color */
    font-size: 0.7rem;
    font-weight: 500; /* ✅ Original weight */
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.2;
}

.orders-filters .filter-btn:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
    transform: translateY(-2px); /* ✅ Lift effect de la PAIRS */
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); /* ✅ Blue shadow de la PAIRS */
}

.orders-filters .filter-btn.active {
    background: var(--primary-color); /* ✅ Original active */
    color: white;
    border-color: var(--primary-color);
}

/* ✅ OVERRIDE: Buton activ ÎNTOTDEAUNA albastru + alb (chiar și cu custom theme!) */
.trading-container.custom-theme-active .orders-filters .filter-btn.active {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    opacity: 0.8 !important; /* ✅ Original opacity */
}

/* ✅ NOU (08 Feb 2026): Stiluri speciale pentru butonul PAIRS */
.filter-btn-pairs {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.filter-btn-pairs:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.filter-btn-pairs.active {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    border-color: #667eea;
    box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.2);
}

/* ✅ RESPONSIVE: Ecrane mici - grupuri pe linii separate */
@media (max-width: 768px) {
    .orders-filters {
        gap: 0.75rem;
    }
    
    .orders-filters .filter-group {
        flex: 1 1 100%;
    }
}

/* ✅ FAZA 2, Task 2.5: Orders Mode Toggle (TEST/LIVE) - În zone-title */
.zone-title .orders-mode-toggle {
    display: flex;
    gap: 0.3rem; /* ✅ Mai compact */
    margin-bottom: 0;
    padding: 0;
    background: transparent; /* ✅ Fără background în header */
    border: none;
    border-radius: 0;
}

.zone-title .orders-mode-toggle .btn-mode {
    flex: none; /* ✅ NU expand */
    padding: 0.3rem 0.6rem; /* ✅ Mai compact: era 0.6rem 1rem */
    background: var(--bg-secondary);
    border: 1px solid var(--border-color); /* ✅ Border mai subțire */
    border-radius: 3px; /* ✅ Mai rotunjit mic */
    color: var(--text-primary);
    font-size: 0.7rem; /* ✅ Mai mic: era 0.85rem */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px; /* ✅ Mai mic: era 0.5px */
    white-space: nowrap;
}

.zone-title .orders-mode-toggle .btn-mode:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.zone-title .orders-mode-toggle .btn-mode.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.zone-title .orders-mode-toggle .btn-mode:last-child.active {
    background: #ef4444;
    border-color: #ef4444;
}

/* Orders Table Container */
.orders-table-container {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100% - 5rem);
    /* Smooth scroll pentru touch devices */
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Orders Table */
.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    /* ✅ Table layout auto pentru coloane flexibile */
    table-layout: auto;
    min-width: 100%;
}

/* ✅ RESPONSIVE: Coloane cu width flexibil */
.orders-table th,
.orders-table td {
    /* Coloane se ajustează proporțional */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ✅ Width-uri specifice pentru fiecare coloană (flexibile) */
.orders-table th:nth-child(1),
.orders-table td:nth-child(1) { /* TIME */
    min-width: 70px;
    width: 8%;
}

.orders-table th:nth-child(2),
.orders-table td:nth-child(2) { /* GRID */
    min-width: 50px;
    width: 6%;
    text-align: center;
}

.orders-table th:nth-child(3),
.orders-table td:nth-child(3) { /* TYPE */
    min-width: 70px;
    width: 10%;
}

.orders-table th:nth-child(4),
.orders-table td:nth-child(4) { /* PRICE */
    min-width: 80px;
    width: 12%;
}

.orders-table th:nth-child(5),
.orders-table td:nth-child(5) { /* QUANTITY */
    min-width: 80px;
    width: 12%;
}

.orders-table th:nth-child(6),
.orders-table td:nth-child(6) { /* TOTAL */
    min-width: 80px;
    width: 12%;
}

.orders-table th:nth-child(7),
.orders-table td:nth-child(7) { /* PROFIT */
    min-width: 70px;
    width: 10%;
}

.orders-table th:nth-child(8),
.orders-table td:nth-child(8) { /* STATUS */
    min-width: 80px;
    width: 10%;
}

.orders-table thead {
    position: sticky;
    top: 0;
    background-color: var(--card-bg);  /* ✅ background-color în loc de background */
    z-index: 10;
}

/* ✅ Override pentru custom theme - mai specific! */
.trading-container.custom-theme-active .orders-table thead {
    background-color: var(--trading-bg) !important;  /* ✅ background-color */
}

.orders-table th {
    padding: 0.35rem 0.4rem; /* ✅ Redus de la 0.5rem */
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    line-height: 1.2; /* ✅ Linie height mai mică */
}

/* ✅ Override pentru custom theme - mai specific! */
.trading-container.custom-theme-active .orders-table th {
    color: var(--trading-text) !important;
    border-bottom-color: var(--trading-border) !important;
    background-color: var(--trading-bg) !important; 
}

.orders-table td {
    padding: 0.35rem 0.4rem; /* ✅ Redus de la 0.5rem */
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    line-height: 1.3; /* ✅ Linie height mai mică */
}

/* ✅ Override pentru custom theme - mai specific! */
.trading-container.custom-theme-active .orders-table td {
    color: var(--trading-text) !important;
    border-bottom-color: var(--trading-border) !important;
}

/* ✅ RESPONSIVE: Ecrane medii (< 1400px) */
@media (max-width: 1400px) {
    .orders-table {
        font-size: 0.75rem;
    }
    
    .orders-table th {
        font-size: 0.65rem;
        padding: 0.3rem 0.35rem; /* ✅ Mai compact */
    }
    
    .orders-table td {
        padding: 0.3rem 0.35rem; /* ✅ Mai compact */
    }
    
    .type-badge {
        font-size: 0.65rem;
        padding: 0.12rem 0.35rem; /* ✅ Mai compact */
    }
    
    .status-badge {
        font-size: 0.65rem;
        padding: 0.12rem 0.3rem; /* ✅ Mai compact */
    }
}

/* ✅ RESPONSIVE: Ecrane mici (< 1200px) */
@media (max-width: 1200px) {
    .orders-table {
        font-size: 0.7rem;
        min-width: 800px; /* Forțează scroll orizontal */
    }
    
    .orders-table th {
        font-size: 0.6rem;
        padding: 0.25rem 0.3rem; /* ✅ Mai compact */
    }
    
    .orders-table td {
        padding: 0.25rem 0.3rem; /* ✅ Mai compact */
    }
    
    /* Coloane mai înguste */
    .orders-table th:nth-child(1),
    .orders-table td:nth-child(1) { min-width: 60px; }
    
    .orders-table th:nth-child(2),
    .orders-table td:nth-child(2) { min-width: 40px; }
    
    .orders-table th:nth-child(4),
    .orders-table td:nth-child(4),
    .orders-table th:nth-child(5),
    .orders-table td:nth-child(5),
    .orders-table th:nth-child(6),
    .orders-table td:nth-child(6) { min-width: 70px; }
}

/* ✅ RESPONSIVE: Ecrane foarte mici (< 900px) */
@media (max-width: 900px) {
    .orders-table {
        font-size: 0.65rem;
        min-width: 700px; /* Forțează scroll orizontal */
    }
    
    .orders-table th,
    .orders-table td {
        padding: 0.2rem 0.25rem; /* ✅ Foarte compact */
    }
    
    .type-badge,
    .status-badge {
        font-size: 0.6rem;
        padding: 0.1rem 0.25rem; /* ✅ Mai compact */
    }
}

/* ✅ RESPONSIVE: Ecrane mobile (< 768px) - Ascunde coloana TOTAL */
@media (max-width: 768px) {
    .orders-table {
        font-size: 0.6rem;
        min-width: 600px;
    }
    
    /* Ascunde coloana TOTAL (cea de-a 6-a) */
    .orders-table th:nth-child(6),
    .orders-table td:nth-child(6) {
        display: none;
    }
    
    .orders-table th,
    .orders-table td {
        padding: 0.2rem;
    }
}

/* ✅ RESPONSIVE: Ecrane foarte mici (< 600px) - Ascunde și QUANTITY */
@media (max-width: 600px) {
    .orders-table {
        font-size: 0.55rem;
        min-width: 500px;
    }
    
    /* Ascunde QUANTITY (cea de-a 5-a) și TOTAL (cea de-a 6-a) */
    .orders-table th:nth-child(5),
    .orders-table td:nth-child(5),
    .orders-table th:nth-child(6),
    .orders-table td:nth-child(6) {
        display: none;
    }
}

.orders-table tbody tr:hover {
    background: var(--hover-bg);
}

/* Order Row */
.order-row.buy {
    border-left: 3px solid #10b981;  /* Green */
}

.order-row.sell {
    border-left: 3px solid #ef4444;  /* Red */
}

/* Type Badge */
.type-badge {
    padding: 0.15rem 0.4rem; /* ✅ Redus pentru compactare */
    border-radius: 3px;
    font-size: 0.68rem; /* ✅ Puțin mai mic */
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1; /* ✅ Linie height minimă */
    display: inline-block;
    vertical-align: middle;
}

.type-badge.buy {
    background: #d1fae5;  /* Green light */
    color: #065f46;       /* Green dark */
}

.type-badge.sell {
    background: #fee2e2;  /* Red light */
    color: #991b1b;       /* Red dark */
}

/* Status Badge */
.orders-table .status-badge {
    padding: 0.15rem 0.35rem; /* ✅ Redus pentru compactare */
    border-radius: 3px;
    font-size: 0.68rem; /* ✅ Puțin mai mic */
    font-weight: 600;
    line-height: 1; /* ✅ Linie height minimă */
    display: inline-block;
    vertical-align: middle;
}

.orders-table .status-badge.filled {
    background: #d1fae5;  /* Green light */
    color: #065f46;       /* Green dark */
}

.orders-table .status-badge.pending {
    background: #fef3c7;  /* Yellow light */
    color: #92400e;       /* Yellow dark */
}

.orders-table .status-badge.cancelled {
    background: #fee2e2;  /* Red light */
    color: #991b1b;       /* Red dark */
}

/* Profit Column */
/* ✅ FIX (13 Apr 2026): culoarea profitului e inline pe <span> in JS — zero background pe <td> */
/* Clasele .positive / .negative sunt pastrate pentru compatibilitate dar nu mai au background */
.order-profit.positive {
    background-color: transparent;
}

.order-profit.negative {
    background-color: transparent;
}

/* Indicator profit estimat brut (SELL NEW) — text mic, discret */
.profit-est-label {
    font-size: 0.65rem;
    font-weight: 400;
    opacity: 0.7;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* Coloane Futures */
.order-grid-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.order-margin {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.order-leverage {
    font-size: 0.75rem;
    font-weight: 600;
    color: #f59e0b;
}

.order-stoploss.stoploss-val {
    color: #ef4444;
    font-size: 0.75rem;
}

.order-takeprofit.takeprofit-val {
    color: #10b981;
    font-size: 0.75rem;
}

/* Exit Value — valoarea la care s-a executat ordinul (FILLED) */
.order-exit-value {
    font-size: 0.75rem;
    color: var(--trading-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
}

/* Badge-uri status Futures: tooltip tag TP/SL langa textul Filled */
.status-tooltip-tag {
    font-size: 0.65rem;
    font-weight: 700;
    opacity: 0.8;
    margin-left: 1px;
    vertical-align: super;
    letter-spacing: 0.02em;
}

/* Orders Empty State */
.orders-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.orders-empty-state .empty-icon {
    width: 64px;
    height: 64px;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.orders-empty-state h4 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.orders-empty-state p {
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

/* Loading Message */
.loading-message {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* ============================================
   BOT CARD BUTTONS - Test Mode + Live Mode
   ============================================ */

/* Status Badge - cu mode indicator */
.status-badge.test {
    background: #fef3c7;  /* Yellow light */
    color: #92400e;       /* Yellow dark */
}

.status-badge.live {
    background: #fee2e2;  /* Red light */
    color: #991b1b;       /* Red dark */
    animation: pulse 2s ease-in-out infinite;
}

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

/* Bot Card Footer - 2 sau 3 butoane */
.bot-card-footer {
    display: flex;
    flex-wrap: wrap;  /* Permite wrapping pe multiple linii */
    gap: 0.2rem;
}

/* Test Button */
.bot-card-footer .btn-test {
    flex: 1;
    min-width: 60px;  /* Previne butoanele prea înguste */
    padding: 0.5rem;
    background: #10b981;  /* Green - changed from yellow */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bot-card-footer .btn-test:hover:not(:disabled) {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
}

.bot-card-footer .btn-test:disabled {
    background: #d1d5db;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Live Button */
.bot-card-footer .btn-live {
    flex: 1;
    min-width: 60px;  /* Previne butoanele prea înguste */
    padding: 0.5rem;
    background: #ef4444;  /* Red */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bot-card-footer .btn-live:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);
}

.bot-card-footer .btn-live:disabled {
    background: #d1d5db;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Buton ACTIVEAZĂ — verde, apare cand botul e dezactivat (24 Mai 2026) */
.bot-card-footer .btn-activate {
    flex: 1;
    padding: 0.45rem 0.75rem;
    background: #059669;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bot-card-footer .btn-activate:hover {
    background: #047857;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(5, 150, 105, 0.3);
}

/* Buton LIVE dezactivat din cauza balantei insuficiente */
.bot-card-footer .btn-live.btn-live-disabled {
    background: #d1d5db;
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.bot-card-footer .btn-live.btn-live-disabled::after {
    content: '⛔';
    font-size: 20px;
    position: absolute;
    top: -4px;
    right: -4px;
}

/* Stop Test Button (orange/amber) */
.bot-card-footer .btn-stop-test {
    flex: 1;
    min-width: 80px;
    padding: 0.5rem;
    background: #f59e0b;  /* Amber/Orange */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bot-card-footer .btn-stop-test:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.4);
}

/* Stop Live Button (dark red, more prominent) */
.bot-card-footer .btn-stop-live {
    flex: 1;
    min-width: 7cqh;
    padding: 0.5rem;
    background: #dc2626;  /* Dark Red */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);  /* Subtle outline */
}

.bot-card-footer .btn-stop-live:hover {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.5);
}

/* Stop Button (legacy - kept for compatibility) */
.bot-card-footer .btn-stop {
    flex: 2;  /* Mai larg când e singur cu SELECT */
    min-width: 80px;  /* Previne butoanele prea înguste */
    padding: 0.5rem;
    background: #6b7280;  /* Gray */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bot-card-footer .btn-stop:hover {
    background: #4b5563;
    transform: translateY(-1px);
}


/* ============================================
   DROPDOWN MENU - Bot Actions
   ============================================ */

.bot-dropdown {
    position: relative;
    display: inline-block;
}

.btn-dropdown {
    padding: 0.5rem 0.75rem;
    background: #00ff80;
    color: #000000;
    border: none;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.btn-dropdown:hover {
    background: #00cc66;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 255, 128, 0.4);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 4px 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dropdown-item:hover:not(.disabled) {
    background: #f3f4f6;
}

.dropdown-item.disabled {
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

.dropdown-item .badge-soon {
    margin-left: auto;
    padding: 2px 6px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
}

/* ============================================
   DELETE CONFIRMATION MODAL
   ============================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

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

.modal-container {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

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

.modal-header {
    padding: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #ffffff;
}

.modal-body {
    padding: 1.5rem;
}

.modal-question {
    font-size: 1rem;
    color: #374151;
    margin-bottom: 1rem;
}

.modal-warning {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
    padding: 1rem;
    border-radius: 4px;
}

.modal-warning p {
    margin: 0 0 0.5rem 0;
    color: #991b1b;
    font-weight: 600;
}

.modal-warning ul {
    margin: 0;
    padding-left: 1.5rem;
    color: #7f1d1d;
}

.modal-warning li {
    margin: 0.25rem 0;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.modal-footer .btn {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-footer .btn-secondary {
    background: #e5e7eb;
    color: #374151;
}

.modal-footer .btn-secondary:hover {
    background: #d1d5db;
}

.modal-footer .btn-danger {
    background: #dc2626;
    color: white;
}

.modal-footer .btn-danger:hover {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* ============================================
   ✅ NOU: SUCCESS MODAL
   Modal pentru mesaje de succes
   ============================================ */

.success-modal {
    border-top: 4px solid #10b981;
    animation: successSlideIn 0.3s ease;
}

.success-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.success-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.success-modal .modal-body {
    padding: 2rem 1.5rem;
}

.success-modal .modal-body p {
    color: var(--text-primary);
    margin: 0;
}

.modal-footer .btn-primary {
    background: #10b981;
    color: white;
    min-width: 120px;
}

.modal-footer .btn-primary:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Animație pentru success modal */
@keyframes successSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   ✅ NOU: BOT CONFIG EDITOR
   Editor configurație bot în zone-config
   ============================================ */

/* Container principal editor */
.bot-config-editor {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.1rem;
    height: 100%;
    overflow-y: auto;
}

/* Header editor */
.config-editor-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0.1rem;
    border-bottom: 2px solid var(--border-color);
}

.config-editor-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

/* Secțiuni configurație */
.config-section {
    background: var(--hover-bg);
    border-radius: 6px;
    padding: 0.1rem;
}

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

/* Rând configurație */
.config-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.1rem;
}

.config-row:last-child {
    margin-bottom: 0;
}

.config-row label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex: 0 0 45%;
    padding-top: 0.4rem;
}

.config-row .input-wrapper {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
}

.config-row input {
    width: 100%;
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.75rem;
}

.config-row input:read-only {
    background: var(--disabled-bg);
    cursor: not-allowed;
    opacity: 0.7;
}

.config-row input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* ✅ Trading Fees Inputs (Read-Only) */
.fee-input,
.fee-source-input {
    font-weight: 600;
    text-align: center;
    font-family: 'Courier New', monospace;
}

.fee-input {
    font-size: 0.85rem;
}

.fee-source-input {
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* Select Source: API / Personalizat */
.config-row .fee-source-select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.config-row .fee-source-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Fee input in modul Personalizat — devine editabil si vizual distinct */
.fee-input:not([disabled]) {
    border-color: var(--primary-color) !important;
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    cursor: text;
}

/* ✅ Symbol Select Dropdown (FAZA 2 - UX Improvement) */
.config-row .symbol-select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.config-row .symbol-select:hover {
    border-color: var(--primary-color);
    background: var(--hover-bg);
}

.config-row .symbol-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.config-row .symbol-select option {
    padding: 0.4rem;
    background: var(--card-bg);
    color: var(--text-primary);
}

/* Textarea pentru Notes */
.config-section textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
}

.config-section textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.notes-counter {
    display: block;
    text-align: right;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Butoane acțiuni */
.config-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.1rem;
    border-top: 2px solid var(--border-color);
}

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

/* ✅ NOU: SVG icons pentru butoane */
.btn-save-config .icon-save,
.btn-cancel-config .icon-cancel {
    flex-shrink: 0;
}

.btn-save-config {
    background: var(--success-color);
    color: white;
}

.btn-save-config:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-cancel-config {
    background: #ef4444; /* ✅ Roșu pentru Cancel (fundal evident) */
    color: white;
}

.btn-cancel-config:hover {
    background: #dc2626; /* ✅ Roșu mai închis la hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* ✅ NOU: Input hints (text explicativ sub input-uri) */
.config-row .input-hint {
    display: block;
    font-size: 0.10rem;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-top: 0.10rem;
    font-style: italic;
}

/* ✅ NOU (26 Apr 2026): Order Amount row cu hint Vol.1 contract inline */
.config-row .input-wrapper.order-amount-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.config-row .input-wrapper.order-amount-row input {
    width: 80px;
    flex: 0 0 80px;
}

.contract-vol-hint {
    font-size: 0.78rem;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
    background: var(--bg-secondary, #f3f4f6);
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #e5e7eb);
    flex: 1;
}

/* ============================================
   ✅ READ-ONLY MODE: Config modal când bot rulează
   ============================================ */

/* Readonly section - styling pentru input-uri disabled */
.config-section.readonly-section {
    opacity: 0.7;
    pointer-events: auto; /* Permite scroll și select text */
}

.config-section.readonly-section input[disabled],
.config-section.readonly-section textarea[readonly] {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
    border-color: #d1d5db !important;
    opacity: 1; /* Override default opacity */
}

/* Dark theme pentru readonly inputs */
[data-theme="dark"] .config-section.readonly-section input[disabled],
[data-theme="dark"] .config-section.readonly-section textarea[readonly] {
    background: #374151 !important;
    color: #9ca3af !important;
    border-color: #4b5563 !important;
}

/* Readonly warning banner */
.config-readonly-warning {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   ✅ NOU: CONFIG MODAL POPUP
   Modal overlay pentru editare configurație bot
   ============================================ */

/* Modal container */
.config-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.config-modal.active {
    display: flex;
}

/* Overlay (background închis) */
.config-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease;
}

/* Modal content (fereastra cu background verde deschis) */
.config-modal-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 98vh;
    background: #fffff0; 
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s ease;
    z-index: 10000;
}

/* Modal header */
.config-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.05rem 1em;
    border-bottom: 2px solid #d4e5c3; /* ✅ Bordură verde închisă */
    background: #e8f5d0; /* ✅ Verde mai închis pentru header (contrast) */
    border-radius: 12px 12px 0 0;
}

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

.btn-close-modal {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ✅ NOU: SVG icon pentru close button */
.btn-close-modal .icon-close {
    transition: transform 0.3s ease;
}

.btn-close-modal:hover {
    background: var(--hover-bg);
    color: var(--danger-color);
}

.btn-close-modal:hover .icon-close {
    transform: rotate(90deg);
}

/* Modal body (scrollable) */
.config-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* Ajustări pentru bot-config-editor în modal */
.config-modal-body .bot-config-editor {
    padding: 0;
    height: auto;
}

/* Animații */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive pentru mobile */
@media (max-width: 768px) {
    .config-modal-content {
        width: 95%;
        max-height: 90vh;
    }
    
    .config-modal-header {
        padding: 0.75rem 1rem;
    }
    
    .config-modal-body {
        padding: 1rem;
    }
}

/* ============================================
   STATUS BADGE CANCELABLE (Interactive)
   ============================================ */

/* Badge cu funcție de cancel pentru SELL cu status NEW */
.status-badge.cancelable {
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    user-select: none;
}

/* Text normal (implicit) */
.status-badge.cancelable .badge-text-normal {
    display: inline;
}

/* Text hover (ascuns implicit) */
.status-badge.cancelable .badge-text-hover {
    display: none;
}

/* Hover effect */
.status-badge.cancelable:hover {
    background-color: #f44336 !important; /* Roșu */
    color: white !important;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
}

/* La hover: ascunde text normal, arată text hover */
.status-badge.cancelable:hover .badge-text-normal {
    display: none;
}

.status-badge.cancelable:hover .badge-text-hover {
    display: inline;
}

/* Active (click) effect */
.status-badge.cancelable:active {
    transform: scale(0.95);
}

/* Badge CANCELED (după cancel) */
.status-badge.cancelled {
    background-color: #9e9e9e !important; /* Gri */
    color: white !important;
    cursor: default !important;
}

/* ============================================
   ROW SELECTION (SELL NEW orders)
   ============================================ */

/* Toate rândurile au cursor pointer */
.order-row {
    cursor: pointer;
}

/* Rând selectat (SELL NEW) - STRATEGY-STYLE */
.order-row.selected {
    outline: 2px solid #2196F3 !important; /* ✅ Outline în loc de border */
    outline-offset: -2px !important; /* ✅ Outline în interior */
    background-color: rgba(33, 150, 243, 0.05) !important; /* Background subtil */
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4) !important; /* Shadow albastru */
}

/* Hover pe rânduri selectabile (SELL NEW) */
.order-row.selectable:hover {
    background-color: rgba(33, 150, 243, 0.08);
}

/* ============================================
   THEME CONTROL BUTTONS (Settings, Dark, Light)
   Adaptat din Strategies pentru Trading
   ============================================ */

/* Zone title wrapper - flex container pentru titlu + butoane */
.zone-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.15rem 0.1rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

/* Chart theme controls container */
.chart-theme-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Theme button base style */
.theme-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color);
    /*background: transparent !important;  /* ✅ Transparent - se vede culoarea din spate! */
    background: transparent;  /* ✅ Transparent - se vede culoarea din spate! */
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

/* Theme button SVG styling */
.theme-btn svg {
    width: 18px;
    height: 18px;
    /*stroke: var(--text-color);*/
    transition: stroke 0.2s ease;
}

/* Theme button hover */
.theme-btn:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

/* Theme button active */
.theme-btn:active {
    transform: translateY(0);
}

/* ✅ Active theme button (când tema e activă) - FĂRĂ box-shadow! */
.theme-btn.active-theme {
    /* Culoarea se setează prin JS (opusă!) */
    transform: scale(1.1);  /* Doar scale pentru evidențiere */
}

/* Custom theme active - butoanele folosesc CSS variables (setate prin JS inline) */

/*  Tooltip pentru theme buttons - SPECIFIC pentru Trading! */
/* Folosim selector mai specific + !important pentru a suprascrie strategies.css */
#trading-module .theme-btn[data-tooltip]::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    top: 100% !important;  /* JOS (sub buton!) */
    bottom: auto !important;  /* Override strategies.css */
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) !important;  /* 8px spacing sub buton */
    margin-bottom: 0 !important;  /* Override strategies.css */
    background: #22557a !important;  /* Culoare background custom */
    color: #f2ffc2 !important;  /* Culoare text custom */
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
    z-index: 10000 !important;  /* Mai mare decât strategies */
}

#trading-module .theme-btn[data-tooltip]:hover::after {
    opacity: 1 !important;
    visibility: visible !important;  /* Override strategies.css */
}

/* Override săgeată din strategies.css pentru Trading */
#trading-module .theme-btn[data-tooltip]::before {
    display: none !important;  /* Ascunde săgeata din strategies */
}

/* ============================================
   ZOOM CONTROL BUTTONS (Trading - Price Scale Zoom)
   Butoane pentru controlul zoom-ului pe price scale
   ============================================ */

/* Container pentru zoom controls */
.chart-zoom-controls {
    /* ✅ FIX (02 Iun 2026): eliminat position:relative + z-index:1000 — cauzau afisarea
       butoanelor PESTE header-content. Aliniat cu .chart-theme-controls (intra corect sub header).
       Tooltip-urile raman OK: .zoom-btn pastreaza position:relative pentru ::after. */
    /* Layout mutat din stil inline (trading.js) in CSS — conventie AGENTS: fara CSS inline static */
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
}

.zoom-btn {
    position: relative;  /* NECESAR pentru tooltip cu ::after */
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: inherit;
}

.zoom-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

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

/* Manual zoom active state (green highlight) */
.zoom-btn.manual-zoom-active {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
}

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

/* Tooltip pentru zoom buttons - SUB butoane (ca la theme-btn) */
#trading-module .zoom-btn[data-tooltip]::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    top: 100% !important;  /* JOS (sub buton!) */
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) !important;  /* 8px spacing sub buton */
    margin-bottom: 0 !important;
    background: #22557a !important;  /* Culoare background custom */
    color: #f2ffc2 !important;  /* Culoare text custom */
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
    z-index: 10000 !important;
}

#trading-module .zoom-btn[data-tooltip]:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
}

#trading-module .zoom-btn[data-tooltip]::before {
    display: none !important;
}

/* Zoom Indicator (SVG icon pentru Auto Scale / Manual Zoom) - CLICKABLE */
.zoom-indicator {
    position: relative;  /* NECESAR pentru tooltip cu ::after */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    cursor: pointer;  /* Arată că e clickable */
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 2px;
}

.zoom-indicator:hover {
    background: rgba(255, 255, 255, 0.1);
}

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

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

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

/* Tooltip pentru zoom indicator - ACEEAȘI STILIZARE ca zoom-btn */
#trading-module .zoom-indicator[data-tooltip]::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    top: 100% !important;  /* JOS (sub indicator!) */
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) !important;  /* 8px spacing sub indicator */
    margin-bottom: 0 !important;
    background: #22557a !important;  /* Culoare background custom */
    color: #f2ffc2 !important;  /* Culoare text custom */
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
    z-index: 10000 !important;
}

#trading-module .zoom-indicator[data-tooltip]:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
}

#trading-module .zoom-indicator[data-tooltip]::before {
    display: none !important;
}

/* ============================================
   SYMBOL LIVE PRICE (Trading - Real-time Price Display)
   Afișare preț live pentru simbolul selectat
   ============================================ */

#symbol-live-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 15px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    color: #10b981;
    padding: 0px 6px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    transition: all 0.2s ease;
}

#symbol-live-price:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.5);
}

/* Label (ex: BTC:) */
#symbol-live-price .price-label,
#symbol-price-label {
    color: #888;
    font-size: 14px;
    font-weight: normal;
}

/* Price value (ex: 42000.50) */
#symbol-live-price .price-value,
#symbol-price-value {
    color: #10b981;
    font-size: 18px;
    letter-spacing: 0.5px;
    font-weight: bold;
}

/* Source indicator (ex: (Stream)) */
#symbol-live-price .price-source,
#symbol-price-source {
    color: #666;
    font-size: 11px;
    font-weight: normal;
    opacity: 0.8;
}

/* Change indicator (arrow up/down) */
#symbol-live-price .price-change {
    font-size: 14px;
    opacity: 0.8;
}

/* ============================================
   THEME SETTINGS MODAL (Trading - UNIQUE)
   Class-e unice pentru a evita conflictul cu Strategies
   ============================================ */

.trading-chart-theme-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

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

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

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

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

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

.trading-color-picker-group input[type="color"] {
    width: 100%;
    height: 50px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    padding: 4px;
    background: var(--input-bg);
    transition: border-color 0.2s ease;
}

.trading-color-picker-group input[type="color"]:hover {
    border-color: var(--primary-color);
}

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

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

/* ============================================
   THEME CLASSES (Dark/Light for UI)
   ============================================ */

/* Dark theme for Trading UI */
.trading-container.theme-dark {
    --card-bg: #1a1d2e;
    --input-bg: #252836;
    --border-color: #363c4e;
    --text-color: #d1d4dc;
    --text-muted: #838ca1;
}

/* Light theme for Trading UI */
.trading-container.theme-light {
    --card-bg: #ffffff;
    --input-bg: #f8f9fa;
    --border-color: #e0e3eb;
    --text-color: #131722;
    --text-muted: #6c757d;
}

/* ============================================
   LAYOUT SETTINGS PANEL (Sidebar)
   ============================================ */

/* Buton Layout Settings în header */
.layout-settings-btn {
    padding: 8px 16px;
    /*background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);*/
    background: linear-gradient(135deg, #22557a 0%, #22557a 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 6px;
}

.layout-settings-btn:hover {
    background: linear-gradient(135deg, #FB8C00 0%, #E65100 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.5);
}

/* SVG Icon în buton */
.settings-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: white;
    transition: transform 0.3s ease;
}

.layout-settings-btn:hover .settings-icon {
    transform: rotate(45deg);
}

/* Settings Panel (Sidebar dreapta) */
.layout-settings-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.layout-settings-panel.open {
    right: 0;
}

/* Header Settings Panel */
.layout-settings-header {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    color: white;
    padding: 24px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.layout-settings-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* SVG Icon în header panel */
.settings-icon-header {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: white;
}

.layout-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}

.layout-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Content Settings Panel */
.layout-settings-content {
    padding: 24px 20px;
    flex: 1;
    overflow-y: auto;
}

.layout-settings-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 2px solid #f0f0f0;
}

.layout-settings-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.layout-settings-section h4 {
    color: #333;
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* SVG Icon în titlurile secțiunilor */
.section-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #FF9800; /* Portocaliu - culoarea brand */
}

.layout-description {
    color: #666;
    font-size: 13px;
    margin: 0 0 20px 0;
}

/* Checkbox Items */
.layout-checkbox-item {
    display: flex;
    align-items: flex-start;
    padding: 14px 12px;
    border-radius: 8px;
    transition: background 0.2s;
    margin-bottom: 8px;
}

.layout-checkbox-item:hover {
    background: #f8f9fa;
}

.layout-checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 14px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #FF9800;
    flex-shrink: 0;
}

.layout-checkbox-label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    flex: 1;
}

.layout-checkbox-label strong {
    color: #333;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* SVG Icon în checkbox labels */
.checkbox-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #666; /* Gri mediu */
}

.layout-checkbox-label small {
    color: #666;
    font-size: 12px;
    line-height: 1.4;
}

/* Preset Buttons */
.layout-preset-btn {
    width: 100%;
    padding: 6px 6px;
    margin-bottom: 12px;
    border: 2px solid #e0e3eb;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    background: white;
    color: #333;
}

.layout-preset-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* SVG Icon în preset buttons */
.preset-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Container text preset */
.preset-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preset-title {
    font-size: 14px;
    font-weight: 600;
}

.layout-preset-btn small {
    font-size: 12px;
    font-weight: 400;
    color: #666;
}

/* Preset-specific colors */
.focus-preset {
    border-color: #4CAF50;
    background: linear-gradient(135deg, #ffffff 0%, #f1f8f4 100%);
}

.focus-preset:hover {
    border-color: #45a049;
    background: linear-gradient(135deg, #f1f8f4 0%, #e8f5e9 100%);
}

.focus-preset .preset-icon {
    color: #4CAF50;
}

.focus-preset:hover .preset-icon {
    transform: scale(1.1);
}

.trading-preset {
    border-color: #2196F3;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
}

.trading-preset:hover {
    border-color: #1976D2;
    background: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%);
}

.trading-preset .preset-icon {
    color: #2196F3;
}

.trading-preset:hover .preset-icon {
    transform: scale(1.1);
}

.monitoring-preset {
    border-color: #9C27B0;
    background: linear-gradient(135deg, #ffffff 0%, #f8f0fa 100%);
}

.monitoring-preset:hover {
    border-color: #7B1FA2;
    background: linear-gradient(135deg, #f8f0fa 0%, #f3e5f5 100%);
}

.monitoring-preset .preset-icon {
    color: #9C27B0;
}

.monitoring-preset:hover .preset-icon {
    transform: scale(1.1);
}

.full-preset {
    border-color: #FF9800;
    background: linear-gradient(135deg, #ffffff 0%, #fff8f0 100%);
}

.full-preset:hover {
    border-color: #F57C00;
    background: linear-gradient(135deg, #fff8f0 0%, #fff3e0 100%);
}

.full-preset .preset-icon {
    color: #FF9800;
}

.full-preset:hover .preset-icon {
    transform: scale(1.1);
}

/* Overlay pentru Settings Panel */
.layout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.layout-overlay.show {
    display: block;
}

/* Hidden zones */
.zone-stats.layout-hidden,
.zone-table.layout-hidden {
    display: none !important;
    flex: 0 !important; /* Forțează flex 0 pentru zone ascunse */
    min-height: 0 !important;
    height: 0 !important;
}

.right-section.layout-hidden {
    display: none !important;
}

/* ============================================
   LAYOUT REDISTRIBUTION - Zone visible pe verticală
   ============================================ */

/* Cand Stats este ascuns, Chart si Table sunt gestionate de Split.js (nu flex) */
.left-section:has(.zone-stats.layout-hidden) .zone-chart,
.left-section:has(.zone-stats.layout-hidden) .zone-table {
    flex: none; /* Split.js seteaza height prin inline style — flex:1 l-ar suprascrie */
}

/* Cand Table este ascuns, Chart este gestionat de Split.js */
.left-section:has(.zone-table.layout-hidden) .zone-chart {
    flex: none;
}

/* Cand Stats si Table sunt ascunse, Chart ocupa 100% — nu mai e Split.js activ */
.left-section:has(.zone-stats.layout-hidden):has(.zone-table.layout-hidden) .zone-chart {
    flex: 1 !important;
    height: 100% !important;
}

/* Fallback pentru browsere care nu suporta :has() - folosim clase pe parinte */
.left-section.stats-hidden .zone-chart,
.left-section.stats-hidden .zone-table {
    flex: none;
}

.left-section.table-hidden .zone-chart {
    flex: none;
}

.left-section.stats-hidden.table-hidden .zone-chart {
    flex: 1 !important;
    height: 100% !important;
}

/* Responsive pentru panel Settings */
@media (max-width: 768px) {
    .layout-settings-panel {
        width: 100%;
        right: -100%;
    }
}

/* ============================================
   TOAST NOTIFICATIONS (07 Feb 2026)
   Modern, non-intrusive notifications
   ============================================ */

.toast-container {
    position: fixed;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    align-items: center;
}

.toast {
    background: white;
    border-radius: 8px;
    padding: 0;
    min-width: 250px;
    max-width: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease-out;
    pointer-events: auto;
    border-left: 4px solid;
    overflow: hidden;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.hide {
    opacity: 0;
    transform: translateY(-20px);
}

/* Toast Types */
.toast.success {
    border-left-color: #4CAF50;
}

.toast.error {
    border-left-color: #f44336;
}

.toast.info {
    border-left-color: #2196F3;
}

.toast.warning {
    border-left-color: #ff9800;
}

/* ✅ Toast Header (Icon + Title + Close pe o linie) */
.toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Toast Icon */
.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
    font-weight: bold;
}

.toast.success .toast-icon {
    color: #4CAF50;
}

.toast.error .toast-icon {
    color: #f44336;
}

.toast.info .toast-icon {
    color: #2196F3;
}

.toast.warning .toast-icon {
    color: #ff9800;
}

/* Toast Title */
.toast-title {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
}

/* ✅ Toast Body (Mesaj pe toată lățimea) */
.toast-body {
    padding: 12px 16px;
}

.toast-message {
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Close Button */
.toast-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
    opacity: 0.7;
}

.toast-close:hover {
    opacity: 1;
}

/* Progress Bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0 0 0 8px;
    transform-origin: left;
}

.toast.success .toast-progress {
    background: #4CAF50;
}

.toast.error .toast-progress {
    background: #f44336;
}

.toast.info .toast-progress {
    background: #2196F3;
}

.toast.warning .toast-progress {
    background: #ff9800;
}

/* ✅ Toast Container LOCAL (în bot-card) */
.toast-container-local {
    position: relative;
    width: 100%;
    margin-top: 0.5rem;
    z-index: 100;
    display: flex;
    justify-content: center; /* ✅ Centrează toast-ul pe orizontală */
}

.toast-container-local .toast {
    position: relative;
    right: auto;
    bottom: auto;
    margin-bottom: 0.5rem;
    width: 200px; /* ✅ Lățime fixă 200px */
    max-width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ============================================
   PRICE MONITOR (14 Feb 2026)
   Monitoring vizual pentru sursa prețului
   ============================================ */

.price-monitor {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
    transition: all 0.3s ease;
}

.price-monitor.pulse {
    /* ✅ DISABLED (20 Feb 2026): Animație pulsare dezactivată */
    /* animation: pulse-animation 0.3s ease; */
    border-color: rgba(16, 185, 129, 0.6);
}

@keyframes pulse-animation {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.price-monitor-content {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Price Display */
.price-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
}

.price-label {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.price-value {
    color: #3b82f6;
    font-size: 1.3rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

.price-symbol {
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Source Badge */
.source-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.source-label {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.source-badge.source-deals {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.source-badge.source-rest {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.source-badge.source-loading\.\.\. {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.source-icon {
    font-size: 0.7rem;
    animation: blink 2s infinite;
}

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

/* Latency Display */
.latency-display {
    display: flex;
    align-items: center;
    gap: 6px;
}

.latency-label {
    color: #6b7280;
    font-size: 0.85rem;
}

.latency-value {
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

/* Connection Status */
.connection-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.connection-icon {
    font-size: 0.6rem;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.connection-text {
    color: #6b7280;
    font-size: 0.85rem;
}

.connection-status.connected .connection-text {
    color: #10b981;
}

.connection-status.disconnected .connection-text {
    color: #ef4444;
}

/* Theme Support */
.trading-container.theme-dark .price-monitor {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

.trading-container.theme-dark .price-label,
.trading-container.theme-dark .source-label,
.trading-container.theme-dark .latency-label,
.trading-container.theme-dark .connection-text {
    color: #9ca3af;
}

.trading-container.theme-dark .price-symbol {
    color: #6b7280;
}

/* Responsive */
@media (max-width: 1200px) {
    .price-monitor-content {
        gap: 16px;
    }
    
    .price-value {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .price-monitor-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .connection-status {
        margin-left: 0;
    }
}

/* ============================================================
   TRADING CARD — Ordine & Pozitii MEXC
   Independent de portfolio-card (prefix tc* pentru izolare)
   ============================================================ */

.trading-card {
    background: var(--card-bg, #ffffff);
    border-radius: 8px;
    border: 1px solid var(--primary-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0.75rem 0 1rem 0;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
}

/* Header card */
.trading-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid var(--primary-color, #4CAF50);
}

.trading-card-header h3 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary, #333);
}

/* Grupare elemente dreapta header: timestamp + spinner + collapse */
.tc-header-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Timestamp ultima actualizare */
.tc-last-update {
    font-size: 0.72rem;
    color: var(--text-secondary, #999);
    font-style: italic;
    white-space: nowrap;
}

/* Spinner rotire — vizibil doar in timpul fetch-ului */
.tc-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color, #4CAF50);
}

.tc-spinner svg {
    width: 16px;
    height: 16px;
    animation: tc-spin 0.8s linear infinite;
}

@keyframes tc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Buton collapse */
.tc-collapse-btn {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.4rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #666);
    min-width: 30px;
    min-height: 30px;
}

.tc-collapse-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
}

.tc-collapse-btn:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.1));
    color: var(--primary-color, #4CAF50);
    border-color: var(--primary-color, #4CAF50);
}

/* Continut card — collapse/expand */
.trading-card-content {
    padding: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    max-height: 2000px;
}

.trading-card.collapsed .trading-card-content {
    max-height: 0 !important;
    padding: 0;
    overflow: hidden;
}

/* Tab-uri */
.tc-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding: 0 1rem;
    /*background: var(--bg-secondary, #f8fafc);*/
}

.tc-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.5rem 2rem;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary, #666);
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.tc-tab:hover {
    color: var(--primary-color, #4CAF50);
    background: rgba(76, 175, 80, 0.05);
}

.tc-tab.active {
    color: var(--trading-text, var(--primary-color, #4CAF50));
    border-bottom: 3px solid var(--trading-text, var(--primary-color, #4CAF50));
    font-weight: 600;
}

/* Badge numeric pe tab */
.tc-badge {
    background: var(--primary-color, #4CAF50);
    color: #fff;
    border-radius: 10px;
    padding: 2px 15px;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
    opacity: 0.5;
}

/* Panouri tab */
.tc-panel {
    display: none;
    padding: 0;
}

.tc-panel.active {
    display: block;
}

/* Tabel */
.tc-table-container {
    overflow-x: auto;
    max-height: 320px;
    overflow-y: auto;
}

.tc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.70rem;
}

.tc-table thead th {
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #666);
    font-weight: 600;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.6rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    position: sticky;
    top: 0;
    z-index: 1;
}

.tc-table tbody tr {
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    transition: background 0.15s ease;
}

.tc-table tbody tr:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.03));
}

.tc-table tbody td {
    padding: 0.25rem 0.7rem;
    color: var(--text-primary, #333);
}

/* Mesaje loading / empty */
.tc-loading,
.tc-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary, #999);
    font-style: italic;
}

/* Side badges (BUY/SELL, LONG/SHORT) */
.tc-side {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.tc-side-buy {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.tc-side-sell {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* Role badges (Maker/Taker) */
.tc-role {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
}

.tc-role-maker { background: rgba(99, 102, 241, 0.12); color: #4f46e5; }
.tc-role-taker { background: rgba(245, 158, 11, 0.12); color: #d97706; }

/* Status badges */
.tc-status {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}

.tc-status-filled   { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.tc-status-canceled { background: rgba(107, 114, 128, 0.12); color: #6b7280; }
.tc-status-new      { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.tc-status-new_     { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.tc-status-partially_filled { background: rgba(245, 158, 11, 0.12); color: #d97706; }

/* Profit/pierdere */
.tc-positive { color: #16a34a; font-weight: 400; }
.tc-negative { color: #dc2626; font-weight: 400; }

/* Procent executat */
.tc-pct {
    color: var(--text-secondary, #999);
    font-size: 0.7rem;
}

/* ============================================
   TAB STATISTICA — Boti care ruleaza
   ============================================ */

/* Badge MOD: TEST / LIVE */
.tc-mode-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.tc-mode-test {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.tc-mode-live {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Profit net — pozitiv/negativ (reutilizeaza .tc-positive/.tc-negative) */
/* deja definite mai sus */

/* Celule numerice aliniate dreapta */
.tc-stats-table td.tc-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Filename bot — font mono mic */
.tc-filename {
    font-family: monospace;
    font-size: 0.72rem;
    color: var(--text-secondary, #888);
}

/* Rand activ in tabelul stats — highlight subtil */
#tc-stats-tbody tr:hover {
    background: rgba(76, 175, 80, 0.04);
}

/* Rand selectat — botul activ curent */
#tc-stats-tbody tr.tc-stats-row-selected td {
    font-weight: 600;
    font-size: 0.80rem;
}

#tc-stats-tbody tr.tc-stats-row-selected td:first-child {
    border-left: 4px solid #4caf50;
}

/* Empty state specific stats */
#tc-stats-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-secondary, #999);
    font-style: italic;
    font-size: 0.85rem;
}

/* Randul TOTAL din tfoot */
#tc-stats-totals-row td {
    border-top: 2px solid var(--primary-color, #4caf50);
    background: rgba(76, 175, 80, 0.06);
    font-size: 0.78rem;
    padding: 0.4rem 0.6rem;
}

#tc-stats-totals-row .tc-totals-label {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #888);
    text-align: right;
    padding-right: 1.8rem;
}

#tc-stats-totals-row .tc-totals-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

/* Tema custom — tfoot */
.trading-container.custom-theme-active #tc-stats-totals-row td {
    background: color-mix(in srgb, var(--trading-bg) 92%, var(--trading-text) 8%) !important;
    color: var(--trading-text) !important;
    border-top-color: var(--trading-border) !important;
}

.trading-container.custom-theme-active #tc-stats-totals-row .tc-totals-label {
    color: var(--trading-text) !important;
    opacity: 0.6;
}

/* ============================================
   IZOLARE fata de body.dark-theme global
   FIX (23 Mai 2026): theme-selector-btn global NU trebuie sa modifice textul din Trading
   Cand body.dark-theme este activ, Trading isi pastreaza propriile culori de text
   Culorile text sunt gestionate EXCLUSIV de butoanele interne (luna/soare din chart)
   via --trading-text (setat de applyThemeToUI) sau de CSS-ul implicit
   ============================================ */

/* Cand Trading are tema custom activa, ignora cascada de la body.dark-theme */
body.dark-theme #trading-module .trading-container:not(.custom-theme-active) * {
    color: inherit;
}

/* ============================================================================
   BOT PUBLISH TOGGLE — Toggle publicare bot (vizibil doar admin) (24 Mai 2026)
   ============================================================================ */

.bot-publish-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0 0.5rem 0.5rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color, #334155);
    cursor: default;
}

.publish-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #94a3b8);
    letter-spacing: 0.02em;
    user-select: none;
    transition: color 0.2s ease;
}

/* Stare ON — label verde, consistent cu admin-toggle-slider ON (#2ea043) */
.publish-label.published {
    color: #2ea043;
    font-weight: 600;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: #475569;
    transition: background 0.2s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    left: 3px;
    top: 3px;
    transition: transform 0.2s ease;
}

/* Stare ON — publicat */
.toggle-slider.published {
    background: #16a34a;
}

.publish-checkbox:checked + .toggle-slider::before,
.toggle-slider.published::before {
    transform: translateX(18px);
}

/* Disabled in timp ce se proceseaza */
.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Hover */
.toggle-switch:hover .toggle-slider:not(.published) {
    background: #64748b;
}

.toggle-switch:hover .toggle-slider.published {
    background: #15803d;
}

/* ===== M4 (05 Iun 2026): Hint recomandare maxOrders bot Futures (popover la focus) ===== */
.config-row: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: 250px;
    max-width: 92vw;
    margin-top: 4px;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 0.66rem;       /* scris mai mic */
    line-height: 1.32;
    background: #fdf6d8;       /* galben pal OPAC — nu se vede nimic prin el */
    border: 1px solid #facc15;
    color: #3a3320;
    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.66rem;
    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 tip */
    width: fit-content;
    margin: 3px auto 0;        /* centrat orizontal fata de badge-ul 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 */
.order-row.cat-recovery {
    background: rgba(234, 88, 12, 0.07);
}
.order-row.cat-recovery:hover {
    background: rgba(234, 88, 12, 0.13);
}