/**
 * FreebetRange - Professional Range Builder Styles
 * Main CSS file for the range builder interface
 */


        body { 
            background: #2a2a2a; 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        .sidebar { 
            background: #1e1e1e; 
            border-right: 1px solid #3a3a3a;
        }
        
        .sidebar-item {
            padding: 8px 16px;
            cursor: pointer;
            transition: all 0.2s;
            border-left: 3px solid transparent;
        }
        
        .sidebar-item:hover {
            background: #2d2d2d;
        }
        
        .sidebar-item.active {
            background: #3a3a3a;
            border-left-color: #f97316;
        }
        
        .range-grid {
            display: grid;
            grid-template-columns: repeat(13, 1fr);
            gap: 1px;
            background: #3a3a3a;
            padding: 1px;
        }
        
        .hand-cell {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #2a2a2a;
            border: 1px solid #404040;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
            color: #e5e5e5;
        }
        
        .hand-cell:hover {
            background: #3a3a3a;
            transform: scale(1.05);
        }
        
        .hand-cell.selected-call { background: #f97316; color: white; }
        .hand-cell.selected-4bet { background: #ef4444; color: white; }
        .hand-cell.selected-fold { background: #8b5cf6; color: white; }
        .hand-cell.selected-mixed { background: linear-gradient(45deg, #f97316 50%, #8b5cf6 50%); color: white; }
        
        .action-button {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            background: #3a3a3a;
            border: 1px solid #505050;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .action-button:hover {
            background: #454545;
            border-color: #606060;
        }
        
        .action-button.active {
            border-color: #f97316;
            box-shadow: 0 0 0 1px #f97316;
        }
        
        .color-indicator {
            width: 16px;
            height: 16px;
            border-radius: 50%;
        }
        
        .stats-bar {
            background: #1e1e1e;
            border-top: 1px solid #3a3a3a;
            padding: 12px 20px;
        }
        
        .toolbar {
            background: #1e1e1e;
            border-bottom: 1px solid #3a3a3a;
            padding: 12px 20px;
        }
        
        .toolbar-button {
            padding: 8px 12px;
            background: #3a3a3a;
            border: 1px solid #505050;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            color: #e5e5e5;
        }
        
        .toolbar-button:hover {
            background: #454545;
        }
        
        .range-slider {
            -webkit-appearance: none;
            height: 6px;
            border-radius: 3px;
            background: #3a3a3a;
            outline: none;
        }
        
        .range-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #f97316;
            cursor: pointer;
        }