/**
 * SVG Icons Styles - Clase simple și semantice
 * Înlocuire completă FontAwesome cu iconițe SVG personalizate
 */

/* ============================================
   SVG ICONS - CLASE SIMPLE ȘI SEMANTICE
   ============================================ */

/* Stiluri de bază pentru toate iconițele SVG */
.svg-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    transition: all var(--transition-fast, 0.2s ease);
}

/* =================================================
   MONITORING BOT ICONS - GRADIENT ROBOT AVATAR
   ================================================= */

.bot-icon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    border-radius: 14px !important;
    background-image: url("/images/robot-avatar.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden !important;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--bot-shadow, none);
}

.bot-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--bot-color, transparent);
    opacity: var(--bot-opacity, 0.85);
    mix-blend-mode: color;
    pointer-events: none;
    mask-image: url("/images/robot-avatar.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-image: url("/images/robot-avatar.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}

.bot-icon:hover {
    transform: scale(1.03);
}

/* ✅ CULORI PENTRU FIECARE BOT (bazat pe număr BOT, NU pe tip strategie) */
/* BOT 1 - Gradient Violet/Purple */
.bot-icon-bot1::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.15;
    z-index: -1;
}

.bot-icon-bot1 {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    filter: hue-rotate(0deg) saturate(1.2) brightness(1.1);
}

.bot-icon-bot1:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    transform: scale(1.05);
}

/* BOT 2 - Gradient Pink/Red */
.bot-icon-bot2::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    opacity: 0.15;
    z-index: -1;
}

.bot-icon-bot2 {
    box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
    filter: hue-rotate(300deg) saturate(1.3) brightness(1.1);
}

.bot-icon-bot2:hover {
    box-shadow: 0 6px 20px rgba(240, 147, 251, 0.5);
    transform: scale(1.05);
}

/* BOT 3 - Gradient Blue/Cyan */
.bot-icon-bot3::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    opacity: 0.15;
    z-index: -1;
}

.bot-icon-bot3 {
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
    filter: hue-rotate(180deg) saturate(1.4) brightness(1.1);
}

.bot-icon-bot3:hover {
    box-shadow: 0 6px 20px rgba(79, 172, 254, 0.5);
    transform: scale(1.05);
}

/* BOT 4 - Gradient Orange/Yellow */
.bot-icon-bot4::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    opacity: 0.15;
    z-index: -1;
}

.bot-icon-bot4 {
    box-shadow: 0 4px 12px rgba(250, 112, 154, 0.3);
    filter: hue-rotate(30deg) saturate(1.3) brightness(1.1);
}

.bot-icon-bot4:hover {
    box-shadow: 0 6px 20px rgba(250, 112, 154, 0.5);
    transform: scale(1.05);
}

/* ============================================
   NAVIGATION ICONS - SIDEBAR
   ============================================ */

/* Dashboard Monitor Icon - Monitor cu widget-uri organizate */
.nav-dashboard::before {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237665B3'%3E%3Cpath d='M21,2H3C1.9,2 1,2.9 1,4V16C1,17.1 1.9,18 3,18H9V19H7V21H17V19H15V18H21C22.1,18 23,17.1 23,16V4C23,2.9 22.1,2 21,2M21,16H3V4H21V16M5,6H11V10H5V6M13,6H19V8H13V6M5,12H8V14H5V12M10,12H13V14H10V12M15,12H19V14H15V12M13,10H16V11H13V10M18,10H19V11H18V10Z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Trading Exchange Icon */
.nav-trading::before {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237665B3'%3E%3Cpath d='M2,21V3H4V19H22V21H2M5,17V12H7V17H5M8,17V8H10V17H8M11,17V14H13V17H11M14,17V10H16V17H14M17,17V6H19V17H17M6,8L9,5L13,9L16,6L19,3L20.4,4.4L16,8.8L13,5.8L9,9.8L6,6.8L4.6,8.2L6,8Z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Portfolio Wallet Icon */
.nav-portfolio::before {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237665B3'%3E%3Cpath d='M5,7H21A2,2 0 0,1 23,9V18A2,2 0 0,1 21,20H5A2,2 0 0,1 3,18V9A2,2 0 0,1 5,7M5,9V18H21V15H19A2,2 0 0,1 17,13V11A2,2 0 0,1 19,9H21V9H5M19,11V13H21V11H19M7,2H17A2,2 0 0,1 19,4V5H5V4A2,2 0 0,1 7,2M7,4H17V4H7V4Z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Strategies Brain Icon */
.nav-strategies::before {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237665B3'%3E%3Cpath d='M20.5,11H19V7C19,5.89 18.1,5 17,5H13V3.5A2.5,2.5 0 0,0 10.5,1A2.5,2.5 0 0,0 8,3.5V5H4C2.89,5 2,5.89 2,7V10.8H3.5C5,10.8 6.2,12 6.2,13.5C6.2,15 5,16.2 3.5,16.2H2V20C2,21.11 2.89,22 4,22H7.8V20.5C7.8,19 9,17.8 10.5,17.8C12,17.8 13.2,19 13.2,20.5V22H17C18.11,22 19,21.11 19,20V16H20.5A2.5,2.5 0 0,0 23,13.5A2.5,2.5 0 0,0 20.5,11Z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Settings Gear Icon */
.nav-settings::before {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237665B3'%3E%3Cpath d='M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Color Palette Icon */
.nav-colors::before {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237665B3'%3E%3Cpath d='M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Memory Chip Icon - Modul Memorie Agent AI */
.nav-memory::before {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237665B3'%3E%3Cpath d='M7,2H17A2,2 0 0,1 19,4V20A2,2 0 0,1 17,22H7A2,2 0 0,1 5,20V4A2,2 0 0,1 7,2M7,4V8H17V4H7M7,10V14H17V10H7M7,16V20H17V16H7M9,5H11V7H9V5M9,11H11V13H9V11M9,17H11V19H9V17M3,6H5V8H3V6M3,11H5V13H3V11M3,16H5V18H3V16M19,6H21V8H19V6M19,11H21V13H19V11M19,16H21V18H19V16Z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Admin Panel Icon - Casa/Home SVG */
.nav-admin::before {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237665B3'%3E%3Cpath d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ============================================
   TEXT NAVIGATION STYLES
   ============================================ */

/* Stiluri generale pentru textul din navigație */
.nav-text {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    opacity: 1;
    pointer-events: auto;
}

/* Text în stare activă */
.nav-link.active .nav-text {
    color: #7665B3;
    font-weight: 600;
}

/* Text la hover */
.nav-link:hover .nav-text {
    color: #7665B3;
}

/* Afișare text în modul normal (nu collapsed) */
.sidebar:not(.collapsed) .nav-text {
    display: inline-block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
}

/* ============================================
   COLLAPSED SIDEBAR ICONS (Smaller Size)
   ============================================ */

/* Iconițe pentru sidebar în modul collapsed - dimensiune redusă și centrare */
.sidebar.collapsed .nav-dashboard::before,
.sidebar.collapsed .nav-trading::before,
.sidebar.collapsed .nav-portfolio::before,
.sidebar.collapsed .nav-strategies::before,
.sidebar.collapsed .nav-settings::before,
.sidebar.collapsed .nav-colors::before,
.sidebar.collapsed .nav-memory::before,
.sidebar.collapsed .nav-admin::before {
    width: 20px !important;
    height: 20px !important;
    background-position: center !important;
    margin: 0 auto !important;
    display: inline-block !important;
}

/* Centrarea completă pentru iconurile din sidebar collapsed */
.sidebar.collapsed .svg-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 20px !important;
    margin: 0 !important;
}

/* Centrarea completă pentru link-urile din sidebar collapsed - main.css are control */
.sidebar.collapsed .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 10px 0 !important;
    text-align: center !important;
}

/* .nav-btn folosește exclusiv regulile din main.css pentru consistență */

/* Asigură centrarea perfectă pentru toate iconitele ::before din sidebar collapsed */
.sidebar.collapsed .nav-dashboard::before,
.sidebar.collapsed .nav-trading::before,
.sidebar.collapsed .nav-portfolio::before,
.sidebar.collapsed .nav-strategies::before,
.sidebar.collapsed .nav-settings::before,
.sidebar.collapsed .nav-colors::before,
.sidebar.collapsed .nav-memory::before,
.sidebar.collapsed .nav-admin::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Fix special pentru iconițele din link-uri active în modul collapsed */
.sidebar.collapsed .nav-link.active .nav-dashboard::before,
.sidebar.collapsed .nav-link.active .nav-trading::before,
.sidebar.collapsed .nav-link.active .nav-portfolio::before,
.sidebar.collapsed .nav-link.active .nav-strategies::before,
.sidebar.collapsed .nav-link.active .nav-settings::before,
.sidebar.collapsed .nav-link.active .nav-colors::before,
.sidebar.collapsed .nav-link.active .nav-memory::before,
.sidebar.collapsed .nav-btn.active .nav-dashboard::before,
.sidebar.collapsed .nav-btn.active .nav-trading::before,
.sidebar.collapsed .nav-btn.active .nav-portfolio::before,
.sidebar.collapsed .nav-btn.active .nav-strategies::before,
.sidebar.collapsed .nav-btn.active .nav-settings::before,
.sidebar.collapsed .nav-btn.active .nav-colors::before,
.sidebar.collapsed .nav-btn.active .nav-memory::before,
.sidebar.collapsed .nav-btn.active .nav-admin::before {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    z-index: 10 !important;
}

/* ============================================
   STAREA ACTIVĂ ÎN MODUL COLLAPSED
   ============================================ */

/* Stilizări pentru link-ul activ în modul collapsed - DOAR .nav-link (legacy) */
/* .nav-btn folosește exclusiv main.css pentru consistență */
.sidebar.collapsed .nav-link.active {
    background: linear-gradient(90deg, rgba(118, 101, 179, 0.15) 0%, transparent 100%) !important;
    border-right: 3px solid #7665B3 !important;
    position: relative !important;
    border-radius: 12px 0 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
}

/* Stilizări pentru iconul din link-ul activ în modul collapsed */
.sidebar.collapsed .nav-link.active .svg-icon,
.sidebar.collapsed .nav-btn.active .svg-icon {
    color: #7665B3 !important;
    transform: scale(1.05) !important;
}

/* Stilizări pentru butoanele active în modul collapsed - EXCLUDEM .nav-btn */
.sidebar.collapsed .color-picker-btn.active,
.sidebar.collapsed button.active:not(.nav-btn),
.sidebar.collapsed .btn-sm.active,
.sidebar.collapsed .button-small.active,
.sidebar.collapsed .theme-selector-btn.active,
.sidebar.collapsed .btn.btn-secondary.active,
.sidebar.collapsed .toggle-password.active {
    background: linear-gradient(90deg, rgba(118, 101, 179, 0.15) 0%, transparent 100%) !important;
    border-right: 3px solid #7665B3 !important;
    position: relative !important;
    border-radius: 12px 0 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    color: #7665B3 !important;
}

/* Stilizări pentru iconițele din butoanele active în modul collapsed - EXCLUDEM .nav-btn */
.sidebar.collapsed .color-picker-btn.active .nav-icon,
.sidebar.collapsed button.active:not(.nav-btn) .nav-icon,
.sidebar.collapsed .btn-sm.active .nav-icon,
.sidebar.collapsed .button-small.active .nav-icon,
.sidebar.collapsed .theme-selector-btn.active .nav-icon,
.sidebar.collapsed .btn.btn-secondary.active .nav-icon,
.sidebar.collapsed .toggle-password.active .nav-icon,
.sidebar.collapsed .color-picker-btn.active svg,
.sidebar.collapsed button.active:not(.nav-btn) svg,
.sidebar.collapsed .btn-sm.active svg,
.sidebar.collapsed .button-small.active svg {
    color: #7665B3 !important;
    transform: scale(1.05) !important;
}

/* Hover effects pentru iconițele din sidebar collapsed */
.sidebar.collapsed .nav-link:hover .svg-icon,
.sidebar.collapsed .nav-btn:hover .svg-icon {
    animation: pulse 0.6s ease-in-out;
}

/* Hover specific pentru butoane în modul collapsed - DEZACTIVAT pentru .nav-btn (folosim main.css) */
.sidebar.collapsed .nav-link:hover {
    background: radial-gradient(circle at center, rgba(118, 101, 179, 0.1) 0%, transparent 70%) !important;
    background-color: transparent !important;
    transform: scale(1.02) !important;
    width: auto !important;
    height: 50px !important;
    border-radius: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    margin: 0.5rem 0.5rem !important;
    padding: 1rem 0 !important;
}

/* Ascundere text în modul collapsed - doar iconițele rămân vizibile */
.sidebar.collapsed .nav-link .nav-text,
.sidebar.collapsed .nav-text {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    visibility: hidden !important;
}

/* Ascundere text pentru toate butoanele în modul collapsed */
.sidebar.collapsed .color-picker-btn .nav-text,
.sidebar.collapsed button .nav-text,
.sidebar.collapsed button span,
.sidebar.collapsed .btn-sm span,
.sidebar.collapsed .button-small span,
.sidebar.collapsed .theme-selector-btn span,
.sidebar.collapsed .btn.btn-secondary span,
.sidebar.collapsed .toggle-password span {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    visibility: hidden !important;
}

/* Hover pentru butonul de culori în modul collapsed - SINCRONIZAT CU main.css */
.sidebar.collapsed .color-picker-btn:hover {
    background: linear-gradient(90deg, rgba(118, 101, 179, 0.18) 0%, rgba(118, 101, 179, 0.22) 50%, rgba(118, 101, 179, 0.18) 100%) !important;
    width: 80% !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    border-right: 3px solid var(--primary-color) !important;
    transform: none !important;
}

/* Hover pentru butoane generale în modul collapsed - EXCLUDEM .nav-btn și .color-picker-btn */
.sidebar.collapsed button:hover:not(.nav-btn):not(.color-picker-btn) {
    background: radial-gradient(circle at center, rgba(118, 101, 179, 0.1) 0%, transparent 70%) !important;
    background-color: transparent !important;
    transform: scale(1.02) !important;
    width: auto !important;
    height: 50px !important;
    border-radius: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    margin: 0.5rem 0.5rem !important;
    padding: 1rem 0 !important;
}

/* Hover pentru butoane mici în modul collapsed - lățime automată */
.sidebar.collapsed .btn-sm:hover,
.sidebar.collapsed .button-small:hover {
    background: radial-gradient(circle at center, rgba(118, 101, 179, 0.1) 0%, transparent 70%) !important;
    background-color: transparent !important;
    transform: scale(1.02) !important;
    width: auto !important;
    height: 40px !important;
    border-radius: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    margin: 0.25rem 0.375rem !important;
    padding: 0.75rem 0 !important;
}

/* Hover pentru butoane specifice din aplicație în modul collapsed - lățime automată */
.sidebar.collapsed .theme-selector-btn:hover,
.sidebar.collapsed .btn.btn-secondary:hover,
.sidebar.collapsed .toggle-password:hover {
    background: radial-gradient(circle at center, rgba(118, 101, 179, 0.1) 0%, transparent 70%) !important;
    background-color: transparent !important;
    transform: scale(1.02) !important;
    width: auto !important;
    height: 45px !important;
    border-radius: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    margin: 0.375rem 0.4375rem !important;
    padding: 0.875rem 0 !important;
}

/* ============================================
   CENTRAREA BUTOANELOR ÎN MODUL COLLAPSED
   ============================================ */

/* Centrarea butonului de culori în modul collapsed - SINCRONIZAT CU main.css */
.sidebar.collapsed .color-picker-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80% !important;
    padding: 1rem 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
    position: relative !important;
    border-radius: 8px !important;
    border-right: 3px solid transparent;
}

/* Centrarea butoanelor generale în modul collapsed */
.sidebar.collapsed button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0.5rem 0.5rem !important;
    padding: 1rem 0 !important;
    text-align: center !important;
    position: relative !important;
    border-radius: 12px !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
}

/* Centrarea butoanelor mici în modul collapsed */
.sidebar.collapsed .btn-sm,
.sidebar.collapsed .button-small {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0.25rem 0.375rem !important;
    padding: 0.75rem 0 !important;
    text-align: center !important;
    position: relative !important;
    border-radius: 8px !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
}

/* Centrarea butoanelor specifice în modul collapsed */
.sidebar.collapsed .theme-selector-btn,
.sidebar.collapsed .btn.btn-secondary,
.sidebar.collapsed .toggle-password {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0.375rem 0.4375rem !important;
    padding: 0.875rem 0 !important;
    text-align: center !important;
    position: relative !important;
    border-radius: 10px !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
}

/* Centrarea iconițelor din butoane în modul collapsed */
.sidebar.collapsed .color-picker-btn .nav-icon,
.sidebar.collapsed button .nav-icon,
.sidebar.collapsed .btn-sm .nav-icon,
.sidebar.collapsed .button-small .nav-icon,
.sidebar.collapsed .theme-selector-btn .nav-icon,
.sidebar.collapsed .btn.btn-secondary .nav-icon,
.sidebar.collapsed .toggle-password .nav-icon,
.sidebar.collapsed button svg,
.sidebar.collapsed .btn-sm svg,
.sidebar.collapsed .button-small svg {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    z-index: 10 !important;
}

/* Reguli suplimentare pentru a anula orice suprascriu responsive */
@media (min-width: 769px) {
    .sidebar.collapsed .nav-text,
    .sidebar.collapsed .nav-link .nav-text {
        display: none !important;
        opacity: 0 !important;
        transform: none !important;
        font-size: 0 !important;
        width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
    }
}

/* Stiluri pentru iconițele din header */
.header h1 svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* ============================================
   SIDEBAR TOGGLE ICON
   ============================================ */

/* Stiluri pentru iconița de toggle sidebar */
.sidebar-toggle-icon {
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    transition: transform var(--transition-fast, 0.2s ease);
}

/* Toggle Expanded State (Chevron Left) */
.sidebar-toggle-icon::before {
    content: "" !important;
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath stroke-width='2' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Toggle Collapsed State (Hamburger Menu) */
.sidebar.collapsed .sidebar-toggle-icon::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237665B3'%3E%3Cpath stroke-width='2' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/%3E%3C/svg%3E") !important;
}

/* ============================================
   HOVER EFFECTS ȘI INTERACTIVITATE
   ============================================ */

/* Hover effects pentru iconițele din navigare */
.nav-link:hover .svg-icon::before,
.color-picker-btn:hover .svg-icon::before {
    transform: scale(1.05);
}

/* Hover pentru sidebar toggle */
.sidebar-toggle:hover .sidebar-toggle-icon::before {
    transform: scale(1.1);
}

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

/* Mobile și tablete */
@media (max-width: 768px) {
    .svg-icon {
        width: 18px !important;
        height: 18px !important;
    }
    
    .nav-dashboard::before,
    .nav-trading::before,
    .nav-portfolio::before,
    .nav-strategies::before,
    .nav-settings::before,
    .nav-colors::before {
        width: 18px !important;
        height: 18px !important;
    }
    
    .sidebar-toggle-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    .sidebar-toggle-icon::before {
        width: 28px !important;
        height: 28px !important;
    }
}

/* Rotație pentru toggle când sidebar-ul este închis */
.sidebar.collapsed .sidebar-toggle-icon {
    transform: rotate(180deg);
}

/* Stiluri pentru iconițele din dropdown tema */
.theme-current-icon,
.theme-option-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.theme-dropdown-arrow {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast, 0.2s ease);
}

/* Rotație pentru săgeată când dropdown-ul este deschis */
.theme-dropdown.open .theme-dropdown-arrow {
    transform: rotate(180deg);
}

/* Hover effects pentru iconițele interactive */
.nav-link:hover .nav-icon svg,
.color-picker-btn:hover .nav-icon svg,
button:hover svg {
    transform: scale(1.05);
}

/* Stiluri specifice pentru iconițele din Color Picker modal */
.color-picker-close svg {
    width: 16px;
    height: 16px;
}

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

/* Stiluri pentru iconițele din butoane */
button svg {
    vertical-align: middle;
}

/* Stiluri responsive pentru iconițe */
@media (max-width: 768px) {
    .nav-icon svg,
    svg.nav-icon {
        width: 18px;
        height: 18px;
    }
    
    .sidebar-toggle-icon {
        width: 14px;
        height: 14px;
    }
}

/* Animații pentru iconițele care se schimbă (ex: tema) */
.theme-current-icon,
.theme-dropdown-arrow {
    transition: all var(--transition-medium, 0.3s ease);
}

/* Asigură că iconițele SVG nu se deformează */
svg {
    display: inline-block;
    vertical-align: middle;
}

/* Stiluri pentru iconițele din formularele de setări */
.settings-form svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

/* Fix pentru alinierea iconițelor în butoanele mici */
.btn-sm svg,
.button-small svg {
    width: 14px;
    height: 14px;
}