/* Training Intelligence — Layout & Sidebar */
.app-container{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-width);height:100vh;position:fixed;left:0;top:0;background:var(--bg-surface);border-right:1px solid var(--border-color);display:flex;flex-direction:column;transition:width var(--transition-base);z-index:100;overflow:hidden}
.sidebar.collapsed{width:var(--sidebar-collapsed)}
.sidebar-header{height:var(--topbar-height);padding:0 var(--gap-md);display:flex;align-items:center;gap:var(--gap-sm);border-bottom:1px solid var(--border-subtle)}
.sidebar-logo{width:36px;height:36px;background:var(--bg-elevated);border:2px solid var(--accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--accent);flex-shrink:0;letter-spacing:-0.5px}
.sidebar-brand{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;transition:opacity var(--transition-fast)}
.sidebar.collapsed .sidebar-brand{opacity:0;width:0}
.sidebar-nav{flex:1;padding:var(--gap-md) var(--gap-sm);overflow-y:auto;overflow-x:hidden}
.nav-section{margin-bottom:var(--gap-md)}
.nav-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-tertiary);padding:var(--gap-sm) var(--gap-sm) 4px;white-space:nowrap}
.sidebar.collapsed .nav-section-title{opacity:0;height:0;padding:0;overflow:hidden}
.nav-item{display:flex;align-items:center;gap:var(--gap-sm);padding:10px var(--gap-sm);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);margin-bottom:2px;position:relative;text-decoration:none}
.nav-item:hover{background:var(--bg-surface-hover);color:var(--text-primary)}
.nav-item.active{background:var(--accent-muted);color:var(--accent)}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--accent);border-radius:0 3px 3px 0}
.nav-item.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}
.nav-item-badge{font-size:9px;padding:2px 6px;background:var(--accent-muted);border:1px solid var(--accent);border-radius:10px;color:var(--accent);margin-left:auto;font-weight:600}
.sidebar.collapsed .nav-item{justify-content:center;padding:10px}
.nav-item-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.nav-item-icon svg{width:20px;height:20px}
.nav-item-text{white-space:nowrap;transition:opacity var(--transition-fast);font-size:13px}
.sidebar.collapsed .nav-item-text{opacity:0;width:0;position:absolute;pointer-events:none}
.sidebar.collapsed .nav-item-badge{display:none}
.sidebar-footer{padding:var(--gap-sm);border-top:1px solid var(--border-subtle);overflow:hidden}
/* HIDDEN: Ko-fi button - cod pastrat, dezactivat din UI. Pentru reactivare: display:inline-flex */
.kofi-btn{display:none!important}
/* Ko-fi original styles (preserved for reactivation):
.kofi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 16px;margin-top:var(--gap-sm);background:#FF5E5B;border:none;border-radius:var(--radius-sm);color:white;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);text-decoration:none}
.kofi-btn:hover{background:#ff7673;transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,94,91,0.3)}
.sidebar.collapsed .kofi-btn .kofi-text{display:none}
.sidebar.collapsed .kofi-btn{width:40px;height:40px;padding:0;margin:8px auto 0}
.kofi-btn svg{width:18px;height:18px;flex-shrink:0}
*/
/* Buy Me a Coffee Button — Purple Branding + Static Glow */
.bmc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 16px;margin-top:var(--gap-sm);background:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 100%);border:none;border-radius:var(--radius-sm);color:#ffffff;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.25s ease;text-decoration:none;position:relative;overflow:hidden}
.bmc-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,transparent 50%);pointer-events:none}
.bmc-btn:hover{transform:none;background:linear-gradient(135deg,#a78bfa 0%,#7c3aed 100%)}
.sidebar.collapsed .bmc-btn .bmc-text{display:none}
.sidebar.collapsed .bmc-btn{width:100%;padding:12px;margin-top:var(--gap-sm)}
.bmc-btn svg{width:20px;height:20px;flex-shrink:0;filter:brightness(0) invert(1)}
.sidebar-toggle{width:100%;padding:12px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm);transition:all var(--transition-fast)}
.sidebar-toggle:hover{background:var(--bg-surface-hover);color:var(--text-primary)}
.sidebar-toggle svg{transition:transform var(--transition-base)}
.sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg)}
.sidebar.collapsed .toggle-text{display:none}
.main-content{flex:1;margin-left:var(--sidebar-width);transition:margin-left var(--transition-base);min-height:100vh}
.sidebar.collapsed ~ .main-content{margin-left:var(--sidebar-collapsed)}
.topbar{height:var(--topbar-height);background:var(--bg-surface);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gap-lg);position:sticky;top:0;z-index:50}
.topbar-left{display:flex;align-items:center;gap:var(--gap-md)}
.page-title{font-size:18px;font-weight:600}
.topbar-right{display:flex;align-items:center;gap:var(--gap-sm)}
.topbar-btn{width:40px;height:40px;border-radius:var(--radius-sm);background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}
.topbar-btn:hover{background:var(--bg-surface-hover);color:var(--text-primary)}
.sync-status{padding:8px 14px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:12px;display:flex;align-items:center;gap:6px}


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

.user-menu{position:relative}
.user-btn{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--accent-muted);border:1px solid var(--accent);color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}
.user-btn:hover{background:var(--accent);color:white}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:200px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-10px);transition:all var(--transition-fast);z-index:100}
.user-menu.open .user-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.user-dropdown-item{display:flex;align-items:center;gap:var(--gap-sm);padding:12px var(--gap-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);text-decoration:none}
.user-dropdown-item:first-child{border-radius:var(--radius-md) var(--radius-md) 0 0}
.user-dropdown-item:last-child{border-radius:0 0 var(--radius-md) var(--radius-md)}
.user-dropdown-item:hover{background:var(--bg-surface-hover);color:var(--text-primary)}
.user-dropdown-item svg{width:18px;height:18px;flex-shrink:0}
.user-dropdown-divider{height:1px;background:var(--border-color);margin:4px 0}
.page-content{padding:var(--gap-lg)}
.page-panel{display:none;animation:fadeIn var(--transition-base)}
.page-panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.section-header{margin-bottom:var(--gap-lg);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--gap-sm)}
.section-title{font-size:20px;font-weight:600}
.section-subtitle{color:var(--text-secondary);font-size:13px;margin-top:2px}